Anton: Elemente floaten

Beitrag lesen

SELF-Forum

Elemente floaten

Anton
– Informationen zu den Bewertungsregeln

Aber Du solltest mal etwas Code (HTML und CSS) zeigen, sonst bleibt das hier eine sehr unfruchtbare Diskussion.

Hier der Code (Button Rechts1 und Rechts2 zwei sollen im Layout vertauscht werden ohne das das Markup verändert wird):

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">  
  
 <head>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  <link href="css/main.css" rel="stylesheet" type="text/css"/>  
 </head>  
  
 <body>  
  <ul id="navigation">  
   <li><a href="#">Link1</a></li>  
   <li><a href="#">Links2</a></li>  
   <li class="buttonRechts1"><a href="#">Rechts1</a></li>  
   <li class="buttonRechts2"><a href="#">Rechts2</a></li>  
  </ul>  
  
  <div id="content">  
  </div>  
 </body>  
  
</html>  


  
* {  
 padding: 0px;  
 margin: 0px;  
}  
  
body {  
 width: 880px;  
 margin: 0px auto;  
 background: blue;  
}  
  
#content {  
 height: 400px;  
 clear: both;  
 border: 1px solid black;  
    border-left-color: white;  
 border-top-color: white;  
}  
  
#navigation {  
 float: left;  
 width: 880px;  
 list-style: none;  
 background: red;  
}  
  
#navigation li {  
 float: left;  
}  
  
#navigation a {  
 display: block;  
 width: 86px;  
 height: 35px;  
 line-height: 35px;  
 margin: 0px 2px 0px 0px;  
 text-align: center;  
 text-decoration: none;  
 border: 1px solid black;  
    border-left-color: white;  
 border-top-color: white;  
}  
  
#navigation .buttonRechts1 {  
 float: right;  
}  
  
#navigation .buttonRechts1  a{  
 margin: 0px 0px 0px 0px;  
}  
  
#navigation .buttonRechts2 {  
 float: right;  
}  
  
#navigation a:hover {  
 color: white;  
 background: #a00705;  
}
Beitrag melden
–
Informationen zu den Bewertungsregeln