Neues Design in XHTML und CSS, diverse Probleme

vbtricks

Servus @all,

folgende Layout-Vorlauge habe ich mir zusammengebastelt:
[Blockierte Grafik: http://vbtricks.vb.funpic.de/ztemp/design.jpg]

Das ganze möchte ich dann mittels XHTML und CSS in die Tat umsetzen. Da ich schon ein paar andere ähnliche Designs erstellt habe, kann ich den Großteil auch realisieren, nur eines will nicht funktionieren. Der obere horizontale schwarze Balken soll sich aus drei Teilen zusammensetzen:
1. 4px breiter Streifen links mit abgerundeter Ecke oben links.
2. variabler Teil mit wiederholter Grafik Verlauf
3. 4px breiter Streifen rechts mit abgerundeter Ecke oben rechts.

Ich habe versucht, das wie folgt zu realisieren:

Code

<div id="page">
      <div id="top">
        <div id="topleft"></div>
        <div id="topspace">
         VBTricks.de.vu
        </div>
        <div id="topright"></div>
      </div>
      <div id="featureitems">
      </div>
      <div id="content">
      </div>
    </div>

Alles anzeigen

mit CSS:

Code

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


body {
 background: url(backpattern.png);
}


#page {
 padding: 5px;
}


#top {
 height: 150px;
}


#topleft {
 background: url(topleft.png) no-repeat;
 left: 0px;
 top: 0px;
 width: 4px;
 height: 150px;
}


#topspace {
 background: url(topspace.png) repeat-x;
 top: 0px;
 height: 150px;
}


#topright {
 background: url(topright.png) no-repeat;
 right: 0px;
 top: 0px;
 width: 4px;
 height: 150px;
}

Alles anzeigen

Leider funktioniert das nicht so, wie ich mir das vorgestellt habe:
http://vbtricks.vb.funpic.de/ztemp/index.html
Wie muss ich topspace formatieren?

Danke im Voraus,

Stefan

PS: Ich würde das nur ungern mit Tabellen lösen
PPS: Guten Rutsch ins neue Jahr schon mal!

pindakaas

du hasst vergessen das alles zu floaten mach top left links floatent und topright rechts und die mitte auch left, dann musst du nur noch von dem mittleren wisth definieren prozentuale geht auch

Ronald

... und mit einer Tabelle wäre es viel einfach und auch deutlich weniger Quelltext.

G.a.d.M.

Ronald

vbtricks

Servus,

funktioniert mit pindakaas' Methode. Thx

Stefan

pindakaas

Zitat von Ronald

... und mit einer Tabelle wäre es viel einfach und auch deutlich weniger Quelltext.

G.a.d.M.

Ronald

ja er hat schon n paar viele divs zum beispiel das page dvi ist sinnlos soweit ich sehen kann
und meiner meinung auch das top div

internetkonzept

Zitat von Ronald

... und mit einer Tabelle wäre es viel einfach und auch deutlich weniger Quelltext.

G.a.d.M.

Ronald

arghl
Wäre es nicht.
Weniger Quelltext mit Tabellen ist doch - mit Verlaub - völliger Blödsinn.
Man muss nur mit den DIV-Containern richtig arbeiten.
Wenn man z.B. anstatt der Sidebar-DIVs mal ne Liste nimmt, spart das deutlichst an Quellcode.

Code

<div id = "page">

Könnte man völlig weglassen

Die Top-Navi

Code

<div id="featureitems">
 [url='']<span class="a_featureitem">Home</span>[/url]
 [url='']<span class="a_featureitem">Blog</span>[/url]
 [url='']<span class="a_featureitem">Guestbook</span>[/url]
 [url='']<span class="a_featureitem">License</span>[/url]
 [url='']<span class="a_featureitem">Credits</span>[/url]
</div>

Ersetzen durch

Code

<ul id="featureitems">
 [*][url='']Home[/url]
 [*][url='']Blog[/url]
 [*][url='']Guestbook[/url]
 [*][url='']License[/url]
 [*][url='']Credits[/url]
[/list]

Die Subnavi

Code

<div id="sidebar">
 <div id="subsections">
  <div id="subsectionstop"></div>
   <div id="subsectionscontent">
    [url='']<span class="a_subsection">Subsection1</span>[/url]


    [url='']<span class="a_subsection">Subsection1</span>[/url]


    [url='']<span class="a_subsection">Subsection1</span>[/url]


    [url='']<span class="a_subsection">Subsection1</span>[/url]


    [url='']<span class="a_subsection">Subsection1</span>[/url]


    [url='']<span class="a_subsection">Subsection1</span>[/url]
   </div>
  <div id="subsectionsbottom"></div>
 </div>
 <div id="featuring">
  <div id="featuringtop"></div>
   <div id="featuringcontent">
    [url='']<span class="a_featuring">XHTML</span>[/url]


    [url='']<span class="a_featuring">CSS</span>[/url]


    [url='']<span class="a_featuring">PHP</span>[/url]


    [url='']<span class="a_featuring">MySQL</span>[/url]


   </div>
  <div id="featuringbottom"></div>
 </div>
 <div id="milestones">
  <div id="milestonestop"></div>
   <div id="milestonescontent">
    Forum postings


    [url='']<span class="a_milestone">vb[at]rchiv 1000</span>[/url]
   </div>
  <div id="milestonesbottom"></div>
 </div>
</div>

Alles anzeigen

Geht einfacher und sematisch richtiger mit:

Code

<div id="sidebar">
  <h4 id="subsectionstop">Subsections</h4> 
    <ul>
    [*][url='']Subsection1[/url]
    [*][url='']Subsection1[/url]
    [*][url='']Subsection1[/url]
    [*][url='']Subsection1[/url]
    [*][url='']Subsection1[/url]
    <li class="lastList">[url='']Subsection1[/url]
   [/list]
 <h4 id="featuring">Featuring</h4> 
  <ul>
    [*][url='']XHTML[/url]
    [*][url='']CSS[/url]
    [*][url='']PHP[/url]
    <li class="lastList">[url='']MySQL[/url]
   [/list]
  <h4 id="milestones">Milestones</h4>



Forum postings</p>
  <p class="lastParagraph">[url='']vb[at]rchiv 1000[/url]
</div>

Alles anzeigen

Die Header <h4> definierst Du mit Hintergrundbild ohne Text.
Den Text lieber in den Quelltext schreiben. Ist leichter beim Ändern.
Die Listenpunkte [*] und Paragraphen

definierst Du auch mit Hintergrund(bild).
Den Klassen "lastList" und "lastParagraph" weist Du einfach das Hintergrundbild mit den runden Ecken zu und setzt einen Padding-Wert nach unten, sodass die Höhe etwas größer ist, falls Du das möchtest.
Die <span>s kannst du völlig weglassen!

Tabellen erzeugen IMMER mehr Quellcode als semantischer Quellcode!
Siehe auch Böse Tabellen, gute Tabellen

Liebe Grüße

Alex

vbtricks

Servus,

sorry das ich mich so spät melde. Erst mal vielen Dank für dein Posting, mit einer so umfassenden Betrachtung meiner Seite, wie von dir erfolgt, hätte ich nicht gerechnet.
Das mein XHTML nicht perfekt ist, weiß ich, auch, dass man viele Dinge besser machen kann/könnte. Ich habe aber bewusst viele divs genommen, damit ich bei späteren Veränderungen mehr Spielraum habe.
Für die <span>'s in den Links habe ich inzwischen eine elegantere Lösung gefunden, indem die a-Klasse für die einzelnen divs verschieden festgelegt wird:

Code

#subsectionscontent a {..}
#subsectionscontent a:hover {..}
#featuringcontent a {..}
..

Werde jetzt erst mal die restlichen Features fertig implementieren und mein Admin-Oberfläche fürs CMS etwas optimieren und dann schauen, inwieweit ich was übernehme.

Vielen Dank nochmal,

Stefan

Tags