plaatje positioneren in css gaat niet met float.

Status
Niet open voor verdere reacties.

djeric

Gebruiker
Lid geworden
22 nov 2006
Berichten
955
hoi.

ik wil het volgende plaatje:

evenementen.jpg

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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://radio-depromoter.com/playlist.asx"><img src="index/wmp.gif" title="windows media player" alt="windows media player"></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="hhttp://radio-depromoter.com/playlist.ram"><img src="index/real.png" title="real player" alt="real player"></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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:

web5.jpg
 
Laatst bewerkt:
Probeer is om "text-align:center" ui #logo weg te halen.
Foto's pak je daar namenlijk ook mee op.
Ik heb het zelf niet geprobeert.
gr Jesse
 
Ik heb het zelf niet geprobeert.

ik wel maar lukt me niet.

ik heb de volgende code geprobeerd:

HTML:
<div id="test">
<a href="link ergens heen"><img src="index/evenementen.jpg" title="" alt=""></a>
</div>

Code:
#test 
{
float: left;  
margin-right: 5px;  
margin-bottom: 5px;  
width: 150px;
height: 60px;
}

resultaat:

web6.jpg

terwijl ik echter zoiets wil:

web5.jpg
 
Laatst bewerkt:
Je kunt foto's in % tegen elkaar laten leunen. Uitgaande van je html:
Code:
<div id="logo">
  <img id="links" src="linkerfoto.jpg" alt="" width="140" height="195">
  <img src="middenfoto.jpg" alt="" width="561" height="195">
  <img id="rechts" src="rechterfoto.jpg" alt="" width="140" height="195">
</div>
 
 #logo {
   width: 100%;
 }
 #logo img {
   float: left;
   width: 66%; /* breedte van elke foto in logo, maar.,.. */
   height: 195px;
 }
#logo img#links, #logo img#rechts {
   width: 17%; /* ....afwijkende breedte van links en rechts */
}
 
Laatst bewerkt:
Je kunt foto's in % tegen elkaar laten leunen. Uitgaande van je html:

opdracht uitgevoerd.

maar zonder resultaat:

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>

<div id="test">
<a href="link ergens heen"><img src="index/evenementen.jpg" title="" alt=""></a>
</div>

<!--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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://radio-depromoter.com/playlist.asx"><img src="index/wmp.gif" title="windows media player" alt="windows media player"></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="hhttp://radio-depromoter.com/playlist.ram"><img src="index/real.png" title="real player" alt="real player"></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://spotstreaming.nl:8018/listen.pls"><img src="index/quick.png" title="quicktime" alt="quicktime"></a>
</div>

</body>
</html>

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 */
}

/***************************************************************************************************************************************************/
/***************************************************************************************************************************************************/

#test 
{
float: left;  
margin-right: 5px;  
margin-bottom: 5px;  
width: 150px; /* aanpassing */
height: 60px; /* aanpassing */
}


/***************************************************************************************************************************************************/
/***************************************************************************************************************************************************/

/* instelingen voor logo */

#logo {
width: 100%;
}

#logo img {
float: left;
width: 66%; /* breedte van elke foto in logo, maar.,.. */
height: 195px;
}

#logo img#links, 
#logo img#rechts {
width: 17%; /* ....afwijkende breedte van links en rechts */
}

/* 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 */

/**************************************************************************************************************************************************/ 
/**************************************************************************************************************************************************/

= resultaat nog altijd:

web6.jpg
 
Je mist een wrapper container.
Code:
<body>
<div id="wrapper">
.......
</div>
</body>

#wrapper { 
  background-image : url(index/achtergrond.jpg);
  background-attachment : fixed;
  max-width: 960px;
  margin: 0 auto; /* auto ten opzichte van body */
}
 
Je mist een wrapper container.

hoi bron.

bedankt dat je wil helpen, maar het werkt niet.
bovendien snap ik je uitleg niet.

jij schrijft dat ik het volgende in me html moet plaatsen na me <body> :

<div id="wrapper">
.......
</div>

wat komt er dan op de: ....... ???


en voor de css:

#wrapper {
background-image : url(index/achtergrond.jpg);
background-attachment : fixed;
max-width: 960px;
margin: 0 auto; /* auto ten opzichte van body */
}
[/code]

maar wat moet ik hiermee doen:

background-image : url(index/achtergrond.jpg);
background-attachment : fixed;
???

is het bedoeling dan om dat menu wat ik wil als achtergrond te krijgen?

ik kan vertellen dat het me niet lukt om het plaatje: evenementen.jpg zo naarst het plaatje van de speakers te krijgen. zowel links als rechts.
wel alles duidelijk en leesbaar nartuurlijk. ik heb een voorbeeldje geprobeerd te maken met paint. en dan moet het er zo uit komen te zien:

web5.jpg


ik ben dolblij als iemand me goed kan uitleggen of de juiste voorbeeld css & html kan plaatsen zodat het werkt met het menu naarst de plaatjes van de speakers.
Ik krijg niks voor elkaar in de positie. (het blijft een moelijke onderwerp)
 
Laatst bewerkt:
Als ik je ontwerp bekijk hoe je het uiteindelijk wilt hebben is het zo te zien een "kolommen" layout. In de huidige html is het lastig binnen deze html/css de layout aan te passen aan dingen die worden toegevoegd...!

Je vraag:

<div id="wrapper"> staat direct onder <body>
bijbehorende </div> staat direct boven </body>

In de css bij body:
background-image : url(index/achtergrond.jpg);
background-attachment : fixed;

In de css bij #wrapper (dit is voor horizontaal centreren)
width: 960px;
max-width: 960px;
margin: 0 auto; /* auto ten opzichte van body */
 
Als ik je ontwerp bekijk hoe je het uiteindelijk wilt hebben is het zo te zien een "kolommen" layout. In de huidige html is het lastig binnen deze html/css de layout aan te passen aan dingen die worden toegevoegd...!


dus ik kan geen menu plaatsen aan beide zijde van de bovengenoemde afbeelding (evenementen.jpg) ???

ik moet een menu maken van minimaal 12 pagina's + inhoud in t midden onderaan laten tonen.

Je uitleg van wat in html en css moet is mij een raadsel.

Ik snap totaal dat positioneren niet meer.
wel de bassis van css en html iets beter.

mij lijkt dat ik iets d.m.v. een float code toch moet kunnen positioneren???

stel nu dat ik aan 1 kant het menu maakt, dan is t ook opgelost toch?

maar een website zonder menu, is een radio station zonder muziek.

dus ik hoopte dat iemand een oplossing heeft om dat menu te plaatsen van mijn afbeelding?

ik loop al weken hiermee te kl**ten
 
Conceptje wat je zelf moet aanpassen in de bijlage.
Helaas geen tijd om hier verder mee te helpen, maar het is een start :d
 

Bijlagen

  • kolom_layout.zip
    1,6 KB · Weergaven: 32
Laatst bewerkt:
Helaas geen tijd om hier verder mee te helpen, maar het is een start :d

:( .php bestand kan ik niet openen. wel .html.

maar.....

ik heb het wel deels voor elkaar:

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 promoter</title>
	
<link href="style.css" rel="stylesheet" type="text/css">

</head>
<body>

<ul class="navigatie">
<li><a href="index.html" title="home"><img src="index/evenementen.jpg" ALT="" width="150" height="56"></a></li>  
<li><a href="informatie.html" title="informatie"><img src="index/evenementen.jpg" ALT="" width="150" height="56"></a></li>  
<li><a href="drankjes.html" title="apresski drankjes"><img src="index/evenementen.jpg" ALT="" width="150" height="56"></a></li> 
<li><a href="artiesten.html" title="artiesten"><img src="index/evenementen.jpg" width="150" height="56"></a></li>  
<li><a href="dj.html" title="dj's"><img src="index/evenementen.jpg" ALT="" width="150" height="56"></a></li> 
<li><a href="feestje.html" title="uw apresski feest"><img src="index/evenementen.jpg" <ALT="" width="150" height="56"></a></li>
</ul>

<ul class="navigatie rechts">
<li><a href="evenementen.html" title="evenementen"><img src="index/evenementen.jpg" ALT="" width="150" height="56"></a></li>  
<li><a href="toer.html" title="skihut on toer"><img src="index/evenementen.jpg" ALT="" width="150" height="56"></a></li>  
<li><a href="vacatures.html" title="vacatures"><img src="index/evenementen.jpg" ALT="" width="150" height="56"></a></li> 
<li><a href="drivein.html" title="drive in show's"><img src="index/evenementen.jpg" ALT="" width="150" height="56"></a></li> 
<li><a href="sponsers.html" title="apresski sponsers"><img src="index/evenementen.jpg" ALT="" width="150" height="56"></a></li>   
<li><a href="javascript:void(0)" onclick="open('http://skihutfm.listen2myradio.com','miniwin','width=915,height=305')" title="muziek speler"><img src="index/evenementen.jpg" <ALT="" width="150" height="56"></a></li> 
</ul>

<!--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>

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; 
	margin: 0 auto; /* aanpassing */
}

/***************************************************************************************************************************************************/
/***************************************************************************************************************************************************/

 ul.navigatie  { 

font-family : verdana, Arial, Helvetica, sans-serif; 

font-size : 14px; 

font-weight : bold; 

width : 12em; 

border-right : 1px solid #666; 

padding : 0; 

background-color : #9cc; 

color : #333; 

list-style : none; 

float : left; 

margin-top : 0; 

margin-right : 10px; 

margin-bottom : 1em; 

margin-left : 0; 
} 
 ul.rechts  { 

float : right; 

margin : 0 0 1em 10px; 
} 
 ul.navigatie li  { 

margin : 0; 

border-top : 0px; 
} 
 ul.navigatie li a  { 

display : block; 

padding : 2px 2px 2px 4px; 

border-left : 10px solid #993300; 

border-right : 0px; 

background-color : #000000; /* achter grond kleur veranderen van menu*/

text-decoration : none; 

width : 100%; 
} 
 ul.rechts  { 

margin : 0 0 1em 10px; 
} 
 html > body ul.navigatie li a  { 

width : auto; 
} 

 ul.navigatie li a:hover  { 

border-left : 10px solid #00FF00; /* achter grond kleur veranderen van mouse over effect van vinkje naarst menu zijde*/

color : #ff1493; 
} 
 .navigatie li img  { 

border : 0; 
} 

/***************************************************************************************************************************************************/
/***************************************************************************************************************************************************/

/* 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 img {
  width: 85px;
  height: 76px;
  border: 0px;
  margin-left: 50px; 
}

/* einde instelingen voor icoontjes spelers */

/**************************************************************************************************************************************************/ 
/**************************************************************************************************************************************************/


is het volgende resulaat:

web7.jpg

maar ik zie de volgende fouten:

web8.jpg

* rode pijlen geven aan dan er hoogte verschil is. Dit is NIET de zelfde hoogte als die van het logo
* rode cirkels geven aan dat er hoogte verschil is, tussen het menu en het plaatje met (dj jose)
* de gele balken geven nutteloze ruimte. de speakers staan te ver weg van het logo. waardoor er minder ruimte komt voor het menu.

het resultaat moet echter zijn zoals ik in paint hebt getekend:

web9.jpg

* groene pijlen van menu geven nu de juiste hoogte weer ten opzichte van het logo.
* groene cirkels geven aan dat het menu nu netjes even hoog staat als het plaatje met (dj jose)
* blauwe balken geven nu geen nutteloze ruimte meer aan, speakers staan netjes naarst het logo.

ik hoop dat ik nu ver genoeg ben met positioneren, maar het blijft te moeilijk iets. dus heb echt hulp nodig, dat wel alles perfect is.
zoals bron omschrijft, heb ik uitgevoerd, maar het lukt me niet. Dus iemand die wel tijd heeft en het juist kan uitleggen?

ik hoop dat mijn code nu wel validate is. (heb ff tijdelijk geen webruimte beschikbaar om online te plaatsen)
 
Laatst bewerkt:
.php bestand kan ik niet openen. wel .html.
Wijzig .php in .html en dan kun je ermee aan de slag.

In het algemeen: margin / padding / border / line-height hebben invloed op width / height
 
Conceptje wat je zelf moet aanpassen in de bijlage.
Helaas geen tijd om hier verder mee te helpen, maar het is een start :d

hey super gedaan joh!

sorry dat ik later reageerde maar heb je code ff uitgebreid bestudeerd.

ik heb wel aantal dingen moeten aanpassen:

* achtergronden weg gehaald.
* de hoogte van de iframes aangepast. (ik zag schuif balkjes)
* de div met wat er nu speelt, stond verkeerd op pagina. (stond links, gefloat?) ik heb deze </div> pas na de regel toegepast met buttons en toen stond die mooi in midden onder logo.
* de div met plaatjes wie er draait onder de speakers in een aparte div. geplaatst i.v.m. dat de linker plaatje zelfde stond als de rechter. (nu is het spiegelbeeld effect)
* 12 fouten van validator in </a> vergeten van de links van menu. (daar hebben we de validator voor.)

dus top werk! hier heb ik weken op gezeten, om t goed te krijgen, ben blij dat t beide gelukt.

goed geholpen!:thumb::love:

huidige code na bovenstaande bewerking:

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><!--/kolommen-->

</div><!--/wrapper-->
</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;
}
 
Laatst bewerkt:
Blij dat je met het conceptje iets kan doen. Het was aan jouw om te kijken of je er mee verder wilde, en zo ja, dan kun je het zelf aanpassen. Dat gaat je allemaal lukken, daar ben ik van overtuigd.

Tip: al die /********************************/ uit je css weghalen.

*** aanvulling: maak je website meer van deze tijd. Vervang regel 1 t/m 6 in
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Radio</title>
 
Laatst bewerkt:
Blij dat je met het conceptje iets kan doen. Het was aan jouw om te kijken of je er mee verder wilde, en zo ja, dan kun je het zelf aanpassen. Dat gaat je allemaal lukken, daar ben ik van overtuigd.

Tip: al die /********************************/ uit je css weghalen.

moet dit eigenlijk?

blijft voor mij overzichtelijk als ik iets wil opzoeken.
of is dit zichtbaar voor zoekmachines en daardoor niet goed gekeurd?
 
Op zich kan het geen kwaad maar alles wat niet nodig is in je html en css is overbodig. Mijn commentaar is in deze vorm
/**
*** bla bla bla
**/

Houdt scripts kort, en houdt plaatjes zo klein mogelijk. Te grote foto's eerst verkleinen en dan op je website gebruiken. De compressie (quality) van jpg foto's kan probleemloos op 80-90 % gezet worden. Dit scheelt in de performance van je pagina.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan