PDA

View Full Version : Resolved CSS Vertical Menu (a)



Anita2105
Apr 27th, 2009, 03:10 PM
Hi everyone,

Yes, I am still attempting to get my menu to work. It's 5 days solid now!

The following menu works well if the style is embedded into the head of every page along with the menu.

I have tried to create menu.css files and inserted it into the head of the menu document but nothing wants to work. As soon as the style is removed from the page the menu does not work.

Can anyone help?

Here is the full glossymenu with glossymenustyle that works perfectly on its own:


<head>
<title>Nav Test</title>

<style type="text/css">
.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 150px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;}
.glossymenu li a{
background: white url(navmenu/images/blackgloss1.jpg) repeat-x bottom left;
font: bold 13px Verdana, sans-serif, Arial, Helvetica;
color: white;
display: block;
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;}
* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */width: 160px;}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;}
.glossymenu li a:hover{
background-image: url(navmenu/images/blackgloss2.jpg);}
</style>
</head>

<body>
<ul class="glossymenu">
<li><a href="test.htm" target="_self">Test</a></li>
<li><a href="test.htm" target="_self">Test</a></li>
<li><a href="test.htm" target="_self">Test</a></li>
<li><a href="test.htm" target="_self">Test</a></li>
<li><a href="test.htm" target="_self">Test</a></li>
<li><a href="test.htm" target="_self">Test</a></li>
<li><a href="test.htm" target="_self">Test</a></li>
<li><a href="test.htm" target="_self">Test</a></li>
<li><a href="test.htm" target="_self">Test</a></li>
<li><a href="test.htm" target="_self"style="border-bottom-width: 0" >Test</a></li>
</ul>

</body>
</html>

SB65
Apr 27th, 2009, 03:28 PM
Sounds like the link to your css file isn't correct.

You should have your css looking like this:


.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 150px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;}
.glossymenu li a{
background: white url(navmenu/images/blackgloss1.jpg) repeat-x bottom left;
font: bold 13px Verdana, sans-serif, Arial, Helvetica;
color: white;
display: block;
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;}
* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */width: 160px;}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;}
.glossymenu li a:hover{
background-image: url(navmenu/images/blackgloss2.jpg);}

and your html should look like this:


<head>
<title>Nav Test</title>

<link rel="stylesheet" href="menu.css">
</head>

<body>
<ul class="glossymenu">
<li><a href="test.htm" target="_self">Test</a></li>
<li><a href="test.htm" target="_self">Test</a></li>
<li><a href="test.htm" target="_self">Test</a></li>
<li><a href="test.htm" target="_self">Test</a></li>
<li><a href="test.htm" target="_self">Test</a></li>
<li><a href="test.htm" target="_self">Test</a></li>
<li><a href="test.htm" target="_self">Test</a></li>
<li><a href="test.htm" target="_self">Test</a></li>
<li><a href="test.htm" target="_self">Test</a></li>
<li><a href="test.htm" target="_self"style="border-bottom-width: 0" >Test</a></li>
</ul>

</body>
</html>

This assumes the css file is in the same directory as your html file. If it isn't, amend the path accordingly, so if it's in a subfolder called templates, for example, the html should be:


<link rel="stylesheet" href="templates/menu.css">

BTW, you should have a doctype (http://www.alistapart.com/articles/doctype/)in your html as well.

Anita2105
Apr 27th, 2009, 03:53 PM
Thank you SB65,

I had the link direction to the css file incorrect. It's working fine now.

I have a few more questions but let me experiment first before I waste anyone's time.

Anita

VIPStephan
Apr 27th, 2009, 03:54 PM
I have to add/correct: The stylesheet link should be of type “text/css” and you should always set a media type, too:

<link rel="stylesheet" href="menu.css" type="text/css" media="screen">


As doctype I strongly suggest using HTML or XHTML strict only.

Anita2105
Apr 27th, 2009, 06:05 PM
Hi VIPStephan,

I have used both styles of css calling and both work.

Can you explain what the 'media="screen" part signifies please and why it is important?

Anita.

Anita2105
Apr 27th, 2009, 06:48 PM
Hi VIPStephan,

Another question - why HTML or XHTML strict only?
I use XHTML transitional - Should I change?

Anita

VIPStephan
Apr 28th, 2009, 12:01 AM
The media type specifies in which media the styles are shown. For example if you print a page you don’t want to show the navigation etc. because you can’t click links anyway and also you can’t hover over anything with a mouse. That’s where media types come into play. You’d create a stylesheet for computer screens (media type „screen“) and a stylesheet for print view (media type „print“). There are even more for handheld devices, projectors, TV screens etc. Read up on http://javascriptkit.com/dhtmltutors/cssmedia.shtml and http://alistapart.com/articles/goingtoprint/

As to the doctype: If you’re caring about the web standards defined by the W3C then strict is your only option as this is the true standard (X)HTML. Transitional was – as its name implies – invented as exception for the transition of old websites with non-standard HTML to the “new” web standards. If you validate your HTML (http://validator.w3.org/) you’ll notice that a document with transitional doctype will still validate with many now deprecated elements and attributes that aren’t actually defined in the last official version of (X)HTML. A strict doctype is only allowing to use the HTML that has officially been defined as “correct” HTML.

Therefore you should, for newly created documents, always and only use a strict doctype. There are people that say it’s sooo hard to make documents with strict doctype valid but these are just too lazy to do it right in the first place because it actually isn’t all that hard and you’ll benefit from a lot cleaner code.

And by the way: even the W3C says that it’s not the end of the world if a document is not 100% valid as long as it’s well formed (http://developer.com/xml/article.php/784361).

Anita2105
Apr 28th, 2009, 04:03 PM
Hi VIPStephan,

Thank you for the info and advice. I will do exactly as you suggest. From now on I will only use .xhtml trict. I just hope I don't run into problems I cannot solve.

Anita. :)

kathiravan k
Sep 17th, 2010, 09:02 AM
Hi
i am Creating the site by using div tag ,the header functions are not working Properly .i have attached the code as here pls ckeck...............[/COLOR]


<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style>
body{
margin: 0px;
background: #303030 url(Gabb/img/Gabber-site.jpg) left top no-repeat;
}
. container
{
margin: auto;
height: 100%;
width: 100%;
}
.class1
{
height:1160px ;
width: 1003px;
margin: auto;
}
.header
{
height: 170px;
width: 907px;
/*vertical-align: bottom;*/
margin: auto;

}
.header li
{
list-style: none;
padding-top: 60px;
}
.headulclass1
{
width: 325px;
height: 170px;
margin-top: 0px;
position: relative;
float: left;
}
.headulclass2
{
width: 482px;
height:170px;
float: right;
position: relative;
margin-top: 0px;
font-family: Tahoma;
font-size: 11px;
color: #ffffff;
padding: 100px 1px 2px 2px;


}
.headulclass2 li
{
list-style: none;
display: inline;
padding: 50px 1px 2px 22px;
vertical-align: bottom;
}
.class2
{
height:23px;
width:907px;
background: url(Gabb/img/repeater.jpg) left top repeat-x;
margin: auto;
}
.class2 li
{
list-style: none;
display: inline;
float: right;
display: block;
font-family: Tahoma;
font-size: 11px;
color: #ffffff;
padding:5px 10px 5px 10px;
}
.class3
{
height: 916px;
/* width: 907px; */


}
.bodyleft
{
width: 213px;
height:916px;
float: left;
/*border:solid 1px green; */
}
.bodyright
{
width: 692px;
height:916px;
float:left;
padding:17px 45px 0px 50px;
border:solid 0px red;
}
.class4
{
height: 45px;
width: 907px;
padding:10px;
/* border:solid 1px green; */


}
.class4 li
{
list-style: none;
display: inline;
float: left;
color: #ffffff;
padding: 0px 1px 0 20px;
}
.footer-right
{
float: right;
margin-top: 0px;
color: #ffffff;

}
.footer-right li
{
padding: 0 10px 0 0;
}
.product
{

/*border:solid 1px green; */
height:237px;
width:197px;
float:left;
padding: 16px;
}
.txtsize
{
font-family: Tahoma;
font-size: 12px;
color:#c8c8c8;
padding-top: 3px;
}
.s-description
{
font-family: Tahoma;
font-size: 11px;
color:#c8c8c8;
}
.price
{
color:#c8c8c8;
}
.left
{
background: url(Gabb/img/repeater.jpg) left top repeat-x;
width:162px;
height: 27px;
margin: auto;
margin-top: 28px;
font-family: Tahoma;
font-size: 12px;
line-height: 17pt;
}
.left li
{
list-style: none;
color:#c8c8c8;

}
.bodyleft1
{
background: url(Gabb/img/repeater.jpg) left top repeat-x;
width:162px;
height: 27px;
margin: auto;
margin-top: 28px;
}
.dot
{
/*background: url(Gabb/img/dot.jpg) left top repeat-x;
border-bottom: dotted 1px #ffffff;*/
/*width: 20px;
height: 20px;*/
}
.page-no li
{
display:inline;
list-style: none;
color: #ffffff;
float: right;
font-family: Tahoma;
font-size: 14px;
padding: 20px;
}
.radio-btn li
{
color: #ffffff;
}
.menu
{
padding: 0px 0 0 0 ;
}


</style>
</head> <body>
<div class="container" style="border:solid 0px red">
<div class="class1">
<div class="header">

<div class="headulclass1">
<li><img src="Gabb/img/logo.gif"/></li>
</div>
<div class="headulclass2">
<li>Inloggen</li>
<li>|</li>
<li>Registreren </li>
<li>|</li>
<li>Winkelwagen Winkel<img src="Gabb/img/shoping.jpg"/>(Leeg)</li>
<li><img src="Gabb/img/Email.jpg" /></li>
<li><img src="Gabb/img/Print.jpg"/></li>
</div>
</div>
<div class="class2">
<ul>
<li>CONTACT</li>
<li>|</li>
<li>DIENSTEN</li>
<li>|</li>
<li>OVER ONS</li>
<li>|</li>
<li>HOME</li>
</ul>
</div>
<div class="class3">
<div class="bodyleft">
<ul class="left"> PRODUCTEN
<li>Categorie 1</li>
<li>Categorie 2</li>
<li>Categorie 3</li>
<li>Categorie 4</li>
<li>Categorie 5</li>
<li>Categorie 6</li>
<li>Categorie 7</li>
<li>Categorie 8</li>
<li>Categorie 9</li>
<li>Categorie 10</li>
<li class="left">ZOEKEN</li><br/>
<select class="select_box"><option>Kies een product</option></select><br/><br/>
<select class="select_box"><option>Keuze specificeren?</option></select><br/><br/>
<LI>Zoekwoord</LI><br/>
<input type="text" name="keyword" class="search_text_box" /><br/><br/>
<img src="Gabb/img/zoken_btn.gif"/><br/><br/>
<li class="left">NIEUWSBRIEF</li><br/>
<input type="radio" name="title" class="radio-btn"/>&nbsp;<label>Dhr.</label>&nbsp;&nbsp;
<input type="radio" name="title" radio-btn />&nbsp;<label>Mevr.</label><br/><br />
<li>Naam</li><br/>
<input type="text" name="naam" class="search_text_box"/><br/><br/>
<li>Email adres</li><br/>
<input type="text" name="naam" class="search_text_box"/><br/><br/>
<img src="Gabb/img/aanmelden_btn.gif"/>
</ul>
</div>
<div class="bodyright">
<div class="product">
<img src="Gabb/images/Gabbe8.jpg"/>
<span class="txtsize"><b>Verjaardags Feestjes</b></span>
<p style="margin-top:3px;" class="s-description">Voorbeeld tekst Kladblok is een gewone tekst-ditor die u kunt</p>
<span style="margin-top:0px;" class="price">Price:&nbsp;&nbsp;&euro;150.00</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="Gabb/img/ship-cart.jpg"/>
</div>
<div class="product">
<img src="Gabb/images/Gabber7.jpg"/>
<span class="txtsize"><b>Verjaardags Feestjes</b></span>
<p style="margin-top:3px;"class="s-description">Voorbeeld tekst Kladblok is een gewone tekst-ditor die u kunt</p>
<span style="margin-top:0px;" class="price">Price:&nbsp;&nbsp;&euro;150.00</span> &nbsp;&nbsp;&nbsp;&nbsp;<img src="Gabb/img/ship-cart.jpg"/>
</div>
<div class="product">
<img src="Gabb/images/Gabber4.jpg"/>
<span class="txtsize"><b>Verjaardags Feestjes</b></span>
<p style="margin-top:3px;"class="s-description">Voorbeeld tekst Kladblok is een gewone tekst-ditor die u kunt</p>
<span style="margin-top:0px;" class="price">Price:&nbsp;&nbsp;&euro;150.00</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="Gabb/img/ship-cart.jpg"/>
</div>
<div class="product">
<img src="Gabb/images/Gabber2.jpg"/>
<span class="txtsize"><b>Verjaardags Feestjes</b></span>
<p style="margin-top:3px;"class="s-description">Voorbeeld tekst Kladblok is een gewone tekst-ditor die u kunt</p>
<span style="margin-top:0px;" class="price">Price:&nbsp;&nbsp;&euro;150.00</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="Gabb/img/ship-cart.jpg"/>
</div>
<div class="product">
<img src="Gabb/images/Gabber7.jpg"/>
<span class="txtsize"><b>Verjaardags Feestjes</b></span>
<p style="margin-top:3px;"class="s-description">Voorbeeld tekst Kladblok is een gewone tekst-ditor die u kunt</p>
<span style="margin-top:0px;" class="price">Price:&nbsp;&nbsp;&euro;150.00</span> &nbsp;&nbsp;&nbsp;&nbsp;<img src="Gabb/img/ship-cart.jpg"/>
</div>
<div class="product">
<img src="Gabb/images/Gabber3.jpg"/>
<span class="txtsize"><b>Verjaardags Feestjes</b></span>
<p style="margin-top:3px;"class="s-description">Voorbeeld tekst Kladblok is een gewone tekst-ditor die u kunt</p>
<span style="margin-top:0px;" class="price">Price:&nbsp;&nbsp;&euro;150.00</span> &nbsp;&nbsp;&nbsp;&nbsp;<img src="Gabb/img/ship-cart.jpg"/>
</div>
<div class="product">
<img src="Gabb/images/Gabber7.jpg"/>
<span class="txtsize"><b>Verjaardags Feestjes</b></span>
<p style="margin-top:3px;"class="s-description">Voorbeeld tekst Kladblok is een gewone tekst-ditor die u kunt</p>
<span style="margin-top:0px;" class="price">Price:&nbsp;&nbsp;&euro;150.00</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="Gabb/img/ship-cart.jpg"/>
</div>
<div class="product">
<img src="Gabb/images/Gabber-site6.jpg"/>
<span class="txtsize"><b>Verjaardags Feestjes</b></span>
<p style="margin-top:3px;"class="s-description">Voorbeeld tekst Kladblok is een gewone tekst-ditor die u kunt</p>
<span style="margin-top:0px;" class="price">Price:&nbsp;&nbsp;&euro;150.00</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="Gabb/img/ship-cart.jpg"/>
</div>
<div class="product">
<img src="Gabb/images/Gabber7.jpg"/>
<span class="txtsize"><b>Verjaardags Feestjes</b></span>
<p style="margin-top:3px;"class="s-description">Voorbeeld tekst Kladblok is een gewone tekst-ditor die u kunt</p>
<span style="margin-top:0px;" class="price">Price:&nbsp;&nbsp;&euro;150.00</span> &nbsp;&nbsp;&nbsp;&nbsp;<img src="Gabb/img/ship-cart.jpg"/>
</div>
<div class="page-no" >
<ul>
<li>Volgende&nbsp;&nbsp;&nbsp;<img src="Gabb/img/Page-no-arrow.jpg"/>&nbsp; &nbsp;&nbsp;Pagina 1 of 2</li>
</ul>
</div>
<div class="dot" ></div>

</div>
</div>

<div class="class4">
<ul>
<li>Algemene voorwaarden</li>
<li>|</li>
<li>Privacybeleid </li>
</ul>
<ul class="footer-right">
<li>Webdesign door Aafke Mooij</li>
</ul>


</div>
</div>

</div>
</body>

</html>

abduraooft
Sep 17th, 2010, 09:14 AM
Hi
i am Creating the site by using div tag ,the header functions are not working Properly .i have attached the code as here pls ckeck...............[/COLOR]
Please open a new thread to ask your question. Also, use
][/COLOR] tags to wrap your code, while posting here. Thanks!

kathiravan k
Sep 17th, 2010, 09:24 AM
Hi
i am Creating the site by using div tag ,the header functions is need to display bottom of that div Tag .i have attached the code as here pls ckeck...............

And also the ICONS & TEXT in the header menu should have the same Distance...


<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style>
body{
margin: 0px;
background: #303030 url(Gabb/img/Gabber-site.jpg) left top no-repeat;
}
. container
{
margin: auto;
height: 100%;
width: 100%;
}
.class1
{
height:1160px ;
width: 1003px;
margin: auto;
}
.header
{
height: 170px;
width: 907px;
/*vertical-align: bottom;*/
margin: auto;

}
.header li
{
list-style: none;
padding-top: 60px;
}
.headulclass1
{
width: 325px;
height: 170px;
margin-top: 0px;
position: relative;
float: left;
}
.headulclass2
{
width: 482px;
height:170px;
float: right;
position: relative;
margin-top: 0px;
font-family: Tahoma;
font-size: 11px;
color: #ffffff;
padding: 100px 1px 2px 2px;


}
.headulclass2 li
{
list-style: none;
display: inline;
padding: 50px 1px 2px 22px;
vertical-align: bottom;
}
.class2
{
height:23px;
width:907px;
background: url(Gabb/img/repeater.jpg) left top repeat-x;
margin: auto;
}
.class2 li
{
list-style: none;
display: inline;
float: right;
display: block;
font-family: Tahoma;
font-size: 11px;
color: #ffffff;
padding:5px 10px 5px 10px;
}
.class3
{
height: 916px;
/* width: 907px; */


}
.bodyleft
{
width: 213px;
height:916px;
float: left;
/*border:solid 1px green; */
}
.bodyright
{
width: 692px;
height:916px;
float:left;
padding:17px 45px 0px 50px;
border:solid 0px red;
}
.class4
{
height: 45px;
width: 907px;
padding:10px;
/* border:solid 1px green; */


}
.class4 li
{
list-style: none;
display: inline;
float: left;
color: #ffffff;
padding: 0px 1px 0 20px;
}
.footer-right
{
float: right;
margin-top: 0px;
color: #ffffff;

}
.footer-right li
{
padding: 0 10px 0 0;
}
.product
{

/*border:solid 1px green; */
height:237px;
width:197px;
float:left;
padding: 16px;
}
.txtsize
{
font-family: Tahoma;
font-size: 12px;
color:#c8c8c8;
padding-top: 3px;
}
.s-description
{
font-family: Tahoma;
font-size: 11px;
color:#c8c8c8;
}
.price
{
color:#c8c8c8;
}
.left
{
background: url(Gabb/img/repeater.jpg) left top repeat-x;
width:162px;
height: 27px;
margin: auto;
margin-top: 28px;
font-family: Tahoma;
font-size: 12px;
line-height: 17pt;
}
.left li
{
list-style: none;
color:#c8c8c8;

}
.bodyleft1
{
background: url(Gabb/img/repeater.jpg) left top repeat-x;
width:162px;
height: 27px;
margin: auto;
margin-top: 28px;
}
.dot
{
/*background: url(Gabb/img/dot.jpg) left top repeat-x;
border-bottom: dotted 1px #ffffff;*/
/*width: 20px;
height: 20px;*/
}
.page-no li
{
display:inline;
list-style: none;
color: #ffffff;
float: right;
font-family: Tahoma;
font-size: 14px;
padding: 20px;
}
.radio-btn li
{
color: #ffffff;
}
.menu
{
padding: 0px 0 0 0 ;
}


</style>
</head> <body>
<div class="container" style="border:solid 0px red">
<div class="class1">
<div class="header">

<div class="headulclass1">
<li><img src="Gabb/img/logo.gif"/></li>
</div>
<div class="headulclass2">
<li>Inloggen</li>
<li>|</li>
<li>Registreren </li>
<li>|</li>
<li>Winkelwagen Winkel<img src="Gabb/img/shoping.jpg"/>(Leeg)</li>
<li><img src="Gabb/img/Email.jpg" /></li>
<li><img src="Gabb/img/Print.jpg"/></li>
</div>
</div>
<div class="class2">
<ul>
<li>CONTACT</li>
<li>|</li>
<li>DIENSTEN</li>
<li>|</li>
<li>OVER ONS</li>
<li>|</li>
<li>HOME</li>
</ul>
</div>
<div class="class3">
<div class="bodyleft">
<ul class="left"> PRODUCTEN
<li>Categorie 1</li>
<li>Categorie 2</li>
<li>Categorie 3</li>
<li>Categorie 4</li>
<li>Categorie 5</li>
<li>Categorie 6</li>
<li>Categorie 7</li>
<li>Categorie 8</li>
<li>Categorie 9</li>
<li>Categorie 10</li>
<li class="left">ZOEKEN</li><br/>
<select class="select_box"><option>Kies een product</option></select><br/><br/>
<select class="select_box"><option>Keuze specificeren?</option></select><br/><br/>
<LI>Zoekwoord</LI><br/>
<input type="text" name="keyword" class="search_text_box" /><br/><br/>
<img src="Gabb/img/zoken_btn.gif"/><br/><br/>
<li class="left">NIEUWSBRIEF</li><br/>
<input type="radio" name="title" class="radio-btn"/>&nbsp;<label>Dhr.</label>&nbsp;&nbsp;
<input type="radio" name="title" radio-btn />&nbsp;<label>Mevr.</label><br/><br />
<li>Naam</li><br/>
<input type="text" name="naam" class="search_text_box"/><br/><br/>
<li>Email adres</li><br/>
<input type="text" name="naam" class="search_text_box"/><br/><br/>
<img src="Gabb/img/aanmelden_btn.gif"/>
</ul>
</div>
<div class="bodyright">
<div class="product">
<img src="Gabb/images/Gabbe8.jpg"/>
<span class="txtsize"><b>Verjaardags Feestjes</b></span>
<p style="margin-top:3px;" class="s-description">Voorbeeld tekst Kladblok is een gewone tekst-ditor die u kunt</p>
<span style="margin-top:0px;" class="price">Price:&nbsp;&nbsp;&euro;150.00</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="Gabb/img/ship-cart.jpg"/>
</div>
<div class="product">
<img src="Gabb/images/Gabber7.jpg"/>
<span class="txtsize"><b>Verjaardags Feestjes</b></span>
<p style="margin-top:3px;"class="s-description">Voorbeeld tekst Kladblok is een gewone tekst-ditor die u kunt</p>
<span style="margin-top:0px;" class="price">Price:&nbsp;&nbsp;&euro;150.00</span> &nbsp;&nbsp;&nbsp;&nbsp;<img src="Gabb/img/ship-cart.jpg"/>
</div>
<div class="product">
<img src="Gabb/images/Gabber4.jpg"/>
<span class="txtsize"><b>Verjaardags Feestjes</b></span>
<p style="margin-top:3px;"class="s-description">Voorbeeld tekst Kladblok is een gewone tekst-ditor die u kunt</p>
<span style="margin-top:0px;" class="price">Price:&nbsp;&nbsp;&euro;150.00</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="Gabb/img/ship-cart.jpg"/>
</div>
<div class="product">
<img src="Gabb/images/Gabber2.jpg"/>
<span class="txtsize"><b>Verjaardags Feestjes</b></span>
<p style="margin-top:3px;"class="s-description">Voorbeeld tekst Kladblok is een gewone tekst-ditor die u kunt</p>
<span style="margin-top:0px;" class="price">Price:&nbsp;&nbsp;&euro;150.00</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="Gabb/img/ship-cart.jpg"/>
</div>
<div class="product">
<img src="Gabb/images/Gabber7.jpg"/>
<span class="txtsize"><b>Verjaardags Feestjes</b></span>
<p style="margin-top:3px;"class="s-description">Voorbeeld tekst Kladblok is een gewone tekst-ditor die u kunt</p>
<span style="margin-top:0px;" class="price">Price:&nbsp;&nbsp;&euro;150.00</span> &nbsp;&nbsp;&nbsp;&nbsp;<img src="Gabb/img/ship-cart.jpg"/>
</div>
<div class="product">
<img src="Gabb/images/Gabber3.jpg"/>
<span class="txtsize"><b>Verjaardags Feestjes</b></span>
<p style="margin-top:3px;"class="s-description">Voorbeeld tekst Kladblok is een gewone tekst-ditor die u kunt</p>
<span style="margin-top:0px;" class="price">Price:&nbsp;&nbsp;&euro;150.00</span> &nbsp;&nbsp;&nbsp;&nbsp;<img src="Gabb/img/ship-cart.jpg"/>
</div>
<div class="product">
<img src="Gabb/images/Gabber7.jpg"/>
<span class="txtsize"><b>Verjaardags Feestjes</b></span>
<p style="margin-top:3px;"class="s-description">Voorbeeld tekst Kladblok is een gewone tekst-ditor die u kunt</p>
<span style="margin-top:0px;" class="price">Price:&nbsp;&nbsp;&euro;150.00</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="Gabb/img/ship-cart.jpg"/>
</div>
<div class="product">
<img src="Gabb/images/Gabber-site6.jpg"/>
<span class="txtsize"><b>Verjaardags Feestjes</b></span>
<p style="margin-top:3px;"class="s-description">Voorbeeld tekst Kladblok is een gewone tekst-ditor die u kunt</p>
<span style="margin-top:0px;" class="price">Price:&nbsp;&nbsp;&euro;150.00</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="Gabb/img/ship-cart.jpg"/>
</div>
<div class="product">
<img src="Gabb/images/Gabber7.jpg"/>
<span class="txtsize"><b>Verjaardags Feestjes</b></span>
<p style="margin-top:3px;"class="s-description">Voorbeeld tekst Kladblok is een gewone tekst-ditor die u kunt</p>
<span style="margin-top:0px;" class="price">Price:&nbsp;&nbsp;&euro;150.00</span> &nbsp;&nbsp;&nbsp;&nbsp;<img src="Gabb/img/ship-cart.jpg"/>
</div>
<div class="page-no" >
<ul>
<li>Volgende&nbsp;&nbsp;&nbsp;<img src="Gabb/img/Page-no-arrow.jpg"/>&nbsp; &nbsp;&nbsp;Pagina 1 of 2</li>
</ul>
</div>
<div class="dot" ></div>

</div>
</div>

<div class="class4">
<ul>
<li>Algemene voorwaarden</li>
<li>|</li>
<li>Privacybeleid </li>
</ul>
<ul class="footer-right">
<li>Webdesign door Aafke Mooij</li>
</ul>


</div>
</div>

</div>
</body>

</html>

Pepineros
Sep 17th, 2010, 09:57 AM
No no, new *thread*, not new post :p i.e., go to the html/css forum, click 'new thread', and post your problem. That will attract a lot more people and hopefully solve your problem faster.
Also, as Abduraooft pointed out, please enclose your code in the [code ][/code ] tags. It's a lot easier to read for anyone who's trying to help you.