uitlijnen met div...

djeric · 14 dec 2015

Nu ik me achtergrond klaar hebt, ben ik bezig met de bovenste helft van me pagina.
Echter wil dit (zoals verwacht) mij dus niet lukken om het netjes en goed te krijgen voor alle type gebruikers: (pc,tablet,mobiel)

* linker kant komt deze pagina: klik
* midden komt het logo
* rechterkant komt een flashplayer (zie de html code) + onder de speler de buma & sena logo/nummer

zie op de website nu online: Website

Code:

body{
background:#000000;
}

div#achtergrond {
	height: 350px;
	width: 100%;
	background: #000000 url(plaatjes/achtergrond.jpg) no-repeat;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
}

.djdisplay  { float: left; width: 100%; height: 175px;  
position: absolute;
top: 180px;
margin-left : 1%;
height : 160px; 
width : 150px;
max-width : 150px;
border: 0px;
} 

img.autoresize  { 
height : auto; 
max-width : 100%; 
width : auto; 
margin-left : 175px;
margin-right: 10px;
}

div#speler  { float: right; width: 100%; height: 175px;  
position: absolute;
top: 20px;
margin-left : 67%;
height : 160px; 
width : 150px;
max-width : 150px;
border: 0px;
} 

img.buma  {
height : auto; 
max-width : 100%; 
width : auto;
margin-left : 0px;
margin-right: 10px;
}
img.sena  { 
height : auto; 
max-width : 100%; 
width : auto; 
margin-left : 0px;
margin-right: 10px;
}

HTML:

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>wat is er nieuw op hitdance radio</title>
<meta name="description" content="dance, hardstyle, apresski, nederlands, rock, jaren 70, jaren 80, jaren 90, hitdance, radio, met muziek voor jong en oud, en de leukste dj's">
<meta name="keywords" content="online, dj, muziek, hard dance, hardstyle, live dj, nieuws, dj team, live, live dj, radio luisteren, verzoekplaat, verzoekjes, spiegelplaat, facebook, radio, live streams, boekingen, gezocht, draait">
<link href="hitdance.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="achtergrond">

<iframe src="http://server13003.irserv2.com/djdisplay/" class="djdisplay" style="height: 43%; width: 150px;"></iframe>
<img class="autoresize" src="plaatjes/logo.png" title="Logo" alt="Logo"></img>
<div id="speler">
<script type="text/javascript" src="http://www.radiohost.gr/players/radio_players/mrp.js"></script>
<script type="text/javascript">
MRP.insert({
'url':'http://178.251.24.69:7039/stream',
'codec':'mp3',
'volume':75,
'autoplay':true,
'buffering':5,
'title':'Hitdance radio',
'welcome':'',
'bgcolor':'#FFFFFF',
'skin':'blueberry',
'width':338,
'height':102
});
</script>
<img class="buma" src="plaatjes/buma.png" title="Buma-stemra" alt="Buma-stemra"></img>
<img class="sena" src="plaatjes/sena.png" title="Sena" alt="Sena"></img>

</div></div>

 </body>
 </html>

bron · 15 dec 2015

Begin eigenlijk altijd met het indelen voor phone/tablet/pc voordat je gaat coderen. Dit zou een indeling kunnen zijn. Ik ben in dit voorbeeld niet uitgegaan van jouw css. Het geeft alleen aan hoe je begint met een indeling voordat je invulling geeft.

Code:

HTML:

<div id="linker-kolom">
   <iframe src="http://server13003.irserv2.com/djdisplay/" class="djdisplay" style="height: 43%; width: 150px;"></iframe>
</div>
<div id="midden-kolom">
   <img class="autoresize" src="plaatjes/logo.png" alt="Logo" />
</div>
<div id="rechter-kolom">
   <img class="buma" src="plaatjes/buma.png" alt="Buma-stemra">
   <img class="sena" src="plaatjes/sena.png" alt="Sena">
</div>

CSS:

/* phone */
#linker-kolom {width:0%; display:hidden;}
#midden-kolom {width:80%;}
#rechter-kolom {width:20%;}

/* tablet */
@media (min-width: 768px) {
   #linker-kolom {width:25%; display:block;}
   #midden-kolom {width:50%;}
   #rechter-kolom {width:25%;}
}

/* pc */
@media (min-width: 992px) {
   #linker-kolom {width: 30%;}
   #midden-kolom {width: 40%;}
   #rechter-kolom {width: 30%;}
}

Let vooral op de valkuilen die width, border, margin en padding met zich meebrengen als het gaat om de breedte. Om een aantal onverwachte dingen te voorkomen kun je bovenaan in je css dit zetten dan hoef je alleen nog rekening te houden met de width en margin.

Code:

* {
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
}

Suc6. Have fun.

djeric · 15 dec 2015

bron zei:
Begin eigenlijk altijd met het indelen voor phone/tablet/pc voordat je gaat coderen. Dit zou een indeling kunnen zijn. Ik ben in dit voorbeeld niet uitgegaan van jouw css. Het geeft alleen aan hoe je begint met een indeling voordat je invulling geeft.

Ik snap het.
Maar me nadeel is ik geen tablet hebt om zoiets in me hoofd te achterhalen hoe dit in elkaar steekt, eveneens hoe dit op een mobiel eruit komt te zien.
Dit lijkt me een vraag voor hier

De html/css opmaak heb ik uitgevoerd en nagekeken, maar kom daar totaal niet uit met een resultaat wat ik dan zie.
Ik zie dan alles onder elkaar staat en het beeld niet eens mee verschuift in div. scherm resolutie's.

Maar je citeerd het zelf:

bron zei:
Het geeft alleen aan hoe je begint met een indeling voordat je invulling geeft.

Dus lijkt me handiger ik een ander topic aanmaak hiervoor.

bron · 15 dec 2015

Maar me nadeel is ik geen tablet hebt om zoiets in me hoofd te achterhalen hoe dit in elkaar steekt

Hoeft ook niet. Ikzelf teken op een bord 3 rechthoeken naast elkaar:
Een phone; een tablet (ruim 2x zo breed als phone); en een pc (circa 3x zo breed als phone). Dan teken ik in elke rechthoek rijen en kolommen zoals ik het wil indelen. Daarna ga ik de rijen/kolommen omzetten in html met css.

Als op een goede manier wordt gecodeerd dan kun je de browser smaller maken om te zien hoe het er op tablet en phone uitziet. Je kunt toch niet alle merken en modellen phones en tablets testen... Vandaar dat ik Bootstrap gebruik.

Voor kleine websites heb ik een gestripte Bootstrap css gemaakt (bijlage) die je zonder javascript kunt gebruiken. Dit maakt het bouwen van een kleine site makkelijk en je hebt daarna een goed werkende layout op phone, tablet en pc. Voorbeelden hoe de html eruit moet zien vind je op http://www.w3schools.com/bootstrap/

How to: Zet een link naar het "bootstrap.cust.css" voor je eigen css.

Code:

<link href="bootstrap.cust.css" rel="stylesheet">
<link href="hitdance.css" rel="stylesheet">

Het bestand heb ik voor performance gecomprimeerd met balans tussen compressie/leesbaarheid. Naast normalize en een aantal standaard instellingen zijn dit de classes die in het css bestand staan.

Code:

Afbeeldingen
	.img-responsive
	.img-rounded
	.img-thumbnail
grid
	.container
	.container-fluid
	.col-xs-1 ~~ .col-xs-12
	.col-sm-1 ~~ .col-sm-12
	.col-md-1 ~~ .col-md-12
show/hide
	.hidden
	.hidden-xs
	.hidden-sm
	.hidden-md
	.visible-xs
	.visible-sm
	.visible-md
	.visible-xs-block
	.visible-sm-block
	.visible-md-block
	.visible-xs-inline-block
	.visible-sm-inline-block
	.visible-md-inline-block
symbolen
	.glyphicon
	.glyphicon-menu-hamburger
	.glyphicon-search
	.glyphicon-home
	.glyphicon-earphone
	.glyphicon-menu-left
	.glyphicon-menu-right
	.glyphicon-menu-down
	.glyphicon-menu-up
utilities
	.clearfix
	.center-block
	.pull-right
	.pull-left
	.hide
	.show
	.invisible
	.text-hide
	.affix

Suc6. Have fun.

djeric · 16 dec 2015

bron zei:
Hoeft ook niet. Ikzelf teken op een bord 3 rechthoeken naast elkaar:
Een phone; een tablet (ruim 2x zo breed als phone); en een pc (circa 3x zo breed als phone). Dan teken ik in elke rechthoek rijen en kolommen zoals ik het wil indelen. Daarna ga ik de rijen/kolommen omzetten in html met css.

Als op een goede manier wordt gecodeerd dan kun je de browser smaller maken om te zien hoe het er op tablet en phone uitziet. Je kunt toch niet alle merken en modellen phones en tablets testen... Vandaar dat ik Bootstrap gebruik.

ik zet het topic dan hier verder. :thumb:

uitlijnen met div...

djeric

Gebruiker

bron

Moderator

djeric

Gebruiker

bron

Moderator

Bijlagen

djeric

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy