✔ Div Problem

Status
Nicht offen für weitere Antworten.
A

alex130

Erfahrenes Mitglied
HI
Ich hab ein Problem mit den Div's und zwar will ich meinen Footer und meine zwei Navis (also ganz unten) haben und über die ganze länge, doch ich schaff es irgendwie nicht..
Hier ist mein Code.:
index.php:
PHP: 
<?php 
ob_start();
include("configs/config.inc.php");
	 
	$sql4 = "SELECT `hits` FROM `counter` WHERE `id` = '1'";
	$res4 = mysql_query($sql4) OR die(mysql_error());
	$signatures = mysql_fetch_assoc($res4); 
?>
<!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=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" type="text/css" href="style3.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />

</head>

<body>
<a name="top"></a>
<div id="container">
<div id="header"></div>
<div class="navi-top">

	<div class="navigation" align="center">
		<a href="index.php">Home</a>
		<a href="index.php?go=about_us">About Us</a>
		<a href="index.php?go=campaigns">Campaigns</a>
		<a href="index.php?site=online">News</a>
		<a href="index.php?go=site_blogs">Site Blogs</a>
		<a href="index.php?site=vote">Forum</a>
		<div class="clearer"><span></span></div>
	</div>

</div>
<div class="leftCol">
<div class="box">
<br />
<center>
So far we have<br />
<font style="background:#f87e87; font-weight:bold;"><?php echo $signatures['hits']; ?></font><br />
signatures!<br />
<br />
<a href="http://www.petitionspot.com/petitions/great8mandate" target="_blank"><img src="images/banner-petition.gif" /></a><br />
<br />
<a href="http://root.pcmasters.at/gg/board/viewtopic.php?t=2" target="_blank"><img src="images/banner_lddc.jpg" /></a><br />
<br />
<a href="http://root.pcmasters.at/gg/board/viewtopic.php?t=3" target="_blank"><img src="images/banner-odd.jpg" /></a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</center>
</div>
</div>


<div class="rightCol">
<div class="box">
<br />
see where the campaign started<br />
<a href="http://www.gilmoregirls.org/forum/index.php?topic=6630.0" target="_blank"><img src="images/banner_03.gif" /></a><br /><br />
"Want to talk about the show in general and not just the campaign?"<br />
<a href="http://www.gilmoregirls.org/forum/index.php" target="_blank"><img src="images/gg_org_forum.jpg" /></a><br />
<div style="font-size:10px;">STG is not endorsed by gg.org -- we're just fans of the site!</div><br />
<br />
<br />
<div style="width:;150px; background:#FFFFFF;">
<a href="http://www.gilmoregirls.org" target="_blank">~ gilmoregirls.org</a><br />
<a href="http://www.gilmoregirlsnews.com" target="_blank">~ Gilmore News</a><br />
<a href="http://www.thedragonflyinn.org " target="_blank">~ The Dragonfly Inn</a><br />
<a href="http://http://www.fanforum.com/f56/" target="_blank">~ GG on FanForum</a><br />
<a href="http://http://www.televisionwithoutpity.com/portal/site/TelevisionWithoutPity/menuitem.5853592f3d9209d415fc0f1045001d30/?channelid=31edb829275b2110VgnVCM1000006dc1d240____&hotfourmchannelid=e0ddb829275b2110VgnVCM1000006dc1d240____&pollchannelid=9bddb829275b2110VgnVCM1000006dc1d240____&ShowName=Gilmore+Girls&currentPage=1&strSortCoulmn=airdate_desc&strSeason=all" target="_blank">~ Gilmores at TwoP</a><br />
<a href="http://www.fanpop.com/spots/gilmore-girls" target="_blank">~ Meet the fans</a><br />

<a href="http://www.gilmoregirlsnews.com" target="_blank">~ Gilmore News</a><br />
<a href="http://www.tvguide.com/tvshows/gilmore-girls/100179" target="_blank">~ Gilmores on TVG</a><br />
<a href="http://www.cwtv.com/shows/gilmore-girls" target="_blank">~ Official Homepage</a><br />
<a href="http://www.onlygilmoregirls.net/index3.htm" target="_blank">~ OnlyGilmoreGirls</a><br />
<a href="http://www.imdb.com/title/tt0238784/" target="_blank">~ Infos on Imdb</a><br />
<a href="http://gilmoregirlspodcast.com/" target="_blank">~ GG podcasts</a><br />
<a href="http://en.wikipedia.org/wiki/Gilmore_Girls" target="_blank">~ Wikipedia Infos</a><br />
</div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
<br />
<br />
</div>
</div>

<div id="content">
<div class="text">

<?php

  	switch($_GET['go']) {
    case "admin":include("admin.php");
    break;  
 
	case "login":include("login.php");
	break;  
	case "lostpw":include("lostpw.php");
	break;  
	case "impressum":include("impressum.php");
	break;
	case "register_done":include("templates/register_done.php");
	break;  
	case "user_exist":include("templates/user_exist.php");
	break;  
	case "empty_fields":include("templates/empty_fields.php");
	break;  
	case "register_new":include("templates/register.php");
	break;
	case "logout":include("logout.php");
	break;  
	case "not_logged_in":include("loginform.php");
	break;  
	case "campaigns":include("campaigns.php");
	break;
	case "about_us":include("about_us.php");
	break;
	case "site_blogs":include("site_blogs.php");
	break;
	
    default:include("default.php");
};

?>

</div></div>




</div>
<div id="footer">
<center>

Gilmore Girls and all related text, graphics and photographs appearing on savethelorelais.org are copyrighted and trademarked 2000-2007 by Warner Brothers..... <a href="copyright2.php?keepThis=true&TB_iframe=true&height=300&width=400" class="thickbox" title="Copyright">[read more]</a><br />
Copyright &copy; 2007 by <a href="copyright.php?keepThis=true&TB_iframe=true&height=300&width=400" class="thickbox" title="Copyright">gh0$t - Elite-Designer.at</a><br />
<a href="loginform.php?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">[Adminlogin]</a>  

</center>
</div>


</body>
</html>
<?php ob_end_flush(); ?>

style3.css:
HTML: 
body {
font-family:; Verdana, Tahoma, Arial, Helvetica, sans-serif;  
font-size: ;13px;

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
background: #c8d6f8;
}

#container {
width: 802px;
margin: 0 auto;
margin-top: 10px;
}

#header {
width: 800px;
height: 130px;
background-image: url(images/logo1.jpg);
border: 1px solid black;
}

.navi-top {
width: 800px;
height: 30px;
border: 1px solid black;
background: #f6eb99;
border-top: 0px;
}

.leftCol { /* linke Spalte */
width: 150px;
float: left;
border-left: 1px solid black;
border-right: ;1px solid black;
border-bottom: 1px solid black;
margin-right: 0 !important; /* Moderne Browser */
margin-right: -3px; /* IE */
}

.rightCol { /* rechte Spalte */
width: 150px;
float: right;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: ;1px solid black;
margin-left: 0 !important; /* Moderne Browser */
margin-left: -3px; /* IE */
}

.box {
width: 136px;
min-height: 400px;
background: #f6eb99;
padding-top: 10px;
padding-left: 7px;
padding-right: 7px;
}

#content {
margin: 0 150px !important; /* Moderne Browser */
margin: 0 147px; /* IE */
border-right: 1px solid black;
border-left: 1px solid black;
background: #FFFFFF;
width: ;500px;
margin-bottom: 0px;
}

#footer {
width: 790px;
height 25px;
border: 1px solid black;
border-top: 1px solid black;
margin: 0 auto;
background: #FFFFFF;
padding: 5px;
font-size: 10px;
font-weight: bold;
color: #000000;
}

.text {
padding: 10px;
background: #FFFFFF;
min-height: 400px;
}

.head {
width: 760px;
height: 110px;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
}

.logo {
width: 750px;
height: 89px;
padding: 20px;
}

#divs {
width: 760px;
margin: 0 auto;
background: #FFFFFF;
margin-bottom: 15px;
margin-top: 15px;
min-height: 450px;
}
 
Hi,

das ist ja eine vage Problembeschreibung, und der immer wiederkehrende Topic "Div Problem" ist auch alles andere als aussagekräftig, aber vielleicht hilft dir in diesem Fall mein CSS-Tutorial CSS-Layout mit 100%-Höhe weiter, in dem die Faux-Columns zum Einsatz kommen, um die Spaltenhöhen automatisch anzugleichen?

Und achte bei den Eigenschaftsdeklarationen darauf, dass nach dem Doppelpunkt nicht ein Semikolon, sondern der Eigenschaftswert folgt.
 
Mahlzeit! :)

Du hast vergessen, im DIV #wrapper die Klasse .clearfix aufzurufen.
 
Hi
Danke das hab ich total vergessen..... :rolleyes:
Naja nun hab ich es eingefügt und es funktoniert einwandfrei, jetzt sieht es genau
so aus, wie ich wollte.
Danke nochmal
lg
 
Dann schau doch einfach mal in das Stylesheet, wo du den Hintergrund eingestellt hast.

Code: 
div#wrapper {
position:relative;
margin: 0 auto;
width: 800px;
min-height: 100%;
height: auto !important;
height: 100%;
background: url(3cols.png) repeat-y;
border-left: 1px solid #b8b8b8;
border-right: 1px solid #b8b8b8;
background: #f6eb99;
}
 
Danke aber nun ist die Fläche weiß :D, ich weiß einfach nicht wie ich so weg bekomme, der Content Bereich dürfte doch gar nicht so groß sein, da ich ja gar nciht so viel Inhalt habe...
lg
 
Offensichtlich hast du meine Tutorials nicht richtig studiert, denn sinnigerweise erstellst du dir für das DIV #wrapper ein Hintergrundbild (3cols.png), das die Hintergrundfarben der einzelnen Spalten enthält - Stichwort: "Faux-Columns".

Du kannst ja mal die ganzen <br>-Tags aus dem Quellcode rausnehmen und dir anschliessend anschauen, was mit den Spaltenhöhen geschieht bzw. bis wo sie dann nur noch reichen.

Und eben diese <br>-Tags sorgen derzeit dafür, dass die Box höher ist, als ihr tatsächlicher Inhalt.
 
Hi
Ich hab wieder mal ein Problem zwar nicht mit diesem Layout aber du kannst mir hoffentlich trotzdem helfen und zwar wird das Layout im IE richtig dargestellt und in FF nicht. Woran könnte das liegen? Hier der Code:
HTML: 
<!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=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">

body 
{
background: #333333;
}

div#container
{
width: 800px;
margin: 0 auto;
background: #b8b8b8;
}

div#header 
{
width: 800px;
height: 120px;
background: #b8b8b8;
}

div#topNavi
{
width: 800px;
height: 30px;
background: #CCCCCC;
}

div#leftCol
{
width: 150px;
background: #b8b8b8;
float: left;
}

div#rightCol
{
width: 650px;
float: right;
min-height: 400px;
background: #fff;
}

div#footer
{
width: 800px;
height: 20px;
background: #CCCCCC;
}

.clear { /* stellt nach den floatenden Boxen wieder den normalen Textfluss her */
clear: both;
font-size: 1px;
}

</style>
</head>

<body>
<div id="container">
	<div id="header">
	Header
	</div>
	<div id="topNavi">
	Top Navi
	</div>
	<div id="leftCol">
	LeftCol
	</div>
	<div id="rightCol">
	rightCol
	</div>
	<div id="footer">
	Footer
	</div>
	<div class="clear"></div>
</div>
</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück