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

2 Fragen ( Navi Mitte + Seite ändert sich )

T

Trinto

Neues Mitglied
Hallo. Ich habe 2 Fragen. Zum ersten, wie kann ich meine Navigation machen, dass diese genau in der Mitte des bildes ist? Mit center geht das i.wie nicht bzw. wo müsste ich das einbauen in dem CSS code.

Das andere ist, dass wenn ich mein browserfenster kleiner mache, dass auch alle grafiken texte etc. auch in das kleiner werdene fenster kommen. Heißt, dass alles so zusammengequetscht wird, dass sieht echt kacke aus ^^. Ich will halt dass wenn das fenster kleiner wird, diese sachen halt nicht mehr sichtbar sind. Man kann das leider nicht so gut erklären.

Jemand ideen?

Hier ist mein CSS code bis jetzt:

html {
font-size: 62.5%;
}

body {

font: normal 1.2em Verdana,Arial,sans-serif;
height: 100%;
padding-top: 64px;
}

small,.small {font-size: 0.9em;}

a {
color: #EEC;
text-decoration: none;
}
a:hover{
color: #FFA;
text-decoration: underline;
}

p {padding: 0.2em 0 1.2em;}

blocksemikolon, code {
background: #4A4A4A;
border: 1px solid #333;
color: #BBB;
display: block;
margin-bottom: 12px;
}
code {
font: normal 0.9em Verdana,sans-serif;
line-height: 1.5em;
padding: 8px 14px;
}
blocksemikolon {
background: #4A4A4A url('img/semikolon.gif') no-repeat left top;
padding: 6px 14px 6px 44px;
}
blocksemikolon p {padding: 0.5em 0;}


/* --------------------------------
Headings, titles
----------------------------------- */

h1 {font: Georgia,sans-serif, xx-large;}
h2 {font: normal 1.6em Georgia,sans-serif;}
h3 {font: normal 1.4em Georgia,sans-serif;}
h4 {font: bold 1em Georgia,sans-serif;}

h1, h2, h3, h4 {margin-bottom: 2px;}

/* --------------------------------
Main layout
----------------------------------- */

#header_image {
height: 200px; /*Höhe des Bildes*/
background: white center url('img/Logo.jpg') no-repeat;


}


/* --------------------------------
Navigation
----------------------------------- */

.navigation {

border-top: 0px solid black;

}

.navigation ul { margin: 0;}

.navigation ul li {

background: yellow url('Img/navigation.jpg') no-repeat;
border-bottom: 1px solid black;
border-top: 1px solid black;
border-right: 1px solid black;
float: left;
list-style: none;
}
.navigation a {
color: black;
display: block;
font: bold 1em Verdana,sans-serif;
padding: 12px 64px;
text-decoration: none;
}
.navigation a:hover {
background: white;
text-decoration: none;
}
.navigation li.navi a {
border-left: 1px solid black;
}

/* Sub navigation */
#subnav a {
padding: 10px;
font-size: 0.9em;
}
 
Werbung:
Nutze doch bitte die code-tags. Danke. ;)

Ohne HTML-Code (oder noch besser einen Link) ist es schwierig dir hier Tips zu geben. Zentrieren klappt mit text-align:center oder margin:0 auto.

Grüße
 
HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<html>
<head>

<link rel="stylesheet" type="text/css" href="reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

     <title> 
        Fahrschule Bargsten - Freude am Fahren von Anfang an
     </title>
</head>

<body>

    <div id="header_image"></div>

             <div class="navigation">

        <ul>
            <li class="navi"><a href="Index.html" class="navigation">Home</a></li>
            <li><a href="Mitarbeiter.html" class="navigation">Mitarbeiter</a></li>
            <li><a href="Fahrschule.html">Fahrschule </a></li>
            <li><a href="Fahrzeuge.html">Fahrzeuge </a></li>
            <li><a href="Ausbildung.html">Ausbildung</a></li>
                
        </ul>
        <div class="clearer"></div>
    </div>
</div>

<!--Hier Fängt die Seite an .. -->
    <div id="main">
    
        <div class="post">
        
            <div class="post_top"> <!-- wilkommen.. -->
                <div class="post_title">
                  <h2>Herzlich Willkommen...</h2><br>
                </div>
<p></p>
<blocksemikolon>
<br>Auf dieser Seite finden Sie bald Informationen zur Fahrschule Bargsten......
<br>
 <p></p>




</div>
</div>

    <div id="footer">

        <div class="left"> Copyright @ Dennis Weber</div>
        <div class="clearer">&nbsp;</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Und der css code:

HTML: 
html {
    font-size: 62.5%;
}

body { 
    
    font: normal 1.2em Verdana,Arial,sans-serif;
    height: 100%;
    padding-top: 64px;
    
}

small,.small {font-size: 0.9em;}

a {
    color: #EEC;
    text-decoration: none;
}
a:hover{
    color: #FFA;
    text-decoration: underline;
}

p {
padding: 0.2em 0 1.2em;
}

blocksemikolon, code {
    background: #4A4A4A;
    border: 1px solid #333;
    color: #BBB;
    display: block;
    margin-bottom: 12px;
}
code {
    font: normal 0.9em Verdana,sans-serif;
    line-height: 1.5em;
    padding: 8px 14px;
}
blocksemikolon {
    background: #4A4A4A url('img/semikolon.gif') no-repeat left top;
    padding: 6px 14px 6px 44px;
}
blocksemikolon p {padding: 0.5em 0;}


/* --------------------------------
   Headings, titles
----------------------------------- */

h1 {font: Georgia,sans-serif, xx-large;}
h2 {font: normal 1.6em Georgia,sans-serif;float: left;}
h3 {font: normal 1.4em Georgia,sans-serif;}
h4 {font: bold 1em Georgia,sans-serif;}

h1, h2, h3, h4 {margin-bottom: 2px;}

/* --------------------------------
   Main layout
----------------------------------- */

#header_image {
    height: 200px; /*Höhe des Bildes*/
    background: white  center url('img/Logo.jpg') no-repeat;
    
    
}


/* --------------------------------
   Navigation
----------------------------------- */

.navigation {
    
    border-top: 0px solid black;
    margin: 0;

}

.navigation ul { margin: 0;}

.navigation ul li {

background: yellow url('Img/navigation.jpg') ;
border-bottom: 1px solid black;
    border-top: 1px solid black;
    border-right: 1px solid black;
    float: left;
    list-style: none;

}
.navigation a {
    color: black;
    display: block;
    font: bold 1em Verdana,sans-serif;
    padding: 12px 64px;
    text-decoration: none;
}
.navigation a:hover {
    background: white;
    text-decoration: none;
}
.navigation li.navi a {
    border-left: 1px solid black;
}
Geht halt darum. Wenn ich das fenster verkleinere, dann ziehen sich die elemente in die nächste ebene. und das möchte ich nicht. ich möchte ganz einfach, dass die elemente überschrieben werden im fenster. Heißt fenster verkleinern, die elemente verschwinden sozusagen!
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben