Webdesign Probleme (DIV Zentrieren und mehr...)

david96

Ensign
Registriert
März 2007
Beiträge
218
Hallo.

Zuerst mal meine Website an der ich Arbeite: http://dev.fs-kreis-olpe.de/privat_neu/

Folgendes Problem: Oben das Weiße soll direkt oben anfangen, dass da nicht noch dieser blaue Hintergrund ist,

und der Balken bei Menü & Header soll bis an den Rand gehen.

HTML Code (Header nicht dabei, da nicht relevant (oder?))

HTML:
<body>
                 <!-- Navigation und Header ANFANG -->
                    <div id="Header">
                     <img src="images/header3.png" alt="Headergrafik">
                    </div>
                 <!-- Navigation und Header ENDE -->

                 <!-- Inhalt ANFANG -->
                 <div id="Main_Back">
                      <div id="Main">
                      Test
                      </div>
                 </div>
                 <!-- Inhalt ENDE -->

                 <!-- Footer ANFANG -->


                 <!-- Footer ENDE -->
</body>

CSS:

Code:
/* Design für david96.de */
/* Verwendung auf anderen Seiten nicht gestattet */
/* CSS Grundgeruest by daser gfx & more - daser.a-rescue.de - Special THX */
/* Design by david96.de - David Färber - Copyright 2009 */

body {
text-align: center;
background: #B9E1FF;
}

/* Header - Grafik */

#Header {
background: url(images/header2.png);
height: 300px;
text-align: center;
width: 100%
}

/* Header - Navigation */

#Navi li {
display: inline;
list-style: none;

}

#Navi a {
font-family: Arial;
font-size: 16pt;
color: #004A7F;
text-decoration: none;
font-weight: bold;
}

#Navi a:hover {
font-family: Arial;
font-size: 16pt;
color: #004A7F;
text-decoration: underline;
font-weight: bold;
}

/* Main */

#Main {
background: #fff;
width: 800px;
left:50%;
margin-left: -400px;
font-family: Arial;
font-size: 12pt;
color: #000;
text-align: left;
position:absolute;
min-height: 500px;
}

#Main_Back {
background: #B9E1FF;
width: 100%;
}

#Main_Schrift {
font-family: Arial;
font-size: 12pt;
text-align: left;
color: #000;
margin: auto;
width: 800px;
}

#Main h1 {
font-family: Arial;
font-size: 20pt;
color: #004A7F;
font-weight: bold;
}

#Main h2 {
font-family: Arial;
font-size: 16pt;
color: #004A7F;
font-weight: bold;
}

#Main h3 {
font-family: Arial;
font-size: 14pt;
color: #004A7F;
font-weight: bold;
}

#Main h4 {
font-family: Arial;
font-size: 12pt;
color: #004A7F;
font-weight: bold;
}

#Main a {
font-family: Arial;
font-size: 12pt;
color: #004A7F;
font-weight: bold;
text-decoration: none;
}

#Main a:visited {
font-family: Arial;
font-size: 12pt;
color: #004A7F;
font-weight: bold;
text-decoration: none;
}

#Main a:hover {
font-family: Arial;
font-size: 12pt;
color: #004A7F;
font-weight: bold;
text-decoration: underline;
}

#Main a:active {
font-family: Arial;
font-size: 12pt;
color: #004A7F;
font-weight: bold;
text-decoration: underline;
}

/* Footer */

NEED HELP! :D Danke im Vorraus.
 
Dafür dibts die Option margin.

Das ganze kannst du in deiner vorhandenen CSS-Datei einfügen:
Code:
body
{
  margin:0; /* gilt dann für oben/unten/rechts/links */
}
oder
Code:
body
{
  margin-top:0;
  margin-left:0;
  margin-right:0;
}
 
Mercie, klappt perfekt. Neues Problem: Im Firefox wird alles korrekt angezeigt, der IE6 macht einen weißen Strich unter den Balken :(
 
Kann ich hier leider gerade nicht nachvollziehen.

Nur ein Hinweis: identische CSS-Formate musst du nicht jedesmal neu angeben
Code:
#Main a:link, #Main a:visited, #Main a:hover, #Main a:active {
font-family: Arial;
font-size: 12pt;
color: #004A7F;
font-weight: bold;
text-decoration: underline;
}
Auch die Überschfiten h1-h4 kannst du zusammenfassen und nur jeweils die Änderung der Schriftgröße extra notieren
Code:
#Main h1, #Main h2, #Main h3, #Main h4 {
font-family: Arial;
color: #004A7F;
font-weight: bold;
}

#Main h1 {
font-size: ...
}

#Main h2 {
font-size: ...
}

#Main h3 {
font-size: ...
}

#Main h4 {
font-size: ...
}
 
Zurück
Oben