• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Inhalt rutscht aus Box...

Status
Für weitere Antworten geschlossen.

lukiB

Mitglied
Hallo,
Ich habe eine <div> Box erstellt mit 900x30px.
In diese Box habe ich einen Background geladen und 4 Verweisbuttons.

Hier mal der Code:
Code:
<div style="background-color:none;
            width:900px;
            height:30px;
            border:2px black solid;
            margin-bottom:10px;

 ">
 <div class="rosa">
 <div id="navi">
  <ul>
   <li><a href="lukibstart.htm">Home</a></li>
   <li><a href="compu.htm">Computer</a></li>
   <li><a href="uemi.htm">Über Mich</a></li>
   <li><a href="indeRx.htm">Gästebuch</a></li>
  </ul>
  </div>
  </div>
 </div>
Der CSS Code vom Hintergrund:
Code:
.rosa{
  background:url('grüün.bmp');
           width:900px;
           height:30px;
}
Und der Design Code der Links:
Code:
#navi {
   text-align:left;
   margin-top:2px;
   margin-bottom:10px;
   margin-left:20px;
   margin-right:15px;
 }
 #navi ul {
   list-style:none;
 }
 #navi li {
   float:left;
   margin-left:50px;
   width:85px;
   background-image:url('buttonee.jpg');
   background-color:#222222;
   border-top:1px black solid;
   border-left:1px black solid;
   border-bottom:1px black solid;
   border-right:1px black solid;
   margin-top:0px;
   margin-bottom:0px;
   padding-top:3px;
   padding-bottom:3px;
   padding-left:3px;
   padding-right:3px;
   font-family:Comic Sans MS  , sans-serif;
   font-size:13px;
   font-weight:bold;

 }
 #navi a:link { color:white; text-decoration:none; }
 #navi a:visited { color:white; text-decoration:none; }
 #navi a:focus { color:green; text-decoration:overline; }
 #navi a:hover { color:red; text-decoration:none; }
 #navi a:active { color:orange; text-decoration:underline; }
Nun Rutscht der Hintergrund und die Links im FireFox immer zur hälfte runter (raus). Aber im IE 7 funktioniert alles einwandfrei...

bitte um Hilfe

Mfg lukiB
 
so müßte es gehen:
Code:
.rosa{
  background:url('grüün.bmp');
           width:900px;
           min-height:30px;

* html .rosa{
           height:30px; /*für IE5-6/*

*+html .rosa{
           height:30px; /*für IE7/*
}
Alle Internet Explorer kennen min-height nicht aber behandeln height wie min-height.
Du könntest height für moderne Browser auch einfach weglassen.
Dann sollten die IE's aber ein height : 1%; bekommen.
 
Zuletzt bearbeitet:
Hi,

so müßte es gehen:
Code:
.rosa{
  background:url('grüün.bmp');
           width:900px;
           min-height:30px;

* html .rosa{
           height:30px; /*für IE5-6/*

*+html .rosa{
           height:30px; /*für IE7/*
}
Alle Internet Explorer kennen min-height nicht aber behandeln height wie min-height.
Du könntest height für moderne Browser auch einfach weglassen.
Dann sollten die IE's aber ein height : 1%; bekommen.

*räusper*, äh...., könnte es sein das die Fehlerursache darin liegt das nicht gecleart wurde??
Der IE schließt die floats ja fälschlicherweise ohne clear ein.

Float:left; sehe ich in der CSS, aber nirgendwo ein clear .

koslowski
 
Oh..!
Ja also dann:
Code:
  <ul>
   <li><a href="lukibstart.htm">Home</a></li>
   <li><a href="compu.htm">Computer</a></li>
   <li><a href="uemi.htm">Über Mich</a></li>
   <li><a href="indeRx.htm">Gästebuch</a></li>
  </ul>
  <br style="clear : both;" />
  </div>
Das mit den Höhenangaben sehe ich aber immer noch so.
Entweder für alle nicht-IE's weglassen oder so wie ich es beschrieben habe.
Sonst passt das ganze nur mit einer Schriftgröße.
 
Hallo,
Danke schon mal für die Antworten.

Also ich habe das Clear eingebaut, so wie es mir neuroleptika beschrieben hat. Es ändert sich aber leider nichts nichts :(.

@koslowski:
Du hast gesagt ich muss das in die CSS einbauen.
Float:left; sehe ich in der CSS, aber nirgendwo ein clear .
Wie und wo baue ich das "clear" in der CSS Datei ein!? ich kenne den Befehl garnicht...



Wenn ich das einbaue, stimmt garnichts mer...
.rosa{
background:url('grüün.bmp');
width:900px;
min-height:30px;

* html .rosa{
height:30px; /*für IE5-6/*

*+html .rosa{
height:30px; /*für IE7/*
}
Also ohne die Verweise in der Box, bleibt das Hintergrund bild ganz normal drinne... ich verstehe das nicht weil ich kann in der CSS nirgends einen befehl finden der das Bild Rausschieben könnte. Aber wenn ich bgcolor:xxxx abgebe bleiben die verweise ganz normal in der box....

so soll es aus sehen:
linirut.jpg

und so sieht es aus (im FF jetzt ohne hintergrund... der hintergrund ist dann genau hinter den link buttons, also der rutscht mit aus der Box) :
lirut.jpg


Mfg lukiB
 

Anhänge

  • linirut.jpg
    linirut.jpg
    16,5 KB · Aufrufe: 7
  • lirut.jpg
    lirut.jpg
    11,9 KB · Aufrufe: 4
Zuletzt bearbeitet:
Hi,

da es sich bei dir um eine horizontale, gefloatete Navi handelt lies dir doch mal das hier durch.
Du mußt weiter nach unten scrollen, dort steht was du brauchst
Heikos Artikel zu Navis ist wirklich erstklassig.:wink:

koslowski
 
Hi,
Heikos Artikel zu Navis ist wirklich erstklassig.:wink:
Da wird dir sicher keiner widersprechen wollen.

In diesem Beispiel stören aber auch die Höhenangaben und die voreingestellten margins von ul und li.

Ich hab es mal verbessert und hochgeladen.
Die Hintergrundbilder hab ich gegen Lineale ausgetauscht. Mir hilft das manchmal.
Für das clear habe ich ein br verwendet:
menu

Die min-height Werte aus meinem ersten Beitrag waren natürlich auch zu groß. Ich hab sie jetzt ganz weggelassen.
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben