ich (nixblicker :() bräuchte mal hilfe bei CSS...

[Hamster]

hi

ich bin eine absolute null was css angeht, bin aber darauf angesprochen worden ob ich folgendes umsetzen könnte. doch leider sind meine versuche bisher erfolglos geblieben.


es soll mittig zentriert eine seite angezeigt werden, wie in diesem beispiel:
http://css.fractatulum.net/sample/layout9_2.htm

nur sollte der kasten eine feste pixelgröße haben, aber eben immer mittig.

weiterhin sollte in dieser box weitere 3 boxen nach diesem schema angeordnet sein:


http://img398.imageshack.us/img398/64/unbenanntpl8.png


wäre super, wenn mir da jmd bissl helfen könnte, denn wie gesagt, ich bin darin völlig unbewandert :(

am meisten probleme macht mir, die äußere box richtig zu zentrieren, die feste größe aber beizubehalten, und die inneren boxen.

ich sag im voraus schonml vielenvielen DANK!

[Henrik]

#box-aussen {
width:960px;
margin:0px auto; /* zentriert */
border: 1px solid #000;
}

#header {
background-color:#green;
}

#box-links {
width:150px;
float:left;
background-color:blue;
}

#box-rechts {
width:810px;
float:right;
background-color:red;
}




<div id="box-aussen">
<div id="header">Content</div>
<div id="box-links">Content</div>
<div id="box-rechts">Content</div>
<br style="clear:both;"> <!-- ist nicht ganz sauber, aber am einfachsten: erzeugt halt einen ungewünschten Absatz, ist für das funktionieren des Layouts aber nötig -->
</div>


das sollte eigentlich schon alles sein

[Hamster]

boah super! ich danke dir!

hätte nicht gedacht, daß ich so schnell eine antwort erhalten würde.

ich danke dir vielmals!

jetzt habe ich zumindest eine gute ausgangsbasis (meine vorigen experimente zeige ich besser nicht ;)) und versuch mich weiter daran.

und zu den farben: die sind grauselig ;) die waren im bild oben nur zur besseren anschauung gewählt.



und nochmal: herzlichen dank, das hilft mir wirklich viel (hänge da schon seit tagen dran...).

darf man das jetzt auch frei benutzen, oder wie schauts copyrighttechnisch aus?

[Hamster]

ah, doch, eine frage hätte ich noch.

wie würde ich noch eine weitere box einbauen, die wie die grüne von links nach rechts geht, aber nur ein paar pixel hoch ist? (zb. unterhalb der 2 großen boxen?)

€dit: und leider ein weiteres problem: im firefox sieht ja alles ganz annehmbar aus, im ie(7) aber recht grauselig. haste nen tipp, wie man das kompatibler bekommt?
€dit2: ok, im ie siehts wieder halbwegs brauchabr aus, allerdings hängt der ganze kasten ganz links, was darf/kann/muß ich unternehmen? im FF sschauts korrekt aus.

[ZapBee]

€dit: und leider ein weiteres problem: im firefox sieht ja alles ganz annehmbar aus, im ie(7) aber recht grauselig. haste nen tipp, wie man das kompatibler bekommt?
€dit2: ok, im ie siehts wieder halbwegs brauchabr aus, allerdings hängt der ganze kasten ganz links, was darf/kann/muß ich unternehmen? im FF sschauts korrekt aus.
Willkommen in der Welt der Kompatibilitätsprobleme. Mit solchen Effekten schlagen sich Heerscharen von Webdesignern herum. Der IE 6 reagiert nochmal ganz anders...
Probier mal das hier:
CSS

body
{
margin: 0px;
padding-left:50%;
position: absolute;
}

#box-aussen
{
width: 960px;
margin-left: -480px;
}

[DanMan]

ah, doch, eine frage hätte ich noch.

wie würde ich noch eine weitere box einbauen, die wie die grüne von links nach rechts geht, aber nur ein paar pixel hoch ist? (zb. unterhalb der 2 großen boxen?)
Du würdest statt dem <br style="clear:both;"> ein div einfügen wie z.B. <div id="foot" style="clear:both;">blablabla</div>
Außerdem: http://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss

[Hamster]

ich danke euch schonmal für die ganzen antworten, die haben mich einiges weitergebracht.


allerdings hat sich eine neues, selbstverschuldetes problem aufgetan:

ich hatte alles soweit fertig, noch ein bisschen herumexperimentiert zum falschen zeitpunkt versehentlich gespeichert -> alles weg.

kein problem dachte ich, weißt ja wie es jetzt ungefähr geht, fängst von vorne an.

und direkt da gibt ein unglaublich nerviges problem.

im ie6&7 sieht so aus:

http://img481.imageshack.us/img481/6102/19070238fk4.jpg

im firefox & im editor (nvu) sieht so aus (so soll es auch sein)

http://img481.imageshack.us/img481/9937/52242454cv1.jpg

er haut mir über der rechten box einfach ein absatz rein, den ich zum verrecken (man merkt: ich bin blutjunger anfänger, der sich nicht wirklich mit der materie auseinandergesetzt hat ;( ) nicht wegbekomme.

komisch, vorher hatte ich dieses problem nicht....

wie könnte man das lösen?

(code ist der von oben, ohne daß ich was hinzugefügt habe...)

[DanMan]

Du würdest es uns einfacher machen, wenn du einfach deinen Quellcode posten würdest. So aus dem Stehgreif: sicher, dass rote und blaue Box auf float stehen?

[Hamster]

danke dir schonmal.

also, zum code: es ist eben im prinzip lediglich der code von oben zusammengesetzt.


das hier ist er:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#box-aussen { width:960px; margin:0px auto; /* zentriert */
border: 1px solid #000;
}
#header {
background-color:green;
}
#box-links {
width:150px;
float:left;
background-color:blue;
}
#box-rechts {
width:810px;
float:right;
background-color:red;
}
-->
</style>
</head>
<body>
<div id="box-aussen">
<div id="header">Content</div>
<div id="box-links">Content</div>
<div id="box-rechts">Content</div>
<div id="foot" style="clear: both;">blablabla</div>
</div>
</body>
</html>

[Henrik]

Der IE interpretiert padding und margin anders, die rechte Box wird einfach zu breit sein. Ein bischen schmaler machen und dann sollte das gehen.

[Hamster]

ah ok, danke. werd ich gleich probieren

[DanMan]

Der IE interpretiert padding und margin anders, die rechte Box wird einfach zu breit sein. Ein bischen schmaler machen und dann sollte das gehen.
Er hat aber ja nichts dergleichen definiert.

Allerdings hast du einen border, und den zieht der Ff außen drum, während der IE den Innenraum einrückt. Das bedeutet? ;)

[Henrik]

Er hat aber ja nichts dergleichen definiert.

Allerdings hast du einen border, und den zieht der Ff außen drum, während der IE den Innenraum einrückt. Das bedeutet? ;)

Juhu, Browserweiche :uconf3:

[Gast]

Nix Browserweiche. Im Beispiel oben fehlt einfach der Identifier bei der Doctype-Definition, was den IE in den Quirksmode schaltet, wo er dann ua ein falsches Boxmodel verwendet.

Vollständig lautet die verwendete DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

[Hamster]

hallo allerseits.

jetzt kann ich mich dem projekt mal weiter widmen. zunächst nocheinmal vielen vielen dank für die bisherige hilfe. war wirklich spitze :up:

allerdings hätte ich jetzt noch eine frage:

und zwar wie bekomme ich in #box-rechts ein solches menu fest verankert?

http://css.fractatulum.net/sample/menu2format_demo.htm

(im speziellen box1, aber welche ist ja grundgenommen egal).

denn das problem was ich habe ist das menü genau in der #box-rechts zu zentrieren. bin ich wohl wieder zu blöd dazu *schäm*
meine bisherigen versuche zeigtne leider immer, daß die formatierung immer von der kompletten seite abhängig ist. fährt man eine andere auflösung hängt das menü sonstwo. deshalb möchte ich es gerne innerhalb der #box-rechts haben, dann kann ich mit prozenten arbeiten, oder?

edit: ich glaub ich habe mich etwas blöd ausgedrückt. aber ist schon spät und ich kann es grad schlecht erklären ;(
daher habe ich mal ein bild hochgeladen:)

in die rechte ox soll eben fest das menü verankert werden. so daß es sich unabhängig von der auflösung (und hoffentlich auch browser) immer an der selben stelle befindet. als code kann ja das hier genommen werden:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>test</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1"><style
type="text/css">
<!--
#box-aussen { width:960px; margin:0px auto; /* zentriert */
border: 0px solid #000;
}
#header {
background-color:green;
}
#box-links {
width:150px;
float:left;
background-color:blue;
}
#box-rechts {
width:810px;
float:right;
background-color:red;
}
-->
</style>
</head><body><div id="box-aussen">
<div id="header">Content</div>
<div id="box-links">Content</div>
<div id="box-rechts">Content</div>
<div id="foot" style="clear: both;">blablabla</div>
</div></body></html>



ich danke euch im voraus vielmals! und ja, ich weiß, ich bin ein noob und sollte sowas gar nicht machen :( trotzdem hoffe ich, ich bekomme es irgendwie hin. die macht sei mit euch!

so, und jetzt: gute nacht :)

[Henrik]

Du kannst das auch relativ zum Elternelement ausrichten.


#dein-menu-da {
position:relative;
top: 100px;
left: 100px;
}


hoffe das geht, habe ich nicht geprüft, wenig Zeit, sorry.
Henrik

[DanMan]

Was heißt zentriert? Nur horizontal oder auch vertikal? Letzteres stellt nämlich systembedingt ein Problem dar.

[Hamster]

Was heißt zentriert? Nur horizontal oder auch vertikal? Letzteres stellt nämlich systembedingt ein Problem dar.


das menü soll sich einfach nur fest in der box (box4 im bild) befinden. darin muß es nicht zentriert sein, allerdings eine feste position (wo die liegen soll bin ich mir noch nicht sicher, es hapert aber mit meinem laienwissen daran das menü überhaupt in eine feste position innerhalb der box 4 zu bringen).

[Devil01]

Warum machst Du die Boxen nicht aus Frames.

Darin kannst Du dann alle möglichen Positionen angeben, und auch viel einfacher wieder ganz andere Inhalten reinladen.

[DanMan]

das menü soll sich einfach nur fest in der box (box4 im bild) befinden. darin muß es nicht zentriert sein, allerdings eine feste position (wo die liegen soll bin ich mir noch nicht sicher, es hapert aber mit meinem laienwissen daran das menü überhaupt in eine feste position innerhalb der box 4 zu bringen).
Dann sollte dir das von Hendrik ja weiterhelfen.

[Hamster]

hmm womöglich tut es das, aber ich stehe etwas auf dem schlauch. das menü ist ja auch css, wie woe was binde ich das alles ein? *kopkratz*

[DanMan]

hmm womöglich tut es das, aber ich stehe etwas auf dem schlauch. das menü ist ja auch css, wie woe was binde ich das alles ein? *kopkratz*
Na du nimmst das was Hendrik geschrieben hat und fügst es bei den style Definitionen ein.

Dann erstellst du im rechten Block noch ein div, dem du die ID aus der zuvor genannten Style-Definition zuweist.

[Henrik]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>test</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1"><style
type="text/css">
<!--
#box-aussen { width:960px; margin:0px auto; /* zentriert */
border: 0px solid #000;
}
#header {
background-color:green;
}
#box-links {
width:150px;
float:left;
background-color:blue;
}
#box-rechts {
width:810px;
float:right;
background-color:red;
}
#dein-menu-da { /* das ist das CSS für deine Menübox, geht bis zur nächsten Schweifklammer */
position:relative;
top: 100px;
left: 100px;
padding:20px;
border:1px solid #000000;
} /* CSS Code Menübox Ende. Diese Kommentare kannst du übrigens löschen, haben für die Funktion keinerlei Bedeutung */
}
-->
</style>
</head><body><div id="box-aussen">
<div id="header">Content</div>
<div id="box-links">Content</div>
<div id="box-rechts">Content
<div id="dein-menu-da">MENÜ</div>
</div>
<div id="foot" style="clear: both;">blablabla</div>
</div></body></html>