✔ Webseite soll Dynamisch sein

U

Uzi

Mitglied
Moin Leute, ich hab ne kleine HP erstellt und mein Problem sind zwei Sachen.
Erstens: wenn ich die Seite vergrößer oder verkleiner, dann springen die Reiter, Banner, Bilder usw. alle kreuz und quer rum. Wie mache ich es das die Seite fix bestehen bleibt, ob ich jetzt verkleiner oder vergrößer?

zweitens: Meine <li>'s die ich oben habe, wie mache ich das man sie auf jeder Seite sieht wenn ich durchklicke? Also das es nicht nur für eine Seite gilt sonder das fix bestehen bleibt, egal auf welcher Seite ich mich grad befinde.

Danke Schon mal :)

HTML: 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="taxi.css" type="text/css">
</head>
<body>
<div class="container">
<header class="header">
  <div class="logo"></div>
  <div class="top_info"></div>
  <nav class="navbar">
  <ul>
                    <li><a href="#">Login</a>
                        <ul>
                            <li><a href="#">Taxi Fahrer</a></li>
                            <li><a href="#">Fahrgast</a></li>
                            <li><a href="#">Mitarbeiter</a></li>
                        </ul>
                    </li>
                    <li><a href="./Registry.php">Registrieren</a></li>
                    <li><a href="#">Taxi rufen</a></li>
                    <li><a href="#">Bewerten</a>
                        <ul>
                        <li><a href="#">Taxi Fahrer</a></li>
                        <li><a href="#">Support</a></li>
                        <ul/>               
                </ul>
</header>
<section class="content_area">
  <div class="banner">
    <img src="./images/Background.jpg");>
    <div class="col">Left Col Content</div>
  </div>
</section>
<footer class="footer"></footer>
        <ul>
        <li><a href="#">Impressum</a></li>
        <li><a href="#">Kontakt</a></li>
        </ul>
</div>
</body>
</html>


CSS: 
html{
font-family:Arial, sans-serif;
}
body
{
background:#ccc;
margin:0;
}
.container
{
max-width:90%;
margin:0 auto;
background:#fff;
}
header
{

width:100%;
background:black;
box-shadow: 10px 10px 20px white inset;
}
.logo
{
float:left;
width:40px;
height:40px;
margin:10px;

Background-image: url("./images/Logo.jpg");
}
.top_info
{
float:right;
width:100px;
height:40px;
Background-image: url("./images/Logo2.bmp");
border:1px solid #c7c7c7;
margin:10px;
}
nav ul{
    display:block;
    float: right;   
    margin: 0;
    padding:0;
}

nav
{
   

clear:both;
background-color:#ffffff;
box-shadow: 0 5px 100px black inset;
}
nav ul
{
display:block;
float: right;
margin:0;
padding:0;
list-style-type:none;
}
nav li {
float: left;
display:block;
}

nav ul ul
{
display: none;
}

nav ul li:hover ul{
    display:block;
}
nav ul li:hover ul li{
    float:none;
}

nav ul li a
{

    text-decoration: none;
   

    background: black;
    color: yellow;
   
    display:block;
   

    font-weight: bold;
   

    border-radius: 10px;

    box-shadow: 0 5px 10px white inset;

    padding: 5px 20px 5px 20px;

    margin: 1px;
}
nav ul li a:hover{
    background: gold;
    color: black;
}


.banner
{

    max-height: 100%;
    max-width: 100%;
}
.col
{
    height: 683px;
    max-width: 200px;
float:left;
background:#000;
color:#ffffff;
box-shadow: 0 5px 10px white inset;

}
ul li {
    float: left;
    display:block;
    padding: 5px 20px 5px 20px;
   
}
footer
{
padding:20px;
clear:both;
}
 
Zur ersten Frage: Mindestbreite min-width (absolut in "px") für .container festlegen.

Zur zweiten Frage: Sie ist etwas mißverständlich formuliert.

Entweder willst Du auf position:fixed hinaus, um das Element im Viewport zu fixieren, oder auf eine globale PHP-Datei, die die Navi-Struktur beinhaltet, und per include in die einzelnen Seiten geladen wird.
 
Danke für die schnelle Antwort. ich werde es gleich testen.

zur zweiten Frage: Also ich weiß nicht genau wie ich das erklären soll. Mir geht es darum das ich eine einheitlich Seite habe, die auf jeder Seite wo ich mich durch meine HP durch blätter, diese "reiter" sehe.
So wie hier: http://puu.sh/ophNQ/bc4e9a343c.jpg
da ist ja auch immer fix diese "Reiter" zu sehen (sofern man diese Punkte Reiter nennt :D )
 
Entweder bindest Du die Navigation statisch in jede Seite ein, wie im obigen HTML-Code gezeigt, oder Du lagerst sie in eine PHP-Datei aus, um sie per include dynamisch in die einzelnen Seiten zu laden.

Letzteres ist immer von Vorteil, da zukünftige Änderungen / Ergänzungen nur einmal in der PHP-Datei vorgenommen werden müssen.
 
zur ersten Frage: Das mit min-width, klappt nicht.. die einzelnen Elemente Springen immer noch kreuz und quer und bleiben nicht Fix wo sie sein sollten.
diese Veränderung habe ich vorgenommen;

CSS: 
.container
{
min-width: 100px;
margin:0 auto;
background:#fff;
}
 
Also zu ersten Frage: es hat geklappt, hab eine Datei Header gemacht und sie mit include auf jeder Seite geholt . Danke dir

Zweite Frage ist immer noch offen :/
 
Uzi hat gesagt.:
zur ersten Frage: Das mit min-width, klappt nicht.. die einzelnen Elemente Springen immer noch kreuz und quer und bleiben nicht Fix wo sie sein sollten.
diese Veränderung habe ich vorgenommen;

CSS: 
.container
{
min-width: 100px;
margin:0 auto;
background:#fff;
}
Zum Vergrößern anklicken....
Uzi hat gesagt.:
Zweite Frage ist immer noch offen :/
Zum Vergrößern anklicken....
Zweite Frage ist die erste ;)

Naja, min-width:100px ist da definitiv zu klein gewählt.

Häng' da mal eine 0 hinten an, also min-width:1000px.
 
Ok ich hab raus gefunden was der Fehler ist, ich hab der "navbar" keine Höhe definiert, deswegen ist die so rum gesprungen ^^

aber mal was andere, ich hab ja in den Li's weiter Li's mit :hover jeweils. Wie mache ich es, das wenn die raus komm, also wenn ich mit der maus drüber gehe, die mir nicht alles wieder verschieben?
 
Uzi hat gesagt.:
aber mal was andere, ich hab ja in den Li's weiter Li's mit :hover jeweils. Wie mache ich es, das wenn die raus komm, also wenn ich mit der maus drüber gehe, die mir nicht alles wieder verschieben?
Zum Vergrößern anklicken....
Durch die Kombination von relativer und absoluter Positionierung.
CSS: 
nav li {
float: left;
display:block;
position:relative
}
nav ul ul
{
display: none;
position:absolute
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück