Archief - Responsive Design

Shigato · 30 okt 2013

Hey!

Ik ben momenteel bezig aan een privé projectje maar zit effe met een paar vraagjes.
Ik ben dus bezig met een responsive website te maken.

Hier bestaat men website hoofdzakelijk uit 2 blokken,
aan de linker kant een menu, aan de rechter kant (vullend) de content.
Nu heb ik enkele problemen.

Ik had al een keer gekeken om de hele boel responsive te laten worden.
Probleem dat ik dan heb is het volgende.

Ik heb ik mijn navigatie bovenaan het logo staan. Nu als ze helemaal responsive is wordt de navigatie balk op een bepaald ogenblik kleiner dan het logo. Het logo verkleint niet mee met andere woorden.
Ik maak gebruik van image replacing om de naam van het bedrijf te veranderen in het logo.
(zo geleerd op school). Nu weet ik niet helemaal hoe je zo iets responsive moet doen,
wanneer ik geen breedte & hoogte geef dan krijg ik maar een stukje van het logo te zien,
geef ik 100% in dan doet deze het nog steeds niet. Hier onder het stukje code dat ik gebruik.

Code:

div#sidebar header h1 a {
    display: block;
    text-indent: -100%;
    overflow: hidden;
    background-image: url("../img/logo.png");
    width: 225px;
    height: 90px;
}

Waar width & height dus de groote van het logo is.
min-width & 100% bleek ook niet te werken.
Iemand een idee?

Mijn volgend idee was om het navigatie menu niet responsive te maken.
Op gsm formaat komt de content toch namelijk onder het menu te staan.
Nu als ik mijn navigatie een min-width mee geef en een max-width (beide zelfde waarde)
en dan width zelf op width: 100% zet (kan ook 20% geweest zijn en content op 80%)
, blijft dit natuurlijk aardig staan zoals het hoort.

Natuurlijk ik krijg problemen met mijn content blokje. Het blijft voor een tijdje goed gaan en verkleint het content gedeelte, maar vanaf een bepaald moment springt deze eronder omdat de scaling niet meer klopt omdat het navigatie menu natuurlijk niet mee verkleint.
Enige oplossing hierop?

Voor effe te kijken waar ik het over heb. (Bakkerij Lowie - Home)
(Staat onder Koffie & Theehuis)
Als je het venster verkleint verkleint de hele website (ongeveer) mee.
Het logo blijft hetzelfde (helaas).

Alvast bedankt ^^

Shigato · 4 nov 2013

Shigato · 5 nov 2013

Heb het zelf weten op te lossen met wat hack werk.
Ik post even het antwoord voor het geval nog iemand het nodig heeft.

Code:

/*
* Image replacement voor de titel van de website.
* Zorgt dat de afbeelding horizontaal scaled
*/
div#sidebar header h1 a {
    display: inline-block;
    background: url("../img/logo.png") no-repeat;
    width: 100%;
    font-size: 0;
    line-height: 0;
    vertical-align: middle;
    background-size: 100%;
    background-position: 50% 50%;
    text-indent: -100%;
    overflow: hidden;
}

/*
* Zorgt voor de verticale scaling
* Padding-Top: 40%; is de verhouding van de afbeelding (hoogte / breedte) * 100
* zo blijft de afbeelding gelijkmatig schalen. 
*/
div#sidebar header h1 a span {
    display: block;
    height: 0;
    padding-top: 40%;
}

Ziezo, werkt prima voor mij.

Greetz!

Shigato

meuh · 5 nov 2013

Waarom gebruik je niet gewoon een responsive framework, zoals bv Bootstrap ?

Shigato · 5 nov 2013

meuh zei:
Waarom gebruik je niet gewoon een responsive framework, zoals bv Bootstrap ?

Ik wist niet dat die ook auto images scaalde.
Laatste keer dat ik keek deed deze dat niet.
Ook maak ik men dingen liever zelf dan zo'n bootstrap te gaan gebruiken
die al de helft van de layout bepaald.

Persoonlijk voorkeur veronderstel ik maar ik weet liever wat er in de code staat
dan alles eerst te moeten uitpluizen en aanpassen om de typische 'twitter' looks kwijt te raken,
geloof mij er blijft niet veel over.

Archief - Responsive Design

Shigato

Legacy Member

Shigato

Legacy Member

Shigato

Legacy Member

meuh

Legacy Member

Shigato

Legacy Member