Pagina gecentreerd en elementen op exacte plek. - Softwareontwikkeling

dinsdag 7 november 2006 16:57

Acties:

Verwijderd

Topicstarter

Hallo allemaal,

Ik heb een probleem met het volgende: Ik probeer een site met een vaste afmeting in het midden van het venster te plaatsen. Dat lukt. Maar nu wil ik div's op een exacte plek op de site hebben, onafhankelijk van de resolutie van het scherm. In FireFox (2) werkt het prima, maar Internet Explorer heeft er moeite mee.

Wat kan ik doen om dit op te lossen. Ik heb al het een en ander geprobeerd met verschillende "position" en wel of geen "!important" maar het had helaas geen zin.

Ik wil dus eigenlijk de positie in pixels aan kunnen geven vanaf de linker bovenhoek vanaf <div id="main">. De resolutie van het scherm mag dus geen invloed hebben op de positie van de div's in "main".

Groeten,

Robert

HTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>---</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            <div id="main">
                <div id="link1"><img src="images/links_01.gif" width="310" height="34" alt=""></div>
            </div>
        </td>
    </tr>
</table>
</body>
</html>

Cascading Stylesheet:

/* CSS Document */
html,body,table
  {
    height: 100%;
  }

body
  {
    position: absolute;
    margin: 0;
    padding: 0;
    background-color: #CCD805;
  }

#main {
    text-align: left;
    width: 950px;
    height: 500px;
    background: url(images/background.gif) no-repeat;
    border: #66747F solid 1px;
    }

img{
    border:none;
}

#link1 {
    position: relative;
    left: 160px;
    top: 343px;
}

[ Voor 6% gewijzigd door Verwijderd op 07-11-2006 17:01 ]

dinsdag 7 november 2006 17:17

Acties:

Mei

Gewoon een wrapper DIV centreren en daarbinnen alle andere DIVs met float, position en margin op de goede plek zetten? Zie het probleem niet zo (nou geef je ook niet erg duidelijk aan wát er goed en verkeerd gaat...)

dinsdag 7 november 2006 17:22

Acties:

TeeDee

CQB 241

Maak van die table een 'wrapper div' (zoals Mei zegt).

HTML:

1
2
3

<div id="wrapper">
<!-- de rest van je reutel -->
</div>

Cascading Stylesheet:

body {
text-align:center;
}
#wrapper {
width:800px;
margin:0 auto;
text-align:left;
}

et voila, op deze manier kan je vervolgens in je wrapper alles absoluut/relatief/floating positioneren.

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 7 november 2006 17:43

Acties:

Fubaruba

hier wordt ik altijd erg vrolijk van:

Cascading Stylesheet:

#wrapper{
    width:870px;
    position:relative;
    left:50%;
    margin-left:-435px;
}

dinsdag 7 november 2006 17:55

Acties:

TeeDee

CQB 241

Fubaruba schreef op dinsdag 07 november 2006 @ 17:43:
hier wordt ik altijd erg vrolijk van:
Cascading Stylesheet:
1
2
3
4
5
6
#wrapper{
    width:870px;
    position:relative;
    left:50%;
    margin-left:-435px;
}

Mja, een negative margin is niet zo netjes.

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 7 november 2006 17:58

Acties:

Verwijderd

Topicstarter

Bedankt voor jullie snelle reacties!!

Ik heb voor de duidelijkheid maar even de "handel" op een test gedeelte gezet: http://www.loura-design.nl/test/.
Het moet eruit gaan zien zoals http://www.loura-design.nl/test/images/WEBPAG1.gif

Ik heb even een rode border om de divs gedaan voor de duidelijkheid. De afstand tussen de divs klopt overigens alleen als ik position op absolute zet. De positie van wrapper / main moet in het centrum van het venster staan, dus ook verticaal in het midden.

Ik merkte overigens dat wanneer ik het venster IE resize en dan op ctrl+F5 druk, dat de positie wel goed wordt aangepast. Maar het is natuurlijk niet de bedoeling op die manier.

Als er dingen niet duidelijk zijn, dan hoor ik het graag.

Groeten,

Robert

HTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Loura-Design.nl</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            <div id="main">
                <div id="link1"><img src="images/links_01.gif" width="310" height="34" alt=""></div>
                <div id="link4"><img src="images/links_04.gif" width="144" height="25" alt=""></div>
                <div id="link2"><img src="images/links_06.gif" width="248" height="36" alt=""></div>                
                <div id="link3"><img src="images/links_11.gif" width="311" height="40" alt=""></div>                
            </div>
        </td>
    </tr>
