✔ Probleme beim Erstellen eines CSS Layouts

Status
Nicht offen für weitere Antworten.
H

Html

Erfahrenes Mitglied
Hallo zusammen, ich versuche mich gerade an einem zweispaltigem CSS Layout.Bisher habe ich alles mit Tabellen und Frames erstellt und wollte mich mal mit dem derzeitigen Standart befassen!

Nun tritt aber gleich das erste Problem auf. Ich habe ein Header - Div mit fester Höhe und fester Breite. In diesem Div möchte ich lediglich einen Text am recht unteren Rand platzieren.

Dachte nicht das das so ein Problem ist ;)

Nach einigen Recherchen im Internet hab ich noch keine befriedigende Lösung gefunden.
Die Lösungen die ich gefunden habe liefern mir nicht das gewünschte Ergebnis. Dazu habe ich mal ein paar Screenshots gemacht.

1. Dreamweaver - so sollte es eigentlich aussehen
2. FF - falsch
3. IE - falsch


Hier mal mein Code:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
  "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Dreispaltiges Layout</title>

<style type="text/css">
<!--

a:visited {
	text-decoration: none;
}

-->
</style>





<style type="text/css">

body {
  	padding:  0px;
	margin: 0px;
	background-color: #CCFF99;
}

#kopf {
  margin-top: 0px;  
  margin-bottom: 10px;
  height:60px;
  width:990px;
  position:relative;

}


#navi {
  width: 160px;
  float: left;
  margin-left: 10px;
 
 
}

#inhalt {
  width: 810px;
  float: left;
  margin-left: 10px;
  background-color: #FFFFFF;  
}

#fuss {
  clear: both;
  background-color: gray;
}

#headline {
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24pt;
	font-style: normal;
	color: #FFFFFF;
	position:absolute;
	bottom: 0px;
	text-align:right;


}


#naviInner{
	
	list-style-type:none;
	margin-left:0px;
	padding-left:0px;
}



#naviInner li a{
	
	color: #black;
	
}

#naviInner li a:hover{
	
	color: #silver;
	
}


</style>

</head>
<body>
<div id="kopf">

		<p id="headline">Ortsgemeinde Hübingen</p>
	
</div>

<div id="navi">
  <div><img src="oben160gelb.gif"></div>
 
	<ul id="naviInner">
 		<li><a href="">Home</a></li>
 		<li> <a href="">Links</a></li>
 	</ul>
  
  <div> <img src="unten160gelb1.gif"></div>
</div>

<div id="inhalt">

<p>Aber nun gut, wir sind also weitergestiefelt und ich mu&szlig; sagen, der Weg 
ist sch&ouml;n, aber anstrengend. Oder sollte ich vielleicht besser sagen, 
anstrengend aber sch&ouml;n ? :-) Auf jeden Fall hatte es auf diesem Wegst&uuml;ck ein 
paar wenige Schattenpl&auml;tze, die auch immer mit Leuten gef&uuml;llt waren.
Nach einer 
Weile kommt man am Wall Arch vorbei (leider nur sehr schwer zu photographieren, 
aber ich habe es trotzdem versucht. Das Ding ist auch so gro&szlig;, da&szlig; man es 
nicht wirklich gut auf den Film bekommt). Danach wurde der Weg richtig lustig.</p>


</div>



</div>

</body>
</html>

Hoffe es kann mir jemand helfen!

mfG Olli
 

Anhänge

  • dreamweaver.jpg
    dreamweaver.jpg
    16,3 KB · Aufrufe: 26
  • ff.jpg
    ff.jpg
    16,8 KB · Aufrufe: 23
  • ie.jpg
    ie.jpg
    17,1 KB · Aufrufe: 19
Hi,

und was wird im IE im Vergleich zur DW-Anzeige verkehrt angezeigt?

Wenn du noch die Polsterungseigenschaften des p-Elements zurücksetzt, wird die Seite im FF gleichermaßen dargestellt.

Und was hat es mit dem letzten </div>-Tag am Seitenende auf sich, dem der dazugehörige <div>-Tag fehlt?
 
Der Unterschied ist, dass der Text im DW wie gewollt rechts ausgerichtet ist und im IE wie auch im FF ist er links!

Aber was bitte sind Polsterungseigenschaften, habe den Begriff noch nie gehört!?
 
Code: 
#headline {

        font-family: Arial, Helvetica, sans-serif;
        font-size: 24pt;
        font-style: normal;
        color: #FFFFFF;
        position:absolute;
        bottom: 0px;
        right:0;
        text-align:right;
}

Mit Polsterungseigenschaften wird umgangssprachlich von der margin- und padding-Eigenschaft gesprochen, die in den Browsern unterschiedliche Initialwerte für die einzelnen HTML-Elemente besitzen, und daher zunächst auf null zurückgesetzt werden, um einheitliche Abstände in der Seitendarstellung zu erzielen.
 
Habe es jetzt so gelöst:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
  "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Dreispaltiges Layout</title>

<style type="text/css">
<!--

a:visited {
	text-decoration: none;
}

-->
</style>





<style type="text/css">

body {
  	padding:  0px;
	margin: 0px;
	background-color: #CCFF99;
}

#kopf {
  margin: 0px 0px 10px 0px;  
  padding: 0px 0px 0px 0px;
  height:60px;
  width:990px;
  position:relative;
 
}




#headline {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24pt;
	font-style: normal;
	color: #FFFFFF;
	right:0px;
  	padding: 0px 0px 0px 0px;
  	margin:0px 0px 0px 0px;
	position:absolute;
	bottom: 0px;
	
}


#navi {
  width: 160px;
  float: left;
  margin-left: 10px;
 
 
}

#inhalt {
  width: 810px;
  float: left;
  margin-left: 10px;
  background-color: #FFFFFF;  
}

#fuss {
  clear: both;
  background-color: gray;
}


#naviInner{
	
	list-style-type:none;
	margin-left:0px;
	padding-left:0px;
}



#naviInner li a{
	
	color: #black;
	
}

#naviInner li a:hover{
	
	color: #silver;
	
}


</style>

</head>
<body>
<div id="kopf">

		<div id="headline">Ortsgemeinde Hübingen</div>
	
</div>

<div id="navi">
  <div><img src="oben160gelb.gif"></div>
 
	<ul id="naviInner">
 		<li><a href="">Home</a></li>
 		<li> <a href="">Links</a></li>
 	</ul>
  
  <div> <img src="unten160gelb1.gif"></div>
</div>

<div id="inhalt">

<p>Aber nun gut, wir sind also weitergestiefelt und ich mu&szlig; sagen, der Weg 
ist sch&ouml;n, aber anstrengend. Oder sollte ich vielleicht besser sagen, 
anstrengend aber sch&ouml;n ? :-) Auf jeden Fall hatte es auf diesem Wegst&uuml;ck ein 
paar wenige Schattenpl&auml;tze, die auch immer mit Leuten gef&uuml;llt waren.
Nach einer 
Weile kommt man am Wall Arch vorbei (leider nur sehr schwer zu photographieren, 
aber ich habe es trotzdem versucht. Das Ding ist auch so gro&szlig;, da&szlig; man es 
nicht wirklich gut auf den Film bekommt). Danach wurde der Weg richtig lustig.</p>


</div>





</body>
</html>

Nur leider macht der IE noch etwas Probleme: Die Überschrift liegt nicht genau in einer Flucht mit dem Inhalt-DIV.
Im Firefox ist es bündig mit dem Rand des Inhalt-DIV's.
 

Anhänge

  • ie1.jpg
    ie1.jpg
    19,4 KB · Aufrufe: 18
Das Dilemma beginnt schon bei der Navigation, wo im IE6 der "Double-Margin-Bug" in Erscheinung tritt, und anstelle der margin-left:10px-Deklaration der linke Außenabstand 20px beträgt.

Code: 
#navi {
  width: 160px;
  float: left;
  margin-left: 10px;
  display:inline;
}
 
Sorry aber gerade ist das nächste Problem aufgetreten:

Möchte gerne die Hintergrundfarbe des Navigationsleiste durchlaufen lassen. Dazu habe ich die Liste in ein weiters DIV gesteckt und dem DIV die Hintergrundfarbe zugewiesen.

Doch leider dehnt sich der Hintergrund nicht aus...


HTML: 
<style type="text/css">
<!--

.......


#navi {

  width: 160px;
  float: left;
  margin-left: 10px;
 display:inline;
 
}


#naviInner{
	
	background-color: #FFFFCC;
	height:auto;
}

#naviInner1{
	
	list-style-type:none;
	margin-left:0px;
	padding-left:0px;
	
}



#naviInner1 li a{
	
	color: black;
	text-decoration:none
	
}

#naviInner li a:hover{
	
	color: silver;
	text-decoration:underline;
}

-->
</style>

</head>
<body>

.....

<div id="navi">
  <div><img src="oben160gelb.gif"></div>
 
 	<div id="naviInner">
	<ul id="naviInner1">
 		<li><a href="fgdsg.html"  >Home</a></li>
 		<li> <a href="fgsdfg.html">Links</a></li>
 	</ul>
  	</div>
  
  <div> <img src="unten160gelb1.gif"></div>
</div>

.....
 

Anhänge

  • nav.GIF
    nav.GIF
    2,4 KB · Aufrufe: 16
Die Hintergrundfarbe "dehnt" sich erst dann aus, wenn der Inhalt in dem Element #naviInner erweitert wird.

Und da du die vertikalen Polsterungseigenschaften des ul-Elements nicht zurückgesetzt hast, entsteht eine Lücke zur oberen und unteren Grafik.
 
Leider habe ich damit immer noch ein Problem:

Im FF habe ich immer noch einen geringen Abstand zwischen dem oberen Bild und der Liste.

HTML: 
#navi {
  width: 160px;
  float: left;
  margin-left: 10px;
  display:inline;

}

#naviBild{
	
	
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	height:auto;
}


#naviInner{
	
	list-style-type:none;
	background-color:#FFFFCC;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	background-color: #FFFFCC;
}

.......

<div id="navi">
  <div id="naviBild"><img src="oben160gelb.gif"></div>
 
 	
	<ul id="naviInner">
 		<li><a href="fgdsg.html"  >Home</a></li>
 		<li> <a href="fgsdfg.html">Links</a></li>
 	</ul>
 	
  
  <div id="naviBild"> <img src="unten160gelb1.gif"></div>
</div>

......

Habe schon einige Dinge ausprobiert doch ohne Erfolg...
 

Anhänge

  • nav1.GIF
    nav1.GIF
    2 KB · Aufrufe: 21
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück