div positionierung mit css

l0rdseth · 7. September 2007

Hallo,

ich habe leider ein kleines Problem weiss auch nicht so wirklich wie es dazu kommt ist mein erstes dieser art (Bin wahrscheinlich einfach noch zu müde). Darf leider keinen Quelltext rausgeben (Bin auf Arbeit) also hab ich mal so eine Art Beispiel geschrieben

Also das Problem:

Ich habe 3 <div>

- header

- main

- footer

Der header soll halt ganz nach oben und hat eine feste Grösse, das gleiche mit dem footer nur halt ganz unten. Der main soll halt zwischen den beiden sein und hat keine feste grösse der er sich ja dem inhalt anpassen soll ich der höhe, soll aber bündig sein mit dem header und dem footer. Am header klappt alles nur hab ich grade Probleme mit dem Footer der wird entweder nicht angezeigt oder an einer total falschen Stelle.

Hier habt ihr mal den bsp Quellcode:


.header {

	top: 0px;

	left: 0px;

	position: absolute;

	height: 176px;

}

.main {

	top: 176px;

	left: 0px;

	position: absolute;

	height: 100%;

}

.footer {

	bottom: 0px;

	left: 0px;

	position: absolute;

	height: 150px;

}



<div class="header">

	header

</div>

<div class="main">

	main

</div>

<div class="footer">

	footer

</div>

Wäre euch sehr dankbar wenn Ihr mir helfen könntet.

Gruss Seth

neuling · 7. September 2007

meinst du so

<div id="header">Header

</div>

<div id="content">Content

</div>

<div id="footer">Footer

</div>

* { margin: 0px; padding: 0px;}

#page { width: auto; max-width: 90em;}

#header { height: 176px; background-color:green; }

#content { background-color:red; }

#footer { height: 50px; background-color:blue; }

wobei du den page-div eigentlich nicht unbedingt brauchst. und hinterher halt die farben rausnehmen

l0rdseth · 7. September 2007

das ganze könnte funktionieren muss ma gleich ein bisschen rumbasteln. hoffe es funktioniert.

danke dir schonmal

l0rdseth · 7. September 2007

leider funktioniert es nicht 100%

habe natürlich im content ja auch inhalt drinne unteranderem ein <span> wo ich die position mittels margin regel. Dadurch ist der footer nicht mehr bündig zum content sondern bündig mit den span die innerhalb des contents sind

l0rdseth · 7. September 2007

also grade ein bisschen weiter geforscht.. damit das problem nicht mehr kommt muss ich innerhalb des content div mit div arbeiten und nicht mit span. Dadurch entsteht bei mir schon wieder ein problem

die beiden div sollen neben einander sein. jedoch wenn ich sie positioniere sind sie zwar links und rechts jedoch ist der rechte weiter unten auf der höhe wo das linke aufhört.

neuling · 7. September 2007

naja du benutzt auch überall position:absolute somit musst du wie es auch schon heisst die position absolute angeben (left- right ect)

hinzu solltest du besser mit floats arbeiten. und schaum mal in deinen quelltext ob du in deinem div nen tag drinne hast!

allerdings besser wäre es wenn man mal den code sehen würde.

aus welchem grund darfst ihn nicht posten??

werden ja keine sensitiven daten like kontonummern mit pins drinnestehen oder so.

also richtig helfen kann man dir nur wenn man das problem sieht. aber schau erstmal was ich da oben geschrieben hab nach und dann meld dich nochmal ;-)

lg

l0rdseth · 7. September 2007

So bin schon ein Stück weiter... nur gibts ein paar unterschiede im ff und ie. Naja das ding wegen dem posten ist ich weiss nichtmal ob ich hier im Forum angemeldet sein darf deswegen wollte ich auch nicht noch den quelltext rausgeben. aber hab es mal modifiziert dann kann ich es auch raus geben.

das problem ist die 2 boxen in der mitte machen nicht was sie eigetnlich machen sollten. im ie sind die beiden bei ein ander und zu weit rechts. im ff scheint es bisher zu funktionieren.

hier der quelltext:


<html>

<head>

<base href="http://www.oswald-foerdertechnik.de/">

<style>

body {

	font: normal 12px Arial, sans-serif, verdana, helvetica;

	color: #000000;

	background-color:white;

	border: none;

	margin: 0px;

	padding: 0px;

}


.page {

	width: auto;

}


.header {

	height: 176px;

	background: #ffffff url(images/top-bg.png) repeat-x;

}


.content { 

	background-color:white;

}


.footer { 

	height: 50px;

	background-color: black; 

	clear: both;

}


.left {

	background-color: #D7D7D8;	

	width: 957px;

	float: left;

}


.right {

	background-color: white;

	width: 300px;

	height: 100%;

	margin-right: 0px;

	margin-top: 0px;

	float: right;

}


.leftleft {

	background: #f2f2f2;

	width: 550px;

	border: 1px solid #e19390;

	border-top: 4px solid #de4f49;

	margin-top: 20px;

	margin-left: 20px;

	float: left;

}


.leftright {

	background: #f2f2f2;

	width: 300px;

	height: 100%;

	border-left: 4px solid #999999;

	border-top: 1px solid #999999;

	margin-top: 20px;

	margin-right: 67px;

	margin-bottom: 20px;

	float: right;

}


#mini-menu {

	margin-left: 65px;

	top: 0px;

	position: absolute;

	display: inline;

	height: 25px;

	background: url(images/mini-menu-center.png) repeat-x;

	color: #ffffff;

}


.minimenuright {

	margin-left: 0px;

	top: 0px;

	position: absolute;

	height: 25px;

	display: inline;

}


.mini-links {

	font-size:11px;

	font-weight:bold;

	margin: 0 0 0 20px;

}


.minilinks {

	padding: 0px;

}


a:link, a:visited { 

	text-decoration:none;

	font-weight:standard;

	color: #333333;

}


a:active, a:hover { 

	color:#de4f49;

}


a.mini:link { 

	color: #cccccc;

	background: none;

	text-decoration: none;

	border-style: none; 

}


a.mini:Visited { 

	color: #cccccc;

	background: none;

	text-decoration: none;

	border-style: none; 

}


a.mini:Hover { 

	color: #de4f49;

	background: none;

}


.flag {

	margin: 0 0 0 15px;

}


.flag-right {

	margin: 0 20px 0 15px;

}

</style>

</head>

<body>

<div class="header">

	<img src="images/logo.png" alt="" width="319" height="78" border="0" style="margin-top: 12px; margin-left: 40px;">

	<div id="mini-menu">

		<table cellspacing="0" cellpadding="0" height="25" valign="top" align="left" style="margin-left: 0px;">

		<tr>

			<td height="25"><img src="images/mini-menu-left.png"></td>

			<td valign="top" height="25" class="minilinks">

				<span class="mini-links"><a class="mini" href="#">Suche</a></span>

				<span class="mini-links"><a class="mini" href="callback-service.html">Callback-Service</a></span>

				<span class="mini-links"><a class="mini" href="sitemap.html">Sitemap</a></span>

				<span class="mini-links"><a class="mini" href="impressum.html">Impressum</a></span>

				<span class="flag"><img style="margin-top: 2px;" src="images/flagge-de.png" alt="Deutsche Version" width="17" height="11" border="0"></span>

		<span class="flag-right"><img src="images/flagge-gb.png" alt="English version" width="17" height="11" border="0"></span>		

			</td>

			<td height="25"><img src="images/mini-menu-right.png" height="25" width="11"></td>

		</tr>

		</table>

	</div>

</div>


<div class="content">

	<div class="left">

		<div class="leftleft"></div>

		<div class="leftright"></div>

	</div>

	<div class="right">


	</div>

</div>

<div class="footer">

footer

</div>

</body>

</html>

neuling · 7. September 2007

meine fresse is das chaotisch ;-) warum übergibst du eigentlich alle werte über klassen??

naja ich schau mal

l0rdseth · 7. September 2007

der original quelltext ist noch schlimmer... der typ der seite vor mir gemacht hat, hat derben mist gebaut ein wunder das die überhaupt mehr oder weniger angezeigt wird. soll die halt neue machen

neuling · 7. September 2007

kleiner tip machse komplett neu. tu dir den gefallen ;-)

der grund warum der abstand nicht angezeit wurde ect liegt an deinen größenangaben.

setz mal deine klasse .left auf width:auto; und gib deiner klasse .leftright noch n margin-left: 27px;

aber wie gesagt ich würde die seite noch mal komplett neu struckturieren und das css komplett sauber neumachen

lg

l0rdseth · 7. September 2007

ne hat nicht geklappt

aber neu schreiben tu ich ja mehr oder weniger hier im moment... werd den teufel tun seinen quelltext zu bearbeiten da sitz ich ja noch länger dran. aber eben die lösung gefunden. für die beiden boxen anstatt mit margin zu arbeiten einfach dem übergeordneten div nen padding verpassen schon hats geklappt

neuling · 7. September 2007

dann hattest bei meinem script was falsche verstanden denn alle browser haben das umgesetzt.

naja falls du noch mal hilfe brauchst

l0rdseth · 7. September 2007

es klappt hab anstatt der beiden inneren divs jetzt einfach ne tabelle benutzt hatte keine lust mehr fertiges werk ist Hier auffindbar

Danke nochmal für die Hilfe

Anmelden

div positionierung mit css

Empfohlene Beiträge

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte