Div unten ausrichten

Neodesigns · 5. Januar 2010

Hej leute, ich sitze schon seid gestern an einem Element des Designs und krieg es nicht hin den unten auszurichten, könnte jemand vielleicht behilflich sein?
Der Footer lässt sich einfach nicht unten positionieren, kp woran das problem liegt, er kläbt am content fest, hab shcon alles ausprobiert, margin-button:0;, button:0/auto; und so weiter

PS: AUßerdem, jedes mal wenn ich auf den conten bereich klicke bzw da eine leere zeile entstehen lasse über <p>, dann entwickelt sich ein abstand zwischen dem top_content und dem Content_puffer!
[Index]

PHP

<?php
/*#########################################
####Copyright © by: Unknow Worlds Studio©##
####Script © by: Guggestyle.com############
####Design by: Neodesigns.de###############
###########################################*/
if(file_exists($dateiVariable)) include($dateiVariable); else include('_mysql.php')
if(file_exists($dateiVariable)) include($dateiVariable); else include('_settings.php')
if(file_exists($dateiVariable)) include($dateiVariable); else include('_functions.php')
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="body">
<div class="header">
<div class="logo"></div>
</div>
<div class="content">
<div class="navi_left">
<div class="login">
<div class="login_inside" title="login_inside">
<?php if(file_exists($dateiVariable)) include($dateiVariable); else include('FehlerDatei');?>
</div>
</div>
<div class="download_client"><img src="images/download_client.png" width="208" height="69" /></div>
<div class="navigation">
<div class="navigation_inside" title="navigation_inside">
<?php if(file_exists($dateiVariable)) include($dateiVariable); else include('FehlerDatei');?>
</div>
</div>
<div class="language">
<div class="language_inside" title="language_inside">
<?php if(file_exists($dateiVariable)) include($dateiVariable); else include('FehlerDatei');?>
</div>
</div>
</div>
<div class="middle">
<div class="newsticker">
<div class="newsticker_inside">
<?php if(file_exists($dateiVariable)) include($dateiVariable); else include('FehlerDatei');?>
</div>
</div>
<div class="content_slider">
<div class="content_slider_inside">
<?php if(file_exists($dateiVariable)) include($dateiVariable); else include('FehlerDatei');?>
</div>
</div>
<div class="middle_content">
<div class="middle_content_top"></div>
<div class="middle_content_puffer">
<div class="middle_content_puffer_items_area_inside">
<?php if(file_exists($dateiVariable)) include($dateiVariable); else include('FehlerDatei');?>
</div>
<div class="middle_content_puffer_inside">
<?php if(file_exists($dateiVariable)) include($dateiVariable); else include('FehlerDatei');?>
</div>
</div>
<div class="middle_content_foot"></div>
</div>
</div>
<div class="navi_right">
<div class="premium_shop_button"><img src="images/premium_area.png" width="185" height="74" /></div>
<div class="rang_list">
<div class="rang_list_inside"></div>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>

Alles anzeigen

[Stylesheet]

Zitat

/*#########################################
####Copyright © by: Unknow Worlds Studio©##
####Script © by: Guggestyle.com############
####Design by: Neodesigns.de###############
###########################################*/

/* body */
body {
background-color:#000;
background-image:url(images/header.png);
background-position:top center;
background-repeat:no-repeat;
margin-top:0;
}
/* body_end */

.body {
margin-left:auto;
margin-right:auto;
width:990px;
height:auto;
margin-top:0;
}
/* header */
.header {
background-color:none;
width:990px;
height:340px;
}

.logo {
width:397px;
height:101px;
background-image:url(images/logo.png);
margin-left:24px;
margin-top:27px;
}
/* header_end */

/* content */
.content {
width:990px;
margin-top:-152px;
}
/* content_end */

/* navi_left */
.navi_left {
width:210px;
float:left;
background-color:none;
}

.login {
height:153px;
width:210px;
background-image:url(images/login_bg.png);
}

.login_inside {
padding-left:14px;
padding-top:15px;
}

.download_client {
height:69px;
width:208px;
}

.navigation {
margin-top:0px;
width:210px;
height:333px;
background-image:url(images/navigation_bg.png);
}

.navigation_inside {
padding-top:22px;
padding-left:16px;
padding-right:15px;
}

.language {
height:334px;
width:210px;
background-image:url(images/language_bg.png);
}

.language_inside {
padding-top:16px;
padding-left:15px;
}

/* navi_left_end */

/* content */
.middle {
float:left;
width:570px;
background-color:none;
}

.newsticker {
height:35px;
width:567px;
background-image:url(images/newsticker_bg.png);
margin-top:0px;
margin-left:5px;
margin:inherit;
}

.newsticker_inside {
width:546px;
height:19px;
padding-top:8px;
padding-left:12px;
font:Arial, Helvetica, sans-serif;
font-size:12px
}

.content_slider {
margin-left:1px;
height:151px;
width:567px;
background-image:url(images/content_slider_bg.png);
}

.content_slider_inside {
padding-left:12px;
padding-top:10px;
background-repeat:no-repeat;
}

.middle_content {
width:570px;
}

.middle_content_top {
background-image:url(images/middle_content_top.png);
height:33px;
background-repeat:no-repeat;
}

.middle_content_puffer {
background-image:url(images/middle_content_puffer.png);
margin-top:auto;
padding-top:inherit;
}

.middle_content_puffer_items_area_inside {
margin-top:-10px;
padding-left:14px;
background:none;
}

.middle_content_puffer_inside {
background:none;
padding-left:14px;
}

.middle_content_foot {
height:35px;
width:570px;
background-image:url(images/middle_content_footer.png);
}
/* content_end */

/* navi_right */
.navi_right {
float:left;
}
.premium_shop_button {
margin-top:-5px;
margin-left:10px;
}

.rang_list {
height:334px;
width:210px;
background-image:url(images/rang_list_bg.png);
margin-top:10px;
}

.rang_list_inside {
padding-top:15px;
padding-left:16px;
}
/* navi_right_end */

/* footer */
.footer {
height:48px;
width:auto;
background-image:url(images/footer_bg.png);
bottom:0;
left:0;
right:0;
}

/* footer_end */

Alles anzeigen

Timeout · 5. Januar 2010

So sollte es gehen:

Zitat

Dem Eltern-DIV einfach ein "position:relative" mit auf den Weg (bzw in die CSS geben), das unten zu positionierende kriegt "position:absolute;bottom:0". Fertig!

Zitat

Quelle: http://www.developers-guide.ne…4,div-unten-positionieren

Mit freundlichen Grüßen.

dlite · 5. Januar 2010

wenn du den footer getrennt vom content haben möchtest, würde ich es mal mit margin-top, bzw. padding-top probieren.
ansonsten hilft nur valign="bottom"

gta du sau dachte bin der einzigste der wach ist xD

**virtualmarc** · 5. Januar 2010

GTA-Timeout schrieb:

So sollte es gehen:

Mit freundlichen Grüßen.

Jo, aber wenn schon dann CSS-Valid

Code

position:absolute;
bottom:0px;

Timeout · 5. Januar 2010

Ich hab mich damit nicht auseinandeergesetzt, sondern es nur kopier. Aber danke für die Verbesserung.

virtualmarc schrieb:

Jo, aber wenn schon dann CSS-Valid

Code

position:absolute;

bottom:0px;

**virtualmarc** · 5. Januar 2010

Das Problem dabei ist, wenn man das "px" vergisst, dass es im Internet Explorer ziemlich verrutscht ist!

Neodesigns · 5. Januar 2010

Funktioniert nicht
Hab es immer noch in der Mitte, ich kann ja mal kurz ein Screenshot machen von den beiden Problemen.
PS: Hier ist es

dlite · 5. Januar 2010

wenn es sich um diesen abschluss vom content handelt, dann würde ich den teil dranlassen, der wandert ja automatisch mit contentlänge mit oder war dass das problem mit der leerzeile?

Ich persönlich arbeite lieber mit br / und font anstatt mit p tags, die machen automatische absätze und dann suchste dich deppisch bis du den absatz gefunden hast

Neodesigns · 5. Januar 2010

sagt, wenn es durch <p> ich eine Leerzeile entstehen lasse, dann wandert der gesamte div des content_puffer mit nach unten, aber nur einmal und bleibt halt stehen und so entsteht diese Lücke zwischen top und content.

dlite · 5. Januar 2010

probier mal in den content ein valign="top" reinzubaun.

(Bin leider table Anpasser kein div :P)

**virtualmarc** · 5. Januar 2010

dlite schrieb:

probier mal in den content ein valign="top" reinzubaun.

(Bin leider table Anpasser kein div :P)

sowas gibts bei div net, nur table!

dlite · 5. Januar 2010

wo es align gibt gibts auch valign

Timeout · 5. Januar 2010

Mach das ganze doch als eine einzelne Div und arbeite dann mit padding. So sparst du Bild-Speicherplatz , deine Seite wird schneller und das Problem sollte nichtmehr auftreten.

Neodesigns · 5. Januar 2010

Wie meinst du das?
Meinst du ein großer "Screenshot" meines Designs?

Timeout · 5. Januar 2010

Nein, das meine ich nicht. Ich meine den Content-Bereich.
Der besteht, so wie es aussieht momentan aus 3 "Ebenen" (Bildern). (siehe Bild)
Mache aus diesen 3 Ebenen eine einzelne (ein Div Element also) und verwende für den Innenabstand padding.

Bild:

Neodesigns schrieb:

Wie meinst du das?
Meinst du ein großer "Screenshot" meines Designs?

Neodesigns · 5. Januar 2010

stimmt eigentlich ich versuch es mal, hoffe ich hab dich richtig verstanden xD
Edit: Nein geht nicht, das BG des DIVS ist unter dem Top und Foot zusehen.

Timeout · 5. Januar 2010

PHP

<div class="middle_content_puffer">
<div class="middle_content_puffer_items_area_inside">
<?php if(file_exists($dateiVariable)) include($dateiVariable); else include('FehlerDatei');?>
</div>

Sieht so aus als würde ein schließendes div element fehlen. Bin mir aber nicht sicher.

Neodesigns · 5. Januar 2010

Nein, der schließt sich nachher, musst etwas runter scrollen, dann sieht man den schluss

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Div unten ausrichten

Teilen