Ergebnis 1 bis 7 von 7

Thema: Neues Design in XHTML und CSS, diverse Probleme

  1. #1
    Kaiserliche Hoheit Avatar von vbtricks
    Registriert seit
    26.12.2005
    Beiträge
    1.586
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Neues Design in XHTML und CSS, diverse Probleme

    Servus @all,

    folgende Layout-Vorlauge habe ich mir zusammengebastelt:


    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>
    mit CSS:
    Code:
    * &#123;
     padding&#58; 0px;
     margin&#58; 0px;
    &#125;
    
    body &#123;
     background&#58; url&#40;backpattern.png&#41;;
    &#125;
    
    #page &#123;
     padding&#58; 5px;
    &#125;
    
    #top &#123;
     height&#58; 150px;
    &#125;
    
    #topleft &#123;
     background&#58; url&#40;topleft.png&#41; no-repeat;
     left&#58; 0px;
     top&#58; 0px;
     width&#58; 4px;
     height&#58; 150px;
    &#125;
    
    #topspace &#123;
     background&#58; url&#40;topspace.png&#41; repeat-x;
     top&#58; 0px;
     height&#58; 150px;
    &#125;
    
    #topright &#123;
     background&#58; url&#40;topright.png&#41; no-repeat;
     right&#58; 0px;
     top&#58; 0px;
     width&#58; 4px;
     height&#58; 150px;
    &#125;
    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!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Farben richtig wählen: ColorBlender
    Website validieren: W3C Markup Validation Service
    Meine Website: vbtricks
    Kleines Snake zwischendurch?

  2. #2
    Großmeister(in)
    Registriert seit
    27.09.2005
    Beiträge
    591
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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
    lieber mal hier http://de.selfhtml.org nachgucken

  3. #3
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

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

    G.a.d.M.

    Ronald

  4. #4
    Kaiserliche Hoheit
    Themenstarter
    Avatar von vbtricks
    Registriert seit
    26.12.2005
    Beiträge
    1.586
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Servus,

    funktioniert mit pindakaas' Methode. Thx


    Stefan
    Farben richtig wählen: ColorBlender
    Website validieren: W3C Markup Validation Service
    Meine Website: vbtricks
    Kleines Snake zwischendurch?

  5. #5
    Großmeister(in)
    Registriert seit
    27.09.2005
    Beiträge
    591
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat 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
    lieber mal hier http://de.selfhtml.org nachgucken

  6. #6
    Teeny
    Registriert seit
    20.12.2005
    Ort
    Berlin
    Beiträge
    23
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat 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
    Ersetzen durch
    Code:
    <ul id="featureitems">[*]Home[*]Blog[*]Guestbook[*]License[*]Credits[/list]
    Die Subnavi
    Code:
    <div id="sidebar">
     <div id="subsections">
      <div id="subsectionstop"></div>
       <div id="subsectionscontent">
        <span class="a_subsection">Subsection1</span>
    
        <span class="a_subsection">Subsection1</span>
    
        <span class="a_subsection">Subsection1</span>
    
        <span class="a_subsection">Subsection1</span>
    
        <span class="a_subsection">Subsection1</span>
    
        <span class="a_subsection">Subsection1</span>
       </div>
      <div id="subsectionsbottom"></div>
     </div>
     <div id="featuring">
      <div id="featuringtop"></div>
       <div id="featuringcontent">
        <span class="a_featuring">XHTML</span>
    
        <span class="a_featuring">CSS</span>
    
        <span class="a_featuring">PHP</span>
    
        <span class="a_featuring">MySQL</span>
    
       </div>
      <div id="featuringbottom"></div>
     </div>
     <div id="milestones">
      <div id="milestonestop"></div>
       <div id="milestonescontent">
        Forum postings
    
        http://<span class="a_milestone">vb&#91;...iv 1000</span>
       </div>
      <div id="milestonesbottom"></div>
     </div>
    </div>
    Geht einfacher und sematisch richtiger mit:
    Code:
    <div id="sidebar">
      <h4 id="subsectionstop">Subsections</h4> 
        <ul>[*]Subsection1[*]Subsection1[*]Subsection1[*]Subsection1[*]Subsection1
        <li class="lastList">Subsection1[/list]
     <h4 id="featuring">Featuring</h4> 
      <ul>[*]XHTML[*]CSS[*]PHP
        <li class="lastList">MySQL[/list]
      <h4 id="milestones">Milestones</h4>
      
    
    Forum postings</p>
      <p class="lastParagraph">vb&#91;at&#93;rchiv 1000
    </div>
    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
    internetkonzept.de » Das Journal rund um Webstandards und Netzkultur

  7. #7
    Kaiserliche Hoheit
    Themenstarter
    Avatar von vbtricks
    Registriert seit
    26.12.2005
    Beiträge
    1.586
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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 &#123;..&#125;
    #subsectionscontent a&#58;hover &#123;..&#125;
    #featuringcontent a &#123;..&#125;
    ..
    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
    Farben richtig wählen: ColorBlender
    Website validieren: W3C Markup Validation Service
    Meine Website: vbtricks
    Kleines Snake zwischendurch?

Ähnliche Themen

  1. Neues Design!
    Von Blueberry585 im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 9
    Letzter Beitrag: 18.08.2008, 07:25
  2. Neues Design
    Von Greg10 im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 24
    Letzter Beitrag: 22.03.2008, 22:38
  3. Neues Design
    Von Raykonboss im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 25
    Letzter Beitrag: 09.03.2008, 19:44
  4. diverse Probleme
    Von Reisflitzer im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 30.10.2006, 09:22
  5. Neues Design
    Von Sicarius im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 16
    Letzter Beitrag: 04.05.2005, 20:00

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •