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

Mein Design - Flexibel machen

H

Hansii

Mitglied
Hi.

Ich hatte eben ja schon gefragt, wie man ein Design flexibel macht. Nachdem ich mich lange Zeit mit HTML und CSS beschäftigt habe, und mittlerweile gut zurechtkomme, habe ich mein Design fertig.

So soll es aussehen :

http://www.info-bundesliga.de/design.png

Ihr könnt euch anschauen, wie es bei euch aussieht : Bundesliga Saison 2012/2013


Hier die Codes :


HTML :

HTML: 
<!DOCTYPE html>
<html>
<head>
 <title>Bundesliga Saison 2012/2013</title>
 <link rel="stylesheet" type="text/css" href="design.css" />
</head>
<body>
 <div id="wrapper">
  <div id="header">
   <div id="header_rechts">
    <ul>
     <li style="margin-left: 3px;"><a href="#">Home</a></li>
     <li><a href="#">National</a></li>
     <li><a href="#">International</a></li>
     <li><a href="#">Tippspiel</a></li>
     <li><a href="#">G&auml;stebuch</a></li>
     <li><a href="#">Forum</a></li>
    </ul>
   </div>
   <div id="header_links">
     <img src="fussball.png" style="float: left; margin-top: 20px; margin-left: 10px;">
     <img src="fussball.png" style="float: right; margin-top: 20px; margin-right: 10px;">
     <h1 style="padding-top: 35px; color: #ffffff; font-size: 30px;">Bundesliga Saison 2012/2013</h1>
   </div>
  </div>
  <div id="horizontal"></div>
  <div id="box">
  </div>
  <div id="main">
  </div>
  <div id="horizontal">
  </div>
  <div id="footer">
   <ul id="footer_liste">
    <li><a href="#">AGB</a></li>
    <li><a href="#">Datenschutz</a></a></li>
    <li><a href="#">Nutzungsbedingungen</a></li>
    <li><a href="#">Hilfe</a></li>
    <li><a href="#">Newsletter</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Impressum</a></li>
   </ul>
   <span>Copyright &copy 2012 Name</span>
  </div>
 </div>
</body>
</html>


CSS :

Code: 
/**************************************************ALLGEMEIN**************************************************/
html, body{
 font-family: Arial;
}


*{
 margin: 0;
 padding: 0;
 border: 0;
}


div#wrapper{
 width: 90%;
 margin: 0 auto;
 height: 800px;
}


div#horizontal{
 background: #000000;
 width: 100%;
 height: 15px;
}

/**************************************************HEADER UND NAVIGATION**************************************************/
div#header{
 width: 100%;
 height: 120px;
}


div#header_links{
 width: 54%;
 height: 120px;
 background: #088A08;
 text-align: center;
}


div#header_rechts{
 background: #088A08;
 height: 120px;
 width: 46%;
 float: right;
}


div#header_rechts ul li{
 display: inline;
 list-style-type: none;
 background: #01DF01;
 padding: 10px 10px 35px 10px;
 -webkit-border-bottom-left-radius: 20px;
 -moz-border-bottom-left-radius: 20px;
 border-bottom-left-radius: 20px;
 -webkit-border-bottom-right-radius: 20px;
 -moz-border-bottom-right-radius: 20px;
 border-bottom-right-radius: 20px;
}


div#header_rechts ul li a{
 font-size: 15px;
 font-weight: bold;
 color: #FFFFFF;
 text-decoration: none;
 -webkit-border-bottom-left-radius: 20px;
 -moz-border-bottom-left-radius: 20px;
 border-bottom-left-radius: 20px;
 -webkit-border-bottom-right-radius: 20px;
 -moz-border-bottom-right-radius: 20px;
 border-bottom-right-radius: 20px;
}


div#header_rechts ul li a:hover{
 text-decoration: underline;
}


/**************************************************INHALT**************************************************/
div#main{
 width: 75%;
 height: 500px;
 background: #01DF01;
 margin: 20px;
 -webkit-border-bottom-left-radius: 20px;
 -moz-border-bottom-left-radius: 20px;
 border-bottom-left-radius: 20px;
 -webkit-border-bottom-right-radius: 20px;
 -moz-border-bottom-right-radius: 20px;
 border-bottom-right-radius: 20px;
 -webkit-border-top-left-radius: 20px;
 -moz-border-top-left-radius: 20px;
 border-top-left-radius: 20px;
 -webkit-border-top-right-radius: 20px;
 -moz-border-top-right-radius: 20px;
 border-top-right-radius: 20px;
}


div#box{
 float: right;
 background: #088A08;
 height: 500px;
 width: 18.5%;
 margin: 20px;
 -webkit-border-bottom-left-radius: 20px;
 -moz-border-bottom-left-radius: 20px;
 border-bottom-left-radius: 20px;
 -webkit-border-bottom-right-radius: 20px;
 -moz-border-bottom-right-radius: 20px;
 border-bottom-right-radius: 20px;
 -webkit-border-top-left-radius: 20px;
 -moz-border-top-left-radius: 20px;
 border-top-left-radius: 20px;
 -webkit-border-top-right-radius: 20px;
 -moz-border-top-right-radius: 20px;
 border-top-right-radius: 20px;
}


/**************************************************FOOTER**************************************************/
div#footer{
 background: #088A08;
 height: 40px;
 width: 100%;
 -webkit-border-bottom-left-radius: 20px;
 -moz-border-bottom-left-radius: 20px;
 border-bottom-left-radius: 20px;
 -webkit-border-bottom-right-radius: 20px;
 -moz-border-bottom-right-radius: 20px;
 border-bottom-right-radius: 20px;
}


div#footer ul{
 float: right;
 margin-right: 100px;
}


div#footer ul li{
 display: inline;
 list-style-type: none;
}


div#footer ul li a{
 text-decoration: none;
 color: #FFFFFF;
 font-weight: bold;
 margin-right: 10px;
}


div#footer ul li a:hover{
 text-decoration: underline;
}


div#footer span{
 color: #ffffff;
 margin-left: 20px;
}

Wie mache ich dass so, das es für die meisten so wie im Bild aussieht ? Ich habe ja schon möglichst alles mit %-Angaben gemacht !?

Danke :D

PS: Designverbesserungsvorschläge sind immer erwünscht . Kritik auch !!!
 

Anhänge

  • design.jpg
    design.jpg
    13,6 KB · Aufrufe: 6
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben