• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Positionen und Grössen

PerX

Neues Mitglied
Hallo Leute

Habe ein Problem. Ich habe folgender CSS-Code:

Code:
.logo{	z-index:2; 
	left:-1%;
	top:-2%;  
	min-width:386px;
	max-width:386px;
	min-height:400px;
	max-height:400px;
	border:none; 
	position:relative;
}


.links{
	background-color:#2D2D2D;
	z-index:1;
	position:absolute;
	height:100%;
	min-width:14%;
	left:0%;
	top:0%;
}
.rechts{
	background-color:#2D2D2D;
	z-index:3;
	position:absolute;
	height:100%;
	min-width:14%;
	top:0%;
	right:0%;
}

Zur Info:
.rechts und .links ist ein div auf der jeweiligen Seite.

Problem:
Wenn ich mein Browser nicht auf Vollbildmodus habe und die Browsergrösse verändere, sollten die Elemente welche "hinter" dem Rand sind nicht sichtbar sein. Probiert's mal bei Google. Einfach die Fenstergrösse verändern.

Vielen Dank für eure Antworten. Falls Ihr meine Frabe nciht versteht Frag einfach nach. Fragt auch nach, wenn ihr weitere Infos braucht.

Vielen Dank

PerX
 
Hallo,

ohne Link kann die keiner helfen.

absolute position ist halt immer unschön wenn man das am falschen element verankert.

Cheffchen
 
OK. Natürlich dumm von mir. Leider, habe ich kein Link nur den dazugehörenden HTML-Code:
HTML:
 <body>  <div class="links"></div><div class="rechts"></div>

<img class="header" alt="Header" src="../../../Unbenanntbannner.PNG"> <img class="logo" alt="Logo" src="../Logo's/Logo.png" usemap="#Xolnul"><br><map name="Xolnul">	<area shape="rect" coords="140,35,416,310" href="Hauptseite PerXenie.html" alt="Logo" title="Zur Hauptseite"></map>
  <div id="Rahmen"> <ul id="Navigation">    <li><a href="#Beispiel" class="rund">News</a> 	<ul> 		<li><a class="rund">Unterseite 1</a></li> 	</ul> </li>     <li><a href="#Beispiel" class="rund">Games</a>   	<ul>   		<li><a href="#Beispiel" class="rund">Seite 2a</a></li>   		<li><a href="#Beispiel" class="rund">Seite 2b</a></li>   	</ul>   </li>     <li><a href="#Beispiel" class="rund">Technik</a> 	<ul> 		<li><a class="rund">Unterseite 1</a></li> 	</ul> </li>     <li><a class="rund" href="#Beispiel">Videos</a>   	<ul>   		<li><a class="rund" href="#Beispiel">Seite 4a</a></li>   		<li><a class="rund" href="#Beispiel">Seite 4b</a></li>   		<li><a class="rund" href="#Beispiel">Seite 4c</a></li>   	</ul>   </li>     <li><a class="rund" href="#Beispiel">Apps</a> 	<ul> 		<li><a class="rund">Seite 1</a></li> 	</ul> </li> <li><a class="rund">Musik</a></li>   </ul> </div>    <div class="hauptteil">	<p class="text">ENDE aksdfjölkjasöfaksjfakö kaökjdlfjalsöjdfaöskjflöaksjk köjafklasjflkasjfölkdajflk sjflakjfslkdfjaskljdf jlkjsd flajflköajlfdöjaslödkfj lksdjflöajsdlökfj lk  jlaöjfklajflsjflak ksljflkasjdflk lkddjfölajflöaksjf öasjdlkfjsldfjls kljfdlksjflsj sljfd lj lll jflsjsl s ls jlsjfljfsjkf jlk lsjflsjfl lsj ls  7zzuzu z7 z77uzu z7u 7zu zuz7u 7z  zu io zuououoiuhkjkljfkalfhajkshfjkhaskfhkjlahfkhsjkhfkjkfjhlkjfkhaflkjlkjhdfkjlsakdlhfökj</p></div>

Und hier der gesamte CSS-Code:
Code:
.hauptlogo{	border: none; position: absolute; top:-8%; left:5%;
}
.rund{ 
border-radius:0.3125em;
z-index:2;
}


.text{
	color:black; 
	z-index:1;
}
.hauptteil{
	z-index:1;
	position:absolute;
	width:60%;
	top:25.5%;
	left:24.5%;
	background-color:white;
}


.header{
	 z-index:2; 
	 position: absolute; 
	 height: 22.5%; 
	 left: 24.5%; 
	 top: 1%; 
}
.logo{
	z-index:2; 
	left:-1%;
	top:-2%;  
	min-width:386px;
	max-width:386px;
	min-height:400px;
	max-height:400px;
	border:none; 
	position:relative;
}


.links{
	background-color:#2D2D2D;
	z-index:1;
	position:absolute;
	height:100%;
	min-width:14%;
	left:0%;
	top:0%;
}
.rechts{
	background-color:#2D2D2D;
	z-index:3;
	position:absolute;
	height:100%;
	min-width:14%;
	top:0%;
	right:0%;
}


div#Rahmen {  
 z-index:2; 
 position:absolute; 
 left:30%; 
 height:3%; 
 top:23.5%; 
 width:39.5%; 
 background-color:#292929; 
 padding-top:0.3%;
 }
   
 
 ul#Navigation {  
 margin: 0em; 
 padding: 0em;  
 text-align: center; 
 z-index:2;
 }  
  
 ul#Navigation li {  
 list-style: none;  
 float: left; /* ohne width - nach CSS 2.1 erlaubt */  
 position: relative;  
 margin: 0px 0px 0px 5px; 
 padding: 0;  
 }  
 
 ul#Navigation li ul {  
 margin: 0; 
 padding: 0;  
 position: absolute;  
 top: 25px;; left: 0px;  
 display: none; /* Unternavigation ausblenden */  
 z-index:2;
 }  
    
 ul#Navigation li ul li {  
 float: none;  
 display: block;  
 margin-top: 3px; 
 margin-bottom: 3px;
 z-index:2;
 }  
  
 ul#Navigation a, ul#Navigation span {  
 display: block;  
 font-size:12px;
 padding: 0px 0px 0px 0px;
 width: 102px; /* Breite den in li enthaltenen Elementen zuweisen */    
 text-decoration: none;   
 border-left-color: white; 
 border-top-color: white;  
 color: #66FF33; 
 background: #595858; /* Old browsers */
    background: -moz-linear-gradient(top,  #595858 41%, #878787 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(41%,#595858), color-stop(100%,#878787)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #595858 41%,#878787 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #595858 41%,#878787 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #595858 41%,#878787 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #595858 41%,#878787 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#595858', endColorstr='#878787',GradientType=0 ); /* IE6-9 */;
	z-index:2;
  
 }  
 
 ul#Navigation a:hover, ul#Navigation span{  
 padding: 0px 0px 0px 0px;
    font-size:12px;
    border-color: white;
    border-left-color: white; border-top-color: white;
    font-family: "Cambira", "Calibri", "Arial", sans-serif;
    background: #333232; /* Old browsers */
    background: -moz-linear-gradient(top,  #333232 15%, #333232 15%, #444444 55%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,#333232), color-stop(15%,#333232), color-stop(55%,#444444)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #333232 15%,#333232 15%,#444444 55%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #333232 15%,#333232 15%,#444444 55%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #333232 15%,#333232 15%,#444444 55%); /* IE10+ */
    background: linear-gradient(to bottom,  #333232 15%,#333232 15%,#444444 55%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333232', endColorstr='#444444',GradientType=0 ); /* IE6-9 */; 
    color:yellow;
	z-index:2;
 }
 
 ul#Navigation li:hover ul {
    display: block;
    background:#292929;
    padding-right:5px;
	left:-5px;
	top:14px;
	z-index:2;
  }

Jetzt schon Vielen Dank für die Hilfe.

PerX
 
Hallo,

also ohne Link, CSS ohne Link is kaum lösbar.
es gibt auch freehoster.

was ich sehe das es positionssuppe ist, sind ja fast alle absolut positioniert und das ist zu 99,9% schon der fehler.

Cheffchen
 
Wenn Du Elemente nebeneinander anordnen willst, dann ist weder relative noch absolute Positionierung die Lösung. Vergiss einfach das Wort "position". Wenn Du Elemente nebeneinander haben willst, wäre das wichtige Stichwort "float" und "width", um Abstände zu erreichen dann noch "margin".
 
Vielen Dank. Die Positionierung der Elemente sind ok. Aber wie muss ich die grösse der divs angeben, dass sie die grösse nicht mit der Browsergrösse verändern?
 
Wenn Du feste Maße haben willst, musst Du auch feste Maße angeben. Also in Pixel, nicht in Prozent, nicht in em etc.
 
Webseiten interessieren sich nicht für Bildschirmauflösungen da sie nie in diesem Bereich dargestellt werden. Wenn Du den Viewport, den Bereich den eine Webseite auf einem Bildschirm einnehmen kann, meinst, dann ist die Antwort die selbe wie oben.
 
Nochmals Danke. Nun habe ich noch folgendes Problem: Wenn ich meine HTML-Seite an meinem Desktop PC öffne, ist das Erscheinungsbild anders als bei meinem Laptop. Woran liegt das????

Desktop:
Desktop PC.jpg

Laptop:
Laptop.jpg

CSS Code:
Code:
.rund{ border-radius:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
z-index:2;
}


.text{
	color:black; 
	z-index:1;
}
.hauptteil{
	z-index:1;
	position:absolute;
	width:730px;
	top:185px;
	left:335px;
	background-color:white;
}


.header{
	 z-index:2; 
	 position: absolute;  
	 height: 155px; 
	 left: 335px; 
	 top: 5px; 
}
.logo{
	z-index:2; 
	left:-90px; 
	top:-20px; 
	height:385px; 
	width:560px; 
	border:none; 
	position:absolute;
}


.links{
	background-color:#2D2D2D;
	z-index:1;
	position:absolute;
	height:10000px;
	width:192px;
	left:0px;
	top:0px;
}
.rechts{
	background-color:#2D2D2D;
	z-index:3;
	position:absolute;
	height:10000px;
	width:192px;
	top:0px;
	right:0px;
}


div#Rahmen {  
 z-index:2; 
 position:absolute; 
 left:335px; 
 height:19px; 
 top:162px; 
 width:100%; 
 background-color:#292929; 
 padding-top:5px;
 }
   
 
 ul#Navigation {  
 margin: 0; 
 padding: 0;  
 text-align: center; 
 z-index:2;
 }  
  
 ul#Navigation li {  
 list-style: none;  
 float: left; /* ohne width - nach CSS 2.1 erlaubt */  
 position: relative;  
 margin: 0px 0px 0px 5px; 
 padding: 0;  
 }  
 
 ul#Navigation li ul {  
 margin: 0; 
 padding: 0;  
 position: absolute;  
 top: 25px;; left: 0px;  
 display: none; /* Unternavigation ausblenden */  
 z-index:2;
 }  
    
 ul#Navigation li ul li {  
 float: none;  
 display: block;  
 margin-top: 3px; 
 margin-bottom: 3px;
 z-index:2;
 }  
  
 ul#Navigation a, ul#Navigation span {  
 display: block;  
 font-size:12px;
 width: 102px; /* Breite den in li enthaltenen Elementen zuweisen */    
 text-decoration: none;   
 border-left-color: white; 
 border-top-color: white;  
 font-family: "Cambira", "Calibri", "Arial", sans-serif;
 color: #66FF33; 
 background: #595858; /* Old browsers */
    background: -moz-linear-gradient(top,  #595858 41%, #878787 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(41%,#595858), color-stop(100%,#878787)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #595858 41%,#878787 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #595858 41%,#878787 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #595858 41%,#878787 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #595858 41%,#878787 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#595858', endColorstr='#878787',GradientType=0 ); /* IE6-9 */;
	z-index:2;
  
 }  
 
 ul#Navigation a:hover, ul#Navigation span{  
 padding: 2px 0px 3px 0px;
    font-size:12px;
    border-color: white;
    border-left-color: white; border-top-color: white;
    font-family: "Cambira", "Calibri", "Arial", sans-serif;
    background: #333232; /* Old browsers */
    background: -moz-linear-gradient(top,  #333232 15%, #333232 15%, #444444 55%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,#333232), color-stop(15%,#333232), color-stop(55%,#444444)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #333232 15%,#333232 15%,#444444 55%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #333232 15%,#333232 15%,#444444 55%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #333232 15%,#333232 15%,#444444 55%); /* IE10+ */
    background: linear-gradient(to bottom,  #333232 15%,#333232 15%,#444444 55%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333232', endColorstr='#444444',GradientType=0 ); /* IE6-9 */; 
    color:yellow;
	z-index:2;
 }
 
 ul#Navigation li:hover ul {
    display: block;
    background:#292929;
    padding-right:5px;
	left:-5px;
	top:18px;
	z-index:2;
  }

Zugehörender HTML-Code:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd">   <html>   <head>    	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">   	<title>PerXenie</title>
	<link href="Layout/styletestnavi.css" type="text/css" rel="stylesheet">  	<link href="Layout/DynamischeNavigationTest.js">   </head>    <body>  <div class="links"></div><div class="rechts"></div>

<img class="header" alt="Header" src="../Logo's/Unbenanntbannner.PNG"> <img class="logo" alt="Logo" src="../Logo's/Logo.png" usemap="#Xolnul"><br><map name="Xolnul">	<area shape="rect" coords="140,35,416,348" href="Hauptseite PerXenie.html" alt="Logo" title="Zur Hauptseite"></map>
  <div id="Rahmen"> <ul id="Navigation">    <li><a href="#Beispiel" class="rund">News</a> 	<ul> 		<li><a class="rund">Unterseite 1</a></li> 	</ul> </li>     <li><a href="#Beispiel" class="rund">Games</a>   	<ul>   		<li><a href="#Beispiel" class="rund">Seite 2a</a></li>   		<li><a href="#Beispiel" class="rund">Seite 2b</a></li>   	</ul>   </li>     <li><a href="#Beispiel" class="rund">Technik</a> 	<ul> 		<li><a class="rund">Unterseite 1</a></li> 	</ul> </li>     <li><a class="rund" href="#Beispiel">Videos</a>   	<ul>   		<li><a class="rund" href="#Beispiel">Seite 4a</a></li>   		<li><a class="rund" href="#Beispiel">Seite 4b</a></li>   		<li><a class="rund" href="#Beispiel">Seite 4c</a></li>   	</ul>   </li>     <li><a class="rund" href="#Beispiel">Apps</a> 	<ul> 		<li><a class="rund">Seite 1</a></li> 	</ul> </li> <li><a class="rund">Musik</a></li>   </ul> </div>    <div class="hauptteil">	<p class="text">ENDE aksdfjölkjasöfaksjfakö kaökjdlfjalsöjdfaöskjflöaksjk köjafklasjflkasjfölkdajflk sjflakjfslkdfjaskljdf jlkjsd flajflköajlfdöjaslödkfj lksdjflöajsdlökfj lk  jlaöjfklajflsjflak ksljflkasjdflk lkddjfölajflöaksjf öasjdlkfjsldfjls kljfdlksjflsj sljfd lj lll jflsjsl s ls jlsjfljfsjkf jlk lsjflsjfl lsj ls  7zzuzu z7 z77uzu z7u 7zu zuz7u 7z  zu io zuououoiuhkjkljfkalfhajkshfjkhaskfhkjlahfkhsjkhfkjkfjhlkjfkhaflkjlkjhdfkjlsakdlhfökj</p></div>  </body>   </html>

Woran liegt das Problem? Bitte mit Verbesserungsvorschlag.

Vielen Dank.

PerX
 
Dir wurde oben schonmal der Tipp gegeben auf absolute Positionierung zu verzichten. Wieso machst Du das nicht und schaust dann wie es dann aussieht?
 
Bei absoluter Positionierung nimmst Du die Elemente aus dem normalen Dokumentenfluss. Ohne das würden sich alle Blockelemente einfach untereinander aneinander reihen. Mit float kann man diese Elemente wiederum nebeneinander positionieren.

Zur weiteren Hilfe würde ich dir empfehlen erstmal die CSS-Grundlagen durchzulesen, z.B. hier:
CSS 4 You - The Finest in Stylesheets
 
Zurück
Oben