29 berichten aan het bekijken - 1 tot 29 (van in totaal 29)
  • Q:
    Bijdrager
    davito

    Website centreren op beeldscherm

    Hoi,

    Heb een probleempje met mijn website. Deze staat bij mij netjes in het midden van mijn scherm (15” tft) Maar als ik hem op een ander formaat scherm bekijk dan staat hij dus niet meer gecentreerd. Nu zullen jullie hiervoor wel een oplossing hebben door de html te veranderen. Maar helaas heb ik geen verstand van html…. (ben pas een week of 6 bezig met dreamweaver)

    Er zijn hier wel meedere topics over op dit forum, heb ook iets gelezen over een container div plaatsen…? (mijn site bestaat alleen uit layers) Kan iemand het mij misschien uitleggen op de WYSIWYG manier…

    Bijdrager
    Joshuhaha

    Alles selecteren, window>properties en dan:

    op dat 2e (van de 4) icoontje klikken

    Bijdrager
    dfI*)#[email protected](*_)$U#JHEN#[email protected]$(#@Halert(‘hi’);

    Je kan dit in je css zetten
    [code:1:9e630bc0ad].centerpage {
    width: 780px;
    margin-left: -390px;
    text-align: left;
    vertical-align: top;
    visibility: visible;
    position: absolute;
    left: 50%;
    top: 0px;
    }[/code:1:9e630bc0ad]

    je moet alleen je width en margin-left veranderen. Margin-left is het negatieve getal van de helft van je width. En dan een div maken waar je alles in stopt.

    Inactief
    Anoniem

    Ligt eraan hoe je site opgemaakt is, doe je het alleen met HTML of gebruik je ook CSS?
    En gebruik je alleen tables of ook layers?

    De bovenstaande manier is niet echt “officieel”.
    (ik bedoel de manier van Joshuhaha)

    Bijdrager
    Joshuhaha

    De bovenstaande manier is niet echt “officieel”.
    (ik bedoel de manier van Joshuhaha)

    :wink:
    Hij wou een makkelijke manier

    Bijdrager
    computer space

    [code:1:b1c8d1dbea]<html>
    <head>
    <style type="text/css">
    #holder {left:50%; top:50%; margin:-300px 0 0 -400px; width:800px; height:600px; position:absolute; }
    </style>
    </head>

    <body>
    <div id="holder">
    Hier je site
    </div>
    </body>
    </html>[/code:1:b1c8d1dbea]

    Deze werkt in 2 richtingen, dus ook vertikaal. Uiteraard dien je 300,400,800 en 600 naar believen te veranderen. 800=breedte, 600=hoogte, -300 is negatieve halve hoogte, -400 is negatieve halve breedte

    Bijdrager
    iPod Jimmy
    ”Martiniman”

    [code:1:337ad4421b]<html>
    <head>
    <style type="text/css">
    #holder {left:50%; top:50%; margin:-300px 0 0 -400px; width:800px; height:600px; position:absolute; }
    </style>
    </head>

    <body>
    <div id="holder">
    Hier je site
    </div>
    </body>
    </html>[/code:1:337ad4421b]

    Deze werkt in 2 richtingen, dus ook vertikaal. Uiteraard dien je 300,400,800 en 600 naar believen te veranderen. 800=breedte, 600=hoogte, -300 is negatieve halve hoogte, -400 is negatieve halve breedte

    Volgens mij werkt dit niet helemaal goed :S

    Bijdrager
    iJoost
    Bijdrager
    iPod Jimmy
    ”iJoost”

    http://www.w3.org/Style/Examples/007/center.html

    Daar staat zijn vraag niet bij hoor…

    Bijdrager
    iJoost

    Ik dacht het wel. Hij vraagt toch hoe ie iets het beste kan centreren op een web-pagina?

    Bijdrager
    iPod Jimmy
    ”iJoost”

    Ik dacht het wel. Hij vraagt toch hoe ie iets het beste kan centreren op een web-pagina?

    Maar gat het over een div precies in het midden? Altijd?

    [offtopic]Mooie avatar trouwens![/offtopic]

    Bijdrager
    iJoost

    Ehm… nee. Het (de pagina waarnaar ik verwees) gaat over een “block”. Dat hoeft geen div te zijn. En dat block wordt verticaal en/of horizontaal gecentreerd in het omhullende block. Dat kan de hele pagina zijn maar het kan ook een deel ervan zijn.

    Misschien begrijp ik je niet goed…

    Bijdrager
    iPod Jimmy
    ”iJoost”

    Ehm… nee. Het gaat over een “block” dat hoeft geen div te zijn.

    Hmm… Om daar achter te komen kunnen we even om zijn code vragen :innocent:

    Dus mogen we je code even zien?

    Bijdrager
    Freek.

    @ Jimmy: je hoeft niet steeds te quoten als je op een artikel boven je reageert. Dat snappen we dan wel tenzij je reageert op een onderdeeltje van een heel verhaal:)

    Bijdrager
    Hans.

    Is dit wat je bedoelt: Klik

    Succes!

    Bijdrager
    computer space

    Mijn voorbeeld komt hier vandaan. Werkt toch zeker hoor. Zal nu wel niet werken omdat ik de doctype ben vergeten. Ik had de boel even versimpeld.
    Dus:
    ipv <html> dit typen:
    [code:1:068aa6194a]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">[/code:1:068aa6194a]

    Bijdrager
    davito

    Hoi,

    Volgens mij ben ik niet helemaal duidelijk geweest. Ik bedoel eigenlijk dat de complete site in het midden van het scherm komt ongeacht de afmeting van iemands monitor. Op mijn monitor staat de site precies gecentreerd in het midden. Bekijk ik mijn site op een 19″ dan staat de site meer links van het midden. Het enige probleem is dat ik dus niet veel van html afweet en dat ik dus wil weten hoe ik dit in Dreamweaver kan aanpassen doormiddel van “klikken” ipv html “typen”

    Bijdrager
    computer space

    Zoals mijn voorbeeld werkt, is dat goed?
    Dan zou ik toch gewoon typen. Die paar regels code die dat regelen: peanuts. En dit is de enige manier die goed in firefox/safari en consorten en IE werkt. Relative posities gaat met IE fout.

    Bijdrager
    davito

    Martiniman: ik ga het vanmiddag even proberen. (moet nu even weg)

    btw dit is mijn site: http://members.home.nl/davitosattic/

    Let niet op de inhoud, ik moest nml iets verzinnen om te kunnen oefenen. Dus ik dacht maakt een website voor een eigen webdesign bedrijfje. Dit is pas mijn 2e site in Dreamweaver, ben pas 6 weken bezig dus alle tips en opbouwende kritiek is welkom.

    Bijdrager
    iPod Jimmy

    Dan doe je toch gewoon een div eromheen met align=”center” tags erbij?

    En ik zag ergens een javascript die zorgde dat een website verticaal altijd in het midden bleef. Weet niet meer waar.

    Bijdrager
    Syndic

    Als je je profileert als een ‘webdesignbureau’ vind ik dat je de technieken ook eigen moet maken, dus niet ‘klikken’ in Dreamweaver maar gewoon code ‘tikken’

    Voor je vraag… pluis dit ’s uit.

    Bijdrager
    davito

    Syndic: In mijn vorige bericht geef ik toch aan dat dit webdesign bureau een verzonnen iets is. Ik ben net 6 weken bezig alsof ik dan al een eigen bedrijf ga starten….. (het is om te oefenen)

    Bijdrager
    computer space
    ”iPod

    Dan doe je toch gewoon een div eromheen met align=”center” tags erbij?

    En ik zag ergens een javascript die zorgde dat een website verticaal altijd in het midden bleef. Weet niet meer waar.

    Met suggestie 1 gaat ie de tekst centreren
    Suggestie 2 is niet nodig. CSS doet dat beter en ook met JS uit.


    @davito
    :
    Ik zit net je code te bekijken. Die is al gemaakt met CSS. Dat is goed. Probleem: alle posities zijn absoluut. Wanneer je er een div omheen zet die volgens mijn code centreert, komt DIE div wel in het midden, maar alle div’s daarbinnen met de verschillende elementen staan weer lekker in de huidige positie.
    Volgens mij kun je dat oplossen door alles wat nu in je body staat in 2 divs te plaatsen. De eerste op de manier die ik schets, en daarbinnen een div met position: relative. Dan gaan de absolute waarden daarbinnen (van alle deelelementen) berekent worden t.o.v. de container en niet t.o.v het hele scherm.
    Betekent wel dat je de huidige verschuiving naar rechts en naar onder er eerst uit moet krijgen (dus top en left op 0). Anders krijg je die verschuiving er uiteindelijk nog bij.
    Risico: je snapt er nu niks meer van:P
    Dus stap 1: zorg dat de site strak linksboven in de hoek komt
    2: div eromheen met positie relative
    3: div eromheen zoals ik voorstel om de boel te centreren

    Succes.

    Bijdrager
    Syndic
    ”davito”

    Syndic: In mijn vorige bericht geef ik toch aan dat dit webdesign bureau een verzonnen iets is. Ik ben net 6 weken bezig alsof ik dan al een eigen bedrijf ga starten….. (het is om te oefenen)

    Excuses… Lezen is niet m’n sterkste kant als ik net wakker ben :wink:

    Bijdrager
    iJoost

    Als je een beginner bent denk ik helemaal dat de link die ik je gaf de juiste is (en zonder absolute posities). Leer het meteen goed. Daar doe je later je voordeel weer mee.

    Bijdrager
    Jonnotie

    body moet je op textalign-center zetten ofsoiets, en dat de container of content ofso op margin: 0 auto; zetten, tadaaa

    Geblokkeerd
    Geanonimiseerde gebruiker

    iJoost heeft gelijk zowel met de link als met zijn opmerking over code leren. Meer specifiek: je moet even een div om je code heen zetten en daar de juiste opmaak in hangen:
    – zet direct na de <body> tag <div id=”wrapper”>
    – zet direct voor de </body> tag </div>
    – voeg aan je css styles de volgende toe:

    #wrapper {
    width: 700px; /* breedte van de pagina */
    margin: 50px auto; /* topmargin is 50 net zoals nu bij toplogo, auto voor links+rechts zorgt voor centreren */
    }

    – wijzig de topmargin uit je #toplogo-style naar 0px (omdat de 50px al in de wrapper wordt gezet)

    Done.

    Bijdrager
    Hans.

    Ik heb hem voor hem in het midden gezet, maar weet iemand hoe je ervoor kan zorgen als de body zeg maar kleiner is dat de site, dat de site blijft staan, anders wordt het lelijk, dus de site moet blijven staan als het schermpje van de browser te klein is voor de site…

    De site staat nu in één divje: #holder, en die zorgt ervoor dat alles in het midden staat.

    Bijdrager
    kaydie
    ”Da

    Ik heb hem voor hem in het midden gezet, maar weet iemand hoe je ervoor kan zorgen als de body zeg maar kleiner is dat de site, dat de site blijft staan, anders wordt het lelijk, dus de site moet blijven staan als het schermpje van de browser te klein is voor de site…

    Ik heb daar een tijdje geleden het volgende voor bedacht: 8)
    klik

29 berichten aan het bekijken - 1 tot 29 (van in totaal 29)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.