kostenloser Webspace werbefrei: lima-city


div-Problem

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    s******y

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. kleinereisbaer666

    Kostenloser Webspace von kleinereisbaer666

    kleinereisbaer666 hat kostenlosen Webspace.

    <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?!? :confused:
  4. Autor dieses Themas

    s******y

    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
  5. 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;
  6. Autor dieses Themas

    s******y

    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;)!!!
  7. w******f

    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
  8. Autor dieses Themas

    s******y

    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.
  9. w******f

    <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
  10. Autor dieses Themas

    s******y

    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.
  11. w******f

    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
  12. Autor dieses Themas

    s******y

    Vielen Dank. Es funktioniert!!! :thumb:

    Beitrag geändert: 1.8.2007 15:34:26 von swissguy
  13. Autor dieses Themas

    s******y

    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 :confused: !!!
    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
  14. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!