[XHTML/CSS] Hulp nodig met semantiek - Softwareontwikkeling

vrijdag 7 maart 2008 17:43

Acties:

Topicstarter

Ik ben een website voor persoonlijke doeleinde aan het bouwen maar zit volledig in de knoop met het semantisch opbouwen van mijn website met de door mij geslice'de afbeeldingen.

De situatie

Allereerst hoe mijn website (zonder content) er uiteindelijk uit moet zien qua positionering van de div's:

Dan nu hoe mijn website er uit ziet met mijn huidige code

Download de PSD inclusief slices hier.

Het probleem is dat de positionering niet klopt. De header en bottom staan gelukkig goed, daar ben ik alvast trots op

Maar sowieso zal mijn CSS waarschijnlijk wel niet kloppen, en het gebruik van div's zit ik ook mee te klooien op 1 stukje... Misschien kloppen mijn slices ook niet, ik heb het zo efficiënt mogelijk geprobeerd te slicen, door kleine elementen die telkens terugkomen (zoals de achterond) te slicen in 1 klein blokje die vervolgens continu herhaald moet worden. Algoed, de code...

De code

index.php

HTML:

 <body>

  <div id="wrapper">

    <div id="header"></div>

     <div id="menu_container">
     <div align="center">

      <div class="border_left"></div>
      <div class="menu_top"></div>
      <ul>
       <li><img src="images/button_home.gif"></li>
       <li><img src="images/button_newest.gif"></li>
       <li><img src="images/button_archive.gif"></li>
       <li><img src="images/button_references.gif"></li>
       <li><img src="images/button_contact.gif"></li>
      </ul>

     <div id="bottom_container1">
      <div class="menu_bottom"></div>
     </div>
     <div id="bottom_container2">
      <div class="menu_bottom2"></div>
     </div>

      <div class="border_left"></div>

     </div>
     </div>

     <div id="content_container">
      <div class="content_box">
       <h1>Test</h1>
       <p>Paragraph met test-tekst.</p>
      </div>
     </div>

     <div id="right_bar">
      <div class="border_right"></div>
     </div>

     <div id="footer">
      <div class="footer"></div>
     </div>

  </div>

 </body>

style.css

Cascading Stylesheet:

body{
background: url("images/background_stripes.gif");
font-family: Myriad Pro, Calibri, Verdana;
font-size: 11px;
color: #000000;
margin: 0px;
padding: 0px;
}

ul{
list-style: none;
} 

/* div id's */

#wrapper{
background: url("images/background_stripes.gif");
width: 986px;
margin: 0px auto;
padding: 0px;
}

#header{
background: url("images/header.gif");
width: 804px;
height: 149px;
float: left;
}

#menu_container{
width: 166px;
float: left;
padding-top: 178px;
}

#bottom_container1{
width: 151px;
float: left;
}
#bottom_container2{
width: 15px;
float: left;
}

#content_container{
width: 804px;
float: left;
}

#right_bar{
width: 16px;
float: left;
}

#footer{
clear: both;
width: 804px;
height: 100px;
}

/* div classes */

.border_left{
background: url("images/border_left.gif");
width: 15px;
}

.menu_top{
background: url("images/menu_top.gif");
width: 166px;
height: 7px;
}

.button_home{
background: url("images/button_home.gif");
width: 166px;
height: 55px;
}
.button_newest{
background: url("images/button_newest.gif");
width: 166px;
height: 55px;
}
.button_archive{
background: url("images/button_archive.gif");
width: 166px;
height: 55px;
}
.button_references{
background: url("images/button_references.gif");
width: 166px;
height: 55px;
}
.button_contact{
background: url("images/button_contact.gif");
width: 166px;
height: 55px;
}

.menu_bottom{
background: url("images/menu_bottom.gif");
width: 151px;
height: 7px;
}
.menu_bottom2{
background: url("images/menu_bottom2.gif");
width: 15px;
height: 7px;
}

.content_box{
background: url("images/contentbox.gif") repeat-y;
width: 804px;
float: left;
font-family: Myriad Pro, Calibri, Verdana;
text-align: left;
color: #000000;
padding: 10px;
}

.border_right{
background: url("images/border_right.gif");
width: 16px;
}

.footer{
background: url("images/footer.gif");
width: 804px;
height: 100px;
font-family: Myriad Pro, Calibri, Verdana;
text-align: center;
color: #333333;
}

Het ziet er wellicht ingewikkeld uit, dat is het ook

Ik heb het zo netjes en overzichtelijk mogelijk neergezet zodat jullie het snel kunnen zien.

Problemen

Probleem 1 is dat ik onder m'n menu 2 vlakjes heb, die ik beide in een aparte div id heb gezet, met beide een aparte div class. Dit zijn menu_bottom en menu_bottom2, die dus onder het menu moeten komen te staan, naast elkaar. Kun je 2 classes naast elkaar zetten in 1 id?
Probleem 2 is dat mijn menu natuurlijk niet aan de top moet beginnen maar zoals in het screenshotje te zien is meer ergens halverwege. Hoe pak ik dit aan Daarnaast staat m'n menu nu rechts ipv links
Probleem 3 is dat de achtergrond voor het content_container gedeelte (1px hoog) wel een paar keer herhaald lijkt te worden, maar slechts 10px oid, terwijl deze toch wel zo'n 600px hoog zou moeten zijn

De rest wijst zichzelf wel uit, er klopt dus gewoon geen reet van

Wat ik al heb geprobeerd/gezocht

Ik heb al heel veel gezocht over semantiek en er mee geoefend, maar dit is de eerste keer dat ik zo'n "ingewikkelde" constructie geheel semantisch ga schrijven, normaal liet ik Photoshop lekker tabled xhtml uitpoepen

Ik heb al gezocht op http://www.depiction.net/...ss/dynamiccontainers2.php,
http://gurnk.com/xhtml-tutorials/coding-in-xhtml-and-css/,
http://www.celoxdesign.ne...e-and-code-a-layout/id/43
En verder heb ik nog meer op google gezocht en op GoT veel topics gevonden over semantiek, hoewel deze grotendeels bestonden uit discussies over het nut van semantiek, of over specifieke vragen over problemen die niet van toepassing zijn op mijn website.

vrijdag 7 maart 2008 17:48

Acties:

BtM909

Watch out Guys...

Semantiek betekent dat je betekenisvolle elementen gaat gebruiken. Dus geen DIV-alicious

Voor je menu gebruik je li's, voor headers h1's, h2's, etc., voor content p's

Nu kijkend naar je problemen:

1. Je kan een element meerdere classes meegeven

2. Kijk eens naar margin of zoek naar vertical align

3. Zet eens borders om elementen of kijk met de webdeveloper toolbar in Firefox. Een float haalt een element uit de flow van het document, waardoor een element eerder ophoudt dan jij denkt

algemeen
Begin eerst even opnieuw de content in te delen met de juiste elementen en ga daarna pas kijken naar opmaak. WAt betreft opmaak is het een hele slechte zaak om aan de hand van je slices te gaan kijken hoe je het in HTML moet gaan proggen, want slicing is voornamelijk uit de table-design gedachte gemaakt. Probeer andersom te beredeneren door naar je pagina elementen te kijken en die vorm te geven. Moet je elementen gaan groeperen, grijp dan naar een element als div

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 7 maart 2008 18:00

Acties:

Avalaxy

Topicstarter

<h>, <p> tags en dergelijken ga ik nog gebruiken op semantische wijze, voor de indeling heb ik alleen div's gekozen, en de menu items heb ik zo gemaakt dat de tekst er al opstaat aangezien ik dat lekkerder vind werken dan zelf losse tekst erop te zetten.

Dat van het menu naar beneden is nu gelukt, padding had ik idd zelf ook wel aan kunnen denken

Echter klopt het nog niet, want hij weet mijn menu op een rare wijze uit elkaar te trekken:

Wat betreft mijn vraag over meerdere classes in 1 element, ik weet dat er meerdere classes in kunnen, maar kunnen die ook naast elkaar, of alleen onder elkaar?

En hoe krijg ik die borders en dat menu naar de andere kant

Anyway, je zegt dus dat ik beter opnieuw kan beginnen op een andere manier. Eerst dus een constructie maken met de elementen (header, content, footer) en aan de hand daarvan slices te maken. Ik heb serieus geen idee hoe ik dat dan aan moet gaan pakken

Sorry voor m'n noobheid. Ben meer een hardware-fanaat

vrijdag 7 maart 2008 18:27

Acties:

djluc

Begin eerst met je document in HTML op te maken zodat het een logisch verhaal wordt. Dus het menu in een <ul> tag, wat tekst in <p> tags en wat headers met <h1/h2/etc>tags. Als het goed is houd je dan een mooi documentje over. Laat dat hier zien, dan zullen we je wat hints geven om je opmaak daar goed in te verwerken.

vrijdag 7 maart 2008 18:54

Acties:

Avalaxy

Topicstarter

djluc schreef op vrijdag 07 maart 2008 @ 18:27:
Begin eerst met je document in HTML op te maken zodat het een logisch verhaal wordt. Dus het menu in een <ul> tag, wat tekst in <p> tags en wat headers met <h1/h2/etc>tags. Als het goed is houd je dan een mooi documentje over. Laat dat hier zien, dan zullen we je wat hints geven om je opmaak daar goed in te verwerken.

Ik ben er mee bezig

Ik zie ook waarom mijn menu in het midden staat, boven m'n content vlak, weet alleen niet hoe ik de hele zooi kan verschuiven naar links.

1 Vraagje mbt het menu, ik gebruik nu de <ul> tag in plaats van div classes, en dan renderen de afbeeldingen wel min of meer correct, alleen krijg ik zo'n zwart puntje ervoor omdat ik <li></li> tags gebruik voor elk onderdeel in de list. Is daar iets anders voor of moet je die weghalen met CSS dmv "list-style: none;"? Daarnaast zit er nu een spacing van enkele pixels tussen de afbeeldingen. Moet nog even zoeken hoe ik dit fix, maar dit laat me denk dat <li> de verkeerde manier is...

