Problem mit Positionierung von <div> Containern

Lockhead · #1 (**permalink**) 14.09.2004, 16:06

Hallo euch allen!

Ich bin auch einer von denjenigen die gerade versuchen, CSS zu lernen (gibt ja anscheinend ganz schön viele) und ich komme mit folgendem nicht zurecht:
http://www.lockhead.net/np/indexe.php

Ich habe da oben eine Header, dann nen breiten div-container mit nem background, in diesem div container soll links ein Menü kommen, dann der content, dann eiin 2tes menü.

Dies funktioniert auch in Firefox und Opera - nur im IE nicht. Woran kann das liegen?
Beim IE wird der 3te <div> Container mit dem rechten menü direkt unter den content gesetzt....

Dann: bei der liste im Linken menü hab ich ja nen bild angegeben - dieses wird in Opera + IE nicht richtig angezeigt, im Firefox schon.

Weiß einer wie man das ganz beheben kann?

DANKE, Lock

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>++ lockhead.net ++ lockhead.info ++</title>
	<style type="text/css"> <!-- 
body
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: normal;
	margin-top: 15px;
	margin-bottom: 15px;
	font-size:12px;
	color: #232323;
	text-decoration: none;
}
a:link {
	font-weight: bold;
	color: #474747;
	text-decoration: none;
}
a:visited {
	font-weight: bold;
	color: #474747;
	text-decoration: none;
}
a:hover {
	font-weight: bold;
	color: #CDCDCD;
	text-decoration: none;
}
a:active {
	font-weight: bold;
	color: #474747;
	text-decoration: none;
}

h1 {
	font-size: 13px;
	font-style: strong;
	text-decoration: underline;
}
h2 {
	font-style: strong;
	text-decoration: underline;
}
h3 {
	color: #232323;
	text-decoration: none;
}
h4
{

}
table
{
	margin: 0px;
	font-size: 12px;
	text-decoration: none;
	font-weight: normal;
}
th
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align:left;
	vertical-align: top;
}
td
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align:left;
	vertical-align: top;
}

#title {
height:100px;
width:1000px;
padding:0px;
background-image: url(img/header.gif);
margin:0px auto;
float: left;
}
#main
{
padding:0px auto;
width:1000px;
float: left;
background-image: url(img/background.gif); 
background-repeat: repeat-y;
}
#left, #right {
width:156px;
margin: 0px;
padding: 0px;
float: left;
}
#left h4
{
font-weight:bold;
font-size: 13px;
margin:0px;
background-image: url(img/nav_left_top.gif); 
padding-left: 15px;
}
#left ul
{
list-style-image: url(img/point.gif);
margin-top:1px;
margin-bottom:1px;
margin-left:1px;
margin-right:0px;
position: relative;
}
#right_bg
{
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
background-image: url(img/nav_right_bg.gif); 
background-repeat: repeat-y;
padding-left: 5px;
}
#right_foot
{
margin:0px;
vertical-align:top;
background-image: url(img/nav_right_foot.gif); 
background-repeat: no-repeat;
padding-left: 5px;
}
#right table
{
margin: 0px;
padding: 0px;
}
#right form
{
margin: 0px;
padding: 0px;
}
#right h4
{
font-weight:bold;
margin:0px;
font-size: 13px;
background-image: url(img/nav_right_top.gif); 
background-repeat: no-repeat;
padding-left: 13px;
}
#right ol
{
list-style-position:outside;
list-style-type: none;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
padding-left: 12px;
}
#right ul
{
list-style-position:outside;
list-style-type: disc;
margin-top:0px;
margin-bottom:0px;
margin-left:1px;
margin-right:0px;
padding-left: 25px;
}
#content {
float: left;
width:688px;
margin-left:0px;
padding-top:10px;
margin-bottom: 0px;
}

#footer {
width:1000px;
float: left;
padding: 0px;
background-image: url(img/foot.gif);
background-repeat: no-repeat; 
text-align:center;
margin-top: 0px;
}

     -->
</style>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
	<div id="title">
		
	</div>
	<div id="main">
		<div id="left">
			<ul>
			[*]News
			[*]Submit
			[*]Search
			[/list]			
		</div>

		<div id="content">
content
		</div>

		<div id="right">
			<h4>Latest News</h4>
			<div id="right_bg">
			News....
			</div>
			<div id="right_foot">
			
			</div>
		</div>
	</div>
	<div id="footer">
		Footer
	</div>
</body>
</html>

Dieter · #2 (**permalink**) 14.09.2004, 16:30

Was Deine Listengrafik angeht: Du gibst ja nur für die Liste selber eine Grafik an, nicht aber für den Listenpunkt!

Siehe hier:

Code:

#left ul
{
list-style-image: url(img/point.gif);

Gib das Gleiche auch für[*] an und es wird funktionieren!

Dieter · #3 (**permalink**) 14.09.2004, 16:33

Das hier

Code:

width:1000px;

ist aber schon sehr optimistisch, was die Verbreitung grosser Monitore angeht!?

koDiacc · #4 (**permalink**) 14.09.2004, 16:35

du gibst für left und right float: left; .. ist bisschen komisch oder ?! also ich würde dem rechten right geben dem linken left und dem in der mitte garnix (glaub ich) und dann margin-left / right benutzen.
Schau mal hier .. da is sowas ähnliches ganz gut (ich bin auch erst CSS anfänger also mein geschriebenes ohne gewär hier

)

http://css.maxdesign.com.au/floatuto...torial0916.htm

Musst bisschen scrollen dann siehst du die grafik und drunter den code

ulle · #5 (**permalink**) 14.09.2004, 16:40

Zitat:

Beim IE wird der 3te <div> Container mit dem rechten menü direkt unter den content gesetzt....

Kann ich nicht bestätigen

siehe hier Problem gepellt

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
   <title>++ lockhead.net ++ lockhead.info ++</title> 
   <style type="text/css"> <!-- 
body 
{ 
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   font-size: 12px; 
   line-height: normal; 
   margin-top: 15px; 
   margin-bottom: 15px; 
   font-size:12px; 
   color: #232323; 
   text-decoration: none; 
   
   background-color: #FFFF99;/*sichtbar machen*/
} 
#main 
{    background-color: #FF9999;/*sichtbar machen*/
padding:0px auto; 
width:1000px; 
float: left; 
} 

#left, #right { background-color: #FF0000;/*sichtbar machen*/
width:156px; 
float: left; 
} 
#content {    background-color: #FFFF00;/*sichtbar machen*/
float: left; 
width:688px; 
} 

#right_foot 
{    background-color: #0000FF;/*sichtbar machen*/
}
     --> 
</style> 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
</head> 
<body> 
   <div id="main"> 
   
      <div id="left">left
left
left</div> 
	  
      <div id="content">content
content
content
content
content
content</div> 
	  
      <div id="right">right
right
	  		<div id="right_foot">right_foot
right_foot</div> 
      </div> 
	  
   </div> 
</body> 
</html>

In Anlehnung

http://www.xhtmlforum.de/viewtopic.php?t=1399

Zitat:

also ich würde dem rechten right geben

nicht nötig, da ja alle float: left; haben, auch der #content

Hunter S.Thompson · #6 (**permalink**) 14.09.2004, 16:52

also ich weiss ja nicht ob das vielleicht sogar extra ist

was ist das?

Hunter S.Thompson · #7 (**permalink**) 14.09.2004, 17:01

wie schonmal gesagt. wozu listen?
<div id="left">
<ul> [*]News [*]Submit [*]Search [/list]</div>

=

<div id="left">
Submit
Submit
Submit
</div>

///css:

div.left a
{ display: block; <----ist normalerweise default auf block;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
background-image: url(bla.gif);<------hier so ne art gefakter listenpunkt, der sich aber viel viel besser ausrichten lässt
background-repeat: no-repeat;
background-position: 1px 4px;
}

oder sind eurer meinung nach listen da besser? wenn ja warum? der code ist kürzer, besser strukturiet und valide und besser anzupassen undundund

ulle · #8 (**permalink**) 14.09.2004, 17:11

Zitat:

oder sind eurer meinung nach listen da besser?

Das ganze sollte auch ein lesbares Dokument ohne Style sein, einfach mal oben den Style abschalten.

Zitat:

Trenne Inhalt und Design

Lockhead · #9 (**permalink**) 14.09.2004, 18:00

Zitat:

Zitat von Dieter Krautkraemer

Was Deine Listengrafik angeht: Du gibst ja nur für die Liste selber eine Grafik an, nicht aber für den Listenpunkt!

Siehe hier:

Code:

#left ul
{
list-style-image: url(img/point.gif);

Gib das Gleiche auch für[*] an und es wird funktionieren!

Nope, geht nicht. Sonst noch ne Idee dazu?

@ulle: OK, merke ich mir fürs nächste mal.
Im Moment scheint die Position zu stimmen von allem...ich teste mal weiter.

Dieter · #10 (**permalink**) 14.09.2004, 18:11

Name der Grafik (Gross- und Kleinschreibung beachten!) stimmt?

Pfad zur Grafik stimmt?

Grafik ist auf den Server geladen?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit der Positionierung	Clubnite	CSS	2	07.10.2010 22:05
Problem mit Positionierung von div's	Alfred	CSS	2	09.08.2010 19:59
Problem mit Hintergrund + Positionierung	deepy	(X)HTML	2	27.07.2010 11:33
Horizontales Listenmenü: problem bei positionierung von li	toppo	CSS	2	05.02.2006 18:55
CSS - Problem mit Positionierung	Lion King	CSS	9	02.02.2005 23:15