Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „css-layout - divboxen“

cat82

Noch nicht viel geschrieben

holla leute!

hab jetz langsam den code so hingebracht wie ich das layout haben will, nämlich:

1.oben einen header, der in links (logo) und rechts (banner) geteilt ist
2. darunter den content bereich, der in navi + ein weiterer div block darunter (links), postit und ein weiter div block wo ne animation rein soll (rechts) und text mitte unterteilt ist
3. einen footer

mein hauptproblem zur zeit (bin sicher wird jeden tag ein anderes sein :hmpf:) ist, dass ich ein hintergrundbild nur für den textbereich machen möchte. und das schaff ich einfach nicht, ich habs 100x versucht unter der "text"id als background einzugeben, er färbt mir immer den kompletten content bereich ein (sprich + linken und rechten bereich)

irgendwelche hinweise was ich falsch mach?

ich will eigentlich möglichst wenig mit absolut positionieren.

hier mal der arbeitsquellcode um ein bild zu machen:

<body>
<div id="container">
<div id="header">
<div id="logo">logo</div>
banner</div>

<div id="content">
<div id="navigation">navigation
<div id="news">
<p>weitere div-box</p>
</div>
</div>


<div id="postit">
<p>Nicht vergessen:</p>
<div id="animation">Raum für den Inhalt von id "animation"</div>
</div>

<div id="text"> Raum für den Inhalt von id</div>
</div>




<div id="footer">Raum für den Inhalt von id "footer" </div>
</div>
</body>
</html>

body {
background-color: #000000;
text-align: center;
margin: 0px;
padding: 0px;
font-family: "Comic Sans MS", Verdana, Arial, sans-serif;
color: #FFFFFF;
}

#container {
text-align: left;
width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
margin-top: 12px;
margin-bottom: 12px;
padding-bottom: 12px;
padding-top: 0px;

}
#content {
float: none;
}
#text {
background-color: #00FF33; die farbe sollt nur im mittleren text bereich stehen
padding-top: 0em;
padding-right: 12em;
padding-bottom: 1em;
padding-left: 10em;
}
#logo {
float: left;
height: auto;
padding-bottom: 12px;
width: 210px;
padding-left: 8px;
}

#navigation {
margin-top: 0px;
padding-top: 0px;
float: left;
width: 210px;
height: 300px;

}
#news {
}


#postit {
float: right;
width: 200px;
}
#animation {
}
#footer {
clear: both;
text-align: center;
}
 
P

PhatJay

Guest

AW: css-layout - divboxen

Moin !!!

Auf Anhieb würde ich mal darauf tippen das Du ein
Abschluß-Div vergessen hast.

Also ein...</div>

Überprüf mal alle Verschachtelungen auf Anfang und Ende.

Ist jetzt keine große Hilfe, aber das war mein erster Gedanke bei dem Code ;)

MfG,

PJ :) :D

Edith..ähm Edit:
Zur Not setz zuerst jede Zuweisung (div) in einer Zeile,
dann Verschachtel dies in die jeweiligen divs.
 
Zuletzt bearbeitet von einem Moderator:

besito

Nicht mehr ganz neu hier

AW: css-layout - divboxen

Dein Textbereich soll ja links und rechts von den floatenden Objekten umgeben sein. Dann mußt Du ihm natürlich auch den nötigen margin geben.

Füg mal bei #text hinzu:
margin-left: 210px;
margin-right: 200px;
 

cat82

Noch nicht viel geschrieben

AW: css-layout - divboxen

Dein Textbereich soll ja links und rechts von den floatenden Objekten umgeben sein. Dann mußt Du ihm natürlich auch den nötigen margin geben.

Füg mal bei #text hinzu:
margin-left: 210px;
margin-right: 200px;

danke für die info, aber den gewünschten effekt bringts noch nicht ganz. der hintergrund is zwar jetz nur noch im text bereich, aber rechts abgeschnitten und explorer bzw firefox geben zwei unterschiedlich katastrophale ergebnisse.:(
 

besito

Nicht mehr ganz neu hier

AW: css-layout - divboxen

rechts abgeschnitten

sollte er das nicht sein?
ich hatte Dich so verstanden, daß rechts ein eigener Bereich sein soll
im FF siehts bei mir so aus:



(die blauen und roten Linien sind eigentlich nicht da, die heben nur die div-Blöcke hervor)
 

cat82

Noch nicht viel geschrieben

AW: css-layout - divboxen

doch jetz hat meiners auch, naja sieht ja noch bissl dürftig aus da muss ich noch mit paddings und margins um mich werfen wie es scheint. danke jedoch für die margin info.


lg:)
 

cat82

Noch nicht viel geschrieben

AW: css-layout - divboxen

also mit nen einfärbigen hintergrund passt jetz bei mir auch, aber wenn ich ein bild rein tu, sieht man davon im iexplorer und firefox jeweils einen strefen im text feld, der aber nur bis zur hälfte ca geht. und ja, das originalbild is breiter.bin auf einmalig und feststehend bei den eigenschaften gegangen.

und wie mach ich dass das hintergrundbild, mit der div-box praktisch "mitwächst"? weil selbst, wenn es jetz rechts nicht abgschnitten wär, dann schneidet er es mir unten ab. ich kann heut nimma klar denken und muss jetz schaun dass ich bis zu meiner arbeit morgen wenigstens a bissl schlaf krieg, was gar net so leicht is,( gehts euch auch so, dass die codes die ganze zeit im kopf rumschwirren??)
 
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.155
Beiträge
2.581.856
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben