Image laten aansluiten op andere image?

Status
Niet open voor verdere reacties.
F

Freestyling

Gebruiker
Lid geworden
14 feb 2012
Berichten
8
Hallo!
Ik zit hier met een probleem zoals je hier onder kunt zien zie je dat ik een menu wil maken. maar ik heb een probleem zoals je ook al ziet, die image sluit niet aan :confused:
Hoe laat ik de image aansluiten?
Naamloos-6.png
Hoe los ik dit op?
 
Laatst bewerkt:
hier is de code trouwens die ik tot nu toe hebt
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Deathtage | Montage Industries</title>
</head>
<style type="text/css">
<!--
html {
	background: url(images/background.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
</style></head>
<body>
<img src="images/Menu1.png" width="2" height="114" hspace="25" vspace="0" /><a href="http://www.deathtage.com"><img src="images/Menu2.png" alt="Home" width="216" height="83" hspace="25" border="0" align="left" usemap="#Menu" /></a><img src="images/Menu4.png" alt="Contact" width="216" height="81" hspace="25" vspace="0" border="0" align="left" usemap="#Menu" /><img src="images/Menu5.png" width="2" height="113" hspace="25" vspace="0" align="left" />
</body>
<body>
<img src="images/Menu3.png" alt="Forum" width="216" height="80" hspace="25" vspace="0" border="0" align="left" />
<img src="images/Logo.png" alt="" width="1102" height="300" hspace="0" border="0" align="right" />
</body>
</html>

menu1 t/m 5 zijn de delen van het menu
 
Laatst bewerkt:
Hoi Freestyling,

Antwoord vraag #1
In de code staan de images allebei in een <p> element. Dat heeft standaard een witruimte onder en boven, tenzij je met css vertelt dat dat niet zo moet zijn:
Code: 
p {
    margin: 0;
    padding: 0;
    }
Je kunt ook de <p> zijn witruimte laten houden, als je een nieuwe regel <br /> in plaats van een nieuwe <p> gebruikt:
HTML: 
<p><img src="images/Menu1.png" width="2" height="114" alt="" /><br />
<img src="images/Menu2.png"  width="216" height="83" alt="Home" /></p>
En je kunt de images in een <<div> plaatsen, die geen witruimte heeft:
HTML: 
<div>
   <img src="images/Menu1.png" width="2" height="114" alt="" /><br />
   <img src="images/Menu2.png"  width="216" height="83" alt="Home" />
</div>

Antwoord vraag #2
Dat maakt het erger!
  • Er staan 2 <body>'s in, en een pagina met één hoofd en twee lichamen is niet toegestaan. ;)
  • De images staan los in de body, zonder een element er omheen waar ze deel van uitmaken: mag ook niet...
  • De eigenschappen "hspace", "vspace" en "align" zijn verboden waar: al 12 jaar achterhaald; reden: in html hoort geen opmaak te zitten, die hoort met css geregeld te worden als dat nodig is.
  • Er wordt op een paar punten een image-map (usemap="#Menu") gebruikt, die niet nodig is voor het kunnen aanklikken van knoppen die in een link <a>...</a> zitten.
Het kan gewoon zo:
HTML: 
<div>
   <img src="images/Menu1.png" width="2" height="114" alt="" /><br />
   <a href="..."><img src="images/Menu2.png"  width="216" height="83" alt="Home" /></a><br />
   <a href="..."><img src="images/Menu3.png"  width="216" height="80" alt="Forum" /></a><br />
   <a href="..."><img src="images/Menu4.png"  width="216" height="81" alt="Contact" /></a><br />
   ... enz.
</div>
En als je het helemaal volgens de de regelen der kunst wilt doen, kan het een mooi "ongeordend lijstje" worden, dat met css is opgemaakt:
HTML: 
<ul id="menu">
   <li><a href="..."><img src="images/Menu2.png"  width="216" height="83" alt="Home" /></a></li>
   <li><a href="..."><img src="images/Menu3.png"  width="216" height="80" alt="Forum" /></a></li>
   <li><a href="..."><img src="images/Menu4.png"  width="216" height="81" alt="Contact" /></a></li>
   ... enz.
</ul>
Met vriendelijke groet,
CSShunter
______________
Lijstje met achterhaalde / afgekeurde html-eigenschappen (D=Depr.=Depricated=niet gebruiken):
[url]www.w3.org/TR/html401/index/attributes.html[/URL].

Lijstje met achterhaalde / afgekeurde html-elementen (D): [url]www.w3.org/TR/html401/index/elements.html[/URL].
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan