djeric
Gebruiker
- Lid geworden
- 22 nov 2006
- Berichten
- 955
hoi.
ik wil het volgende plaatje:
op me website plaatsen aan de linkerkant en aan de rechterkant van me webpagina.
beide moeten dan straks een link bevatten.
het doel is een menu.
maar hoe ik ze ook plaats in me css en html.
ze komen niet goed te staan.
ik probeer al met float te werken maar krijg het echt niet voorelkaar. het lijkt er gewoon op dat het niet past.
de breedte van me menu plaatje is te breed en/of overlapt met me logo plaatje.
daarnaast krijg ik dan het hele zaakje niet meer goed gepositioneerd. (waar ik langer mee zit met problemen met positioneren)
link naar website is: kijk hier (link tijdelijk beschikbaar)
de html code:
mijn css code:
ik zoek een oplossing voor de volgende resultaat:
ik wil het volgende plaatje:
op me website plaatsen aan de linkerkant en aan de rechterkant van me webpagina.
beide moeten dan straks een link bevatten.
het doel is een menu.
maar hoe ik ze ook plaats in me css en html.
ze komen niet goed te staan.
ik probeer al met float te werken maar krijg het echt niet voorelkaar. het lijkt er gewoon op dat het niet past.
de breedte van me menu plaatje is te breed en/of overlapt met me logo plaatje.
daarnaast krijg ik dan het hele zaakje niet meer goed gepositioneerd. (waar ik langer mee zit met problemen met positioneren)
link naar website is: kijk hier (link tijdelijk beschikbaar)
de html code:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="radio, promoter, dj, zender, ether, studio, uitzending, live, server, verzoekjes, plaat, muziek, song, aankondiging, uitzending">
<meta name="description" content="">
<title>radio de promotor</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--start logo-->
<div id="logo">
<img id="links" src="index/speaker.jpg" alt="" width="140" height="195">
<img src="index/logo.jpg" alt="" width="561" height="195">
<img id="rechts" src="index/speaker.jpg" alt="" width="140" height="195">
</div>
<!--einde logo-->
<div id="track">
<iframe src="http://www.server12983.irserv2.com/nowplaying/"></iframe>
</div>
<div id="live">
<iframe src="http://server12983.irserv2.com/djdisplay/"></iframe>
</div>
<div id="left">
<iframe src="http://server12983.irserv2.com/djdisplay/"></iframe>
</div>
<div id="speler">
<a href="http://spotstreaming.nl:8018/listen.pls"><img src="index/wnp.png" title="winamp" alt="winamp"></a>
<a href="http://radio-depromoter.com/playlist.asx"><img src="index/wmp.gif" title="windows media player" alt="windows media player"></a>
<a href="hhttp://radio-depromoter.com/playlist.ram"><img src="index/real.png" title="real player" alt="real player"></a>
<a href="http://spotstreaming.nl:8018/listen.pls"><img src="index/quick.png" title="quicktime" alt="quicktime"></a>
</div>
</body>
</html>
mijn css code:
Code:
/* wat algemene zaken (reset) */
html,body,div,ul,li,a,img,span
/**************************************************************************************************************************************************/
/**************************************************************************************************************************************************/
/* instellingen voor achtergrond. */
{
margin:0; padding:0; border:0; outline:0; font-size:100%;
vertical-align:baseline; background:transparent; }
body {
background-image : url(index/achtergrond.jpg);
background-attachment : fixed;
max-width: 960px; /* aanpassing */
margin: 0 auto; /* aanpassing */
}
/***************************************************************************************************************************************************/
/***************************************************************************************************************************************************/
/***************************************************************************************************************************************************/
/***************************************************************************************************************************************************/
/* instelingen voor logo */
img#links {
/* instelingen vanaf rechts van de middelste foto */
float: left; /* aanpassing */
}
#logo {
/* instelingen voor logo */
text-align : center;
padding-top : 10px;
}
img#rechts {
/* instelingen vanaf links van de middelste foto */
float: right; /* aanpassing */
}
/* einde instelingen voor logo */
/**************************************************************************************************************************************************/
/**************************************************************************************************************************************************/
/* instelingen voor wat draait er nu */
iframe {
width: 450px; /* aanpassing */
border: 0;
height: 50px; /* aanpassing */
}
#track {
font-style : italic;
text-align: center;
margin-top: 0.6em; /* aanpassing */
}
#live{
float: right; /* aanpassing */
}
#live iframe {
width: 150px; /* aanpassing */
height: 160px; /* aanpassing */
margin-top: -3.1em; /* aanpassing */
}
#left{
float: left; /* aanpassing */
}
#left iframe {
width: 150px; /* aanpassing */
height: 160px; /* aanpassing */
margin-top: -3.1em; /* aanpassing */
}
/* einde instelingen voor wat draait er nu */
/**************************************************************************************************************************************************/
/**************************************************************************************************************************************************/
/* instelingen voor icoontjes spelers */
#speler{
margin-left: 16em; /* aanpassing */
}
#speler img {
width: 85px;
height: 76px;
border: 0px;
vertical-align: bottom; /* of gebruik padding bij <a> */
}
/* einde instelingen voor icoontjes spelers */
/**************************************************************************************************************************************************/
/**************************************************************************************************************************************************/
ik zoek een oplossing voor de volgende resultaat:
Laatst bewerkt: