div-Problem
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abstand
angeben
angegebenen abstand
auen
beitrag
bemhung
container
differenz
dmliche fragerei
erklrung
gre
inhalt
kleinere container
lsung
margin
quelltext
rote container
test
vielen dank
weiteren container
-
Ich bin absoluter Anfänger, was div-Container angeht (bis jetzt habe ich immer Tabllenkonstruktionen;) ...).
Ich möchte einen grossen div-Container 900px breit und 100% hoch mit Rahmen auf meiner Website platzieren. In diesen 900px breiten Container will ich einen weiteren Container einbetten. Der eingebettete Container sollte 10px Abstand zum oberen und linken Rand des 900px-Containers haben.
Kann mir jemand sagen wie man das macht? Ich habe es bisher nur soweit geschafft:
http://swissguy.lima-city.de/ (Den Container mit dem Test sollte einfach in den 900px Container eingebettet werden mit 10px Abstand)
Hinweis: Im Quelltext sind auch die div-Definitionen ersichtlich. Vielleicht könnt ihr mir direkt sagen was ich falsch gemacht habe.
Vielen Dank
Beitrag geändert: 1.8.2007 0:10:07 von swissguy -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
<html> <head> <title>www.benjaminschneiter.ch.vu</title> <style type="text/css"> html, body { background: #f5f5f5; margin: 0; padding: 0; height: 100%; } .content { position: absolute; top: 0px; bottom: 0px; width: 100%; padding: 0px; } .mainborder { font: normal 10pt arial; background: #f5f5f5; color: #2f2f2f; border: 1px #a0a0a0 solid; width: 900px; height: 100%; margin: 0 auto; padding: 0; } .rubrik { position: relative; font-family: normal 10pt arial; text-align: left; vertical-align: middle; background: #bfbfbf; color: #2f2f2f; border: 1px #a0a0a0 solid; margin: 10px; padding: 2px 5px; } </style> </head> <body> <div class="content"> <div class="mainborder"> <div class="rubrik">Test</div> </div> </div> </body> </html>
So?!?
-
Jetzt funktionierts. Danke für die Bemühungen.
EDIT: Nun das nächste Problem. Wie kann ich verhindern, dass der Container mit dem Inhalt "Test" über den 900px-Container hinausragt?
Beitrag geändert: 1.8.2007 0:54:34 von swissguy -
swissguy schrieb:
Nun das nächste Problem. Wie kann ich verhindern, dass der Container mit dem Inhalt 'Test' über den 900px-Container hinausragt?
Gib dem inneren Container einfach auch eine Breite. Z.B.:
width: 880px;
-
Ich möchte eben, dass er sich so anpasst, dass er auch zum rechten Rand des 900px-Containers 10px Abstand hat. Wenn ich dann die Breite des 900px-Containers auf 950px setze, sollte automatisch auch der kleinere Container 50px grösser werden.
Bei Tabellen geht das ja;)!!! -
Also. Der aussen-Container:
position:relative; width:900px; padding:10px;
Der innen-Container:
position:relative; width:100%;
Zur Erklärung: Padding legt einen Innenabstand fest, siehe das http://www.css4you.de/wsboxmodell/index.html Boxmodell bei css4you.de.
Wenn du nochmal Hilfe brauchst, meld dich einfach ;)
MfG,
Waldwolf
Beitrag geändert: 1.8.2007 9:23:55 von waldwolf
Beitrag geändert: 1.8.2007 10:07:24 von waldwolf -
Kannst du mal auf meine Seite gehen und dir den Quelltext ansehen? Ich bin der Meinung, dass ich alles schon drin hab mit padding und so. Habe ich vielleicht etwas zuviel, das das padding "aufhebt"? Sorry für die dämliche Fragerei, aber ich habe wirklich diverse Seiten danach durchsucht.
-
<html> <head> <title> www.benjaminschneiter.ch.vu </title> <style type="text/css"> body { text-align: center; vertical-align: middle; background: #f5f5f5; margin: 10px; } div#mainborder { position: relative; font-family: arial; font-size: 10pt; font-weight: normal; background: #f5f5f5; color: #2f2f2f; border-top-width: 1px; border-top-color: #a0a0a0; border-top-style: solid; border-bottom-width: 1px; border-bottom-color: #a0a0a0; border-bottom-style: solid; border-left-width: 1px; border-left-color: #a0a0a0; border-left-style: solid; border-right-width: 1px; border-right-color: #a0a0a0; border-right-style: solid; padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; height: 100%; width: 900px; } div#rubrik { position:relative; font-family: arial; font-size: 10pt; font-weight: normal; text-align: left; vertical-align: middle; background: #bfbfbf; color: #2f2f2f; border-top-width: 1px; border-top-color: #a0a0a0; border-top-style: solid; border-bottom-width: 1px; border-bottom-color: #a0a0a0; border-bottom-style: solid; border-left-width: 1px; border-left-color: #a0a0a0; border-left-style: solid; border-right-width: 1px; border-right-color: #a0a0a0; border-right-style: solid; padding-top: 2px; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; margin:10px; } </style> </head> <body> <div id="mainborder"> <div id="rubrik"> Test </div> </div> </body> </html>
So sieht bei mir der passende Code aus. Wenn man die width-Angabe rauslässt, passt die größe (und wird auch mit skaliert).
Zusätzlich habe ich noch mit margin einen Aussenabstand von 10 Pixeln festgelegt.
MfG,
Waldwolf
Beitrag geändert: 1.8.2007 10:07:09 von waldwolf -
Vielen Dank für deine Antwort, waldwolf. Nun bin ich der Lösung schon ganz nahe. Nur sollte auf der rechten Seite der Abstand auch noch gleich sein, wie auf der linken Seite.
-
Du kannst einfach die Padding-Angaben des äüßeren Containers entfernen und die margin-Angaben so lassen, dann hat der graue Kasten zu allen Seiten den angegebenen Abstand.
MfG,
Waldwolf -
Sorry für den Doppelpost, aber wenn man einen Beitrag editiert, sieht niemand, dass ich ein neues Problem habe, also der Thread wird nicht auf der Startseite angezeigt.
Ich hoffe ich nerve euch noch nicht !!!
Ich habe auf meiner Seite ein weiteres Problem mit divs. Ich möchte dem div-Container mit dem Inhalt "Fill" nicht manuell sagen dass er den Rest der Zeile ausfüllen soll. Ich habe nun die Differenz selbst ausgerechnet, aber jedes mal, wenn ich einen neuen Test-Container hinzufügen würde, müsste ich die Differenz neu berechnen. Was muss ich am Quelltext ändern, dass der Rote Container automatisch den Rest ausfüllt?
Folgender Link führ euch zu meinem Problem:
http://swissguy.lima-city.de/div_lima/ (Quelltext anschauen)
Beitrag geändert: 2.8.2007 13:08:33 von swissguy -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
