zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden probleme mit float

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.03.2009, 19:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.03.2009
Beiträge: 12
arthurspringer17 befindet sich auf einem aufstrebenden Ast
Ausrufezeichen probleme mit float

hi liebes Forum,

ich habe noch nicht sehr viel Erfahrung mit CSS. Ich bastle gerade an einer Seite und versuche das Design mit CSS zu realisieren.
Ich versuche eine Leiste einzubauen die Links einen festen Bereich hat, rechts einen festen Bereich und der Bereich in der Mitte sollte flexibel lang sein. Ungefähr sollte es so aussehen:


_________ _______________ ______________________
|Bereich 1 Bereich2 Bereich 3 |
---------- ------------------ -------------------------


Bereich 1 habe ich float: left gesetzt.
Bereich 3 habe ich float: right gesetzt.
den Bereich in der Mitte habe ich kein float gesetzt.

In Firefox zeigt er soweit alles an wie es soll.
In IE 6 macht er allerdings einen kleinen Abstand von etwa 5 Pixel zwischen den einzellnen Bereichen.

Ich habe schon verschiedene Sachen versucht aber ich finde keine Lösung. Ich hoffe das ihr mir helfen könnt:
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.03.2009, 19:30
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi,

gib uns doch mal einen Link zum Problem, damit man sich das mal anschauen kann.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.03.2009, 21:00
Neuer Benutzer
neuer user
 
Registriert seit: 06.03.2009
Beiträge: 21
diaz1983 befindet sich auf einem aufstrebenden Ast
Standard

Probier mal als erstes

Code:
*{
  padding: 0px;
  margin: 0px;
}
Dann musst du die dir zwar für alle Elemente ein Padding und Margin einrichten, die eines brächten aber somit hast du alle Browser-Eigenen Voreinstellungen mal überschrieben und auf 0 gesetzt.
Mit Zitat antworten
  #4 (permalink)  
Alt 07.03.2009, 22:24
Neuer Benutzer
neuer user
 
Registriert seit: 05.03.2009
Beiträge: 2
Robert Ban befindet sich auf einem aufstrebenden Ast
Standard Ist vielleicht dieser IE Bug...

IE6 Three Pixel Gap
Mit Zitat antworten
  #5 (permalink)  
Alt 08.03.2009, 13:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.03.2009
Beiträge: 12
arthurspringer17 befindet sich auf einem aufstrebenden Ast
Unglücklich

margin und padding bringt da überhaupt nichts. habe versucht allem eine margin und padding von 0 zu geben sieht aber genauso aus.


So sieht es bei mir im IE 6 aus.

Der Abstand links und rechts ist zu viel.


Und hier ist noch der CSS- Quelltext:

div#headTopLeft{
background: url(pics/navi_top_left.jpg) no-repeat scroll center top;
height: 131px;
width: 9px;
float: left;
}
div#headTopRight{
background: url(pics/navi_top_right.jpg) no-repeat scroll center top;
width: 9px;
height: 131px;
float: right;
}
div#headTopMiddle{
background: url(pics/navi_top_middle.jpg) repeat-x scroll center top;
height: 131px;
}




Und zu letzt noch der HTML- Teil:

<div id="head">
<div id="headTopLeft"></div>
<div id="headTopRight"></div>
<div id="headTopMiddle"></div>
</div>



ich hoffe das hilft euch. ich bin schon am verzweifeln
Mit Zitat antworten
  #6 (permalink)  
Alt 08.03.2009, 13:27
Neuer Benutzer
neuer user
 
Registriert seit: 06.03.2009
Beiträge: 21
diaz1983 befindet sich auf einem aufstrebenden Ast
Standard

Probier es mal so:

Wenn eh mit Bildern arbeitest setze die div's auf feste breiten

Code:
<html>
<head>
<style>

*{
margin: 0px;
padding: 0px;
}
#head{
width: 918px;
}
#headTopLeft{
background-color: orange;
height: 131px;
width: 9px;
float: left;
}
#headTopMiddle{
background-color: blue;
height: 131px;
width: 900px;
float: left;
}
#headTopRight{
background-color: red;
width: 9px;
height: 131px;
float: right;

</style>
</head>
<body>

<div id="head">
<div id="headTopLeft">&nbsp;</div>
<div id="headTopRight">&nbsp;</div>
<div id="headTopMiddle">&nbsp;</div>
</div>


</body>
</html>
HIER EIN SCREENSHOT: http://s4b.directupload.net/file/d/1...pw3evt_jpg.htm

Geändert von diaz1983 (08.03.2009 um 13:30 Uhr) Grund: screenshot-link vergessen
Mit Zitat antworten
  #7 (permalink)  
Alt 08.03.2009, 16:39
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi,

aha, es geht also um runde Ecken.

Da würde ich gar nicht floaten.
Die Grafiken werden zu HG-Grafiken und können evtl. auch Elementen im Header zugewiesen werden.

Schau doch mal hier oder hier.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #8 (permalink)  
Alt 08.03.2009, 17:44
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
 
Registriert seit: 16.07.2007
Ort: Kapfenberg - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.788
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard

HTML-Code:
#header-topleft{
	background: url(pics/navi_top_left.jpg) no-repeat scroll center top;
	height: 131px;
	width: 9px;
	float: left;
}

#header-topright{
	background: url(pics/navi_top_right.jpg) no-repeat scroll center top;
	width: 9px;
	height: 131px;
	float: right;
}
#header{
	background: url(pics/navi_top_middle.jpg) repeat-x scroll center top;
	height: 131px;
}
Da im html bereits ein Element header vorkommt, habe ich mir erlaubt, das mal ein wenig umzubenennen. Wie Du siehst, habe ich den kompletten div ...middle verworfen und den Hintergrund dem umhegebenden #header gegeben. Dadurch liegr auch hinter den rechten und linken Abschlüssen das Bild von #header. Damit kannst Du Dir das Hacking vom IE6 für diesen Teil sparen. Die Abschlussecken mußt DU nun überarbeiten - also die Rundungen in der Site Backrgoundfarbe machen, da hier ja auch der HG von #header durchscheinen wird.
HTML-Code:
<div id="head">
      	 <div id="headTopLeft"></div>
           <div id="headTopRight"></div>
</div>
Mit Zitat antworten
  #9 (permalink)  
Alt 08.03.2009, 18:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.03.2009
Beiträge: 12
arthurspringer17 befindet sich auf einem aufstrebenden Ast
Ausrufezeichen

Zitat:
Zitat von paracelsus Beitrag anzeigen
HTML-Code:
#header-topleft{
	background: url(pics/navi_top_left.jpg) no-repeat scroll center top;
	height: 131px;
	width: 9px;
	float: left;
}

#header-topright{
	background: url(pics/navi_top_right.jpg) no-repeat scroll center top;
	width: 9px;
	height: 131px;
	float: right;
}
#header{
	background: url(pics/navi_top_middle.jpg) repeat-x scroll center top;
	height: 131px;
}
Da im html bereits ein Element header vorkommt, habe ich mir erlaubt, das mal ein wenig umzubenennen. Wie Du siehst, habe ich den kompletten div ...middle verworfen und den Hintergrund dem umhegebenden #header gegeben. Dadurch liegr auch hinter den rechten und linken Abschlüssen das Bild von #header. Damit kannst Du Dir das Hacking vom IE6 für diesen Teil sparen. Die Abschlussecken mußt DU nun überarbeiten - also die Rundungen in der Site Backrgoundfarbe machen, da hier ja auch der HG von #header durchscheinen wird.
HTML-Code:
<div id="head">
      	 <div id="headTopLeft"></div>
           <div id="headTopRight"></div>
</div>
Habe es jetzt so gemacht. es funktioniert auch alles so weit wie es soll. Das Problem dabei ist allerdings das ich sobald ich eine Liste (Navigation) reinlege zeigt er kein hintergrund mehr an. Wenn ich die Liste ausommentiere funktioniert alles.


Oder sollte ich vieleicht von neu alles machen und anders machen.
Das Design soll wenn es fertig sein etwa so aussehen.

Allerdings wird bei der Seite sehr viel Wert drauf gelegt, dass die Seite für alle Auflösungen flexibel seien soll, da die Zielgruppe breit vertreten ist.
Daher hatte ich mir gedacht einfach die ganze Breite auf 90% zu setzen damit es bei allen Auflösungen gleich breit ist.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.03.2009, 23:30
Benutzerbild von paracelsus
be simple
XHTMLforum-Kenner
 
Registriert seit: 16.07.2007
Ort: Kapfenberg - Austria, einige meinen am "Anus Mundi"
Beiträge: 4.788
paracelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nettparacelsus ist einfach richtig nett
Standard

Das kann ich jetzt nicht nachvollziehen.
Hier wäre es angebracht an ein Live Beispiel zu denken ...
Zumindest wäre Code - den Du verwendest - vorteilhaft, um Dir zu helfen.

Besten Gruß
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Float-Problem? mischaef CSS 33 20.10.2010 17:20
Float - Probleme wolf1985 CSS 5 19.08.2008 09:14
Mozilla zeigt DIV zu oft an cracki CSS 6 09.03.2008 16:22
IE zeigt gewisse Texte nicht an zitronenbaum CSS 2 16.01.2008 16:25
Testcase: float, overflow: hidden; und alte Geckos... heiko_rs CSS 0 19.11.2007 22:26


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:34 Uhr.