djeric
Gebruiker
- Lid geworden
- 22 nov 2006
- Berichten
- 955
hallo.
ik ben weer aan t vogelen met 2 plaatjes te plaatsen.
dit maal 1 plaatje links naarst de tekst met een link ergens heen.
en 1 plaatje rechts naarst de tekst. (op zelfde hoogte)
ik bedacht dus met float en margin te werken, maar alles verpest steeds me hele pagina. ik krijg dan een andere breedte, krijg dus schuif balken.
en de plaatjes krijg ik niet op hun plaats.
ik heb een kop tekst staan bovenaan me inhoud tekst.
Nu wil ik zowel links als rechts een plaatje plaatje plaatsen naarst de tekst. (niet er tegen aan)
de tekst heb ik wel geplaatst en voorzien van kleur en achtergrond kleur.
een voorbeeld wat ik wil: (zie die plaatjes met een "?" )
mijn huidige html & css code nu:
ik ben weer aan t vogelen met 2 plaatjes te plaatsen.
dit maal 1 plaatje links naarst de tekst met een link ergens heen.
en 1 plaatje rechts naarst de tekst. (op zelfde hoogte)
ik bedacht dus met float en margin te werken, maar alles verpest steeds me hele pagina. ik krijg dan een andere breedte, krijg dus schuif balken.
en de plaatjes krijg ik niet op hun plaats.
ik heb een kop tekst staan bovenaan me inhoud tekst.
Nu wil ik zowel links als rechts een plaatje plaatje plaatsen naarst de tekst. (niet er tegen aan)
de tekst heb ik wel geplaatst en voorzien van kleur en achtergrond kleur.
een voorbeeld wat ik wil: (zie die plaatjes met een "?" )
mijn huidige html & css code nu:
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">
<title>Radio</title>
<meta name="description" content="Radio promoter">
<meta name="keywords" content="radio, promoter, dj, zender, ether">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="kolommen">
<div id="kolom1" class="kolom">
<ul id="linkermenu" class="menu">
<li><a href="index.html"><img src="index/evenementen.jpg" alt=""></a></li>
<li><a href="index.html"><img src="index/evenementen.jpg" alt=""></a></li>
<li><a href="index.html"><img src="index/evenementen.jpg" alt=""></a></li>
<li><a href="index.html"><img src="index/evenementen.jpg" alt=""></a></li>
<li><a href="index.html"><img src="index/evenementen.jpg" alt=""></a></li>
<li><a href="index.html"><img src="index/evenementen.jpg" alt=""></a></li>
</ul>
</div>
<div id="kolom2" class="kolom">
<img src="index/speaker.jpg" alt="">
<iframe src="http://server12983.irserv2.com/djdisplay/"></iframe>
</div>
<div id="kolom3" class="kolom">
<div id="logo">
<img src="index/logo.jpg" alt="">
</div>
<div id="nowplaying">
<iframe src="http://www.server12983.irserv2.com/nowplaying/"></iframe>
<div id="buttons">
<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>
</div>
</div>
<div id="kolom4" class="kolom">
<img src="index/speaker.jpg" alt="">
<iframe src="http://server12983.irserv2.com/djdisplay/"></iframe>
</div>
<div id="kolom5" class="kolom">
<ul id="rechtermenu" class="menu">
<li><a href="index.html"><img src="index/evenementen.jpg" alt=""></a></li>
<li><a href="index.html"><img src="index/evenementen.jpg" alt=""></a></li>
<li><a href="index.html"><img src="index/evenementen.jpg" alt=""></a></li>
<li><a href="index.html"><img src="index/evenementen.jpg" alt=""></a></li>
<li><a href="index.html"><img src="index/evenementen.jpg" alt=""></a></li>
<li><a href="index.html"><img src="index/evenementen.jpg" alt=""></a></li>
</ul>
</div>
</div>
</div>
<div id="kop">
<h1 id="kop1">Welkom op radio de promoter.</h1>
</div>
<div id="inhoud">
<p>Dit radiostation is op gezet met een goed doel ,en dat is dat wij ons willen inzetten voor kinderen en volwassenen met een verstandelijke
beperking, gehandicapt of autistische zijn en die we graag een warm hart willen toedragen en een kans geven om bij onze station ook een keer mee
te mogen draaien samen met 1 van onze Dj's. Deze kans is er nu mogelijk bij www.radio-depromoter.com. Ook willen wij proberen om evenementen voor
deze mensen te organiseren met veel artiesten natuurlijk.</p>
<br>
<p>En daar willen wij wat aan doen en dat kan niet zonder uw hulp. Wij het Team van www.radio-depromoter.com willen de mensen laten zien dat deze
bijzondere mensen ook veel kunnen en dat willen wij uw graag laten horen, door regelmatig een gast Dj met 1 van deze handicaps in onze studio uit
te nodigen. Deze mensen genieten van de muziek die zij uitzoeken en met behulp van onze top Dj's
u te laten mee genieten hier bij onze radio station.</p>
<br>
<p>Wij wensen uw veel luister plezier hier bij radio-de promoter</p>
</div>
</body>
</html>
Code:
/* reset */
html, body, div, ul, li, a, p, img, span, iframe {
margin: 0; padding: 0; border: 0; outline: 0;
font-size: 100%; vertical-align: baseline; background: transparent;
}
/* html algemeen */
body {
font: normal 1em arial, helvetica, sans-serif;
background-image : url(index/achtergrond.jpg);
background-attachment : fixed;
}
a, a:link, a:visited { text-decoration: underline; text-align: left; }
a:hover, a:focus { cursor: pointer; }
a:active, a:focus { outline: 0; outline-style: none; outline-width: 0; }
iframe {
border: 0;
background: transparent;
}
/* wrapper */
#wrapper {
width: 1270px; /* breedte van alle kolommen bij elkaar */
margin: 0 auto;
}
/* kolommen */
.kolom {
float: left;
margin-top: 15px;
padding-top: 10px;
text-align: center;
}
#kolom1,
#kolom5 {
width: 190px;
}
#kolom2,
#kolom4 {
width: 160px;
}
#kolom3 {
width: 570px;
}
/* menu links + rechts */
.menu, .menu li, .menu a, .menu img {
margin: 0; padding: 0; border: 0;
list-style: none; outline: 0;
}
.menu {
float: left;
position: relative;
}
.menu li {
float: none;
line-height: 1;
vertical-align: middle;
}
.menu li:hover {
cursor: pointer;
}
.menu a {
display: block;
}
.menu img { /*radio*/
width: 170px;
height: 50px;
padding: 0 10px 10px 10px;
}
/* speakers */
#kolom2 img,
#kolom4 img {
width: 140px;
height: 195px;
}
/* iframes */
#kolom2 iframe{
width: 174px;
height: 160px;
margin-top: 5px; /* hiermee verander je de hoogte van af bovenste plaatje. */
margin-left: 10px;
}
#kolom4 iframe {
width: 174px;
height: 160px;
margin-top: 5px; /* hiermee verander je de hoogte van af bovenste plaatje. */
}
#kolom3 iframe {
height: 50px; /* hiermee verander je de hoogte van het venster nu speelt. */
width: 450px;
}
/***************************************************************************************************************************************************/
/***************************************************************************************************************************************************/
#logo {
text-align : center;
}
#logo img {
width: 560px;
height: 195px;
}
/* nowplaying */
#nowplaying {
margin-top: 5px; /* hiermee verander je de hoogte van af bovenste plaatje. */
}
/* buttons */
#buttons {
height: 100px;
margin-left: 65px;
padding-top: 20px;
border: 0;
}
#buttons a {
float: left;
display: block;
margin-left: 20px;
}
#buttons img {
width: 85px;
height: 76px;
display: block;
}
/**************/
/**************/
#kop
{
float: left;
display: block;
margin-left: 185px;
}
h1#kop1
{
margin : 0 12.5em;
color : #FFFF33; /*letter kleur van de kop tekst*/
background : #0099FF; /*achtergrond kleur van de kop tekst*/
font-size : 1.4em;
text-align : center;
}
#inhoud
{
float: left;
display: block;
margin-left: 200px;
color : #FF9966; /*letter kleur van de inhoud tekst*/
background : #330000; /*achtergrond kleur van de inhoud tekst*/
margin : 0 12.5em;
margin-top: 15px;
font-size : 1.0em;
text-align : center;
}
