nicht angemeldet
DIV Container & ungewollter Zeilenumbruch
Matthias Apsel
Tabellenkalk
Gunnar BittersmannHallo zusammen,
ich bin neu hier und auch CSS- Neuling. Bisher komme ich ganz gut zurecht, aber leider will mein <div>-Container nicht so wie ich, er positiniert sich immer nach einem ungewollten Zeilenumbruch.
Es soll so sein: Navigation 25% d. Seite | Content 50% d. Seite | Funfacts 25% d. Seite Dies versuchte ich über margin & float teilweise zu erreichen, alle Container haben auch die passende Breite, aber der rechte Bereich ist halt eine Zeile tiefer, wo er nicht hin soll.
Hier mal mein Code: HTML Seite
<html>
<head><title>Title</title>
<link href="design.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="navigation">
Text
</div>
<div id="content">
Text2
</div>
<div id="funfacts">
Text3
</div>
</body>
<footer>
</footer>
</html>
und hier meine design.css Datei
#navigation{
background-color: #FF0000;
width: 25%;
float: left;
}
#content{
background-color: #FFFF00;
margin-left: 25%;
margin-right: 25%;
}
#funfacts{
background-color: #0000FF;
width: 25%;
float: right;
}
Vielen Dank schon mal für jeden hilfreichen Tipp, Blackpanther23
-
Hallo Blackpanther23,
Vielen Dank schon mal für jeden hilfreichen Tipp,
Einen, der dein Problem nicht löst, aber trotzdem hilfreich ist: http://blog.selfhtml.org/c/html/html5-serie/
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
Hallo Matthias,
ich habe mir den interessanten Link mal hinterlegt. Aber bei diesem Projekt werde voraussichtlich noch klein anfangen. Ich werde erst mal den footer da weg machen, so viel hab ich auch beim ersten Lesen schin gesehen, danke!
Gruß, Blackpanther
-
-
Hallo,
hinter dem schließenden body-Tag haben Container wie footer nichts mehr verloren.
Bevor du CSS-Anweisungen wie float ausführst solltest du dich über deren Auswirkungen informieren.
Das Floaten ohne Clearen nicht geht wirst du spätestens merken, wenn die Seite Inhalt erhält.
Zu deinem Problem: Ersetze deine CSS-Anweisungen mal durch folgende:
* { box-sizing: border-box; } body>* { float: left; } #navigation{ background-color: #FF0000; width: 25%; } #content{ background-color: #FFFF00; width: 50%; } #funfacts{ background-color: #0000FF; width: 25%; }Gruss
MrMurphy
-
Hallo MrMurphy,
vielen Dank für Deine Hilfestellung. Da ich absoluter Anfänger bin, muss ich mich da erst mal einlesen, sieht aber überzeugend aus :-)
Danke schon mal bis hier hin.
Blackpanther
-
-
Hallo,
Hier mal mein Code: HTML Seite
Vielen Dank schon mal für jeden hilfreichen Tipp,
Dein html ist kaputt. Der Footer ist das Gegenstück zum Header, nicht zum Head. Und damit gehört er in den body.
Gruß
Kalk-
Schon bemerkt, korrigiert und verinnerlicht, dankeschön!
-
-
Hallo Blackpanther23,
vielleicht besser mit Flexbox probieren?
Sonst könnte man das z. b. so lösen:
<style> #navigation{ display:inline-block; background-color: #FF0000; width: 25%; } #content{ display:inline-block; background-color: #FFFF00; width:49%; } #funfacts{ display:inline-block; background-color: #0000FF; width: 25%; } <style>Grüße, Martl
-
Hallo,
vielen Dank für die vielen Rückmeldungen, ich werde die einmal durchgehen und mich dann noch einmal mit Resultaten melden.
Grüße an alle!
-
@@Martl
vielleicht besser mit Flexbox probieren?
Da gehört kein „vielleicht“ hin und auch kein Fragezeichen. Sondern ein Punkt. Oder ein Ausrufezeichen.
display:inline-block;
Die durch die Whitespaces (Zeilenumbrüche) im Code hervorgerufenen Abstände zwischen den Containern könnten sich störend bemerkbar machen.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
-
@@Blackpanther23
Hier mal mein Code:
<html>Zuallererst sollte
<!DOCTYPE html>stehen, damit Browser im standardkonformen Modus und nicht im Quirkmodus rendern.Im
<html>-Tag sollte die Sprache angegeben werden. Bei deutschsprachigen Inhalt also:<!DOCTYPE html> <html lang="de"><head><title>Title</title>
Im
headsollte zunächst die verwendete Zeichencodierung angegeben werden.<meta name="viewport" content="width=device-width, initial-scale=1.0"/>sollte auch nicht fehlen, damit die Seite auf Smartphones nicht verkleinert wird.
<div id="navigation"> Text </div> <div id="content"> Text2 </div> <div id="funfacts"> Text3 </div>Zu den verwendeten Elemente hat Matthias ja schon was gesagt. Hier wären wohl
<nav>,<main role="main">und<aside>angebracht.LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein. -
@@Blackpanther23
Es soll so sein: Navigation 25% d. Seite | Content 50% d. Seite | Funfacts 25% d. Seite
Das dürfte auf Smartphones gar nicht gut aussehen; die Spalten sind viel zu schmal.
Dü müsstest mit media queries dafür sorgen, dass die Mehrspaltigkeit erst dann auftritt, wenn der Viewport (das Anzeigefenster) ausreichend breit ist.
Dies versuchte ich über margin & float teilweise zu erreichen, alle Container haben auch die passende Breite, aber der rechte Bereich ist halt eine Zeile tiefer, wo er nicht hin soll.
Ja, weil der im HTML-Code nach dem mittleren
"content"-Bereich steht, demzufolge auch erst danach (d.h. darunter) dargestellt wird. Das sollte dir auffallen, wenn du den"content"-Bereich mal mit Inhalt füllst.(Und nein,
"funfacts"im Code vor"content"zu notieren, ist keine Lösung.)Mit Floats bist du auf dem Holzweg.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Hallo Herr Bittersmann,
sie scheinen sich sehr gut auszukennen. Vielleicht hätte ich erwähnen sollen, dass die Smartphone- Nutzung in meinem Fall keine Rolle zu spielen, es soll mehr eine private Spielerei bleiben, trotzdem will ich es natürlich richtig können. Schade, dass es mit einer geänderten Reihenfolge nichts hilft, es hätte so einfach sein können. Das Thema Flexbox scheint meine Lösung zu sein, ich setze mich damit sofort auseinander. Bitte beachten Sie, dass ich wirklich noch ganz am Anfang stehe, ich muss mich erst mal zurecht finden.
Ich melde mich dann spätestens bei den ersten Problemen mit FlexBoxen :-)
Blackpanther23
-
Hallo Herr Bittersmann,
sie scheinen sich sehr gut auszukennen. [...]
Der is gut.
Der Padawan ein gutes Auge hat, fuer die Macht.
scnr
Steel
-
-