eine box positionieren

[Tani]

ich hatte angefangen mein layout mit tabellen zu gestalten und habe mir ein konzept erstellt. nun möchte ich es aber mit div's realisieren.

für den head hätte ich schon etwas:

#top {
width:766px;
height:92px;
background-image:url(design/logo_oben.jpg);
padding:0;
margin:0 auto;
border-left: 2px solid #818181;
border-right: 2px solid #818181;
line-height:16px;
margin-left:auto;
    margin-right:auto;}

Nun möchte ich genau drunter, auch 766 breit, wo die top endet ein bereich, indem ich den inhalt der page einfüge. hab da schon alles mögliche versucht und css vorlagen benutzt, ich kriege dass leider nicht gebacken.

wie positioniere ich das genau?

[maz]

Grundlegende Infos findest Du hier: http://www.css4you.de (-> Layouten ohne Tabellen)

allerlei hilfreiche Templates gibts hier: http://intensivstation.ch/css/template.php

Prinzipiell: Das Thema betrifft eher CSS, das Design ist ja nur eine Vorlage, die Du auf einer Webseite umsetzen möchtest.

Zur Positionierung: Ein neues DIV erscheint unter dem davorgehenden, auch ohne weitere Angaben. Mit float: kannst Du DIVs prima nebeneinander packen, Positionierungen für so einfache Ansordnungen machen vermutlich mehr Ärger als Sinn. Alles wesentliche dazu findest Du aber unter dem ersten Link.

viele Grüße und Erfolg!

[Zeromancer]

Hallo Tani,

#top {
width:766px;
height:92px;
background-image:url(design/logo_oben.jpg);
padding:0;
margin:0 auto;

es müssen vier Angaben für oben, rechts, unten, links sein

border-left: 2px solid #818181;
border-right: 2px solid #818181;
line-height:16px;
margin-left:auto;
    margin-right:auto;}

dann könntest du dir die Angaben oben sparen.

Nun möchte ich genau drunter, auch 766 breit, wo die top endet ein bereich, indem ich den inhalt der page einfüge. hab da schon alles mögliche versucht und css vorlagen benutzt, ich kriege dass leider nicht gebacken.

Was hindert dich daran, alle Angaben des 'top-Bereiches auch für den darunter liegenden Teil zu benutzen? ;-)

#top {
  width:766px;
  height:92px;
  background:url('design/logo_oben.jpg'); /*eine Alternativfarbe wäre von Vorteil*/
  padding:0;
  margin:0 auto 0 auto;
}
#down {
  width:766px;
  height:???; /*weglassen oder overflow nutzen*/
  background:url(???'); /*eine Alternativfarbe wäre von Vorteil*/
  padding:0;
  margin:0 auto 0 auto;
}

HTML:
-----

<div id="top">Text</div>
<div id="down">Text</div>

Da es sich um zwei Blockelemente mit jeweils eigenem Absatz handelt, sollte dies kein Problem darstellen.

Mit freundlichen Grüßen

André

[MudGuard]

Hi,

margin:0 auto;
es müssen vier Angaben für oben, rechts, unten, links sein

Nein, zwei Angaben reichen.

Bei einer Angabe gilt diese an allen 4 Seiten,
bei zwei die erste oben und unten, die zweite links und rechts,
bei drei die erste oben, die zweite links und rechts, die dritte unten,
bei vier die erste oben, die zweite rechts, die dritte unten, die vierte links.

siehe auch: http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin

cu,
Andreas

[Ashura]

Hallo MudGuard.

Nein, zwei Angaben reichen.

Jup! Das spart Code.
Und ich bin immer recht knausrig, was die Länge angeht. ;)

Gruß, Ashura

[Zeromancer]

Hallo Andreas,

Nein, zwei Angaben reichen.

danke. Wieder was gelernt.

Mit freundlichen Grüßen

André

[Tani]

hey Super vielen Dank, wusste nicht, dass man die einfach so untereinander nehmen kann.

jetzt hab ich noch ein problem:
ich will ich die top ein iframe einfügen, indem sich sich das menü befindet, damit ich nicht alle dateien später einzeln öffnen muss.

jetzt kann ich den iframe nicht so platzieren so wie es haben würde. eine ebene kann man ja da nicht benutzen mit px angaben. sobald man ja die auflösung ändert, bleibt die ebene immer an der gleichen stelle, die div=top jedoch nicht. sinnvoll wäre dann bestimmt in top nochmal eine box ??

der vielleicht xx pixel von oben und xx pixel von rechts sitzt, also in bezug auf div=top. hab da ein paar sachen probiert, er nimmt die angaben immer von der nullstelle vom gesamten fenster

#top {
width:766px;
height:92px;
background-image:url(design/logo_oben.jpg);
padding:0;
margin:0 auto;
border-left: 2px solid #818181;
border-right: 2px solid #818181;
line-height:16px;
margin-left:auto;
    margin-right:auto;}

ich hoffe, dann dass dies mein letztes problemchen ist, damit ich den inhalt füllen kann (;

[Nico]

Hallo!

Da muss noch dazu postition:relative. Glaube ich zumindest.

Nico

[Tani]

Hab das jetzt so gelöst:

#navioben {
width:500px;
    padding:0px;
    border:0px;
    margin:50px;
    margin-left:150px;">}

die div in der sich navioben befindet wird halt noch in die höhe gezogen, so dass sich das hintergrundbild wiederholt:

http://80.190.247.228:8520/servlet/jfchat

[Taner]

oki, hab das problem gelöst, hab ausversehen nur margin angegeben, anstatt margin-top

[wahsaga]

hi,

jetzt hab ich noch ein problem:
ich will ich die top ein iframe einfügen, indem sich sich das menü befindet, damit ich nicht alle dateien später einzeln öffnen muss.

nein, bitte nicht.
damit machst du deine seite ohne not schlechter, als sie sein müsste.
zu den zahlreichen nachteilen von (i)frames kannst du im archiv recherchieren.

wenn du feste seitenteile nicht in jede datei einzeln einfügen möchtest, um sie besser zentral ändern zu können - dann bietet sich entweder eine serverseitige technik an, die includes beherrscht (SSI, PHP, Perl, ...) - oder ein editor, der definierte includes beim erstellen der seiten vor dem hochladen auflösen kann.

gruß,
wahsaga