Problemen oplossen + checken

**Stijn Adams** · 21-06-2010, 14:48

Dag SD'ers

Sinds kort ben ik begonnen met slicen. En ik loop tegen enkele problemen op....

- Hoe krijg ik het menu in het midden?
- Hoe maak ik die zoekfunctie?
- Hoe zet ik die gitaar bij het logo?
- En... is het content gedeelte tot nu toe goed gesliced?
- Wie iemand een goed boek dat nog eens in België, Standaard Boekhandel te koop is daat u leert HTML/CSS > WordPress en/of Joomla! om te zetten, dus geen andere dingen, uitgebreid, enkel HTML en CSS omvormene zodat het in één van de twee CMS staat.

Ik vermoed dat ik lijd aan 'dividus', ofwel het teveel gebruiken van div's. Is dit correct gesliced (en wat is de waarde qua slicen, de manier van mij)?

Er moeten nog enkele dingen gebeuren, ook W3C Tidy moet nog langskomen...

Hieronder de lay-out:

http://flsadams.v3host.be/groezrockp...oezrock(1).png

En....ja.....een 404-pagina.. :D

http://flsadams.v3host.be/groezrockpsdslice2/404.htm

De volledige pagina:
http://flsadams.v3host.be/groezrockpsdslice2/

En de HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>GROEZROCK | #20 | 22 t.e.m. 23 april 2011 | Meerhout, BE</title>
<meta name="keywords" content="groezrock, info, groezrockinfo, festival, punk, hardcore, dutch, nederlands, 2010, 2011, 22, 23, april, meerhout,
belgie, informatie, nieuws, livestream, livebeelden"/>
<meta name="description" content="GROEZROCK is inmiddels een internationaal punk- en hardcore festival geworden. Sinds 1992 begon het kleinschalig in Meerhout, België.
GROEZROCKINFO.BE geef alle informatie omtrent GROEZROCK in de Nederlandse taal, maar ook extra diensten."/>
<meta name="abstract" content="groezrock, informatie, festival">
<meta name="author" content="GROEZROCKINFO.BE - GROEZROCKINFO.BE">
<meta name="publisher" content="GROEZROCKINFO.BE - GROEZROCKINFO.BE">
<meta name="copyright" content="GROEZROCKINFO.BE - GROEZROCKINFO.BE">
<meta name="geography" content="MEERHOUT, België, 2450">
<meta name="rating" content="General">
<meta name="page-topic" content="groezrock, info">
<meta name="robots" content="index,follow">
<meta http-equiv="Content-Language" content="nl, be">
<meta name http-equiv="Reply-to" content="info at groezrockinfo dot be">
<meta name="creation_Date" content="12/06/2010">
<meta name="revisit-after" content="15 days">
<meta name="doc-class" content="Completed">
<meta name="MSSmartTagsPreventParsing" content="true">

<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="menu">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">NIEUWS</a></li>
<li><a href="#">TICKETS</a></li>
<li><a href="#">GROEPEN</a></li>
<li><a href="#">GROEZROCK+ TV</a></li>
<li><a href="#">VERKEERSINFO</a></li>
<li><a href="#">CONTACT</a></li>
</ul>

<div id="header">
<img alt="headerlogo" longdesc="logogroezrock" src="img/headerlogo.png" width="584" height="153" />
</div>
<br>
<div id="content">

<h2><img alt="datumweergave" longdesc="datumweergave" src="img/datumweergave.png" width="32" height="32" />Welkom op Groezrockinfo.be</h2>
<p>
GROEZROCK is een begrip in de punk- en hardcore wereld. Sinds 1992 begon het met 400 bezoekers. <br>Groezrockinfo.be staat elk jaar klaar voor de festival bezoekers. Wij houden u op de hoogte van het laatste nieuws <br> en bieden u extra diensten. In 2011 zal Groezrock zijn 20ste verjaardag vieren! Meer dan 30.000 bezoekers zijn <br> er aanwezig op het festival.
</div>
<div id="footer">
Copyright &copy 2009-2011 Groezrockinfo.be - Alle rechten voorbehouden.
<br>
Algemene informat<span lang="nl-be">i</span>e: <a href="mailto:info@groezrockinfo.be">info@groezrockinfo.b e</a>
<span>- </span>Financiële zaken:
<a href="mailto:sales@groezrockinfo.be">sales@groezrockinfo .be</a> <span>-
</span>Vragen: <a href="mailto:faq@groezrockinfo.be">faq@groezrockinfo.be</a>
</div>
</body>
</html>

CSS:

@charset "UTF-8";
/****************************************
Slicing door www.stijnadams.be
IN OPDRACHT VAN GROEZROCKINFO.BE
****************************************
CSS document
*/

body
{
background-image: url("../img/achtergrond.jpg");
background-repeat: no-repeat ;
background-attachment: fixed ;
}
h1
{
color: #ffae00;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif
}
h2
{
color: #ffae00;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif
}

h3
{
color: #ffae00;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif
}

h4
{
color: #ffae00;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif
}

h5
{
color: #ffae00;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif
}

h6
{
color: #ffae00;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif
}
a:link
{
color: #ffae00;
text-decoration: none;
}

a:hover
{
color: #ff8700;
text-decoration: none;
}

a:active
{
color: #ff6700;
text-decoration: none;
}
a:visited
{
color: #ff7417;
text-decoration: none;
}

ul#menu
{
margin: 0px;
padding-left: 25%;
list-style: none;
height: 65px;
width: 100%;
background-color: #000000;
}

ul#menu li
{
float: left;
}

ul#menu li a
{
display: block;
overflow: hidden;
height: 25px;
padding: 5px 8px 20px 8px;
font-family: Arial, Helvetica, sans-serif;
color: #ffffff;
font-size: 16px;
text-decoration: none;
font-weight: bold;
}

ul#menu li.active a:hover
{
padding: 5px 8px 0px 8px;
background-color: #ffae00;
color: #ffffff;
height: 20px;
text-align: center;
}

ul#menu li.active a
{
padding: 5px 8px 0px 8px;
background-color: #ffae00;
color: #ffffff;
height: 20px;
text-align: center;
}

ul#menu li a:hover
{
padding: 5px 8px 0px 8px;
background-color: #ffae00;
color: #ffffff;
height: 20px;
text-align: center;
}

#header
{
width: 100%;
height: 153px;
background-color: #2a2a2a;
text-align: center;
}

#content
{
margin: 0px auto;
padding: 0px;
height: 742px;
width: 922px;
background: url(../img/content.gif);
border: 0px solid #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
}

#footer
{
margin: 0px auto;
padding: 0px;
height: 50px;
width: 922px;
background: url(../img/footer.gif);
border: 0px solid #000;
font-family: Arial, Helvetica, sans-serif;
color: #ffffff;
font-size: 10px;
text-align: center;
}

Alvast bedankt,
Stijn Adams

**Raymond Nijland** · 22-06-2010, 16:15

meeste dingen kun je vinden door te googlen

Menu centeren - http://www.gigadesign.be/2004/12/centreren-met-css/
Mooie zoekveld - http://www.thehotseat.be/2/blog/post...t-xhtml-en-css
Gitaar bij logo - leer wat bij van position relative en absolute
Content - nee is niet goed gesliced waar zijn bijvoorbeeld de ronde hoeken weer googlen naar antwoorden

En waarschijnlijk is deze layout te moeilijk voor je. Je bent een beginnende slicer dus je kan beter eerst beginnen met super simpele layouts.
Je moet namelijk nog leren om de layout zo effectief mogelijk eerst in xhtml (lees stuctuur) om te zetten en dan pas met css (lees presentatie) naar een echte webpage op te zetten.
Bovendien moet je met css ook meer gaan denken in lagen.

**Nick Scheynen** · 22-06-2010, 17:34

Hey,

Ik ben zelf nog niet lang bezig met het leren van CSS, maar ik denk toch dat ik je met enkele dingen wat kan helpen. (Ik leer CSS uit het boek 'CSS:the missing manual' echt een aanrader! Goed en duidelijk uitgelegd en voorzien van stap-voor-staptutorials. Enig nadeel misschien het boek is geschreven in het Engels.)

Wat bedoel je juist met het menu in het midden plaatsen? Het staat daar toch al ?
Ik zie dat je alle tags van h1 t.e.m. h6 dezelfde opmaak geeft. Hiervoor moet je niet per se alle informatie opnieuw typen. Je kan het ook zo doen:
Code:
```
h1,h2,h3,h4,h5,h6 {
color: #ffae00;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif
}
```
Met de gitaar kan ik je niet direct helpen, maar normaal gezien moet zoiets wel mogelijk zijn met floats.
Wat betreft de slicing vind ik het een beetje raar met de afbeeldingen op de homepage. Zijn deze een deel van één grote achtergrondafbeelding? Zoiets zou je perfect kunnen doen met een sidebar. Hiervoor zou je dan een container-div moeten plaatsen rond de content-div en de sidebar-div en vervolgens deze twee respectievelijk links en rechts floaten. Zo krijg je een betere sidebar, waarin je de afbeeldingen gemakkelijk kunt veranderen en eventueel andere afbeeldingen kunt toevoegen.
Ik heb zelf ooit wel eens een wordpressthema kunnen maken van een geslicete en gebasede website. De basis is eigenlijk vrij simpel. Deze link heeft mij toen heel goed geholpen: http://www.wpdesigner.com/2007/02/19...ss-themes-huh/

Ik hoop dat je er wat aan hebt. Nog vragen vraag gerust, maar weet wel dat ik zelf ook slechts een hobbyist ben en dat waarschijnlijk niet alle oplossingen het meest efficiënt zijn.

Mvg

Nick

**RubenP** · 22-06-2010, 17:55

Als ik de koper van je service als slicer was, zou ik dit soort scripten niet echt op prijs stellen.
In je CSS staan er een heleboel dingen dubbel, ook is je (x)HTML niet netjes!

Conclusie: Doe wat aan je skills, toon je pagina's op professionelere site die meer ervaring hebben met dit soort dingen en laat ze je bekritiseren.

**Raymond Nijland** · 23-06-2010, 16:54

Origineel gepost door RubenP

Als ik de koper van je service als slicer was, zou ik dit soort scripten niet echt op prijs stellen.
In je CSS staan er een heleboel dingen dubbel, ook is je (x)HTML niet netjes!

Conclusie: Doe wat aan je skills, toon je pagina's op professionelere site die meer ervaring hebben met dit soort dingen en laat ze je bekritiseren.

Als je koper bent met verstand van zaken wel ja, iemand die er geen verstand van heeft vind het wel goed.

Juist min of meer wat ik ook al zei, slice/base eerst simpele layouts zodat je de basis snapt en dan pas de moeilijkere.

Problemen oplossen + checken