08.05.2006, 13:49
|
|||
|
|||
DIV Länge automatisch anpassen
Guten Tag
Ich habe zwei kleine Probleme die mir wirklich Kopfschmerzen bereiten.  Im Anhang ist das Index und die CSS, damit ich hier nicht den ganzen Code posten muss  Nun zu meinem Problem. Wie man in der Grafik sieht, möchte ich wissen wie man die beiden DIVs auf 100% strecken kann. Ich habe mir alles bekannte bereits probiert doch nichts führt zum Erfolg. Und das zweite ist der Footer. Wieso wird der im FF so komisch angezeigt. Die Grafik vom Footer ist irgend wo im Content Bereich.  Vielen Dank schon im Voraus Mit freundlichen Grüssen judicious 
|
| Sponsored Links |
|
08.05.2006, 14:30
|
||||
|
||||
|
Suche nach "faux columns" ...
__________________
“My software never has bugs. It just develops random features ...”  » DevShack - die Website des freien Webentwicklers Boris Bojic
|
| Sponsored Links |
|
08.05.2006, 15:22
|
|||
|
|||
|
Die bringen mir nix. Ich weiss echt nicht an was das liegt.
 Das weiss grüne habe ich als Hintergrund definiert für die rote Box. Im langem div also in dem mit mehr inhalt wird der BG auch angezeigt aber links wird einfach nur noch die hälfte des hintergrunds angezeigt.
|
|
08.05.2006, 15:32
|
||||
|
||||
|
Dann hast du es falsch implementiert. Wie sieht denn dein Code dazu aus?
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic
|
|
08.05.2006, 15:43
|
|||
|
|||
|
Die beiden Files sind im Anhang. Jetzt funktioniert es im FF aber nicht mehr im IE
 
|
|
08.05.2006, 15:53
|
||||
|
||||
|
Meinst du, hier hat jemand Lust, erstmal deine Datei herunter zu laden, zu entpacken und dann zu entwursteln?
Schreib dein CSS und HTML hier rein oder stell es online.
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic
|
|
08.05.2006, 15:56
|
|||
|
|||
|
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>
HOSTBLOCK | Solid As A Rock ::: MULTIPLE DOMAIN Hosting ::: Reseller Plans
</title>
<!--
Dieser Source Code ist von Kontrastlos.ch
\\|//
- -
C(o o)D
~
-o0o-o0o-
-->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="de,at" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Reply-to" content="info@hostblock.ch" />
<meta name="author" content="hostblock.ch" />
<meta name="description" content="HOSTBLOCK | Solid As A Rock | Superb Multiple Domain Hosting" />
<meta name="generator" content="Bluefish" />
<meta name="keywords" content=
"hosting, hostblock, hostblock.ch, reseller, reseller-plan, host, web, provider, isp, internet, virtual, server, shared, dedicated, administration, firewall, backup, unix, red hat, linux, support, domain, registration, pointing, pointer, program, provision, reseller, subdomain, webspace, space, speicherplatz, ftp, cgi, perl, script, ssi, ssl, frontpage, php, php 4, flash, shockwave, mysql, database, datenbank, statische ip-adresse, ip, support, statistiken, webalizer, stats, pop3, smtp, e-mail, mail, webmail, forwarder, autoresponder, gnstig, e-commerce, commerce, shop, multiople domain hosting, multiple-domain, multi-domain, visitenkarten" />
<meta name="robots" content="index,follow" />
<meta name="copyright" content="Copyright (c) hostblock.ch" />
<meta name="rating" content="general" />
<meta name="language" content="swiss" />
<link href="favicon.ico" rel="shortcut icon" />
<link href="css2.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style type="text/css" media="screen">
#site{
height: 100%;
border: 1px solid #C3C3B7;
}
#sidebar{
height: 100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="site">
<div id="head"></div>
<div id="menu">
[img]http://www.hostblock.ch/images/home.gif[/img]
[img]http://www.hostblock.ch/images/hosting.gif[/img]
[img]http://www.hostblock.ch/images/products.gif[/img]
[img]http://www.hostblock.ch/images/support.gif[/img]
[img]http://www.hostblock.ch/images/contact.gif[/img]
</div>
<div id="banner"></div>
<div id="submenu">
submenu
</div>
<div id="main">
<div id="sidebar">
<div id="newsborder">
<div id="news">
Headlines by Newsfactor
<script type="text/javascript" src="http://www.freenewsfeed.com/headlines/?javasc=1&basic_blue=1" ></script>
Newsfactor News
</p>
[img]http://sfx-images.mozilla.org/affiliates/Buttons/88x31/get.gif[/img]
</div>
</div>
</div>
<div id="content">
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
</div>
</div>
<div id="footer">
2006 HOSTBLOCK.CH
</div>
</div>
</body>
</html>
Code:
html{
height: 100%;
}
html, body { margin:0; padding:0; height:100%; }
body{
padding:0px;
margin:0px;
height: 100%;
background: #E8E8E8 url('images/sitebg.gif') repeat-y;
background-position: left;
color: #2b2b2b;
font-family: Tahoma, Arial, Sans-serif;
font-size: 12px;
line-height: 140%;
}
#site{
background: #F4F4F4;
width: 779px;
height: 100% auto;
}
#main{
background: #F4F4F4;
width: 778px;
height: 100%;
}
#head{
background: #FFF url('http://hostblock.ch/images/headerlogo.gif') no-repeat;
width: 779px;
height: 75px;
}
#menu{
background: #FFF url('http://hostblock.ch/images/nav_bg.gif') repeat-x;
width: 780px;
height: 25px;
text-align: right;
}
#banner{
background: #FFF url('images/banner.jpg') no-repeat;
background-position: bottom left;
width: 779px;
height: 188px;
}
#submenu{
background: #FFF url('images/submenu.jpg') no-repeat;
width: 779px;
height: 44px;
}
#sidebar{
float: left;
background: #E8E8E8;
width: 243px;
height: 100%;
margin: 0px;
}
#newsborder{
background: #FFF;
border: 1px #CCC solid;
width: 204px;
margin: 19px;
margin-top: 25px;
height: auto;
}
#news{
background: #F4F4F4;
width: 168px;
padding-left: 11px;
padding-right: 11px;
padding-top: 15px;
padding-bottom: 15px;
border: 7px #FFF solid;
height: auto;
}
#content{
background: #F4F4F4;
width: 532px;
padding: 1px;
height: 100%;
float:left;
}
#footer{
background: #FFF url('http://hostblock.ch/images/footer_bg.gif') repeat-x;
width: 780px;
height: 38px;
border-top: 1px solid #B9B9BE;
font-family: Verdana, Times New Roman, Georgia, Trebuchet Ms,Serif;
color: #999;
font-size: 0.8em;
text-align: center;
}
a:active{ color: #015B8D; text-decoration: none; }
a:link{ color: #015B8D; text-decoration: none; }
a:visited{ color: #015B8D; text-decoration: none; }
a:hover{ color: #015B8D; text-decoration: none; }
img {
border: 0px;
}
h3{
color: #AE1510;
font-family: Times New Roman, Georgia, Trebuchet Ms,Serif;
font-size: 1.6em;
font-weight: lighter;
margin-bottom: 10px;
}
h4{
color: #AE1510;
font-family: Trebuchet Ms,Serif;
font-size: 1em;
margin-bottom: 0;
}
h5{
color: #333333;
font-family: Trebuchet Ms,Serif;
font-size: 1em;
margin-bottom: 0;
}
#menu a:active{ color: #797979; text-decoration: none; }
#menu a:link{ color: #797979; text-decoration: none; }
#menu a:visited{ color: #797979; text-decoration: none; }
#menu a:hover{ color: #525252; text-decoration: none; }
#menu ul{
border: 0px;
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
}
#menu ul li{
display: block;
margin: 0px;
text-align: center;
}
#menu ul li a{
border-bottom: 1px solid #B9B9BE;
display: block;
vertical-align: middle;
height: 21px;
margin: 0px;
padding-top: 4.5px;
padding-left: 24px;
text-align: left;
width: 240px;
}
#productshome{
background-repeat: no-repeat;
height: 280px ;
margin: auto;
border-top: 1px solid #EAEAEA;
border-bottom: 1px solid #EAEAEA;
padding-top: -0px;
padding-bottom: 20px;
width: 99%;
}
|
|
08.05.2006, 15:59
|
||||
|
||||
|
Soweit ich das erkennen kann, gehört das zu kachelnde Hintergrundbild (mit denen du zwei gleich hohe Spalten "simulierst") in das div #site hinein.
Und du solltest alle height: 100% gegen min-height: 100% austauschen - das ist die korrekte Variante für alle "braven" Browser. Für den IE allein musst du height benutzen, da er kein min-height kennt, es aber so interpretiert (was falsch ist, aber naja ... IE halt).
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic
|
|
08.05.2006, 16:16
|
|||
|
|||
|
ich habe es jetzt einfach mal in main und body gedrückt. so funktioniert es auch. Was jetzt noch bleibt ist der Footer der im FF vollkommen falsch angezeigt wird. ? Wieso auch immer.
Die heights werde ich noch ersetzen, danke für den Hinweis
|
| Sponsored Links |
|
08.05.2006, 16:28
|
||||
|
||||
|
Definiere mal "vollkommen falsch" ... wie soll es aussehen, wie nicht? Sofern du den footer im übrigen nicht absolut positionierst, wird es eh Probleme geben wegen deinen height: 100% - durch diese Angabe brauchen deine Spalten bereits die volle Höhe, für den footer wäre kein Platz mehr.
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic
|
| Sponsored Links |
 |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| DIV Höhe dynamisch anpassen | vaults | CSS | 20 | 26.01.2012 01:05 |
| CSS - CMS - lange Menus Balken/BG oben? | shinobi | CSS | 3 | 13.10.2011 21:12 |
| CSS DIV Layer untereinander zentrieren und Größe automatisch an Inhalt anpassen | computernerd | CSS | 3 | 13.09.2011 19:17 |
| Div an Div anpassen aber wie nur? | skriptkiddie | CSS | 20 | 11.08.2009 14:43 |
| IE soll width von div bei übergroßem inhalt NICHT automatisch anpassen. Wie? | *vivian | CSS | 4 | 15.09.2008 00:42 |
Linear-Darstellung
