4. CSS Layout Frage

CSS Layout Frage

  • T

    Hallo

    Ich bin an einem CSS Layout dran und ich hänge bei der Realisierung.
    Hier ist ein einfaches Bild davon, wie es aussehen soll.
    http://www.bernhardwanger.com/csslayout.jpg

    Die zwei divs oben (das dunkelgraue und das schwarze) sind kein Problem.

    Die Frage ist aber wie ich das News div über das Maintext div bekomme.
    Eigentlich sollte es nicht direkt darüber sein, denn der Text sollte nicht
    unter dem Newsdiv weiter gehen.

    Der rechte Rand vom Maintext div (rechts vom News div) sollte sich je nach Bildschirmgrösse verbreitern. Also fixe Breite für den Text.

    Das footer div sollte sich (auch wenn nur wenig Text im Main div) am unteren Bildschirmrand befinden.

    Kann mir da jemand weiterhelfen?

    Grüsse 🙂

    0
  • D

    wie sind deine divs denn positioniert?
    Du könntest eigentlich einfach das news div eine ebene über dem main-div positionieren und wenn du das relativ machst müsste das glaub ich auch mit dem zeilenumbruch hinhauen.
    Fixe Breite weiß ich jetzt so nicht.
    Und dafür das der footer immer unten is soll es ne js-funktion geben hab ich mal gehört. Du könntest ihn aber auch einfach absolut mit abstand von unten positionieren.

    Am besten du postest mal den Code!

    0
  • F

    Die News-Leiste bekommst du wohl mit CSS nicht so ohne weiteres im IE so zum Laufen (oben und unten bündig).

    Soll sich der Footer beim Scrollen mitbewegen, oder willst du ihn fixed?

    0
  • T
     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body{ margin: 0}

#tophead{
color:black;
background:#003366;
border-bottom:1px solid black;
height:80px;
margin:0 0 0 0;
padding: 0 0 0 10px;
color:#FFFFFF;}

#head{
color:black;
background:#333333;
border-bottom:3px solid black;
height:25px;
margin:0 0 0 0;
padding: 0 0 0 10px;}

#main{
background:#F0F0F0;
color:#000000;
margin:25px 0 0 0;
padding: 10px 10px 10px 10px;}

#footer{
	position: relative;
	padding: 5px 0px 5px 10px;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	background:#333333 ;
	height: auto;
	margin: 30px 0 0 0;
	color:#999999;
	text-align:center;
	font-size:smaller;}
-->
</style>
</head>

<body style="background-color:#FFFFFF">

<!--TOP HEAD-->
<div id="tophead">
  <h1>TopHead</h1>
</div>

<!--HEAD-->
<div id="head">
   Head
</div>

<!--MAIN-->
<div id="main">
ashdkj askjdhaksj dhkajshd kjashd kjashd kjlash dkjash djkashdjk hasjkd haskd a 
ashdkj askjdhaksj dhkajshd kjashd kjashd kjlash dkjash djkashdjk hasjkd haskd a 
ashdkj askjdhaksj dhkajshd kjashd kjashd kjlash dkjash djkashdjk hasjkd haskd a 
ashdkj askjdhaksj dhkajshd kjashd kjashd kjlash dkjash djkashdjk hasjkd haskd a 
ashdkj askjdhaksj dhkajshd kjashd kjashd kjlash dkjash djkashdjk hasjkd haskd a 
ashdkj askjdhaksj dhkajshd kjashd kjashd kjlash dkjash djkashdjk hasjkd haskd a 
ashdkj askjdhaksj dhkajshd kjashd kjashd kjlash dkjash djkashdjk hasjkd haskd a 
</div>

<!--FOOTER-->
<div id="footer"> 
  &copy;2004, bla
</div>

</body>
</html>

    Es wäre zwar super wenn der Footer bei wenig Text ganz am unteren Bildschirmrand
    sitzt, geht aber auch wenn er einfach unter allem (Text und News) ansetzt. Mitscrollen soll er, ja. So wie die anderen Elemente auch.

    Wichtig ist mir das News div.
    Wäre es möglich links ein div mit dem Text, dann das Newsdiv und rechts das leere div? Es muss ja nicht darüber liegen.
    Wie wäre das Möglich? Ich habe es mit float: left versucht, aber dann wird mein
    footer nicht mehr angezeigt.

    Grüsse 🙂

    0
  • F

    Also wegen der Ausdehnung nach unten, die ja variabel ist würde ich erst ein großes DIV mit 100% machen und da hinein, dann linksbündig ein DIV mit fixer Breite für den Text. Das News-DIV dann absolut drüber legen - allerdings schließt es dann nicht mehr bündig mit dem Footer 😞

    Ist denn die News-Leiste höher, oder der Inhalt - oder variiert das? Zu dem Problem mit float: clear:both; hilft da meist 🙂

    0
  • T

    Bin jetzt einen Schritt weiter.

    Jetzt gibt es allerdings noch zwei Probleme:
    Wenn der Text länger als die News ist, sollte das News div trotzdem bis zum
    Footer reichen. Also sowas wie height:100%?

    Wie bringe ich das div mainright auf die gleiche länge wie das main div?
    Solange ich den Text per Editor einfüge kann ich - wenn auch unschön - durch
    <br />'s im mainright div die gleiche Länge erziehlen.
    Was aber, wenn ich später den Text durch ein CMS hinzufüge?
    Gibt es da eine Möglichkeit oder muss ich von den drei div's nebeneinander weg?

    Mein Code: *Sorry* 😉

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body { margin: 0 }
#tophead{
	color:black;
	background:#003366;
	border-bottom:1px solid black;
	height:80px;
	margin:0 0 0 0;
	padding: 0 0 0 10px;
	color:#FFFFFF;
}
#head{
	color:black;
	background:#333333;
	border-bottom:3px solid black;
	height:25px;
	margin:0 0 0 0;
	padding: 0 0 0 10px;
}
#main{
	background:#F0F0F0;
	color:#000000;
	margin:25px 0 0 0;
	padding: 10px 10px 10px 10px;
	width:600px;
	float:left;
}
#news{
	background:#F0F0F0;
	color:#000000;
	margin:0 0 0 0;
	padding: 10px 10px 10px 10px;
	width:200px;
	float:left;
}
#mainright{
	background:#F0F0F0;
	color:#000000;
	margin:25px 0 0 0;
	padding: 10px 10px 10px 10px;
}
#footer {
	position: relative;
	padding: 5px 0px 5px 10px;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	background:#333333 ;
	height: auto;
	margin: 0 0 0 0;
	color:#999999;
	text-align:center;
	font-size:smaller;
	clear:both;
}
-->
</style>
</head>
<body style="background-color:#FFFFFF">

<!--TOP HEAD-->
<div id="tophead">
  <h1>TopHead</h1>
</div>

<!--HEAD-->
<div id="head">
   Head
</div>

<div style="width:100%">
<!--MAIN-->
<div id="main">
ashdkj askjdhaksj dhkajshd kjashd kjashd kjlash dkjash djkashdjk hasjkd haskd a 
ashdkj askjdhaksj dhkajshd kjashd kjashd kjlash dkjash djkashdjk hasjkd haskd a 
ashdkj askjdhaksj dhkajshd kjashd kjashd kjlash dkjash djkashdjk hasjkd haskd a 
ashdkj askjdhaksj dhkajshd kjashd kjashd kjlash dkjash djkashdjk hasjkd haskd a 
ashdkj askjdhaksj dhkajshd kjashd kjashd kjlash dkjash djkashdjk hasjkd haskd a 
ashdkj askjdhaksj dhkajshd kjashd kjashd kjlash dkjash djkashdjk hasjkd haskd a 

</div>

<div id="news">
ashdkj askjdhaksj dhkajshd kjashd kjashd kjlash dkjash djkashdjk hasjkd haskd a 
ashdkj askjdhaksj dhkajshd kjashd kjashd kjlash dkjash djkashdjk hasjkd haskd a 
ashdkj askjdhaksj dhkajshd kjashd kjashd kjlash dkjash djkashdjk hasjkd haskd a 
ashdkj askjdhaksj dhkajshd kjashd kjashd kjlash dkjash djkashdjk hasjkd haskd a 
</div>

<div id="mainright">asdasdasdad</div>

</div>

<!--FOOTER-->
<div id="footer"> 
  &copy;2004, bla
</div>
</body>
</html>

    Grüsse 🙂

    0
  • T

    Kann mir denn niemand weiterhelfen? 😞

    Wo könnte ich Antworten auf meine Fragen finden? Gibts ein deutschschprachiges CSS Forum?

    Grüsse 🙂

    0
  • D

    Ich hab mal bisschen rumprobiert, wird dir aber wahrscheinlich auch nicht helfen.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Bernhard Wanger</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"> 
<!-- 
body { margin: 0 } 
#tophead{ 
    color:black; 
    background:#003366; 
    border-bottom:1px solid black; 
    height:80px; 
    margin:0 0 0 0; 
    padding: 0 0 0 10px; 
    color:#FFFFFF; 
} 
#head{ 
    color:black; 
    background:#333333; 
    border-bottom:3px solid black; 
    height:25px; 
    margin:0 0 0 0; 
    padding: 0 0 0 10px; 
} 
#main{ 
    background:yellow; 
    color:#000000; 
    margin: 25px -25px 0 0; 
    padding: 10px 10px 10px 10px; 
    float:left; 
    padding-right:45%;
} 
#news{ 
    background:red; 
    color:#000000; 
    margin:0 0 25px 0; 
    padding: 10px 10px 10px 10px; 
    width:200px; 
    height:100%;
    float:left;
    position: absolute;
    top: 109px;
    left: 620px;
    z-index: 2;
} 

#footer { 
    position: relative; 
    padding: 5px 0px 5px 10px; 
    border-top: 1px solid #000000; 
    border-bottom: 1px solid #000000; 
    background:#333333 ; 
    height: auto; 
    margin: 25px 0 0 0; 
    color:#999999; 
    text-align:center; 
    font-size:smaller; 
    clear:both; 
} 
--> 
</style> 
</head> 
<body style="background-color:#FFFFFF"> 

<!--TOP HEAD--> 
<div id="tophead"> 
  <h1>TopHead</h1> 
</div> 

<!--HEAD--> 
<div id="head"> 
   Head 
</div> 

<div style="width:100%"> 
<!--MAIN--> 

<div id="main"> 
ashdkjaskjdhaksjdhkajshdkjashdkjashdkj
lashdkjashdjkashdj
khasjkd
haskda
shdkjaskjd
haksjdhkajshdkj
ashdkjashdkjlash
dkjashdjk
ashdjkhasjkdhaskdaashdkjaskjdha
ksjdhkajshdkj
ashdk
jashdkjlashdkjashdjkashdjkhasjkdhaskda
ashdkjaskjdhaksjdhkajshdkjashdkjashdkjlashdkjashdjkashdjkha
sjkdhaskdaashdkjaskjdhak
dfdfdfdf
df
dfdf
dfdf
dfdfdf
dfffffffffffffffffffffffff
dfdddddddddddddddddddddd
dffffffffffffffffhghg h h gh gsjdhkajshdkjashdkjashdkjl
ashdkjashdjkashdjkhasjkdhaskda
ashdkjaskjdhaksjdhkajshdkjashdkjashdkj
lashdkjashdjkashdj
khasjkd
haskda
shdkjaskjd
haksjdhkajshdkj
ashdkjashdkjlash
dkjashdjk
ashdjkhasjkdhaskdaashdkjaskjdha
ksjdhkajshdkj
ashdk
jashdkjlashdkjashdjkashdjkhasjkdhaskda
ashdkjaskjdhaksjdhkajshdkjashdkjashdkjlashdkjashdjkashdjkha
sjkdhaskdaashdkjaskjdhak
sjdhkajshdkjashdkjashdkjl
ashdkjashdjkashdjkhasjkdhaskda
ashdkjaskjdhaksjdhkajshdkjashdkjashdkj
lashdkjashdjkashdj
khasjkd
haskda
shdkjaskjd
haksjdhkajshdkj
ashdkjashdkjlash
dkjashdjk
ashdjkhasjkdhaskdaashdkjaskjdha
ksjdhkajshdkj
ashdk
jashdkjlashdkjashdjkashdjkhasjkdhaskda
ashdkjaskjdhaksjdhkajshdkjashdkjashdkjlashdkjashdjkashdjkha
sjkdhaskdaashdkjaskjdhak
sjdhkajshdkjashdkjashdkjl
ashdkjashdjkashdjkhasjkdhaskda
ashdkjaskjdhaksjdhkajshdkjashdkjashdkj
lashdkjashdjkashdj
khasjkd
haskda
shdkjaskjd
haksjdhkajshdkj
ashdkjashdkjlash
dkjashdjk
ashdjkhasjkdhaskdaashdkjaskjdha
ksjdhkajshdkj
ashdk
jashdkjlashdkjashdjkashdjkhasjkdhaskda
ashdkjaskjdhaksjdhkajshdkjashdkjashdkjlashdkjashdjkashdjkha
sjkdhaskdaashdkjaskjdhak
sjdhkajshdkjashdkjashdkjl
ashdkjashdjkashdjkhasjkdhaskda
ashdkjaskjdhaksjdhkajshdkjashdkjashdkj
lashdkjashdjkashdj
khasjkd
haskda
shdkjaskjd
haksjdhkajshdkj
ashdkjashdkjlash
dkjashdjk
ashdjkhasjkdhaskdaashdkjaskjdha
ksjdhkajshdkj
ashdk
jashdkjlashdkjashdjkashdjkhasjkdhaskda
ashdkjaskjdhaksjdhkajshdkjashdkjashdkjlashdkjashdjkashdjkha
sjkdhaskdaashdkjaskjdhak
sjdhkajshdkjashdkjashdkjl
ashdkjashdjkashdjkhasjkdhaskda
</div> 

<div id="news"> 
ashdk jaskj dhaksj dhkajs hdkjashd kjas hdkjla s hdkjashd
ashdk jaskj dhaksj dhkajs hdkjashd kjas hdkjla s hdkjashd 
ashdk jaskj dhaksj dhkajs hdkjashd kjas hdkjla s hdkjashd 
ashdk jaskj dhaksj dhkajs hdkjashd kjas hdkjla s hdkjashd 
ashdk jaskj dhaksj dhkajs hdkjashd kjas hdkjla s hdkjashd 
ashdk jaskj dhaksj dhkajs hdkjashd kjas hdkjla s hdkjashd 
ashdk jaskj dhaksj dhkajs hdkjashd kjas hdkjla s hdkjashd 
ashdk jaskj dhaksj dhkajs hdkjashd kjas hdkjla s hdkjashd 
</div> 

<!--FOOTER--> 
<div id="footer"> 
  &copy;2004, Bernhard Wanger 
</div> 

</body> 
</html>

    Wäre vielleicht ne Alternative, aber das was du machen willst geht meiner Meinung nach mit css nicht. Falls du aber doch ne Möglichkeit findest, unbedingt posten!

    0
Anmelden zum Antworten