CSS/HTML simpele vraag - Softwareontwikkeling

vrijdag 17 juli 2009 11:46

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

(EDIT)

Hallo,

Voor de doorgewinterde HTML-ers is dit vast een eitje

het lukt me niet om hem verticaal te centreren

horizontaal is al gelukt met behulp van wackmaniac

Hoe het eruit zou moeten zien: voorbeeld

Hoe het er nu uitziet in HTML: index.html en de CSS: index.css

Wie kan helpen?

[ Voor 48% gewijzigd door Verwijderd op 17-07-2009 14:04 ]

vrijdag 17 juli 2009 11:53

Acties:

0 Henk 'm!

Noork

float gebruiken?

zie bv: http://www.elated.com/articles/css-floats/

[ Voor 62% gewijzigd door Noork op 17-07-2009 11:54 ]

vrijdag 17 juli 2009 11:54

Acties:

0 Henk 'm!

Verwijderd

Absoluut positioneren?

vrijdag 17 juli 2009 11:54

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Noork schreef op vrijdag 17 juli 2009 @ 11:53:
float gebruiken?

bij het Menu en Content div? ok thx, ff proberen

vrijdag 17 juli 2009 11:55

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Verwijderd schreef op vrijdag 17 juli 2009 @ 11:54:
Absoluut positioneren?

nee dat geeft hetzelfde resultaat als nu

vrijdag 17 juli 2009 11:56

Acties:

0 Henk 'm!

Z-Dragon

Overduidelijk floaten inderdaad.

^ Wat hij zegt.

vrijdag 17 juli 2009 11:58

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

het werkt, ik hou van jullie

moet ze nu nog even naast elkaar zien te krijgen

vrijdag 17 juli 2009 12:09

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

volgens mij is het niet mogelijk om floated div's te centreren.. lees op google ook mensen die hier problemen mee hebben

vrijdag 17 juli 2009 12:19

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Als je als laatste hebt gereageerd en je wilt weer binnen 24 uur iets toevoegen, gebruik dan aub de

knop! Dubbelposten binnen 24 uur wordt niet gewaardeerd.

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 17 juli 2009 12:42

Acties:

0 Henk 'm!

Verwijderd

Verwijderd schreef op vrijdag 17 juli 2009 @ 11:55:
nee dat geeft hetzelfde resultaat als nu

Ja, je moet natuurlijk nog wel de juiste positie meegeven

vrijdag 17 juli 2009 13:00

Acties:

0 Henk 'm!

Verwijderd

Verwijderd schreef op vrijdag 17 juli 2009 @ 12:09:
volgens mij is het niet mogelijk om floated div's te centreren.. lees op google ook mensen die hier problemen mee hebben

jawel je moet containers gaan gebruiken (gecentreerde divs waarin de andere divs zitten). Maar div's centreren kan wel vaker problemen geven. Via google zoeken naar center div moet meer uitkomst bieden.

vrijdag 17 juli 2009 13:22

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

dat begrijp ik, je kan de update hier zien

wat ik ook probeer.. hij drukt hem naar rechts.. of ik nog align center zet of margins op auto 0xp maakt allemaal geen verschil (dat is wat is als tips vind op google)

edit: na de left:0px weg te halen uit de contrainer div doet hij hem nu wel een beetje naar het midden.. maar tever naar links

[ Voor 19% gewijzigd door Verwijderd op 17-07-2009 13:26 ]

vrijdag 17 juli 2009 13:25

Acties:

0 Henk 'm!

wackmaniac

I'm in a good mood:

HTML:

<body style="text-align: center;">
   <div id="wrapper" style="width: 900px; margin: 0 auto; overflow: hidden;">
      <div id="menu" style="width: 290px; float: left; border: 1px solid #000;">menu</div>
      <div id="content" style="width: 590px; float: right; border: 1px solid #000;">Inhoud</div>
   </div>
</body>

De rest moet wel te doen zijn denk ik. Kijk nog even naar de breedtes en gaan!

[ Voor 14% gewijzigd door wackmaniac op 17-07-2009 13:27 ]

Read the code, write the code, be the code!

vrijdag 17 juli 2009 13:28

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Dat werkt! Thx wackmaniac

vrijdag 17 juli 2009 13:33

Acties:

0 Henk 'm!

hellfighter87

Verwijderd schreef op vrijdag 17 juli 2009 @ 13:28:
Dat werkt! Thx wackmaniac

kweet niet welke browser je gebruikt

maar bij mij staat ie nog steeds links bovenin als ik firefox 3.5 gebruik

vrijdag 17 juli 2009 13:34

Acties:

0 Henk 'm!

macciez

Sterker nog, bij mij is behalve de achtergrond alles weg

edit: ah daar zijn ze weer

[ Voor 19% gewijzigd door macciez op 17-07-2009 13:36 ]

Do what you love, do it often

vrijdag 17 juli 2009 13:38

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

en nu?

hier staat alles goed, IE7

moet firefox nog ff installeren

vrijdag 17 juli 2009 13:39

Acties:

0 Henk 'm!

macciez

in IE8 en FF staan ze wel horizontaal in het midden, maar niet verticaal
check:

Afbeeldingslocatie: http://www.website-agentur.com/odinthumb.jpg

[ Voor 55% gewijzigd door macciez op 17-07-2009 13:45 ]

Do what you love, do it often

vrijdag 17 juli 2009 13:41

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

macciez schreef op vrijdag 17 juli 2009 @ 13:39:
in IE8 en FF staan ze wel horizontaal in het midden, maar niet verticaal

Klopt! dat moet ik nog ff fixen

was al aan het proberen met top:50% -50% etc, google nog wel even
Thanks voor het meetesten btw

edit: heb meerdere methoden gedaan.. krijg hem verticaal niet gecentreerd

hij zet hem steeds statisch ergens neer

[ Voor 16% gewijzigd door Verwijderd op 17-07-2009 13:58 ]

vrijdag 17 juli 2009 14:05

Acties:

0 Henk 'm!

wackmaniac

Verticaal centreren werkt alleen als je een vaste hoogte hebt en dan moet je de wrapper-div absoluut positioneren. Je kan ook de wrapper-div als marge "100px auto" meegeven, dan staat de div 100px van de bovenkant af. Dit getal kan je natuurlijk aanpassen.

Read the code, write the code, be the code!

vrijdag 17 juli 2009 14:56

Acties:

0 Henk 'm!

Verwijderd

Ik ben er ook al een tijdje naar opzoek, maar op internet staan er talloze van deze "tutorials" waar ze je stap voor stap uitleggen hoe je dit moet doen. Door verticaal centreren in te vullen op Google kom je al enkele sites tegen.

Een paar sites die hier meer info over geven:

En zo kan ik nog wel een tijdje door gaan ...

Misschien eerst zelf eens proberen voor dat je het aan anderen vraagt, of toch in ieder geval zeggen wat je al hebt geprobeerd, of wat je hebt opgezocht.

vrijdag 17 juli 2009 22:25

Acties:

0 Henk 'm!

Duroth

No rest for the tweaked

HTML:

<style type="text/css">
body, html {
height: 100%; /* 100% meegeven, anders zal de absolute positioning niet gaan doen wat jij wilt in FF / IE8 */
} 
</style>

zaterdag 18 juli 2009 00:31

Acties:

0 Henk 'm!

wackmaniac

Duroth schreef op vrijdag 17 juli 2009 @ 22:25:

HTML:

<style type="text/css">
body, html {
height: 100%; /* 100% meegeven, anders zal de absolute positioning niet gaan doen wat jij wilt in FF / IE8 */
} 
</style>

Dat is helemaal niet nodig; als je element een vast hoogte heeft kan je gebruik maken van de volgende methode:

HTML:

1	<div id="v-center" style="width: 100px; position: absolute; top: 50%, margin-top: -50px;">text</div>

Je moet alleen hetzelfde ook nog doen voor de horizontale centrering.

Je zou in theorie ook een tabel kunnen maken die een cel bevat die zo groot is als de hele viewport en daar je element(en) in stoppen. Een td heeft namelijk wel een vertical-align eigenschap in CSS.

Read the code, write the code, be the code!

zaterdag 18 juli 2009 00:43

Acties:

0 Henk 'm!

Xander

wackmaniac schreef op zaterdag 18 juli 2009 @ 00:31:
[...]

Dat is helemaal niet nodig; als je element een vast hoogte heeft kan je gebruik maken van de volgende methode:
HTML:
1
<div id="v-center" style="width: 100px; position: absolute; top: 50%, margin-top: -50px;">text</div>

Je bedoelt waarschijnlijk height ipv width?

Die methode heeft één nadeel: Als je de viewport maar genoeg verkleint gaat je div op een gegevenmoment boven het scherm verdwijnen. Als je dat wilt voorkomen zou je naar zoiets moeten kijken.

PC specs!---Pulse mee voor GoT!
[22:49:37] <@Remy> ik wil een opblaasbare dSLR :+

Pagina: 1

Reageer