</table>
</body>
</html>

Cascading Stylesheet:

/* CSS Document */
* {
    margin: 0;
    padding: 0;
}

html,body,table
  {
    height: 100%;
  }

body
  {
    position: absolute;
    background-color: #CCD805;
  }

#main {
    margin:0 auto;
    text-align:left;
    width: 950px;
    height: 500px;
    background: url(images/background.gif) no-repeat;
    border: #66747F solid 1px;
    }

img{
    border:none;
}

#link1 {
    position: relative;
    left: 160px;
    top: 343px;
}

#link2 {
    position: relative;
    left: 310px;
    top: 376px;
}

#link3 {
    position: relative;
    left: 234px;
    top: 431px;
}

#link4 {
    position: relative;
    left: 590px;
    top: 363px;
}

div {
    border: #FF0000 solid 1px;
}

dinsdag 7 november 2006 18:53

Acties:

Mei

TeeDee schreef op dinsdag 07 november 2006 @ 17:22:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
body {
text-align:center;
}
#wrapper {
width:800px;
margin:0 auto;
text-align:left;
}

Fubaruba schreef op dinsdag 07 november 2006 @ 17:43:
Cascading Stylesheet:
1
2
3
4
5
6
#wrapper{
    width:870px;
    position:relative;
    left:50%;
    margin-left:-435px;
}

De oplossing van TeeDee is ietsje netter. Scheelt je ook twee regeltjes, want text-align:left; is helemaal niet nodig (default voor die waarde is gewoon "left").

@Topicstarter: Waarom gebruik je die table nog steeds? Hup, weg ermee! Tables alleen gebruiken als je op papier ook een tabelletje zou gebruiken: voor data dus. Dit is positionering, dat gaan we dus lekker met CSS oplossen

Verder is het gelukt, toch? Alleen de links nog eventjes precies op de goede plek neerzetten, maar dat is een kwestie van de waardes iets aanpassen.

Ik zou trouwens geen GIF's nemen voor je links. Je ziet nu zo'n lelijk randje van de binaire transparantie (óf helemaal transparant óf niet). Je kan beter PNG's gebruiken (en een stukje extra CSS/Javascript om het in Internet Explorer te laten werken) of JPG's waar de anti aliasing al bij in zit.

dinsdag 7 november 2006 19:11

Acties:

TeeDee

CQB 241

Mei schreef op dinsdag 07 november 2006 @ 18:53:
[...]
[...]
De oplossing van TeeDee is ietsje netter. Scheelt je ook twee regeltjes, want text-align:left; is helemaal niet nodig (default voor die waarde is gewoon "left").

Que? Als je je body een text-align: center geeft en je container _geen_ text-align:left dan zie je in bepaalde browsers gewoon dat alles een 'center' heeft hoor. Het e.e.a. erft van je body over he!

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 7 november 2006 19:37

Acties:

Verwijderd

Topicstarter

Ik heb de tabel erin om de pagina ook verticaal te centreren.

Ik heb nu alle #link's op absolute gezet. Dan hebben de #link's onderling precies de goede afstand. Ze hebben alleen nog niet de goede positie binnen #main. Kan ik er op 1 of andere manier zorgen dat de absolute afstand die bij de #link's staat, geld vanaf positie 0,0 van #main. Dus dat het resolutie onafhankelijk is?

dinsdag 7 november 2006 19:41

Acties:

TeeDee

CQB 241

Afaik kan je alleen horizontaal centreren door met een negative margin (hier weer wel dus) te werken.

Voorbeeldjes: http://www.hicksdesign.co...rtical-centering-with-css

Je probleem komt voornamelijk door het gebruik van een table.

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 7 november 2006 19:44

Acties:

user109731

Verwijderd schreef op dinsdag 07 november 2006 @ 19:37:
Kan ik er op 1 of andere manier zorgen dat de absolute afstand die bij de #link's staat, geld vanaf positie 0,0 van #main. Dus dat het resolutie onafhankelijk is?

#main relatief of absoluut positioneren.

dinsdag 7 november 2006 19:46

Acties:

Verwijderd

Topicstarter

Hmm, eindelijk gevonden.

In #main heb ik position: relative; nog even toegevoegd. en dat maakte alles goed.

Bedankt allemaal voor het meedenken $_/-\o_$

@Grote Prutser:

Ik had um dus net gevonden

Dus uiteindelijk (voor de mensen die graag het totaalplaatje willen zien:

HTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Loura-Design.nl</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            <div id="main">
                <div id="link1"><img src="images/links_01.gif" width="310" height="34" alt=""></div>
                <div id="link2"><img src="images/links_06.gif" width="248" height="36" alt=""></div>                
                <div id="link3"><img src="images/links_11.gif" width="311" height="40" alt=""></div>
                <div id="link4"><img src="images/links_04.gif" width="144" height="25" alt=""></div>                
            </div>
        </td>
    </tr>
</table>
</body>
</html>

Cascading Stylesheet:

/* CSS Document */
* {
    margin: 0;
    padding: 0;
}

html,body,table
  {
    height: 100%;
  }

body
  {
    text-align:center; 
    background-color: #CCD805;
  }

#main {
    position: relative;
    margin:0 auto;
    text-align:left;
    width: 950px;
    height: 500px;
    background: url(images/background_home.gif) no-repeat;
    border: #66747F solid 1px;
    }

img{
    border:none;
}

#link1 {
    position: absolute;
    left: 160px;
    top: 343px;
    width: 310px;
}

#link2 {
    position: absolute;
    left: 310px;
    top: 376px;
    width: 248px;   
}

#link3 {
    position: absolute;
    left: 234px;
    top: 431px;
    width: 311px;
}

#link4 {
    position: absolute;
    left: 590px;
    top: 363px;
    width: 144px;
}

dinsdag 7 november 2006 20:24

Acties:

Mei

TeeDee schreef op dinsdag 07 november 2006 @ 19:11:
[...]

Que? Als je je body een text-align: center geeft en je container _geen_ text-align:left dan zie je in bepaalde browsers gewoon dat alles een 'center' heeft hoor. Het e.e.a. erft van je body over he!

Stomstomstom, helemaal over die text-align:center; heen gelezen. Waarom staat dat domme ding er eigenlijk in?

Verder kan je met CSS ook verticaal centreren:

Cascading Stylesheet:

html, body
{
height:100%
}
#wrapper
{
position:absolute;
top:50%;
margin-top:-helft_van_height;
}

Dit zou moeten werken (even uit de losse pols gemaakt) je geeft de wrapper de gewenste hoogte (bijv. 500px), dan is de margin-top de helft hiervan maal -1 (-250px in dit geval). Moet op precies dezelfde manier als je huidige table-oplossing werken, is alleen wat beter en het scheelt code.

dinsdag 7 november 2006 20:26

Acties:

TeeDee

CQB 241

Mei schreef op dinsdag 07 november 2006 @ 20:24:
[...]

Stomstomstom, helemaal over die text-align:center; heen gelezen. Waarom staat dat domme ding er eigenlijk in?

Uit mijn hoofd: IE snapt margin:0 auto; niet. Firefox wel (en align:center;, maar wordt opgeheven door de align:left;). IE snapt text-align:center; wel. De container div erft over van de body.
Ofzoiets, ben op dit moment ook te lui om te Googlen.

Heart..pumps blood.Has nothing to do with emotion! Bored

woensdag 8 november 2006 14:21

Acties:

moozzuzz

Ik versta niet dat je andere elementen absoluut wil positioneren. Waarom gebruik je geen imagemap?

Uit het hoofd:

HTML:

<img map="mijnlinkjes" src="" width="" height="" ismap="ismap">
<map name="mijnlinkjes">
<area ...>
<area ...>
<area ...>
</map>

Ow en waarom gebruik je xhtml?

[ Voor 2% gewijzigd door moozzuzz op 08-11-2006 14:23 . Reden: ismap vergeten ]

woensdag 8 november 2006 16:53

Acties:

Mei

TeeDee schreef op dinsdag 07 november 2006 @ 20:26:
[...]

Uit mijn hoofd: IE snapt margin:0 auto; niet. Firefox wel (en align:center;, maar wordt opgeheven door de align:left;). IE snapt text-align:center; wel. De container div erft over van de body.
Ofzoiets, ben op dit moment ook te lui om te Googlen.

margin:auto; werkt ook gewoon, zo zonder de 0

woensdag 8 november 2006 16:55

Acties:

TeeDee

CQB 241

Mei schreef op woensdag 08 november 2006 @ 16:53:
[...]
margin:auto; werkt ook gewoon, zo zonder de 0

Ach, macht der gewoonte blijkbaar.

Heart..pumps blood.Has nothing to do with emotion! Bored