✔ Designerstellung - tipps?

[ms92]

Hallo,
ich wollte fragen, wie ihr das angehängte Design mit HTML und CSS gestalten würdet. Also welche Divs und wie würde man die positionieren können mit CSS?
Und halt auch so, dass wenn mehr Inhalt kommt das Fenster auch länger wird... ich habe mir zwar schon ein paar Tutorials durchgelesen, aber iwie weiß ich nicht weiter. Natürlich sollt ihr mir das nicht schreiben, sondern nur empfehlen, wie man das am besten machen könnte. Ich steh nämlich ein bisschen aufm Schlauch
lg
ms92

 

[Maik]

Hi,

grundsätzlich liesse sich das Design als zweispaltiges Layout umsetzen, das auf der float-Eigenschaft beruht.

Bleibt von meiner Seite erstmal die Frage offen, ob die Grafik auf der rechten Seite gemeinsam mit dem Navigationsmenü nach unten wandern soll, wenn der Seiteninhalt zunimmt?

mfg Maik

 

[ms92]

ja das wäre am besten, also ich meine, dass das Bild mit runterwandert.
Es wird auch nicht so viel Inhalt dass die Navigation verschwindet...
Könnte man nicht sozusagen zwei spalten machen und dann noch eine drunter?

 

[Maik]

Das wäre mein persönliches grundlegendes Konzept für das Layout:

• Markup:

<div id="wrapper">
     <div id="leftCol">
          <h1>Neuigkeiten</h1>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
          <p>Inhalt</p>
     </div>
     <div id="rightCol">
          <h1>Titel</h1>
     </div>
     <div id="navi">
          <ul>
              <li><a href="#">link 1</a></li>
              <li><a href="#">link 2</a></li>
              <li><a href="#">link 3</a></li>
          </ul>
     </div>
</div>

• Stylesheet:

#wrapper {
width:700px;
margin:0 auto;
border:1px solid #00e0ff;
background:url(wrapper_bgImage.png) right top repeat-y;
padding-bottom:50px;
}

#leftCol {
float:left;
width:500px;
}

#leftCol h1, #leftCol p {
margin-left:10px;
margin-right:10px;
}

#rightCol {
float:right;
width:200px;
}

#rightCol h1 {
text-align:center;
color:#fff;
}

#navi {
clear:both;
height:70px; /* entspricht der Höhe der Grafik auf der rechten Seite */
background: #1b76e4 url(panel.png) no-repeat right top;
}

#navi ul {
margin:0;
padding:0;
list-style:none;
}

#navi li {
display:inline;
}

Das komplette Beispiel mit den beiden eingebundenen Hintergrundbildern stelle ich dir hier als ZIP-Datai zur Verfügung.

mfg Maik

 

[ms92]

Danke, dass du dir die Arbeit gemacht hast und das zu schreiben... ist ja eigentlich ganz logisch... hm, hätte ich eigentlich selbst drauf kommen müssen
jetzt kann ich auch weiter arbeiten