[CSS] Fehlerhafte anzeige

S

Sihtam

Well-known member
ID: 2675
L
9 Mai 2007
55
0
Hallo,
ich hab mal wieder ein kleines CSS Problem!

Auf der Test Seite: https://www.salt-n-peppa.net/index1.htm
wird die Navigation nicht mit immer zwei Buttons neben einander und drei untereinander angezeigt. Wodurch kommt das genau?

HTML: 
<div id="navi"><img src="images/navi_ol.gif" width="180" height="150" alt="Navigation 1" />
<img src="images/navi_or.gif" width="180" height="150" alt="Navigation 2" /><BR />
<img src="images/navi_ml.gif" width="180" height="150" alt="Navigation 3" />
<img src="images/navi_mr.gif" width="180" height="150" alt="Navigation 4" /><BR />
<img src="images/navi_ul.gif" width="180" height="150" alt="Navigation 5" />
<img src="images/navi_ur.gif" width="180" height="150" alt="Navigation 6" /></div>

das lässt doch eigentlich zwei Buttons immer neben einander ohne Lücke anzeigen und danach durch das <BR> die nächsten beiden in der nächsten Zeile.

Die CSS Datei hinter die richtige Anzeige auch nicht meine ich:
HTML: 
#navi {
background-color: #FF0000;
position:absolute;
left: 0px;
width:360px; height:450px;
padding: 0px;
}

Hat jemand eine Lösung für mich?

Gruss
M
 
ich würde dir mal raten mit der Breite etwas zu spielen... manchmal ist es so, dass irgendetwas doch noch Platz verbraucht.

also einfach mal testweise auf 365px setzen.... und setz mal bei den bildern "border='0'" ;)
 
QuArK007 schrieb:
ich würde dir mal raten mit der Breite etwas zu spielen... manchmal ist es so, dass irgendetwas doch noch Platz verbraucht.

also einfach mal testweise auf 365px setzen.... und setz mal bei den bildern "border='0'" ;)
Zum Vergrößern anklicken....

Also wenn ich das ganze ohne Zeilenumbrüche hintereinander schreibe enstehen keine lücken und wenn ich es auf 365px breite mache, stehen die buttons nebeneinander aber immer wieder mit lücke!

also im IE6 wird die Navigation richtig angezeigt, nur der Rahmen nicht!
 
willst du die Bilder später dann noch durch richtige Navigations-Bilder ersetzen?? falls NEIN würde ich dir raten das ganze mit UL und LI zu lösen.... dann hast du auch kein Problem mir Lücken, weil Float das ohne Lücken drunter setzt.

Die Lücken entstehen durch deinen Zeilenumbruch. Du könntest noch versuchen zu tricksen und einfach immer 2 Bilder in ein weiteres Div zu packen, dann dürften die Lücken auch weg sein.
 
QuArK007 schrieb:
willst du die Bilder später dann noch durch richtige Navigations-Bilder ersetzen?? falls NEIN würde ich dir raten das ganze mit UL und LI zu lösen.... dann hast du auch kein Problem mir Lücken, weil Float das ohne Lücken drunter setzt.
Zum Vergrößern anklicken....
Also die Bilder werden ausgetauscht, bleiben aber in der größe etc gleich!

Ich habe das ganze nun mal so gemacht:
HTML:
Code: 
<div id="navi"><ul id="navlist">
<li><img src="images/navi_ol.gif" width="180" height="150" alt="Navigation 1" border="0" /><img src="images/navi_or.gif" width="180" height="150" alt="Navigation 2" border="0" /></li>
<li><img src="images/navi_ml.gif" width="180" height="150" alt="Navigation 3" border="0" /><img src="images/navi_mr.gif" width="180" height="150" alt="Navigation 4" border="0" /></li>
<li><img src="images/navi_ul.gif" width="180" height="150" alt="Navigation 5" border="0" /><img src="images/navi_ur.gif" width="180" height="150" alt="Navigation 6" border="0" /></li>
</ul></div>
CSS:
Code: 
#navi {
background-color: #FF0000;
position:absolute;
left: 0px;
width:360px; height:450px;
padding: 0px;
}

#navlist li
{
	list-style-type: none;
	display: block;
}

wirklich was gebracht hat das aber nix! Ist nen denkfehler wie ich das geschrieben habe oder?
 
baserider schrieb:
also so wird das nix...

#navlist li{float: left;}
#navlist li img{display: block;}
Zum Vergrößern anklicken....

ups!
Okay! Einsichtig! Muss noch ne menge lernen, aber dafür mache ich es ja!

Code: 
#navlist
{
	margin: 0;
	padding: 0;
}
Hab ich nun auch noch gesetzt, somit ensteht nun auch kein Rand rund herum!

Nur merkwürdig das der letzte Button unten rechts trotzdem noch in die nächste Zeile rutscht!

Siehe auf der Test Seite: https://www.salt-n-peppa.net/index1.htm
 
an denen kann es eigentlich nicht liegen, da diese im MF wie auch im Opera richtig angezeigt werden und der letzte Button von der Navigation trotzdem nicht!

Die Ecken sind nun auch an der richtigen stelle, es lag daran das der IE in die Div Box der Ecken immer noch ein Leerzeichen mit eingebaut hat. (die eck grafiken sind als Hintergrund eingebaut)
 
im IE passt es jetzt mit den Ecken, aber im FF sind die Ecken jetzt in die andere Richtung verschoben, oder irgendwas anderes passt nicht ;)


sorry, wenn ich darauf rumreite, aber das lenkt mich von der Fehlersuche ab ^^

Edit: außerdem ist deine Seite nicht valide ;)

Edit2: außerdem benutzt du ja <li> und Listen werden standardmäßig untereinander gelistet, du solltest für alle <li> einfach display:inline; machen, dann wird es auch so angezeigt, wie du auch die Namen vergeben hast ;)
aktuell ist es nämlich so:
OL - ML
OR - MR
UL -
UR -
 
Zuletzt bearbeitet:
kbot schrieb:
Edit2: außerdem benutzt du ja <li> und Listen werden standardmäßig untereinander gelistet, du solltest für alle <li> einfach display:inline; machen, dann wird es auch so angezeigt, wie du auch die Namen vergeben hast ;)
aktuell ist es nämlich so:
OL - ML
OR - MR
UL -
UR -
Zum Vergrößern anklicken....

hmm.. dafür hat er ja auch das float: left mit drin, display: inline würde ja den gleichen effekt haben, aber nen versuch is es wert :)
 
kbot schrieb:
sorry, wenn ich darauf rumreite, aber das lenkt mich von der Fehlersuche ab ^^
Zum Vergrößern anklicken....
passt nun in IE6, FF, Op durch
background-position: bottom;

kbot schrieb:
Edit: außerdem ist deine Seite nicht valide ;)
Zum Vergrößern anklicken....
Ist nun auch! Ich wundere mich das der Iframe nicht untersützt wird bei XHTML.... naja der sollte sowieso raus!

kbot schrieb:
Edit2: außerdem benutzt du ja <li> und Listen werden standardmäßig untereinander gelistet, du solltest für alle <li> einfach display:inline; machen, dann wird es auch so angezeigt, wie du auch die Namen vergeben hast ;)
aktuell ist es nämlich so:
OL - ML
OR - MR
UL -
UR -
Zum Vergrößern anklicken....

Hab nun immer zwei Buttons in einer <li> drin.
Das ganze mit display: inline;
Code: 
#navlist li
{
	list-style-type: none;
	display:inline;
}

So entsteht leider immer noch zwischen jeder Button Zeile eine lücke!
Wenn ich jeden Button in ein <li> packe listet der wieder alles untereinander...

Müsste ich nicht einfach mal den Zeilenabstand auf Null setzten können und damit das Problem beheben!?!? - ne geht nicht!
 
ich glaub es müsste helfen, wenn du bei den <li>s noch ein padding:0px; reinsetzt

Edit: und margin:0px; sicherheitshalber auch mit rein ;)
 
kbot schrieb:
ich glaub es müsste helfen, wenn du bei den <li>s noch ein padding:0px; reinsetzt

Edit: und margin:0px; sicherheitshalber auch mit rein ;)
Zum Vergrößern anklicken....

also ich habe folgendes gemacht:
Code: 
#navlist li
{
	list-style-type: none;
	display:inline;
	padding:0px;
	margin:0px;
}
quasi das was du sagtest... hilft leider wenig!
 
hmm, hartnäckige Sache ...

ok, ich hab zwar Null Ahnung, was es sein könnte, drum kann ich nur eine eventuelle Umgehung bieten...

also du vergibst den ersten beiden <li> ne extra ID und machst dort das display:inline; raus und vertauschst OR und ML (im HTML)

und wenn du dann über dem dritten <li> immer noch nen Abstand haben solltest, dann setz einfach 6 einzelne Divs ins #navi :-?

Edit: hast du eigentlich schon probiert, alle 6 in ein <li> zu packen, anstatt je 2 in ein <li>?
falls nicht, dann probier das als erstes
 
Zuletzt bearbeitet:
alle in ein <li> hab ich gerade nochmal ausprobiert, da zeigt der es im IE6 richtig an aber in den anderen Browsern nicht!

ich glaub ich werd einfach 3 div boxen unter einander machen wo ich die Navigationsbuttons dann rein setzte!
 
so habs nun mit drei div boxen gemacht!
klappt :)

danke für euere hilfe, war nett wieder nen wenig rum zu experimentieren...
 
na das ist eigentlich noch recht überschaubar und wirklich nen fehler oder was kompliziertes was das layout sprengen würde gibts nicht!
nur div boxen die meistens absolute positioniert sind!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben