Zoals de rest zegt: job hoeft niet. Voor zoiets kleins kunnen wij je wel helpen (denk ik)
Ik heb wat zitten prullen en bij 'edit2' zie je wat je het best als eindresultaat neemt. Het kan wel helpen om de rest ook eens te lezen om zo wat ideetjes op te doen!
Je eerste probleem begrijp ik en kan ik ook oplossen denk ik. Heb weer even een testpagina opgezet:
Klik
Het 'probleem' met die fancytestpagina (waar je naar linkt) is inderdaad dat als het venster te klein wordt, die likebuttons over de content komt te staan. Je kan dit oplossen door de 'likediv' te positioneren tegenover het midden van het scherm en dan rekening te houden met de width van je content:
Belangrijkste
HTML
Code:
<div id="wrapper">
<div id="socialmedia">
*knip*
</div>
<div id="content">
*knip*
</div>
</div>
Belangrijkste
CSS
Code:
#wrapper #content {
width: 970px;
height: auto;
margin: 0 auto 9px auto; /*je centreert de contentdiv horizontaal*/
background-color: #999;
padding: 1em;
font-family: Verdana;
font-size: 13px;
color: #FFF;
}
#socialmedia {
position: fixed; /*zo scrollt de div mee als je naar beneden scrollt*/
top: 25px;
left: 50%; /*de div wordt eers 50% van de kant geplaatst en omdat je je content gecentreerd hebt staan deze dus 'ongeveer' horizontaal gealigneerd*/
margin-left: -561px; /*nu zorg je ervoor dat de div nog 561px naar links opschuift. Hoe bereken je dit? De helft van je contentdiv (970px/2 = 485px) + de breedte van de socialmediadiv (62px) en daar kan je dan nog wat mee spelen om het goed te plaatsen*/
height: 191px;
width: 62px;
background-color: #333;
display: block; /*dit staat op 'block' omdat de socialmediabuttons pas getoond worden als je scherm groter is dan 1145px, anders staan ze er bij sommige resoluties en venstergroottes maar half op; zie hieronder*/
padding-top: 9px;
padding-left: 7px;
border-radius: 7px;
}
/*wat css3 om te zorgen dat de socialmedia getoond wordt als het scherm/het venster groter of gelijk is aan 1145px*/
@media screen and (max-width: 1145px) {
#socialmedia { display: none; }
}
Zoals je ziet gebruik ik wat css3. Let wel: dit werkt niet in oudere browsers. Maar hiervoor zal je waarschijnlijk wel een javascriptje vinden om bij een bepaalde browser size een class toe te voegen alls #socialmedia (display: none; moet dus toegevoegd worden dan)
Je tweede vraag: dat zal iets met php zijn gok ik, maar daar weet ik zo goed als niets van.
Als iets niet duidelijk is, vraag je het maar
Morgen maak ik een walkthrough / tutorial.
EDIT1: heb zelf wat zitten prullen in javascript en dit werkt in alle browsers met javascriptondersteuning:
JS
Code:
function adjustStyle(width) {
width = parseInt(width);
if (width < 1145) {
$("#socialmedia").css('display', 'none');
} else {
$("#socialmedia").css('display', 'block');
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
})
Vergeet wel niet jQuery aan te roepen! Je head ziet er dus zo uit:
Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Social media - test | bramvanroy.be</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/socialjs.js"></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
</head>
Je kan nu dus eigenlijk de css3 laten vallen. Als je op veilig wil spelen voor het geval dat javascript uitgeschakeld staat, kan je het wel altijd laten staan (maar werkt enkel op moderne browsers).
(aan de rest: please check my code, het werkt wel maar ik ben niet zeker of het kosjer code is
)
EDIT2
Het kwam juist pas in me op dat als javascript disabled is de social buttons ook niet werken, want die maken allemaal gebruik van javascript. Daarom kan je best gewoon de div hiden in je css en een javascriptje plaatsen waarin die div zichtbaar gemaakt wordt. Dit scriptje wordt dus enkel gebruikt als javascript enabled is en als het disabled is, wordt het niet getoond. CSS3 is dus niet meer nodig.
Dus, belangrijkste
HTML
Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Social media - test | bramvanroy.be</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <!-- jQuery -->
<script type="text/javascript" src="js/socialjs.js"></script> <!-- het scriptje dat kijkt naar de schermresolutie en de css aanpast -->
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <!-- nodig voor google +1 button -->
<script type="text/javascript">
document.getElementById('socialmedia').style.display = 'block'; <!-- dit scriptje zorgt ervoor dat de sociale media enkel getoond wordt als javascript enabled is in de browser -->
</script>
</head>
<body>
<div id="wrapper">
<div id="socialmedia">
....
</div>
<div id="content">
....
</div>
</div>
</body>
socialjs.js
Code:
function adjustStyle(width) {
width = parseInt(width);
if (width < 1145) {
$("#socialmedia").css('display', 'none');
} else {
$("#socialmedia").css('display', 'block');
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
})
Belangrijkste
CSS
Code:
#wrapper #content {
width: 970px;
height: auto;
margin: 0 auto 9px auto; /*je centreert de contentdiv*/
background-color: #999;
padding: 1em;
font-family: Verdana;
font-size: 13px;
color: #FFF;
}
#wrapper #socialmedia {
position: fixed; /*zo scrollt de div mee als je naar beneden scrollt*/
top: 25px;
left: 50%; /*de div wordt eers 50% van de kant geplaatst en omdat je je content gecentreerd hebt staan deze dus 'ongeveer' verticaal gealigneerd*/
margin-left: -561px; /*nu zorg je ervoor dat de div nog 561px naar links opschuift. Hoe bereken je dit? De helft van je contentdiv (970px/2 = 485px) + de breedte van de socialmediadiv (62px) en daar kan je dan nog wat mee spelen om het goed te plaatsen*/
height: 191px;
width: 62px;
background-color: #333;
display: none; /*dit staat op 'none' omdat de socialmediabuttons pas getoond worden als je scherm groter is dan 1145px anders staan ze er bij sommige resoluties en venstergroottes maar half op; zie hieronder*/
padding-top: 9px;
padding-left: 7px;
border-radius: 7px;
}
Dit zou allemaal moeten werken.
Nogmaals, als iemand fouten ziet: zeg het! Ik ben zelf eigenlijk ook maar beginner met jQuery en javascript.