links naast een afbeelding

Status
Niet open voor verdere reacties.
N

nicole gv

Nieuwe gebruiker
Lid geworden
17 nov 2008
Berichten
4
Dreamweaver CS3

In het div submenu heb ik linkjes staan. Die linkjes zijn opgemaakt als block in div submenu adie goed functioneren. Ik heb er een verticale lijn voor geplaatst (.jpg bestand). Toen ik dat deed, gingen de linkjes (div submenu a) naar beneden. Ze gingen zeg maar als het ware onder de afbeelding staan. Ik heb het al met align="left" geprobeerd (zoals je een tekst naast een afbeelding plaatst). Maar dat helpt niet. Ook heb ik dingen gebrobeerd als <dd> en &nbsp;. Allebei tevergeefs

De linkjes in zoals ze nu zijn
<div id="submenu">
<p><img src="../afb/streep.jpg" width="1" height="90" align="left"/></p><br><p align="left"><a href="wedding2.html">Wedding speciaal</a></p>
<p align="left"><a href="seizoen2.html">Seizoen speciaal</a> </p>
<p align="left"><a href="manpitt2.html">Man pittshop speciaal</a></p>
<br><br><br>
</div>

Hierbij is het oranje gemarkeerde de afbeelding. De afbeelding is dus een verticale lijn. <hr> maakt een horizontale lijn. Jammer genoeg is er niet een html code voor een verticale lijn. De linkjes die ernaast staan, zijn onder elkaar.

CSS voor submenu:
#submenu {
padding-left: 203px;
display: block;
background-color: #FF0000;
}

CSS voor submenu a
#submenu a {
background-color : #000066;
color : #FFFFFF;
font-size : 12px;
text-align : left;
text-decoration : none;
float : left;
width : 150px;
font-family: Candara;
padding-top: 0;
padding-right: 4px;
padding-bottom: 2px;
padding-left: 4px;
clear: both;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border: 0px solid #000000;
}

Als ik width van 150 px (submenu a) aanpas, dan gaat de afbeelding automatisch mee, alsof de afbeelding er aan vastgeplakt wordt.
Het zijn onder elkaarstaande links.
Mijn vraag dus: Hoe krijg ik de verticaal staande linkjes van #submenu a naast een afbeelding en niet onder een afbeelding?

Ik hoop dat ik het duidelijk geformuleerd heb.
 
Laatst bewerkt:
Je code:
HTML: 
<p><img src="../afb/streep.jpg" width="1" height="90" align="left"/></p><br><p align="left"><a href="wedding2.html">Wedding speciaal</a></p>
bevat dus p tags, hetgeen inhoud dat je een nieuwe pargraaf begint.

Vermijdt het gebruik van p tags,
gebruiks ze enkel en alleen waarvoor ze bedoelt zijn.
Twee maal een <br> tag is als ruimtemaker beter.
In dit geval dus de p tags deleten.


///edit
en ook de <br> in dit geval.
</p><br><p align="left"> mag geheel weg.

:cool:
 
Laatst bewerkt:
Helaas. Ik heb alle <p> en alle <p align=...> en alle <br> weg gehaald rond die links in submenu a. Het probleem wat ik vervolgens krijg:

De afbeelding schuift naar rechts en is niet op een andere plek neer te zetten.
De linkjes komen voor de inhoud en lijkt los van de div submenu a
De inhoud heeft geen div meer en de tekst van de inhoud zweeft er maar een beetje naast.

Het probleem is niet opgelost, maar ik geloof dat het veel te gedetailleerd is om op te lossen. Nogmaals bedankt voor de hulp.

Groeten van Nicole
 
Zet je eigen plaatje neer.

HTML: 
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<title>(Type a title for your page here)</title>
<!--Pagina gemaakt op Tuesday, November 18, 2008 18:39:17 -->
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<meta name="description"  content="korte beschrijving van de pagina">
<meta name="keywords"  content="trefwoorden, die, slaan, op, de, pagina">
<meta name="publisher" content="Jan Jansen">
<meta name="Author" content="Peter Vazed">
<meta name="robots" content="index, follow">
<meta name="revisit" content="7 days">
<meta http-equiv=content-type content="text/html; charset=windows-1252">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css" media="screen">
 body
{
background-image: url(start-strps.jpg);
margin: 0;
padding: 0;
font-family:  verdana, "comic sans ms", arial, hevetica, sans-serif;
text-align: left;
color: #000;
background: #ffffcc;
}

#submenu {
padding-left: 203px;
display: block;
background-color: #FF0000;
}

.submenuplaatje{
width:20px;
height:140px;
background-image:url(menu1.gif);
background-repeat: repaet;
float:left;
}
//CSS voor submenu a
#submenu a {
background-color : #000066;
color : #FFFFFF;
font-size : 12px;
text-align : left;
text-decoration : none;
float : left;
width : 150px;
font-family: Candara;
padding-top: 0;
padding-right: 4px;
padding-bottom: 2px;
padding-left: 4px;
clear: both;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border: 0px solid #000000;
}

</style>
</head>

<body >


<div id="submenu">

<div class="submenuplaatje"></div>
<br><a href="wedding2.html">Wedding speciaal</a><br><br>

<a href="seizoen2.html">Seizoen speciaal</a><br><br>

<a href="manpitt2.html">Man pittshop speciaal</a><br><br><br>
</div>

</body>

</html>

:cool:
 
Ik heb het opgelost!!:D Ik zag dat je in jouw voorbeeld een div hebt gemaakt van het plaatje. Dat hielp heel veel. Ik kreeg het alleen wel onder de div van submenu. Ineens dacht ik aan lagen. Ik heb een laag gemaakt en die afbeelding er min of meer boven gezet. (insert, lay-out objects, AP Div).
Nogmaals bedankt voor de hulp!:thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan