CSS newbie - brauche hilfe bei meinen ersten versuchen.

mirmoos · 27.01.2010

Hallo Leute,

Ich bin relativ neu im Thema CSS und hab mich jetzt mal hingesetz und versucht ohne tuts und der gleichen ein CSS Layout zu erstellen. Das aht im großen und ganzen ganz gut funktioniert allerdings habe ich noch ein Problem mit der rechten navi Box. Vlt könnt ihr einfach mal über meinen Code schaun.

Danke schon mal im Voraus.

Gruß Chris

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style>

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

body {
    background-color:#CCC;
    font-family:Verdana, Geneva, sans-serif;
    color:black;
    font-size:10px;
}

#wrapper {
    width:900px;
    margin: 20px auto;
}

#header {
    width: auto;
    height: 80px;
    padding: 5px;
    margin: 10px;
    
    border: 1px solid black;
    background-color:#F60;
}

#left {
    width: 190px;
    
    border: solid black 1px;
    margin-left: 10px;
    margin-bottom: 10px;
    padding: 10px;
    float:left;
}

#content {
    border: solid black 1px;
    margin-left: 230px;
    margin-right: 230px;
    padding: 10px;
}

#right {
    width: 190px;
    border: solid black 1px;
    padding: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    float:right
}

#footer {
    clear:both;
    width: auto;
    height: 80px;
    padding: 5px;
    margin: 0px 10px;    
    border: 1px solid black;
    background-color:#F60;    
}

ul li {
    margin-left:15px;
}

</style>
</head>

<body>
<div id="wrapper">

  <div id="header"><h1>#Header</h1></div>
    
  <div id="left">
    
    <h1>#Navi links</h1>
    
    <ul id="nav">
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Clients</a></li>
       <li><a href="#">Contact Us</a></li>
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Clients</a></li>
       <li><a href="#">Contact Us</a></li>
    </ul>    
    
   </div><!--Ende left-->
    
  <div id="content">
  
      <h1>#Content</h1>
      
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
      
      <br />
      
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  
  
  
  </div><!--Ende content-->
    
    <div id="right">    
        
        <h1>#Navi rechts</h1>
        
        <ul id="nav">
           <li><a href="#">Home</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Clients</a></li>
           <li><a href="#">Contact Us</a></li>
           <li><a href="#">Home</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Clients</a></li>
           <li><a href="#">Contact Us</a></li>
        </ul>    
    
    </div><!--Ende right-->
    
    <div id="footer"><h1>#footer</h1></div>

</div><!--Ende wrapper-->

</body>
</html>

BlackPro · 27.01.2010

AW: CSS newbie - brauche hilfe bei meinen ersten versuchen.

ohh und ich wollt dir schon in Counterstrike Source weiterhelfen

noodless · 27.01.2010

AW: CSS newbie - brauche hilfe bei meinen ersten versuchen.

darf man erfahren, was das problem ist? habs nur schnell überfolgen, da direkt nichts gesehen, aber wenn du mir sagst was, kann ich dir vielleicht konkret helfen ;>

mirmoos · 27.01.2010

AW: CSS newbie - brauche hilfe bei meinen ersten versuchen.

Hallo,

stimmt genau das prob hab ich direkt beschrieben.

Und zwar flutscht die rechte navibox immer unter den Rand des contents.
sollte allerdings auch am unteren rand des headers hängen.

Gruß Chris

Metal_Head · 27.01.2010

AW: CSS newbie - brauche hilfe bei meinen ersten versuchen.

Versuch's mal so:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style>

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

body {
    background-color:#CCC;
    font-family:Verdana, Geneva, sans-serif;
    color:black;
    font-size:10px;
}

#wrapper {
    width:900px;
    margin: 20px auto;
}

#header {
    width: auto;
    height: 80px;
    padding: 5px;
    margin: 10px;
    
    border: 1px solid black;
    background-color:#F60;
}

#left {
    width: 190px;
    
    border: solid black 1px;
    margin-left: 10px;
    margin-bottom: 10px;
    padding: 10px;
    float:left;
}

#content {
    border: solid black 1px;
    margin-left: 230px;
    margin-right: 230px;
    padding: 10px;
    float:center;
}

#right {
    width: 190px;
    border: solid black 1px;
    padding: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    float:right
}

#footer {
    clear:both;
    width: auto;
    height: 80px;
    padding: 5px;
    margin: 0px 10px;    
    border: 1px solid black;
    background-color:#F60;    
}

ul li {
    margin-left:15px;
}

</style>
</head>

<body>
<div id="wrapper">

  <div id="header"><h1>#Header</h1></div>
    
  <div id="left">
    
    <h1>#Navi links</h1>
    
    <ul id="nav">
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Clients</a></li>
       <li><a href="#">Contact Us</a></li>
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Clients</a></li>
       <li><a href="#">Contact Us</a></li>
    </ul>    
    
   </div><!--Ende left-->


<div id="right">    
        
        <h1>#Navi rechts</h1>
        
        <ul id="nav">
           <li><a href="#">Home</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Clients</a></li>
           <li><a href="#">Contact Us</a></li>
           <li><a href="#">Home</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Clients</a></li>
           <li><a href="#">Contact Us</a></li>
        </ul>    
    
    </div><!--Ende right-->
    
  <div id="content">
  
      <h1>#Content</h1>
      
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit 

amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper 

pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, 

sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu 

vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
      
      <br />
      
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit 

amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper 

pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, 

sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu 

vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  
  
  
  </div><!--Ende content-->
    
    
    
    <div id="footer"><h1>#footer</h1></div>

</div><!--Ende wrapper-->

</body>
</html>

Ich hab im HTML-Teil die Navi rechts einfach vor den Content gesetzt...
Sollte klappen...

mirmoos · 27.01.2010

AW: CSS newbie - brauche hilfe bei meinen ersten versuchen.

Ich dachte html interne eihenfolge macht im CSS nichts aus?

ich versuchs einfach mal. Ich sag dann bescheid.

EDIT:

Tatsächlich jetz funktioniert es einwandfrei.

hast du nur die reihenfolge im html geändert? Nichts anderes?
Ich hab eine tut DVD da sagt der "Lehrer" das die Reihenfolge egal ist.

Aber wenn ich das jetzt weis. ;-)

Vielen Dank für eure schnelle Hilfe

noodless · 27.01.2010

AW: CSS newbie - brauche hilfe bei meinen ersten versuchen.

die änderung hier ist im html teil und nicht im css teil ;>

im css teil ist es natürlich unwichtig, wie man es anordnet, aber im html teil schon

mirmoos · 27.01.2010

AW: CSS newbie - brauche hilfe bei meinen ersten versuchen.

kann es sein das es bei absoluter positionierung egal ist und bei float zu beachten ist?

Gruß Chris

Metal_Head · 27.01.2010

AW: CSS newbie - brauche hilfe bei meinen ersten versuchen.

mirmoos schrieb:
hast du nur die reihenfolge im html geändert? Nichts anderes?

Ich hab in dem CSS Teil noch im Content "float:center;" hinzugefügt, aber geht auch ohne...

mirmoos schrieb:
kann es sein das es bei absoluter positionierung egal ist und bei float zu beachten ist?

Da kann dir jemand anderes besser helfen als ich, ich bin nicht so sehr fit in HTML und CSS... (bin auch erst am anlernen...

)

mirmoos · 27.01.2010

AW: CSS newbie - brauche hilfe bei meinen ersten versuchen.

Metal_Head schrieb:
Ich hab in dem CSS Teil noch im Content "float:center;" hinzugefügt, aber geht auch ohne...

Hab ich auch schon aus probiert... ändert nichts genau

Ich hab die ganze Zeit im CSS geändert und probiert und zum schluss leigts doch am html

naja wenn man's weis.