Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Boxen überlappen sich beim verkleinern des Fensters“

julia2631

kreatives-köpfchen

hallo,

ich versuche Grade CSS & Html zu lernen. Ich habe auf der linken Seite eine Navi box und in der mitte der Side habe ich Text und Bilder... die Navi-Box habe ich mit float positioniert , so das ich eben, in der mitte meinen Hauptbereich haben kann .. Jedoch wenn ich mir die Seite im web ansehe und dann die Seite Händisch verkleinere, schiebt sich der Mittlere Teil über die Navi Box bis zum rand... also der Abstand zwischen den zwei Boxen bleibt nicht?
Hab aber nochmals mit margin, bei der Haupt-Box den Abstand zur andere definiet?
Vielleicht kann mir jemand sagen wa ich falsch mache?;)

p.s. Auf SelfHtml hab ich schon nachgesehen... aber dort erkenne ich nicht meinen Fehler?:schmoll:

Danke schon mal
 

AW: Boxen überlappen sich beim verkleinern des Fensters

hallo,

so ist es ein rumraten! poste mal den code oder besser einen link!

gruß sfischer
 

julia2631

kreatives-köpfchen

AW: Boxen überlappen sich beim verkleinern des Fensters

das ist mein HTML code

HTML:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Übungen</title>
<link href="uebungs_seite.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div> <h1>  &Uuml;bungsseite </h1> </div>

<div id="links" > <div class="navi"> <a href="http://www.google.at" target="_blank"> home</a> <br />
<a href="http://www.google.at" target="_blank"> Kontakt </a><br />
<a href="http://www.google.at" target="_blank">Service </a> <br />
<a href="http://www.google.at" target="_blank"> Unterhaltung </a> <br/>
</div> </div>

<div id="textbox"> Sandiam velit nim quamet wismoluptat <a href="http://www.grafenberg.cc" target="_blank"> wisim </a> iureetumsan ulluptat.
Amcore eui tie modolortio dolorem ex eu faccumsandre del dolorper ing eugue vel del eugue tionsed diam zzrilis non eugait venim dolore tat, summy nismod dolorperaese ea alit, vulla acilissequis dolor sequis ercipit atio conullu ptatet ute tatue mod molore commolobore exeriustrud elisi tat landiam, vullut num dit prationsed dolore feum adit, susci tetummy nullam illupta tummodo lortie verostrud magnibh eum zzril ent elit utet, venis autpat praessis esse dolore exeraesse core modolumsan ullum vulla ad tat la accumsand5e erostismod enim nos aliscipit ad tin eum dolobore velit iriure el utpate faccum veliquat. Delisl utatum ea feumsan ullan ulluptat. Ut nim et at. Hendigna aute consequatie verit ut alis eugue mod te vulla acidunt alisi tem vulputat prat.
Um ipis nibh essenibh elis at acing exer sequipit nulla faciduipis niam ad er adigna faci et dolutat. Ustrud te magnim alit la ad magna feummy nit nostrud estie faciliquat. </div>
<div id="julia"> Der Tag ist wunderschön .lk b bbvhd h e ulvn </div> 


</body>
</html>
und hier der CSS code

Code:
body {font-family:Verdana, Arial, Helvetica, sans-serif; background-color:#FFCCFF; background-image:url(images/blume.png); background-repeat:no-repeat; background-position:center; background-attachment:fixed; cursor:pointer; }

h1 {width:940px; font-family:"Times New Roman", Times, serif; font-size:40px; text-decoration:blink; text-shadow:inherit; text-align:center; margin: 0px auto 50px auto; padding:5px 0px 5px 0px;}

a:hover {color:#666666; text-decoration:none;}
a:link {color:#666666; text-decoration:none;}
a:active {color:#666666; text-decoration:none;}
a:visited{color:#777777; text-decoration:none;}


#textbox { width: 880px; text-align:justify; margin:20px auto; padding:20px; border-style:solid; border-color:#9900CC; border-width:10px;}

#julia {margin:10px auto; padding:20px 20px 20px 20px; width:890px; color:#006633; border-top: 7px dotted #FFFFFF; text-indent:10px; text-align:center;}

#links {float:left; background-color:#FF66FF; border-color:#66CCFF; border-style:double; height: 250px; width: 150px; margin-left:150px; margin-right: 20px; }

.navi {line-height:60px; padding:0 0 0 20px; color:#666666; font-weight:bold;}
 
Zuletzt bearbeitet von einem Moderator:

sokie

Mod | Web

AW: Boxen überlappen sich beim verkleinern des Fensters

Das ist doch auch klar. Du hast deinen container mit margin:auto; zentriert, was ja heisst, dass der Randbereich automatisch und abhängig von der Fenstergrösse aufgeteilt wird. Dein Navigationsbereich richtet sich durch das float:left aber immer links aus, sodass bei kleinerem Fenster irgendwann der Text in diesen Bereich geschoben wird.

Eine Lösung könnte so aussehen, dass du dem container #textbox ein "position:relative" gibst, und den container #links innerhalb der textbox notierst und nicht mit float, sondern position:absolute dort positionierst.

Code:
<div id="textbox"> <!-- position: relative -->
  <div id="left"></div> <!-- position: absolute (top=,left=, kein padding, kein float)-->
</div>
bitte beim posten von Code die code/html/php Bereiche nutzen
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.880
Mitglieder
67.226
Neuestes Mitglied
Alec168
Oben