Pagina automatisch aanpassen browser

Status
Niet open voor verdere reacties.
M

Markez

Gebruiker
Lid geworden
6 okt 2012
Berichten
29
Hallo,

Graag wil ik weten of ik deze code kan gebruiken in mijn html pagina om de pagina's de juiste breedte te kunnen geven in andere browsers
En waar moet ik deze dan precies plaatsen?

HTML Code:

#container {
width: 700px;
}

Of kan ik beter wat anders toepassen?
 
Uw vraag is mij niet geheel duidelijk.

Ten eerste is dat CSS code en geen HTML code.

Deze code kunt u inderdaad met HTML oproepen door middel van deze code.

Code: 
<div id="container">

</div>

Wat wil je precies bereiken met deze code?
 
Het was inderdaad de vraag hoe deze code word toegepast.
Mijn bedoeling is eigenlijk op mijn website op iedere browser de zelfde breedte te geven.
Zoals in dit forum.
 
Hoi Markez,
Als alle pagina's 700px breed moeten worden (beetje aan de smalle kant *), dan kan je het ook zonder #container doen:
Code: 
body {
    width: 700px;
    margin: 0 auto;
    }

Op deze manier staat de site altijd gecentreerd bij beeldschermen met een grotere breedte.

De css-code moet je plaatsen in een "stijl-blok" aan het eind van de <head> van je pagina:
HTML: 
...
<style type="text/css">
body {
    width: 700px;
    margin: 0 auto;
    }
</style>
</head>
<body>
...
enz.
Het kan (later) ook door van het stijl-blok een apart css-bestandje te maken (zie hier; daar noemen ze het stijl-blok een "internal stylesheet")

Zie ook nog deze tip: De Springende Pagina. :)

Met vriendelijke groet,
CSShunter
_______
*) Je zou ook 990px kunnen gebruiken, dan past het er nog mooi op bij een resolutie van 1024*768px.
 
Laatst bewerkt:
Hello,

Het lukt nog niet echt. Nu heb ik het webdesign boek special aangeschaft omdat daar ook wat workshops in staan over responsive sites bouwen.
Nu wilde ik de workshop met 320 and up gaan doen maar die hele site waar naar verwezen word voor de software werkt niet.
Heeft iemand toevallig 320 and up versie 9.0 in zijn assortiment?
 
Hoi Markez,
Erg duidelijk ben je niet in je vragen...
  • "mijn website op iedere browser de zelfde breedte te geven" = op elk beeldschermformaat!
  • "het webdesign boek" > welk webdesign boek?
  • "de workshop met 320 and up" > welke workshop?

Bedoel je deze pagina www.webmonkey.com/2011/04/start-small-build-big-with-320-and-up, die zegt "320 and Up is licensed under the Creative Commons MIT license. Grab a copy today." ?

Dat is inderdaad een Page Not Found, maar hogerop in het artikel staat "That’s the thinking behind the new 320 and Up CSS 3 boilerplate from developer Andy Clarke."

Iets anders: als je niet weet hoe je css in je pagina's moet gebruiken, dan ben je waarschijnlijk nog niet zo goed thuis in het maken van websites (is geen schande). Maar dan zou ik niet meteen met boilerplates gaan werken, maar eerst de basisprincipes onder de knie gaan krijgen, en een eenvoudige site bouwen die er vanaf een resolutie van 1024*768px op alle schermen helemaal op staat en mooi gecentreerd is.
Heb je die, dan kan je je eens gaan verdiepen in boilerplates en andere meer geavanceerde dingen.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hoi Hunter,

Sorry dat ik niet zo uitgebreid ben met mijn vragen ik ga meestal van de hak op de tak.
-Ik wilde inderdaad dat op iedere browers incl. tablets en smart phones de breedte behouden word.
Ik dacht het makkelijk op te lossen met alles op 700 px te zetten

- Dit is het tijschrift "Webdesign" maar dan de special editie.

-De workshop 320 and up staat hier in.Dit leek mij wel van toepassing op mijn project.

- En nee ik ben nog goed thuis in het maken van websites en ben druk bezig om hier grip op te krijgen.
Waarschijnlijk wil ik teveel in een te korte tijd (:

- De download die jij aangeeft had ik ook al gevonden maar de komt niet overeen met de workshop uit het webdesign boek.

Ik hoop hiermee wat vragen van jou opgehelderde te hebben.
Groet
 
Hoi Markez,
Ik dacht het makkelijk op te lossen met alles op 700 px te zetten
Klik om te vergroten...
Was het maar zo eenvoudig! 700px is maar een smalle kolom bij een desktop van 1920*1200px:

700-op-1920.png

Dan wordt zo'n 2/3 van het beeldscherm niet gebruikt, dus: veel te smal.

Maar 700px breed is tegelijkertijd weer veel te breed voor een mobieltje van 320*480px.
Dus met een universele breedte voor alle beeldschermen kan het nooit lukken.

===========
Dit is het tijdschrift "Webdesign" maar dan de special editie.
Klik om te vergroten...
Aha, die ken ik en heb ik ook! :)
  • Het heet, niet erg bescheiden: "Het Webdesign Boek: de ultieme gids voor het maken van prachtige websites".
  • "Inhoud: Vooruitstrevende technieken voor modern webdesign en effectief webdevelopment."

Alleen krijg ik altijd nogal kippenvel van de bla-bla waarmee ze in hun blad Webdesigner en ook in deze uitgave alles verpakken: alles is het mooiste van het mooiste, het ultieme gereedschap, enz. enz. Ze zijn heel erg onder de indruk van zichzelf, en dat willen ze graag doorgeven aan de lezers...
- Maar je moet steeds nagaan of een zin alleen maar bla-bla is, of dat er echt iets in staat, en na 2 pagina's lezen zit je steeds met de vraag: wat heb ik nu eigenlijk gelezen, wat is de kern van die 2 pagina's tekst, en wat weet ik nu meer dan voordat ik het las? Als je al die wollige verpakking er af haalt, is het vaak niet meer dan ergens aan laten ruiken. Geef mij dan maar een paar goede links!

Maar goed, er staat een artikel/workshop "Bouw responsive sites met 320 and Up" in, met verwijzing naar "Op de cd: alle benodigde bestanden staan op de cd". Nee dus, je moet eerst het nodige downloaden!
  • De link naar 320 and Up die in het blad staat, geeft inderdaad een Page Not Found.
  • Op de cd staat een mooie beschrijving van Stap1, met allerlei links voor downloadwerk. Maar helaas is deze Stap1 alleen een afbeelding, en op de links valt niet te klikken. - Dat schiet ook niet op.

===========

De download die jij aangeeft had ik ook al gevonden maar de komt niet overeen met de workshop uit het webdesign boek.
Klik om te vergroten...
Dan zou het ook nog eens kunnen zijn dat het artikel inmiddels verouderd is (misschien omdat Webdesigner van oorsprong een Engels blad is, en het een tijdje zou kunnen duren voordat er een NL vertaling is aangemaakt).

===========
Waarschijnlijk wil ik teveel in een te korte tijd :(
Klik om te vergroten...
Dat denk ik ook.
Webbouwen is een vak, en een vak leren vergt studie, experimenten, testen en het opbouwen van ervaring. Daar gaan (zeker als het in je vrije tijd gaat) jaren overheen, want je moet diverse talen leren: HTML, CSS, Javascript en PHP.


  • Met "Het Webdesign Boek: de ultieme gids" als gids kom je niet ver als starter: want het is wel populair geschreven en ziet er glimmend uit, maar gaat er aan voorbij dat je een stevige basiskennis nodig hebt om het allemaal in de praktijk te kunnen brengen.

  • En "320 and UP" lijkt me zeker te hoog gegrepen: je moet als zwemleerling eerst goed oefenen in het zwembad, en dan pas Het Kanaal willen overzwemmen! ;)

Tussen haakjes, ken je deze al?

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan