HTML Pagina uitrekken

[MiKeZZa]

Ik wil mijn html website uitrekken zodat hij in de hoogte precies hoog genoeg is voor de complete content van de site en in de breedte wil ik hem centreren en dan de afbeelding die ik aan de zijkant heb helemaal doortrekken als achtergrond afbeelding.

Is er iemand die me dit kan uitleggen hoe te doen?

[MAX3400]

??

Ik snap het niet... Wat gebeurt dan, volgens jou, als ik je site zou bezoeken met een monitor die een (fictieve) resolutie heeft van 2560x2048? Gaat je pagina dan ook aanpassen?

[Suaver]

No offence, maar wat heb je zelf al geprobeert?

Misschien wel ouderwets, maar met 'n table kan je dit heel makkelijk oplossen.

[MiKeZZa]

MAX3400 schreef op donderdag 25 januari 2007 @ 16:00:
??

Ik snap het niet... Wat gebeurt dan, volgens jou, als ik je site zou bezoeken met een monitor die een (fictieve) resolutie heeft van 2560x2048? Gaat je pagina dan ook aanpassen?

Uhm, in de hoogte moet hij net zover doorlopen tot de content op is, dus dit is onafhankelijk van jouw resolutie en in de breedte moet de site dan gecentreerd worden en links en rechts moet dan opgevuld worden met een afbeeldingen zodat je geen witte achtergrond ziet.....

[Avalaxy]

Waarom zou je dat willen? Ik denk niet dat dat er mooi uit ziet op een widescreen beeldscherm of op een groot 21" scherm ofzo.

[Fuzzillogic]

MiKeZZa schreef op donderdag 25 januari 2007 @ 16:01:
[...]


Uhm, in de hoogte moet hij net zover doorlopen tot de content op is, dus dit is onafhankelijk van jouw resolutie en in de breedte moet de site dan gecentreerd worden en links en rechts moet dan opgevuld worden met een afbeeldingen zodat je geen witte achtergrond ziet.....

Dat "in de hoogte net zover doorlopen tot de content op is"... Dat gebeurt helemaal vanzelf, tenzij je ranzige truken gaat uithalen. Dat horizontaal centreren: een wrapper-div'je met als style: width: 900px; margin: 0 auto 0 auto;

[Verwijderd]

Heb je misschien een voorbeeld van een site die jouw idee gebruikt?

margin: 0 auto 0 auto;

"margin: 0 auto;" kan ook

[ Voor 34% gewijzigd door Verwijderd op 25-01-2007 16:07 ]

[MiKeZZa]

Verwijderd schreef op donderdag 25 januari 2007 @ 16:06:
Heb je misschien een voorbeeld van een site die jouw idee gebruikt?


[...]

"margin: 0 auto;" kan ook

Op http://www.zederik-online.nl/ zie je dat hij in de lengte net zolang doorloopt tot de inhoud op is en ik weet wel dat een site dat automatisch doet, maar bij mij (ik heb een achtergrondafbeelding) zie je een grijze streep tussen de achtergrondafbeeldingen.

In de breedte zie je op deze site ook dat dat hout in de breedte doorloopt tot het einde van je resolutie. Nu zou ik graag aan mijn site centreren en dan aan 2 kanten iets hebben dat doorloopt tot het einde.

[frederikske]

Mhh; die site loopt bij mij niet tot onderaan door. Resolutie 1600x1200; FireFox Full Screen...

[MiKeZZa]

frederikske schreef op donderdag 25 januari 2007 @ 16:17:
Mhh; die site loopt bij mij niet tot onderaan door. Resolutie 1600x1200; FireFox Full Screen...

Ah ok, zo hoog kan ik mijn resolutie niet zetten

Maar goed, in mijn openingspost zei ik dan ook dit:

MiKeZZa schreef op donderdag 25 januari 2007 @ 15:58:
Ik wil mijn html website uitrekken zodat hij in de hoogte precies hoog genoeg is voor de complete content van de site en in de breedte wil ik hem centreren en dan de afbeelding die ik aan de zijkant heb helemaal doortrekken als achtergrond afbeelding.

Is er iemand die me dit kan uitleggen hoe te doen?

Dus alleen in de breedte moet hij voluit uitgetrokken worden!

[TeeDee]

Que?

Dus je wil een site van laten we zeggen 900 pixels breed, maar de achtergrond van de body moet over de hele breedte komen?

[MiKeZZa]

TeeDee schreef op donderdag 25 januari 2007 @ 16:23:
Que?

Dus je wil een site van laten we zeggen 900 pixels breed, maar de achtergrond van de body moet over de hele breedte komen?

Jep en dan moet de site gecentreerd worden dus ongeveer zo:

800x600:
HEADER
INHOUD
INHOUD
INHOUD
INHOUD

1024x768:
------HEADER------
------INHOUD-------
------INHOUD-------
------INHOUD-------
------INHOUD-------
------INHOUD-------

1280x1024:
---------HEADER---------
---------INHOUD----------
---------INHOUD----------
---------INHOUD----------
---------INHOUD----------
---------INHOUD----------

1600x1200:
------------HEADER------------
------------INHOUD-------------
------------INHOUD-------------
------------INHOUD-------------
------------INHOUD-------------
------------INHOUD-------------

[Fuzzillogic]

MiKeZZa schreef op donderdag 25 januari 2007 @ 16:12:
[...]


Op http://www.zederik-online.nl/ zie je dat hij in de lengte net zolang doorloopt tot de inhoud op is en ik weet wel dat een site dat automatisch doet, maar bij mij (ik heb een achtergrondafbeelding) zie je een grijze streep tussen de achtergrondafbeeldingen.

In de breedte zie je op deze site ook dat dat hout in de breedte doorloopt tot het einde van je resolutie. Nu zou ik graag aan mijn site centreren en dan aan 2 kanten iets hebben dat doorloopt tot het einde.

Enige dat ik zie is een achtergrond die gewoon naadloos "repeatable" is. Niks bijzonders verder. Gewoon 1 normaal regeltje CSS. Ik denk dat je je het veel te moeilijk voorstelt

[Pendaco]

Zoals hierboven al aangegeven, plaats een (container) div om je bestaande code heen,
die container div geef je de waarde: margin: 0 auto;

Je krijgt dan zoiets als;

code:

<body>

<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>

</body>

Die achtergrondafbeelding kun je vervolgens gewoon in je body zetten mbv css en daarmee doen wat je wilt (laten herhalen over de hele pagina, verticaal herhalen etc. etc.).

[MiKeZZa]

Ik heb echt nog nooit met div of css gewerkt maar ik zal eens gaan zoeken

[MiKeZZa]

MiKeZZa schreef op donderdag 25 januari 2007 @ 16:45:
Ik heb echt nog nooit met div of css gewerkt maar ik zal eens gaan zoeken

Nou met een zeer korte google zoektocht lukte het me al

Laatste vraag die ik had heb ik ook niet meer


Jullie worden bedankt!

[ Voor 29% gewijzigd door MiKeZZa op 25-01-2007 16:56 ]

[Kiphaas7]

Als je niet veel om IE5 ondersteuning geeft, is die container div nog niet eens nodig:

code:

body {
    margin: 0px auto;
    padding: 0px;
    width: 900px;
}

Zoiets.

EDIT: en dan de achtergrond properties aan je html tag geven ipv de body tag.

Pendaco schreef op donderdag 25 januari 2007 @ 16:39:
Zoals hierboven al aangegeven, plaats een (container) div om je bestaande code heen,
die container div geef je de waarde: margin: 0 auto;

Je krijgt dan zoiets als;

code:

<body>

<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>

</body>

Die achtergrondafbeelding kun je vervolgens gewoon in je body zetten mbv css en daarmee doen wat je wilt (laten herhalen over de hele pagina, verticaal herhalen etc. etc.).

[ Voor 10% gewijzigd door Kiphaas7 op 25-01-2007 21:21 ]

[André]

MiKeZZa schreef op donderdag 25 januari 2007 @ 16:53:
[...]


Nou met een zeer korte google zoektocht lukte het me al

Laatste vraag die ik had heb ik ook niet meer


Jullie worden bedankt!

In het vervolg kun je dit ook zelf opzoeken, dit is redelijk basic CSS werk.