zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Spezielle Fragen zum Einsatz von Ebenen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.04.2011, 16:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.04.2011
Beiträge: 1
Mastertac befindet sich auf einem aufstrebenden Ast
Standard Spezielle Fragen zum Einsatz von Ebenen

Moin,

wer kann einem Anfänger bei einer Problemstellung etwas unter die Arme greifen ?

Fragestellung:

Wenn ich mehrere Ebenen nebeneinander platziere, hab ich oftmals das Problem, dass manch Ebenen sich verschieben.

Beispiel:

Ich habe eine Ebene (rechts oben) für ein Logo erstellt - geht!

Im Anschluss habe ich direkt fünf kleinere Ebenen nebeneinander platziert und darin einzelne Grafiken platziert um ein Navigationsmenü zu bauen. - geht auch! Witzigerweise ist mir hier schon aufgefallen, dass der Wert " Top:" immer unterschiedlich ist obwohl die einzelnen Ebenen für das Navigationsmenü doch auf gleicher Höhe liegen. Folglich müsste der Wert "Top" hier für die einzelnen Grafiken (Navigationsmenü) doch gleich sein da diese optisch auf gleicher Höhe liegen, sind sie jedoch nicht!


Zum eigentlichen Problem:

Erstelle ich jetzt eine weitere Ebene (zB mit Text oder einer Grafik) , hab ich oftmals das Problem, dass diese neue Ebene z.B. andere Ebenen (Navigationsmenü) verdrängt. Hier muss ich dann mühselig die verdrängten Ebenen wieder ausrichten, bis die Platzierung stimmt. Nehm ich jedoch die neuerstelle Ebene dann wieder weg, werden die restlichen Ebenen (nicht alle Ebenen) wieder verdrängt, bzw. letztere müssen wieder neu angepasst werden in der Platzierung. Verstehen tu ich es überhaupt nicht da die Ebenen sich eigentlich überlappen müssten, was diese ja auch eigentlich machen.

Die Ebenen haben alle einen Wert relative und der z-index ist durchnummeriert.


Kann mir jemand die Logik dahinter erläutern ?


Code:
html:

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

<?php

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

</head>


<link rel="stylesheet" href="file:///D|/test/1/wissen.css" type="text/css" />

<body>
<div id="container">			
<div id="content"></div>
<div id="box1"></div>
<div id="logo"></div>
<div id="navi"></div>
<div id="navi2"></div>
<div id="navi3"></div>
<div id="navi4"></div>
<div id="navi5"></div>
<div id="navi6"></div>
<div id="textstartseite"></div>
<div id="textstartseite2"></div>
<div id="footer"> <p>Für telefonische Kontaktaufnahme wählen Sie: +000000</p> </div>


css:

Code:
body {
	background-color: #E1DDD9;
	color:#000000;
	font-size: 12px;
	font-family: Verdana, Arial, Sans-Serif;

}

p {
	/* ------  Farb/Schrifgrösset für Footerleiste -----*/ 
	padding: 1px;
	text-align:center; 
	color:#ffffff;
	margin:0;
	font-size: 1.2em;
	
}


p2 {
	/* ------Textformatierungen Startseite  1 -----*/ 
	color:#000000;
	font-size: 12px;	
	
}

p3 {
	/* ------Textformatierungen Startseite  2 Name: Andre Fohrst -----*/ 
	color:#ff6000;
	
}

p4 {
	/* ------Textformatierungen Startseite  2 Name: Andre Fohrst -----*/ 
	color:#666666;
	
}

#container {
width: 956px;
height: 520px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
background-color: #ffffff;
}

	
#content  {
	height: 520px;
	width: 950px;
	border: 3px solid #ff6000;
	background-color: #ffffff;
	
	margin-right:  0px;
	margin-left: 0px;
	
	
}


#textstartseite {
	position:relative;
	left:350px;
	top:-597px;
	width:600px;
	height:200px;
	z-index:12;
	background-color:#ff6000;
	
	
}
#textstartseite2 {
	position:relative;
	left:350px;
	top:-7px;
	width:60px;
	height:200px;
	z-index:12;
	background-color:#ff6000;
	
	
}


#box1 {
	/* ------  Box 1 -----*/ 
	position:relative;
	left:0px;
	top:-525px;
	width:50px;
	height:50px;
	z-index:2;
	background-color: #ff6000;
	
}


#logo {
position:relative;
left: 584px;
top: -573px;
width: 367px;
height: 112px;
background-color:#F1700A;
z-index:3;
} 

#navi {
	position:relative;
	left:774px;
	top:-550px;
	width:179px;
	height:25px;
	z-index:4;
	background-color: #F1700A;
	background-image: url(bilder/impressum.jpg);
	
}


#navi2 {
	position:relative;
	left:629px;
	top:-575px;
	width:145px;
	height:25px;
	z-index:5;
	background-color: #F1700A;
	background-image: url(bilder/kontakt.jpg);
	
}


#navi3 {
	position:relative;
	left:436px;
	top:-600px;
	width:193px;
	height:25px;
	z-index:6;
	background-color: #F1700A;
	background-image: url(bilder/biete.jpg);
	
}

#navi4 {
	position:relative;
	left:282px;
	top:-625px;
	width:154px;
	height:25px;
	z-index:7;
	background-color: #F1700A;
	background-image: url(bilder/mich.jpg);
	
}


#navi5 {
	position:relative;
	left:105px;
	top:-650px;
	width:177px;
	height:25px;
	z-index:8;
	background-color: #F1700A;
	background-image: url(bilder/wissen.jpg);
	
}


#navi6 {
	position:relative;
	left:3px;
	top:-675px;
	width:102px;
	height:25px;
	z-index:9;
	background-color: #F1700A;
	background-image: url(bilder/home.jpg);
	
}


#Auswahl {
	/* ------  face -----*/ 
	position:relative;
	left:3px;
	top:-515px;
	width:312px;
	height:130px;
	z-index:10;
	background-color:none;
	
	
}



#footer {
	/* ------  footer -----*/ 
	position:relative;
	left:350px;
	top:-333px;
	width:604px;
	height:20px;
	z-index:11;
	background-color: #Ff6000;
	
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.04.2011, 17:17
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Hmm, ich glaube, Ebenen ist eigentlich nicht so das richtige (vom Verständnis her).
Z.B. macht man eine Navigation mit einer ul. Tipps für eine grafische Navi findest du in der FAQ:
http://xhtmlforum.de/40267-faq-h-ufi...und.html#faq15

Kennst du schon Little Boxes?
Wenn du das mal durchliest/-arbeitest hast du gutes Basis KnowHow.

BTW: hast du schon einen Webspace? Wenn nicht, nimm dir einen Freehoster.
Am Live Objekt (Link) kann man dir am schnellsten helfen.

Freehoster (werbefrei)
Free Hosting byethost
bplaced - Webspace & Webhosting

Gruß Manfred
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.04.2011, 17:23
Neuer Benutzer
neuer user
 
Registriert seit: 29.09.2010
Beiträge: 1
Masterp befindet sich auf einem aufstrebenden Ast
Standard

Hallo Manfred,

naja es geht ja erstmal nur ums Prinzip, damit ich verstehe warum überlappene Ebenen sich teilweise verdrängen, wenn diese nur nebeneinander platziert werden. Dein "little Box" werd ich mir mal ansehen
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten mazzo CSS 10 05.04.2012 18:32
Fragen über Fragen jules CSS 5 09.10.2008 16:21
Ernsthafte Fragen zu MySQL und seiner Indizierung KartoffelKiffer Serveradministration und serverseitige Scripte 2 26.01.2008 01:36
Container passt sich in der Höhe nicht an andere Ebenen an nicoendter CSS 56 24.07.2007 19:30
utf8 Fragen und Probleme lewian (X)HTML 11 07.09.2005 02:47


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:31 Uhr.