Hieronder eerst het CSS-deel van een nieuwe constructie. Het oude CSS-deel heb ik nog wel, maar in mijn enthousiasme heb ik geen nieuw HTML-deel gemaakt en ik kan het even niet meer reconstrueren. Ik had bedacht dat het ook een oplossing is om twee kolommen te maken met beide links de afbeelding en rechts de tekst. Probleem dan is dat is handmatig moet zorgen dat de tekst van de tweede afbeelding op de zelfde hoogte komt als de tweede afbeelding zelf. Ook wil ik dan de twee kolommen in 1 container krijgen, zodat ze met 'overflow' altijd naast elkaar blijven.
Op zich maakt het mij niet zo veel uit of ik 2 of 3 plaatjes naast elkaar krijg met daaronder een rij tekst per foto. Of een rij: foto tekst foto tekst en dan de volgende rij dus.
Alle suggesties welkom. Ik ben een nog een leek op CSS gebied, maar wel een enthousiaste.
body
{
background-color: #660066
}
#container
{
width: 100%;
margin: 0 auto;
background-image: url(images/bgbarbie.jpg);
color: #333;
border: 1px solid gray;
line-height: 130%;
font-family: Harrington;
}
h2
{
font-family: Arial;
font-size: 20px;
margin: 0 0 10px 0;
}
br
{
margin: 0 0 10px 0;
}
#top
{
margin-left: 79px;
height: 80 px;
padding-top: 30px;
background-color: white;
border-bottom: 1px solid gray;
text-align: center;
font-size: 24;
}
#logo
{
float: left;
width: 80 px;
height: 80 px;
margin: 0 0;
border-bottom: 1px solid gray;
background-image: url(images/bij2.jpg);
}
#logo2
{
float: right;
width: 80 px;
height: 80 px;
margin: 0 0;
border-bottom: 1px solid gray;
background-image: url(images/bij2.jpg);
}
#top h1
{
padding: 0;
margin: 0;
}
#leftnav
{
float:left;
width: 165px;
margin: 0;
padding: 1em;
}
.menu {
height:150px;
font-size:90%;
margin:25px 0 50px 10px; /* this page only */
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
position:relative;
z-index:500;
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* style the list items */
.menu li {
background: blue url(images/menumb.gif);
height:26px;
/* for IE7 */
float:left;
}
.menu li.sub {background: url(images/menumb.gif; url(images/sub.gif) no-repeat right center;}
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}
/* style the links */
.menu a, .menu a:visited {
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#000;
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 1px;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:150px; w\idth:149px;}
/* style the link hover */
* html .menu a:hover {color: silver; background: transparent url(images/menumbhov.gif); position:relative;}
.menu li:hover {position:relative;}
/* For accessibility of the top level menu when tabbing */
.menu a:active, .menu a:focus {color: #993366;}
/* retain the hover colors for each sublevel IE7 and Firefox etc */
.menu li:hover > a {color:#993366;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu li ul {
visibility:hidden;
position:absolute;
top:-30px;
/* set up the overlap (minus the overrun) */
left:100px;
/* set up the overrun area */
padding:30px;
/* this is for IE to make it interpret the overrrun padding */
background:transparent url(images/transparent.gif);
}
/* for browsers that understand this is all you need for the flyouts */
.menu li:hover > ul {visibility:visible;}
/* for IE5.5 and IE6 you need to style each level hover */
/* keep the third level+ hidden when you hover on first level link */
.menu ul a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
.menu ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* make the second level visible when hover on first level link */
.menu ul a:hover ul {
visibility:visible;
}
/* make the third level visible when you hover over second level link */
.menu ul a:hover ul a:hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level link */
.menu ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
.contentleft
{
float: left;
width: 400px;
padding: 10px 10px;
background-color: yellow;
font-family: Arial;
font-size: 15px;
overflow: scroll;
}
.contentright
{
float: left;
width: 300px;
padding: 10px;
background-color: red;
font-family: Arial;
font-size: 15px;
}
.image
{float: left;
border: 1px pink;
padding: 2px;
margin: 10px 10px 0 0;
clear: left;}
.thumbnail
{
float: left;
width: 50px;
margin-top: 20px;
margin-right: 10px;
font-family: arial;
font-size: 12px;
border-top: 1px solid grey;
}
.clearboth { clear: both; }
#footer
{
clear: both;
margin: 0;
padding: .5em;
border-top: 1px solid grey;
}
Hieronder het HTML-deel:
<div class="contentleft">
<a href="javascript:Show('Pics/set01.jpg', 'nieuwvenster', 'toolbar=no,scrollbars=yes,resizable=yes,height=550,width=550')"> </a>
<IMG class="image" SRC="Pics/set01.jpg" HEIGHT="200" border="0" alt="Set 01">
<a href="javascript:Show('Pics/tasje01.jpg', 'nieuwvenster', 'toolbar=no,scrollbars=yes,resizable=yes,height=550,width=550')"></a>
<IMG class="image" SRC="Pics/tasje01.jpg" HEIGHT="200" border="0" alt="detail set 01">
<p> <h2>Set 01 Korte broek met shirtje en tasje</h2><br>
Wit t-shirtje van tricotstof, sluit met drukkertjes aan de achterkant. Rode korte broek
en tasje met klepsluiting.
<br>? 5,50
<p> Tasje met klepsluiting behorend bij Set 01
</div>
<div class="contentright">
right lafeilkdfjaleifa
</div>
</div>