Ok, background van m'n content vlak rekt mooi mee

Nu moet het menu naar links, de menu_bottom en menu_bottom2 moeten goed (naast elkaar) onder het menu komen, en zowel onder als boven het menu moet de left_border meegerekt worden met de site. Ook aan de rechterkant moet die rand nog even op de goede plaats komen en over de hele lengte meegerekt worden.

Dit moet wel op te lossen zijn in m'n code zonder helemaal overnieuw te beginnen toch?

(ik pas ook gelijk de code die in de TS even aan naar wat ik nu heb...)

[ Voor 31% gewijzigd door Avalaxy op 07-03-2008 23:44 ]

zaterdag 8 maart 2008 21:14

Acties:

Avalaxy

Topicstarter

Ok, een update. Even de code herschreven.

Alleereerst de results:

In Internet Explorer 7 begint het al enigzinds ergens op te lijken...

In FireFox niet...

De code:

index.php

HTML:

 <body>
  
  <div id="wrapper">

   <div id="left_container">
   <div align="right">
    <div class="border_left"></div>
    <div class="menu_top"></div>
     <ul>
      <li><img src="images/button_home.gif"></li>
      <li><img src="images/button_newest.gif"></li>
      <li><img src="images/button_archive.gif"></li>
      <li><img src="images/button_references.gif"></li>
      <li><img src="images/button_contact.gif"></li>
     </ul>
    <div class="menu_bottom1"></div>
    <div class="menu_bottom2"></div>
    <div class="border_left"></div>
   </div>
   </div>

   <div id="center_container">
    <div id="header"></div>
    <div id="content_container">
     <div class="content_box">
     <h1>Test text</h1>
     <p>This is some test-text.</p>
     <p>This is some test-text.</p>
     <p>This is some test-text.</p>
     <p>This is some test-text.</p>
     <p>This is some test-text.</p>
     <p>This is some test-text.</p>
     <p>This is some test-text.</p>
     <p>This is some test-text.</p>
     <p>This is some test-text.</p>
     <p>This is some test-text.</p>
     <p>This is some test-text.</p>
     </div>
    </div>
    <div id="footer">
     <div class="footer_box">
     </div>
    </div>
   </div>

   <div id="right_container">
   <div align="left">
    <div class="border_right"></div>
   </div>
   </div>

  </div>

 </body>

style.css

Cascading Stylesheet:

body{
background: url("images/background_stripes.gif");
font-family: Myriad Pro, Calibri, Verdana;
font-size: 11px;
color: #000000;
margin: 0px;
padding: 0px;
}

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

/* div id's */

#wrapper{
background: url("images/background_stripes.gif");
width: 986px;
margin: 0px auto;
padding: 0px;
}

#left_container{
width: 166px;
float: left;
}

#center_container{
width: 804px;
}

#right_container{
width: 16px;
float: right;
}

#header{
background: url("images/header.gif");
width: 804px;
height: 149px;
float: left;
}

#content_container{
width: 804px;
float: left;
}

#footer{
clear: both;
width: 804px;
height: 100px;
}

/* div classes */

.border_left{
background: url("images/border_left.gif");
width: 15px;
}

.border_right{
background: url("images/border_right.gif");
width: 16px;
}

.menu_top{
background: url("images/menu_top.gif");
width: 166px;
height: 7px;
padding-top: 178px;
}

.menu_bottom1{
background: url("images/menu_bottom.gif");
width: 151px;
height: 7px;
float: left;
}
.menu_bottom2{
background: url("images/menu_bottom2.gif");
width: 15px;
height: 7px;
float: right;
}

.content_box{
background: url("images/contentbox.gif") repeat-y;
width: 804px;
float: left;
font-family: Myriad Pro, Calibri, Verdana;
text-align: left;
color: #000000;
padding: 10px;
}

.footer_box{
background: url("images/footer.gif");
width: 804px;
height: 100px;
font-family: Myriad Pro, Calibri, Verdana;
text-align: center;
color: #333333;
}

Dit is hoe ver ik ben gekomen. Middenstuk ziet er prima uit, de rest niet. De achtergrond boven m'n menu is focked up, die randjes stretchen niet (weet niet hoe ik dat moet oplossen, met repeat-y gaat het niet, want dan strekt het slechts mee met content die je OVER de afbeelding plaatst).

Help

zaterdag 8 maart 2008 21:31

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

om met het door jouw gekozen woordje 'semantiek' te beginnen...

begin eens met alle DIV's die geen 'inhoudelijke waarde hebben, qua structurering van je inhoud, weg te halen, jouw opzet, met een content-block met een vaste breedte, een menu en een header en een Footer is met drie DIVs en één UL-lijstje uit te voeren..

één DIV voor je content-block, één div voor de footer en één div voor je header-element en de UL voor je menu...

je extra code zorgt volgens mij enkel ervoor dat je de weg in je eigen code 'kwijtraakt' (met allerhande nutteloze 'div align="right"-onzin)

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen