| Autor |
Nachricht |
Sunlifestyle
Threadersteller
Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht: 
|
Verfasst Mo 19.03.2007 16:37
Titel [css] 3 spalten layout problem |
  |
|
hallo,
ich habe ein problem.
habe mir per css ein 3 spaltiges layout ebtwickelt.
über den 3 spalten befindet sich eine div für den banner und darüber eine suchen leiste.
hinter allen divs liegt noch ein div "hg", dies sollte die gemeinsamme hintergrundfarbe der divs steuern.
wenn der content mal größer wird als die beiden navi leisten würde man dies sehen, weil die navis ja nicht mit dem content mitwachsen.
nun wollte ich den body trick mit der höhenangabe 100% machen.leider klappt das nicht ganz.
der hintergrund der 3 spalten ist zwar komplett weiß, aber sobald man mehr content hat als der hg anzeigen kann(also wenn man scrollen muss) hört der hintergrund auf...er wächst also nur bis 1024 mit.
hier nochmal meine css definierten divs:
BODY
| Code: | body,html {
background-image:url(../bilder/hg.jpg);
background-repeat:repeat-x;
margin: 0px;
background-color:#cce601;
height: 100%;
} |
DIE 3 SPALTEN
| Code: | #content {
position: absolute;
width: 580px;
left: 210px;
top: 240px;
height: auto;
background-color:#FFFFFF;
}
#right {
position: absolute;
width: 150px;
height: auto;
left: 800px;
top: 240px;
}
#left {
position: absolute;
width: 150px;
left: 50px;
top: 240px;
height: auto;
} |
DER BACKGROUND
| Code: | #mainhg {
position: absolute;
width: 900px;
left: 50px;
height: 100%;
background-color: #ffffff;
} |
habe schon viel probiert und weiß nicht mehr weiter. 
Weiß von euch einer ne lösung?
danke!
Zuletzt bearbeitet von Sunlifestyle am Mo 19.03.2007 16:38, insgesamt 1-mal bearbeitet
|
|
| |
   |
 |
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 19.03.2007 17:02
Titel
|
|
|
| Code: | body, html {
height:100%;
}
#main {
min-height:100%;
height:auto !important;
height:100%;
background:#eee;
}
#left {
height:1500px;
width:10%;
background:#ccc;
} |
| Code: | <div id="main">
<div id="left">test</div>
</div> |
Zuletzt bearbeitet von m am Mo 19.03.2007 17:03, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
Sunlifestyle
Threadersteller
Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht:
|
Verfasst Mo 19.03.2007 17:18
Titel
|
|
|
also entweder bin ick behämmert..oder ich weiß auch nicht...man sieht an deinem bsp klasse wie es geht....habe es auch ausprobiert..geht einwandfrei...aber jetzt habe ich es auf mein bsp. übertragen...und nat. geht es wieder nicht...
kannste mir vllt sagen was noch falsch sein könnte?!
CSS
| Code: |
body,html {
background-image:url(../bilder/hg.jpg);
background-repeat:repeat-x;
margin: 0px;
background-color:#cce601;
height: 100%;
}
#content {
position: absolute;
width: 580px;
left: 210px;
top: 240px;
height: auto;
background-color:#FFFFFF;
}
#right {
position: absolute;
width: 150px;
height: auto;
left: 800px;
top: 240px;
}
#left {
position: absolute;
width: 150px;
left: 50px;
top: 240px;
height: auto;
}
#mainhg {
position: absolute;
width: 950px;
left: 50px;
min-height:100%;
height:auto !important;
height:100%;
background-color: #ffffff;
} |
HTML
| Code: | <!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" title="currentStyle">
@import "css/cmmedia.css";
</head>
<body>
<div id="mainhg">
<div class="Stil16" id="head"><span class="Stil18"> clala</span><span class="Stil17">lala</span></div>
<div id="sec"><img src="bilder/secondmenue.gif" alt="Cm-Blog" width="25" height="100" /><img src="bilder/secondmenue1.gif" alt="stil-etage" width="25" height="100" /></div>
<div id="banner">
</div>
<div id="left">
<ul>
<li>
<a href="link.html" target="_self" title="link">link</a></li>
<li>
<a href="link.html" target="_self" title="link">link</a></li>
<li>
<a href="link.html" target="_self" title="link">link</a></li>
<li>
<a href="link.html" target="_self" title="link">link</a></li>
<li>
<a href="link.html" target="_self" title="link">link</a></li>
</ul>
</div>
<div id="content">
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
</div>
<div id="right">fhjduf</div>
</div>
</body>
</html> |
|
|
| |
|
|
Sunlifestyle
Threadersteller
Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht:
|
Verfasst Mo 19.03.2007 19:19
Titel
|
|
|
also ich habe jetzt himmel und hölle probiert..ich bekomme es einfach nicht hin... 
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 19.03.2007 19:47
Titel
|
|
|
Hier mal ein kleines simples Beispiel:
| Code: | <!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">
* {
margin:0;
padding:0;
}
body, html {
height:100%;
}
#wrapper {
margin:0 auto;
width:900px;
min-height:100%;
height:auto !important;
height:100%;
background:#ccc;
}
#wrapper #left {
float:left;
width:200px;
}
#wrapper #right {
float:right;
width:200px;
}
#wrapper #content {
margin:0 200px;
height:1600px;
background:#eee;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
<div id="content">Inhalt</div>
</div>
</body>
</html> |
|
|
| |
|
|
Sunlifestyle
Threadersteller
Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht:
|
Verfasst Mo 19.03.2007 20:30
Titel
|
|
|
so habe nochmal alles gegeben....zwar geht es immer noch nicht aber ich denke ich konnte den fehler eingränzen.
wenn ich mir deine letztes demo in dreamweaver übertrage und in den vorschau-modus gehe, kann man ganz genau sehen das alle divs von dem div "wrapper" umschlossen werden.
mache ich das allerdings bei mir, kann ich den div nicht sehen.
warum auch immer.
ich habe alles geprüft...und es ist alles an seiner stelle.
vorsichtshalber posste ich nochmal die jetzige css+ html
an m geht schonmal nen großes dankeschön für seine helden taten!!!!
CSS:
| Code: | * {
margin:0;
padding:0;
}
body,html {
height: 100%;
background-image:url(../bilder/hg.jpg);
background-repeat:repeat-x;
background-color:#cce601;
}
#content {
position: absolute;
width: 580px;
left: 160px;
top: 230px;
height: 1600px;
background-color:#FFFFFF;
}
#right {
position: absolute;
width: 150px;
left: 750px;
top: 230px;
}
#left {
position: absolute;
width: 150px;
left: 0px;
top: 230px;
}
#mainhg {
position: absolute;
margin:0 auto;
left: 50px;
width:900px;
min-height:100%;
height:auto !important;
height:100%;
background:#ccc;
} |
HTML
| Code: | <!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" title="currentStyle">
@import "css/cmmedia.css";
</style>
</head>
<body>
<div id="mainhg">
<div class="Stil16" id="head"><span class="Stil18"> coolboards</span><span class="Stil17">media</span></div>
<div id="banner"></div>
<div id="left">
<ul>
<li>
<a href="link.html" target="_self" title="link">link</a></li>
<li>
<a href="link.html" target="_self" title="link">link</a></li>
<li>
<a href="link.html" target="_self" title="link">link</a></li>
<li>
<a href="link.html" target="_self" title="link">link</a></li>
<li>
<a href="link.html" target="_self" title="link">link</a></li>
</ul>
</div>
<div id="content">
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
</div>
<div id="right">fhjduf</div>
</div>
</body>
</html> |
|
|
| |
|
|
Sunlifestyle
Threadersteller
Dabei seit: 20.12.2005
Ort: Hoyerswerda bei Dresden
Alter: -
Geschlecht:
|
Verfasst Mo 19.03.2007 20:46
Titel
|
|
|
fehler gefunden.
es geht nicht weil ich content, right, left die eigenschaft position:absolute gegeben habe.
allerdings ist dies wieder nicht so schön weil ich dadurch die divs im maindiv nicht positionieren kann.
mhh...
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 19.03.2007 20:47
Titel
|
|
|
Das liegt an den absoluten Positionierungen. Warum übernimmst du nicht einfach mein
Beispiel?- ist doch genau dass was du darstellen möchtest? Naja, trotzdem, hier einfach
nochmal eine weitere Variante, hab dir da gerade einfach nur mal in deinem Quelltext
ein wenig was geändert, die Elemente werden nun per float Eigenschaft nebeneinander
gesetzt und damit das äußere Element die inneren umfasst, sitzt unten das <br style="clear:both;" />.
Zum clearen gibt es verschiedene Möglichkeiten, habe jetzt einfach mal die schnellste
gewählt. Denke jetzt sollte es soweit klar sein.
| Code: | <!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">
* {
margin:0;
padding:0;
}
body,html {
height: 100%;
background-color:#cce601;
}
#content {
margin-top:230px;
width: 580px;
float:left;
height: 1600px;
background-color:#FFFFFF;
}
#right {
float: left;
margin-top:230px;
width: 150px;
}
#left {
float:left;
margin-top:230px;
width: 150px;
}
#mainhg {
margin-left:50px;
width:900px;
min-height:100%;
height:auto !important;
height:100%;
background:#ccc;
}
</style>
</head>
<body>
<div id="mainhg">
<div class="Stil16" id="head"><span class="Stil18"> coolboards</span><span class="Stil17">media</span></div>
<div id="banner"></div>
<div id="left">
<ul>
<li>
<a href="link.html" target="_self" title="link">link</a></li>
<li>
<a href="link.html" target="_self" title="link">link</a></li>
<li>
<a href="link.html" target="_self" title="link">link</a></li>
<li>
<a href="link.html" target="_self" title="link">link</a></li>
<li>
<a href="link.html" target="_self" title="link">link</a></li>
</ul>
</div>
<div id="content">
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </p>
</div>
<div id="right">fhjduf</div>
<br style="clear:both; " />
</div>
</body>
</html> |
Zuletzt bearbeitet von m am Mo 19.03.2007 20:49, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[CSS] Problem mit 3-Spalten Layout
problem mit 3 spalten css-layout
CSS Layout Problem 3 Spalten ich verzweifel (Tabbellenmensch
Zwei Spalten Layout. Linke Seite fix
[CSS] 3-spalten layout - aber anders als sonst!
css 3 spalten layout mit fester mitte - bitte um hilfe!
|
|
Willkommen auf dem Portal für Mediengestalter
