Navigations-Positionierung ohne Position:Absolute - Webmasterwelt - Webmaster-Forum

kleisti12 · #1 12.04.2011, 17:57

Habe eine Frage in Bezug auf eine Navigationspositionierung ohne position:absolute
Die Seite die ich in den letzten Tagen programmiert habe, habe ich etwas in dem Stil von seitwert.de programmiert. Es klappt auch alles super, außer in alten browsern... Ich habe eine Navigation mit position absolute positioniert und wie ich weiß haben alte browser damit probleme... meine frage ist nun wie kann ich die navigation auch ohne position absolute so positionieren wie ich es will?
hier der code der php seite:

PHP-Code:


			
<?php

$seite = $_GET["seite"];

if(!isset($seite))

   {

   $seite="index";

   }

echo"

<html>

<head>

<title>Entwurf</title>

<link href='style.css' rel='stylesheet' type='text/css' />

</head>

<body>

<center>

<div id='header'>

</div>

<div id='page'>

<div class='logo'>

</div>";

if($seite=="index") {

echo"

<div class='navlinks'>

<ul>

<li class='wahl'><a href='index.php?seite=index'>Home</a></li>

<li><a href='index.php?seite=seite2'>Linkl&auml;nger</a></li>

<li><a href='index.php?seite=seite3'>Li</a></li>

<li><a href='index.php?seite=seite4'>seeehlangerlink</a></li>

</ul>

</div>

<div id='left'>

<p>Text mit Niveu w&uuml;rde dann noch hier stehen!</p>

</div>

<div id='right'>

<p>Und hier w&uuml;rde auch Text mit Niveau stehen!</p>

</div>

<h1>&Uuml;berschrift</h1>

<p>Hier kommt dann Ihr Text hin!</p>

</div>";

}



if($seite=="seite2") {

echo"

<div class='navlinks'>

<ul>

<li><a href='index.php?seite=index'>Home</a></li>

<li class='wahl'><a href='index.php?seite=seite2'>Linkl&auml;nger</a></li>

<li><a href='index.php?seite=seite3'>Li</a></li>

<li><a href='index.php?seite=seite4'>seeehlangerlink</a></li>

</ul>

</div>

<div id='left'>

<p>Text mit Niveu w&uuml;rde dann noch hier stehen!</p>

</div>

<div id='right'>

<p>Und hier w&uuml;rde auch Text mit Niveau stehen!</p>

</div>

<h1>&Uuml;berschrift</h1>

<p>Hier kommt dann Ihr Text hin!</p>

</div>";

}



if($seite=="seite3") {

echo"

<div class='navlinks'>

<ul>

<li><a href='index.php?seite=index'>Home</a></li>

<li><a href='index.php?seite=seite2'>Linkl&auml;nger</a></li>

<li class='wahl'><a href='index.php?seite=seite3'>Li</a></li>

<li><a href='index.php?seite=seite4'>seeehlangerlink</a></li>

</ul>

</div>

<div id='left'>

<p>Text mit Niveu w&uuml;rde dann noch hier stehen!</p>

</div>

<div id='right'>

<p>Und hier w&uuml;rde auch Text mit Niveau stehen!</p>

</div>

<h1>&Uuml;berschrift</h1>

<p>Hier kommt dann Ihr Text hin!</p>

</div>";

}



if($seite=="seite4") {

echo"

<div class='navlinks'>

<ul>

<li><a href='index.php?seite=index'>Home</a></li>

<li><a href='index.php?seite=seite2'>Linkl&auml;nger</a></li>

<li><a href='index.php?seite=seite3'>Li</a></li>

<li class='wahl'><a href='index.php?seite=seite4'>seeehlangerlink</a></li>

</ul>

</div>

<div id='left'>

<p>Text mit Niveu w&uuml;rde dann noch hier stehen!</p>

</div>

<div id='right'>

<p>Und hier w&uuml;rde auch Text mit Niveau stehen!</p>

</div>

<h1>&Uuml;berschrift</h1>

<p>Hier kommt dann Ihr Text hin!</p>

</div>";

}



echo"

<div id='footer'>

<p>Dieses Design besteht seit dem 10.4.2011 und wurde von Florian G&ouml;tting erstellt.<br><br><a href='http://florian-goetting.square7.ch' target='_blank'>&copy; 2011 Florian G&ouml;tting</a></p>

</div>

</center>

</body>

</html>";

?>

und hier der code der css datei:

Code:

* {

margin: 0;
padding: 0;
}

body {

background: -webkit-gradient(linear, left top, left bottom, from(#98F5FF), to(#4169E1));
}

#header {

width: 100%;
height: 125px;
background-color: #49626d;
}

.logo {

background-image: url(bilder/logo.png);
background-repeat: no-repeat;
width: 150px;
height: 80px;
float: left;
position: absolute;
top: 5px;
}

.navlinks  {

position: absolute;
top: 100px;
float: left;
}

.navlinks ul { 

margin: auto;

}

.navlinks li {

margin: 0px 5px 0px 0px;
list-style-type: none;
display: inline;
	
}

.navlinks li a {

color: #215f7c;
padding: 5px 14px 7px;
background-color: #91bec9;
text-decoration: none;
font-size: 16px;
font-family: Verdana;
border-top-left-radius: 5px;
border-top-right-radius: 5px;

}

.navlinks li a:hover{

color: #215f7c;
background-color: #87CEFA;
 /*If you want to use a color for the background instead replace above line with background-color: [insert color here with # sign in front];*/
text-decoration: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;

}

.navlinks .wahl a {

background-color: white;
cursor: default; 
}

.navlinks .wahl a:hover{

background-color: white;
cursor: default; 
}

#page {

width: 900px;
height: 1100px;
background-color: white;
}

#page p {

font-family: Verdana;
text-align: center;
padding: 10px;
}

#page h1 {

font-family: Verdana;
padding: 5px;
}

#left {

height: 1100px;
width: 150px;
border-right: 2px dashed silver;
float: left;
}

#left:hover {

height: 1100px;
width: 150px;
border-right: 2px solid silver;
float: left;
}

#right {

height: 1100px;
width: 150px;
border-left: 2px dashed silver;
float: right;
}

#right:hover {

height: 1100px;
width: 150px;
border-left: 2px solid silver;
float: right;
}

#footer {

width: 900px;
height: 100px;
background-color: #FFB90F;
}

hier könnt ihr euch die seite auch online ansehen:
Entwurf

ich hoffe das ihr mir helfen könnt... ihr könnt euch ja auch ansehen welche positionierung ich meine(seitwert.de).
danke!

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