Community-Management.info

Naruto123 · 27. April 2010

Habe mich mal an die Umsetzung eines Designs gewagt, aber ich krieg die Contentbox rechts einfach nicht auf die gleiche Höhe wie die Navigationsbox links.
Hier mal die Codes:

Code:

<!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">

<head>

<meta  http-equiv="content-type" content="text/html; charset=windows-1250"  />
<title>Türkis Design - Übung</title>
<link  href="style.css" type="text/css" rel="stylesheet" />

</head>

<body>

<div  id="header">
<img src="Bilder/page-header.jpg"  alt="Beispielname.de" width="370px" height="103px" />
</div>  

<div id="main-navi">
<ul>
<li><a  href="#">Startseite</a></li>
<li><a  href="#">Startseite</a></li>
<li><a  href="#">Startseite</a></li>
<li><a  href="#">Startseite</a></li>
</ul>
</div>

<div  id="sub-navi">
<div id="sub-navi-header">
<div  id="sub-navi-ueberschrift">
<h4>Navigation</h4>
<div  id="hyperlinks">
<ul>
<li><a  href="#">Hyperlink</a></li>
<li><a  href="#">Hyperlink</a></li>
<li><a  href="#">Hyperlink</a></li>
<li><a  href="#">Hyperlink</a></li>
<li><a  href="#">Hyperlink</a></li>
<li><a  href="#">Hyperlink</a></li>
<li><a  href="#">Hyperlink</a></li>
</ul>
</div>
</div>

<div  id="content-box">
<div id="content-box-header">
<div  id="content-box-ueberschrift">
Navigation
</div>
</div>
</div>
</div>

</div>

</body>

</html>

Code:

/*  CSS Document */

body, html {
margin: 0px;
padding: 0px;
font-family:  Verdana, Arial, Helvetica, sans-serif;
}

body {
background-color:  #007A6D;
}

#header {
position: relative;
width: 370px;
height:  103px;
margin: 0px auto;
}

#main-navi {
background-image:  url(Bilder/page-main-navigation.gif);
position: absolute;
width:  100%;
height: 46px;
background-repeat: repeat-x;
}

#main-navi  ul {
margin-left: 100px;
}

#main-navi li {
list-style:  none;
float: left;
padding: 0px 0px 0px 10px;
font-weight:  bold;
font-size: 0.8em;
}

#main-navi a:link, a:visited,  a:active {
text-decoration: none;
color: #ffffff;
}

#sub-navi  {
float: left;
margin-top: 103px;
background-color: #39beb0;
width:  175px;
height: 300px;
padding-top: 1px;
margin-left: 150px;
}

#sub-navi-ueberschrift  {
color: #1fbead;
margin-left: 1px;
padding-top: 1px;
font-size:  0.7em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:  bold;
text-align: center;
background-color: #168479;
width:  173px;
height: 32px;
}

#hyperlinks {
list-style: none;
padding:  10px;
}

#hyperlinks a:link, a:visited, a:active {
text-decoration:  none;
color: #ffffff;
}

#hyperlinks a:hover {
color:  #000000;
}

#hyperlinks li {
padding: 5px;
margin-right:  66px;
}

#content-box {
background-color: #39beb0;
width:  600px;
height: 300px;
padding-top: 1px;
margin-left: 300px;
}

Habe ich es überhaupt richtig gemacht mit den ganzen div-Tags oder ginge das auch einfacher und schlanker?
So sieht es aus, aber die Contentbox soll auf der gleichen Höhe wie die Navigationsbox links sein...

Christian · 27. April 2010

Du könntest uns viel Reinarbeit ersparen, wenn du die Seite bei funpic oder Co. (z.B. auf dein Webspace) hochlädst, damit wir den genauen "Fehler" ansehen können

.

Naruto123 · 27. April 2010

Zitat:

Zitat von Christian

Du könntest uns viel Reinarbeit ersparen, wenn du die Seite bei funpic oder Co. (z.B. auf dein Webspace) hochlädst, damit wir den genauen "Fehler" ansehen können

.

Habe mal einen Screen gemacht.

Habe das mit dem Hochladen noch nie gemacht und muss mir das erst anschauen, aber später werde ich das mal machen.

ddmler · 27. April 2010

Meine erste Idee die mir in den Sinn gekommen ist(keine Garantie auf Richtigkeit):

Code:

#sub-navi  {
float: left;
margin-top: 103px;
background-color: #39beb0;
width:  175px;
height: 300px;
padding-top: 1px;
margin-left: 150px;
vertical-align:top;
}


#content-box {
background-color: #39beb0;
width:  600px;
height: 300px;
padding-top: 1px;
margin-left: 300px;
vertical-align:top;
}

**Tim** · 28. April 2010

Puh, das ist aber strukturierter Quellcode...

Eventuell ist dir so geholfen:

Code:

#content-box {
background-color: #39beb0;
width:  600px;
height: 300px;
padding-top: 1px;
margin-top:-35px;  /* Hier  ist die Änderung  */
margin-left: 300px;
}

Ich würde das Ganze ein wenig anders aufbauen, aber viele Wege führen nach Rom.

Aber Quellcode:

Code:

<html>
   <head>
   </head>
   <body>
      <div id="a">
          <div id="b">
              <p>Text</p>
          </div>
      </div>
    </body>
</html>

Dann erkennst du direkt ob deine Divs alle geschlossen sind.

ddmler · 28. April 2010

Zitat:

Zitat von Tim

Dann erkennst du direkt ob deine Divs alle geschlossen sind.

Man braucht nur einen Editor wie zum Beispiel Notepad++. Dann braucht man nur einmal den Tag anklicken und man sieht ob er geschlossen ist oder nicht.

Naruto123 · 28. April 2010

Ich benutze zur Zeit PSPad.

Und danke. Es hat geklappt. Eigentlich ist der Code eigentlich ordentlicher alles schön mit dem Tabulator bearbeitet, aber mit dem Kopieren hat sich das irgendwie alles nach links verschoben.

**Tim** · 28. April 2010

@ddmler Trotzdem sollte man sich einen gut strukturierten Code gleich zu Anfang angewöhnen. Noch ist das gut überschaubar bei 2000 Zeilen Code wirds schlechter. Darum immer alles ordentlich einrücken.

Naruto123 · 28. April 2010

Code:

<!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">
  
  <head>

    <meta http-equiv="content-type" content="text/html; charset=windows-1250" />
    <title>Türkis Design - Übung</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
  
  </head>
  
  <body>

    <div id="header">
      <img src="Bilder/page-header.jpg" alt="Beispielname.de" width="370px" height="103px" />
    </div>  
    
    <div id="main-navi">
      <ul>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Startseite</a></li>
      </ul>
    </div>
       
    <div id="sub-navi">
      <div id="sub-navi-header">
        <div id="sub-navi-ueberschrift">
          <h4>Navigation</h4>
          <div id="hyperlinks">
              <ul>
                <li><a href="#">Hyperlink</a></li>
                <li><a href="#">Hyperlink</a></li>
                <li><a href="#">Hyperlink</a></li>
                <li><a href="#">Hyperlink</a></li>
                <li><a href="#">Hyperlink</a></li>
                <li><a href="#">Hyperlink</a></li>
                <li><a href="#">Hyperlink</a></li>
              </ul>
          </div>
      </div>
      
      <div id="content-box">
        <div id="content-box-header">
          <div id="content-box-ueberschrift">
          Navigation
          </div>
        </div>
      </div>
    </div>
    
    </div>

  </body>

</html>

So sieht es im Editor aus...

**Tim** · 28. April 2010

Das gefällt mir besser

Community-Management.info

Herzlich Willkommen auf Community-Management.info!