[html, css, js] voor dummies #19

als pagina opbouw gebruik ik een index.php waarin ik alle pagina's include,
zodat ik maar 1 pagina met opmaak heb, die andere pagina lees ik dus via een function() in,

nu krijg ik het niet werkend om aan mijn menu een :active te geven
zou dat kunnen zijn omdat ik altijd in index.php blijf ?
kan ik toch een :active maken met bijv switch statement? ik ben ik nu te moeilijk bezig?

de :active pseudoclasse werkt alleen als de link écht actief is, maw: als je er op klikt. Om de link een andere stijl mee te geven als je op de bijhorende pagina zit, dan zal je met classes moeten werken.

Met andere woorden: in het stukje waar je je menu opbouwt, zal je elke keer moeten kijken of de GET hetzelfde is als de link, zo ja: class="active" zo niet, niets..

quote:

Op donderdag 1 december 2011 09:43 schreef QM84 het volgende:
de :active pseudoclasse werkt alleen als de link écht actief is, maw: als je er op klikt. Om de link een andere stijl mee te geven als je op de bijhorende pagina zit, dan zal je met classes moeten werken.

Met andere woorden: in het stukje waar je je menu opbouwt, zal je elke keer moeten kijken of de GET hetzelfde is als de link, zo ja: class="active" zo niet, niets..

maar hoe kan ik m slim die active class meegeven? met switch statement???

Het hangt er ook een beetje vanaf hoe je je menu opbouwt, maar als je alle links bvb gewoon hard in je template hebt staan, krijg je zoiets:


dit is dus, als alle links hard in de code staat (niet efficiënt). Als je je menu in een tekstbestandje of een array hebt staan, of dynamisch opbouwt, kan je de paginanamen vervangen door variabelen en door de li's loopen met een while- of for-loop.

De .active kan je nautuurlijk ook op de a zelf zetten. Ik hou er zelf van om classes zo 'hoog mogelijk' te zetten: het is in CSS geen probleem om children van een element te selecteren, maar een parent selecteren zit er nog altijd niet in. Hoe hoger het 'unieke element' staat, hoe beter dus.

Heeft iemand werkende simpele Android en Iphone simulators? Ik wil wat oefenen met media queries en mijn resultaat snel kunnen bekijken op de twee simulators.

Goede lichte versies van een simulator lijken haast niet te vinden, wel online versies maar ik wil gewoon op mn desktop draaien eigenlijk. Iemand die toevallig deze linkjes bij de hand heeft?

Android heeft een SDK maar die is heel traag.

met de webdevelopertoolbar van firefox kan je het scherm wel makkelijk resize naar vaste resoluties, kan je daar niet mee spelen

quote:

Op vrijdag 2 december 2011 12:33 schreef Catch22- het volgende:
Android heeft een SDK maar die is heel traag.

met de webdevelopertoolbar van firefox kan je het scherm wel makkelijk resize naar vaste resoluties, kan je daar niet mee spelen

Ja ik had die SDK gedownload maar wat een gedoe, veel friles, updates en dan nog krijg ik dat ding niet aan de praat. Er moet toch wel wat zijn, iets compacts, licht en geen fratsen? Tot dan maar op een klein scherm bekijken naar 't resultaat Het is ook vooral voor het oefenen maar toch, een echte simulator is wel fijn.

wil je mediaqueries voor het platform of de resolutie?

quote:

Op vrijdag 2 december 2011 12:49 schreef Catch22- het volgende:
wil je mediaqueries voor het platform of de resolutie?

Resolutie

Ik wil oefenen om met de CSS een website te optimaliseren voor het browsen met een mobiele telefoon. Ik wil dus gewoon simpel op een snelle manier even zien hoe alles eruit ziet op een mobiel scherm, liefst van Android en Iphone.

Niks bijzonders dus

dan moet je gewoon de webdevelopertoolbar van firefox gebruiken om de resolution aan te passen

Wat hij zegt ^.

Gewoon je browservenster resizen naar vaste resoluties en kijken wat het resultaat is.

Wat sowieso een aanrader is: Zodra je onder een bepaalde grens komt qua resolutie, overstappen op liquid. Dus met hoogtes en breedtes in procenten, ipv pixels. Er zijn aardig wat mobiele apparaten in omloop, die veel verschillende resoluties hebben. Om te voorkomen dat je voor ál die resoluties je ontwerp aan moet passen, of dat je een 'ideale resolutie' nodig hebt, kan je dus overstappen op liquid. Zo kan je dus 1 mobiel theme bouwen, dan gewoon altijd goed werkt op de mobiele apparaten.

Je zou evt voor tablets/netbooks, die een nét iets hogere resolutie hebben, een tussenversie kunnen maken.

Denk erom dat Android moeite heeft met mediaqueries als je geen <meta name="viewport" content="(whatever)"> gebruikt. Heeft me veel gekut gevonden om daar achter te komen .

Oh, en de Samsung Galaxy S2 heeft in landscape mode een breedte van 545px, ik targete nog steeds op 480px maar dat is niet meer genoeg.

quote:

Op vrijdag 2 december 2011 13:42 schreef picodealion het volgende:
Oh, en de Samsung Galaxy S2 heeft in landscape mode een breedte van 545px, ik targete nog steeds op 480px maar dat is niet meer genoeg.

Daarom dus liquid voor mobile

En inderdaad, de viewport-metatag toevoegen:

bij de download zitten demos, daar moet je ff kijken hoe de demo met fade wordt aangeroepen

ik ben ook de lulligste niet en heb hem hier op mijn hd staan dus ik kijk voor je

fx: 'fade'

als argument

Okay die resize optie is inderdaad wel okay maar het geeft niet echt de feel. Maar dat zie ik dan wel even door de vingers.

vanaf hoeveel width/height zou je dan voor liquid gaan trouwens? Waar ligt voor je gevoel de grens?

quote:

Op vrijdag 2 december 2011 15:12 schreef TheSeeker_NL het volgende:

vanaf hoeveel width/height zou je dan voor liquid gaan trouwens? Waar ligt voor je gevoel de grens?

Het hangt er een beetje vanaf van wat voor site ik aan het bouwen ben en wat het doel ervan is, maar meestal onder de 800px ga ik volledig liquid. Voor > 800 en <1000 een fixed layout, waarbij kolommen verspringen, en 1000 - 1200 ook weer liquid in dat gebied, omdat heel veel mensen wel een groter scherm hebben dan 1024px in de breedte, maar niet iedereen (plus iPad in landscape!); Maar op een fullHD-scherm is 1000px ook weer zo smal, dus vandaar de oprekking naar 1200, waar het gros nu ongeveer op zit qua schermbreedte. Zodra je nog breder gaat werken, heb je echt een volledig nieuw siteontwerp nodig qua kolom- en informatieopbouw, omdat mensen gewoon niet gemaakt zijn om zoveel informatie naast elkaar te verwerken; mensen houden van smalle kolommen en dingen in de lengte ipv breedte.

Maar.... dit is dus vrij persoonlijk / contextafhankelijk / doelgroepafhankelijk.

Ik doe altijd volledig liquid van 320 tot 1200 pixels, kwestie van em's en procenten correct gebruiken en wat media queries er op los laten.
+ alles kan in 1 css-bestand (dus minder requests)
+ overgang van breed naar smal loopt vloeiend
+ makkelijk onderhoudbaar
+ goed schaalbaar (ook als alleen de tekst wordt geschaald)

In combinatie met
body { font-size: 62.5%; } is 1em even groot als 10 pixels dus het rekenen met em's is ook makkelijk.
+ met 1 aanpassing in je css kan je alle groottes aanpassen

Wel van belang dat je nadenkt over waar je em, % of px gebruikt, px gebruik ik alleen voor media met een vaste grootte. min- en max-with komen nu ook goed van pas.

Hallo, ik heb een vraag

Ik ben beetje bezig met een website inelkaar te zetten maar ik loop tegen een probleem aan.
het is de bedoeling dat het er zo uit komt te zien:


maar wanneer ik dit probeer te coderen krijg ik dit:


de tekst komt dus wel op de goeie plaats, maar de background-color trekt ie helemaal door.

^{het is vast een simpele oplossing maar ik kom er niet echt uit}
hieronder mijn html / Css

SPOILER

Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.

mijn CSS
@charset "UTF-8";
/* CSS Document */

body{
background-color:#e3e3e3;
background-image:url(../images/background.png);
background-repeat:repeat-x;
margin:0;
padding:0;

}

#container {
width:900px;
margin:auto;

}

#menu {
width: 50%;
height:150px;
float: right;


}

ul#nav {
float:right;
text-align:center;
margin:0;
padding:0;

}

ul#nav li {
float: right; list-style: none;

}

ul#nav li a {
display: block; width: 85px; height: 50px;
padding: 72px 0 0 0; margin-left:20px;
font: 12px Helvetica, Arial, Sans-Serif; text-transform: uppercase;
color: #fced00; text-shadow: 0 1px 1px #000; text-decoration: none;

}

ul#nav li a:hover {
background-color: #e3e3e3;
color: #333; text-shadow: 0 1px 1px #fff; text-decoration: none;

}



#logo{
background-image:url(../images/logo2.png);
background-repeat:no-repeat;
height:150px;
width:49%;
float:left;

}


#content{
background-color:#FFF;
height:700px;
width:900px;


}