Problem mit Verschachtelungen und Positionierung

Status
Nicht offen für weitere Antworten.
M

moscarda

Mitglied
hallo!

ich hätte da ein problem. also ich hab heute mit css angefangen *g* und nun möchte ich ein hintergrundbild in 3 teile zerlegen. deshalb, weil ein schatten drum rum ist. also hab ich ein bild oben mit schatten links, oben und rechts - dann ein bild mittig mit schatten links und rechts und dann nochmal eins unten abschließend mit schatten links rechts und unten.
hoffe das ist soweit klar *g*
ich schaffs nur einfach nicht, da einen content reinzutun.. und schon garnicht das ganze gut zu positionieren. die bilder sind natürlich alle gleich breit und das bild in der mitte soll variabel sein, also von der höhe. die breite ist fix.

das ist mein html code:
HTML: 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de-DE" xml:lang="de-DE" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="lib/index.css">
</head>

<body bgcolor="#ebebeb">
<div id="makesithappen">... makes IT happen</div>

<div id="whitebg">
		<p class="top"><img src="pic/shadow_top.png"/></p>
		<p class="amsbg"><img src="pic/logo.png"/></p>
	
	<ul id="sprachen">
		<li>romania</li>
		<li>englisch |</li>
		<li>deutsch |</li>
	</ul>
	<ul id="suchfeld">
		<input type="text" name="Suche">
	</ul>
		<div id="Navi">
			<ul>
				<li>Unternehmen</li>
				<li>Portfolio</li>
				<li>Kunden</li>
				<li>Success Stories</li>
				<li>Partner & Lieferanten</li>
				<li>Kontakt</li>
			</ul>
		</div>
		<div id="content">
			<h1>Überschrift</h1>
			<p>Lore ipsumLore ipsumLore ipsumLore ipsumLore ipsumLore ipsumLore ipsumLore ipsumLore ipsumLore ipsumLore ipsum</p>
			<p>Lore ipsumLore ipsumLore ipsumLore ipsumLore ipsumLore ipsumLore ipsumLore ipsum</p>
		</div>	
		
		<p class="bottom"><img src="pic/shadow_bottom2.png"/>
			<ul id="subnav">
				<li>AGB</li>		
				<li>WAI |</li>
				<li>Downloads |</li>
				<li>Presse |</li>
				<li>Impressum |</li>
				<li>Home |</li>
			</ul>
		</p>
</div>
		
</body>
</html>

und css:

HTML: 
/* CSS Document */

p {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	padding-left:0;
	padding-top:0;

}

h1 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #00664a;
	font-style:normal;
	font-size:larger;
}

#content {
	position:relative;
	background-color:white;
	width:800px;
	margin-top:295px;
	margin-left:295px;
	padding-left:10px;
	padding-top:10px;
	padding-bottom:10px;
}

#Navi {

	margin-top:265px;
	margin-left:16px;
	width:200px;
	position:relative;
	float:left;
}

li {
	
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	text-align:left;
	list-style:none;
}

#Navi li {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	list-style:none;
	margin-left:0px;
	margin-top:2px;
	background-color:white;
	width:180;

}

#whitebg {
	background-image:url(../pic/shadow_middle2.png);
	background-repeat:repeat-y;
	margin-left:80px;
	margin-top:0px;
	margin-bottom:0px;

}

ul#sprachen {
	list-style-type:none; 
	margin-right:77px; 
	margin-top:50px; 

}

ul#sprachen li { 
	text-align:left; 
	float:right; 
	margin-right:5px; 
}


ul#subnav { 
	list-style-type:none; padding:0px; margin-right:77px; 
}


ul#subnav li { 
	text-align:left; float:right; margin-right:5px; 
}


.top {
	position:relative;
	margin:0;
	padding:0;

}

.amsbg {
	margin-top:0px;
	margin-left:75px;
	position:abslute;
	float:left;

}


#makesithappen {

	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #00664a;
	font-style:normal;
	font-size:larger;
	margin-left:1000px;
	margin-top:50px;

}

.bottom {
	position:relative;
	margin:0;
	padding:0;
}


ich stell in ein paar stunden noch ein bild online wies aussehen soll, aber vielleicht findet jemand ja schon jetzt einen fehler. es wäre mir sehr geholfen!
blöd ist auch, dass sich die navigation nicht ganz nach links rücken lässt.. die ist ca. 2 cm nach rechts eingerückt -.- keine ahnung warum!

ich hoffe ihr wisst weiter :)
vielen dank!

Eva
 
Hi,

kann man sich die Seite irgendwo online mit all den eingebundenen Grafiken näher betrachten? Denn ohne sie ist da nicht viel zu erkennen.

Dass sich die Navigation nicht ganz nach links rücken lässt, könnte entweder an der margin-left:16px-Deklaration liegen, oder am fehlenden Zurücksetzen der Polsterungseigenschaften des ul-Elements.

Und zum Schluß möchte ich dich noch darum bitten, in deinen Beiträgen die Netiquette (Nr.15) bzgl. der Groß- und Kleinschreibung zu beachten. Vielen Dank.
 
Anstelle des Screenshots wäre die "Live-Version" der Seite hilfreicher.

Wenn das Herausnehmen der margin-left-Eigenschaft zu keinem Erfolg geführt hat, solltest du mal die Polsterungseigenschaften des ul-Elements zurücksetzen:

Code: 
#Navi ul {
margin:0;
padding:0;
list-style:none;
}
 
edit:
Das mit dem zurücksetzen hat leider nicht funktioniert. Aber ich stells jetzt einfach mal online! Kann ich aber leider erst am Abend machen, da das von der Arbeit aus nicht geht. Vielleicht kann mir trotzdem jemand helfen. Die 3 Schattenbilder wären das einzige was zur Ansicht fehlt, und die sind alle ca. 1125 px breit und 10 px hoch
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück