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

Divisions zentrieren funktioniert nicht! + Grundaufbau

M

MichaelD97

Neues Mitglied
Hallo Community,
wir arbeiten in meiner Schule momentan an einer Webseite.
Unsere Lehrerin hat uns bislang NICHTS erklärt und Mittwochs müssen wir die Beta-Version der Seite präsentieren.

1.) Habt ihr Verbesserungsvorschläge für unsere Seite?

2.) Ist der Grundaufbau der Seite in Ordnung?

3.) Ich bekomm es einfach nicht hin, dass die Webseite bei (fast) allen Auflösungen zentriert ist. Wie krieg ich das hin?


Hier der Code der Startseite:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>  
<head>  
<meta http-equiv="content-type" content="text/html; charset=windows-1250">  
<meta name="generator" content="PSPad editor, www.pspad.com">  
<title>Geschichte vom Plöckenpass</title>    
<link href="./cssmenu./menu_assets./styles.css" rel="stylesheet" type="text/css">  
<link href="styles.css" rel="stylesheet" type="text/css">
  </head>   
 <body>   
<div id= "container">
  <div id= "head">    
<div id= "header"> 
  <h1>Der Plöckenpass</h1> 
 </div>   
     <!-- css Menü -->  
 <div id='cssmenu'>   
<ul>   
<li class='active '><a href='#'><span>Startseite</span></a></li>   
<li><a href='./Lage./Lage.html'><span>Lage</span></a></li> 
  <li><a href='./Geologie./Geologie.html'><span>Geologie</span></a></li> 
  <li><a href='./Geschichte./Geschichte.html'><span>Geschichte</span></a></li> 
  <li><a href='./Galerie./Galerie.html'><span>Bildergalerie</span></a></li></ul>  
 </div>    
  </div>  
      <div id='content'> 
   <p>Eindrucksvolle Wanderungen, die wie der gegenüberliegende Kleine Pal dramatische Einblicke in den Frontverlauf am Plöckenpass gewähren. Man bewegt sich fast durchgehend auf alten Kriegssteigen.<br />   
  Der Plöckenpass (italienisch Passo di Monte Croce Carnico), 1357 m ü. A., ist ein Pass in den Karnischen Alpen auf der Strecke von Mauthen im Gailtal (Kärnten) ins italienische Timau in Friaul. Von dort geht es weiter  südlich nach Tolmezzo, Udine und Venedig.     Westlich der Passhöhe liegt der Cellon (2241 m ü. A.), östlich der Kleine Pal (1867 m ü. A.). Beide Berge sind Teil des Freilichtmuseums am Plöckenpass, das die Befestigungsanlagen Österreich-Ungarns gegen Italien aus dem Gebirgskrieg 1915–1918 veranschaulicht.  </p>  
  </div>   
  </div> 
 </body>
</html>

Hier der Code für die CSS-Datei (ohne Menü) :

HTML: 
  body 
 {   
background: url(./images./Hintergrund.jpg);   
}    
#container 
 {    
height: 2000px;  
  width: 1000px; 
   margin: auto;  
  margin-left: 140px;
  }  
 #head  
 {  
 margin-top: 35px; 
  background-color: #686A6B; 
  height: 175px;  
 margin-right: auto; 
  margin-left: auto; 
  border-width: 5px; 
  border-color: #1D5C97; 
  border-style: ridge; 
  }    
  #header 
 {       
background: #000000 url(./cssmenu./menu_assets./images./bg-bubplastic-h-blue.gif) top left repeat-x;     
 color: #FFFFFF;  
margin-left: 70px;  
margin-right: 70px; 
 margin-top: 15px;  
margin-bottom: 15px;   
}    
h1   
{  
 font-size:35px;   
 text-align:center;
   font-family:'Comic Sans MS',sans-serif; 
 }
 #content    
{   
height: 350px;  
 margin-right: 20px;
   margin-left: 20px; 
  background-color: #686A6B; 
  margin-top: 75px;   
float: left; 
  border-width: 5px; 
  border-color: #1D5C97; 
  border-style: ridge; 
  }      
#content p   
 {   
 text-align: justify;    /*Text-Aurrichtung*/  
   font-size: 17px;  
  color: #000000;    
margin-right: 40%;    /*Zeilenlänge*/    
margin-top: 3px;   
 margin-left: 7px;   
 border-right: 5px dotted #1D5C97; 
   border-bottom: 5px dotted #1D5C97; 
  padding-top: 3px; 
   padding-left: 3px;  
  padding-right: 20px;   
 padding-bottom: 20px;   
 font-family: 'Comic Sans MS',sans-serif;   
}



Und der Code für die CSS-Formatierungen des Menüs:

HTML: 
#cssmenu 
{
    height: 37px;    
margin-left: 70px;  
margin-right: 70px;  
 margin-top: 15px;         
 margin-bottom: 15px;        
padding: 0;   
 background: #000000 url(./images./bg-bubplastic.gif) top left repeat-x;
}
#cssmenu ul 
{    
list-style: none;      /*keine Nummerierung*/    
margin-left: 18%;     /*Zur zentrierung */  
margin-bottom: 15px;    
padding: 0;    
 margin: 0 auto;
}
#cssmenu ul li 
{  
display: inline;    
margin: 0;    
padding: 0;       
background: transparent url(./images./bg-bubplastic-button.gif) top left no-repeat;
}
#cssmenu ul li a 
{    
display: block;           
height: 27px;    
padding-left: 35px;    
float: left;                    
text-transform: uppercase;    /**/    
font-family: 'Comic Sans MS', 'Helvetica Neue',helvetica,'microsoft sans serif',arial,sans-serif;    font-size: 15px;    
color: #FFFFFF;    
text-decoration: none;    /**/
}
#cssmenu ul li a span 
{          
display: block;                 
float: left;                    
height: 22px;    
padding-top: 5px;    
padding-right: 35px;    
background: transparent url(./images./bg-bubplastic-button.gif) top right no-repeat;    
cursor: pointer;     /**/
}

#cssmenu ul li a:hover,  #cssmenu ul li.active a 
{         
background: transparent url(./images./bg-bubplastic-h-blue.gif) top left no-repeat;
}
#cssmenu ul li a:hover span,             #cssmenu ul li.active a span 
{             
background: transparent url(./images./bg-bubplastic-h-blue.gif) top right no-repeat;
}


Hoff ihr könnt uns helfen. :-)

Mfg Michael.
 
Werbung:
Dem Container, der zentriert sein soll, sollte man "margin: 0 auto;" als CSS-Eigenschaft geben. Alternativ kann die 0 durch eine andere Einheit verändert werden.
 
Wenn ich "margin: 0 auto" verwende, ist bei mir alles Linksbündig.Muss wohl irgendeinen Fehler beim Aufbau/Strukturierung der Divisions gemacht haben.
:?
Trotzdem schon mal danke.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben