Toon posts:

[div] Div-vakken verschuiven bij andere resolutie

Pagina: 1
Acties:
  • 249 views sinds 30-01-2008
  • Reageer

Verwijderd

Topicstarter
Ik heb een via div's aangeven waar ik de tekst wil hebben op mijn pagina. Tevens heb ik ook op deze manier een image map geplaatst op een transparante image op de background.

Dit ziet er goed uit in de resolutie waarop ik het gemaakt heb, maar als ik het in een andere resolutie bekijk, verschuift de tekst en ook de imagemap. Wat doe ik fout, of hoe kan ik dit voorkomen? Is div wel geschikt voor absolute positionering die in elke resolutie hetzelfde toont?

Verwijderd

elk element is geschikt voor absolute positionering, kies degene die het beste geschikt is voor de functie die hij heeft (vaak is dat dus niet div)

Wel worden dingen absoluut gepositioneerd ten opzichte van de eerste (absoluut of relatief) gepositioneerde parent, wellicht gaat het dus daar fout, maar daar is zonder wat (relevante) code weinig over te zeggen

Verwijderd

Topicstarter
Hier is relevante code (ik hoop dat ik het zo goed neerzet, of mag het niet zo in dit forum?)

Wellicht is het een optie om de div's te centreren, maar ik weet niet hoe. Het lijkt erop dat de tekst verticaal goed blijft bij andere resoluties, maar horizontaal niet (verschuift naar links of naar rechts).

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<HTML><HEAD><TITLE>Testpagina</TITLE><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
div.sideLink {
    position: absolute;
    top: 0px;
    width: 200px;
    left: 550px;
}
#Layer1 {
    position:absolute;
    left:134px;
    top:440px;
    width:547px;
    height:52px;
    z-index:1;
}
body {
    background-color: #FFFFFF;
    background-image: url();
    background-repeat:no-repeat;
}
.style1 {
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    color: #FF4E00;
}
.style2 {
    font-size: 12px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #FF4E00;
}
#Layer2 {
    position:absolute;
    left:183px;
    top:216px;
    width:609px;
    height:295px;
    z-index:1;
}
#Layer3 {
    position:absolute;
    left:25px;
    top:444px;
    width:262px;
    height:90px;
    z-index:2;
}
</style>

</HEAD>

<BODY marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
<div class="style2" id="Layer2">
  <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
  <p><em>Kop3</em><br>
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  <p><em>Kop3  </em><br>
  Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? </p>
  <p>&nbsp;</p>
</div>
<div id="Layer3"><img src="images/emptiness.gif" width="263" height="89" border="0" usemap="#Map">
<map name="Map"><area shape="rect" coords="6,0,255,83" href="main8.htm">
</map></div>
<table width="848" height="585" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr height="24">

   <td width="848" colspan="3" background="images/bgtop.gif"></td>

  </tr>
  <tr height="537">
   <td width="24" background="images/bklinks.gif"></td>
   <td width="800" background="images/bg_aboutus.jpg"><p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p></td>
   <td width="24" background="images/bgrechts.gif"></td>
  </tr>
  <tr height="24">

   <td width="848" colspan="3" background="images/bgbottom.gif"><div align="center" class="style1">Copyrightregel</div></td>

  </tr>
</table>


</BODY>
</HTML>

[ Voor 3% gewijzigd door Verwijderd op 05-11-2006 15:17 ]


  • MBV
  • Registratie: Februari 2002
  • Laatst online: 28-11 22:35

MBV

2 dingen: kan je dat tussen [ code=html ] en [ /code ] tags zetten? En heb je een voorbeeldje online? Anders heb ik namelijk geen idee wat er fout gaat, moet ik het zelf in een bestandje zetten en testen enzo. Linkje in de TS helpt altijd om response te krijgen ;)

Verwijderd

Topicstarter
MBV schreef op zondag 05 november 2006 @ 12:48:
2 dingen: kan je dat tussen [ code=html ] en [ /code ] tags zetten? En heb je een voorbeeldje online? Anders heb ik namelijk geen idee wat er fout gaat, moet ik het zelf in een bestandje zetten en testen enzo. Linkje in de TS helpt altijd om response te krijgen ;)
Hier is een linkje, je ziet geen images, maar als je op verschillende resoluties kijkt, zie je dat de tekst niet meer gecentreerd is.

Voorbeeld

[ Voor 7% gewijzigd door Verwijderd op 05-11-2006 15:23 ]


  • MBV
  • Registratie: Februari 2002
  • Laatst online: 28-11 22:35

MBV

sorry, vergeten te zeggen dat je de spaties er tussenuit moest halen.
HTML:
1
2
3
4
5
<html> 
  <body> 
    <p class='comment'>dit doet toch echt wel iets, zoals leesbaarder maken enzo </p> 
  </body> 
</html>

En Tele2 zegt mij dat jouw pagina niet meer bestaat, kennelijk zit er een fout in je linkje. deze werkt beter

als je wilt zien wat voor tags ik heb gebruikt in mijn bericht, kan je op Afbeeldingslocatie: http://gathering.tweakers.net/global/templates/tweakers/images/icons/view.gif klikken, rechts bovenaan het bericht :)

[ Voor 48% gewijzigd door MBV op 05-11-2006 15:19 ]


Verwijderd

Topicstarter
Ik had het net gezien ja, dat de link niet werkte. Sorry... Ben na mijn zwangerschap al een tijdje niet meer online geweest, alles is een beetje rusty...

  • MBV
  • Registratie: Februari 2002
  • Laatst online: 28-11 22:35

MBV

over je voorbeeld: het enige wat verschuift t.o.v. de rest in Firefox is de copyright regel. Dat is erg logisch, aangezien die in een tabelcel staat, en niet in een DIV.
Als je de tekst wilt centreren, moet je zoiets gebruiken:
Cascading Stylesheet:
1
2
3
4
5
6
7
.style2 {
left: 0;
right: 0;
width: 400px; /*een willekeurige vaste waarde */
margin-left: auto;
margin-right: auto;
}

Ik dacht alleen dat dit niet lekker werkte in IE. De truc om het in beide werkend te krijgen:
Cascading Stylesheet:
1
2
3
left: 50%;
width: 400px;
margin-left: 200px; /*helft van width*/

Maar kon je dit nou echt niet vinden met google of de search op dit forum? :? In de eerste 5 hits van google worden deze oplossingen allebei geboden...

edit:
goh, een vrouwelijke tweaker, dat verklaart alles dat komt niet vaak voor ;)

[ Voor 6% gewijzigd door MBV op 05-11-2006 15:37 ]


Verwijderd

Topicstarter
In 1024 x 768 staat het goed, maar als ik 1280 x 1024 of hoger pak, gaat de tekst naar links. Het is dus niet alleen de copyrightregel (in IE overigens). De eerste 25 hits in Google heb ik trouwens allemaal geprobeerd, maar losten het probleem niet op... Het blijft maar verkeerd gaan bij andere resoluties....

[ Voor 33% gewijzigd door Verwijderd op 05-11-2006 19:34 ]


  • MBV
  • Registratie: Februari 2002
  • Laatst online: 28-11 22:35

MBV

De copyright regel schuift t.o.v. je tekst. Voor de rest zie ik helemaal niks, omdat je geen plaatjes online hebt staan: http://home.zonnet.nl/100...rlak/images/emptiness.gif bijv. doet niks.

Als je wilt dat je tekst 'meecentreert', dan moet je dus op je tekst-divs die formattering die ik in mijn vorige berichtje heb gezet toepassen. Als je wilt dat de rest stilstaat, moet je die ook absoluut positioneren. Maar je moet wel duidelijk maken wat je bedoelt, want 'schuivende div's' is nou niet de meest pakkende titel die ik ooit heb gehoord ;)

Verwijderd

Topicstarter
Ik heb nu de code aangepast, ik had zelf zitten experimenteren met deze site:

http://www.yourhtmlsource.com/stylesheets/csslayout.html

Hier zijn twee screenshots. De eerste laat zien hoe ik het wil, alles netjes gecentreerd met de tekst links aligned in de div. De tweede, laat zien dat juist de copyrightregel wél goed blijft staan, maar de tekst in de div niet. Omdat de div verschuift. Vandaar ook de titel verschuivende divs. Dekt de lading wel aardig dacht ik... :)

1024x768
1280x1024

Verwijderd

Ik zou toch zeggen, zet er wat meer plaatjes in, zodat we ook een idee kunnen krijgen van wat je wil. Als ik je HTML bron bekijk moet ik helaas bekennen dat ik niet begrijp wat je nou precies wil met die "absolute" geplaatste layers in combinatie met een soort lay-out tabel ofzo... waar ik overigens (behalve de copyright-regel) niets van terug zie. Daarnaast denk ik dat het probleem zowiezo te maken heeft met het gebruik van deze verschillende elementen door elkaar, zonder een (in mijn ogen) verklaarbare reden.

Verwijderd

Maar wat wil je nu eigenlijk precies? Wil je het geheel gecentreerd hebben? Dat heb je nu dus niet gedaan. Als je het geheel wilt centreren, dan zet je het geheel in een gecentreerde container.

Als je het geheel horizontaal én verticaal wilt centreren, dan moet je gaan werken met negatieve margins. Ikzelf vind dat niet echt aan te raden, omdat als je je browser te klein maakt, je site niet meer in z'n geheel wordt weergegeven.


Ik begrijp je manier van CSS schrijven ook niet helemaal, waarom geef je de elementen niet wat duidelijker namen, i.p.v., style1, Layer2?

Het lijkt me ook handiger als je bijvoorbeeld deze div:
HTML:
1
<div class="style2" id="Layer2">

gewoon één style meegeeft en niet én een class én een id.

En dit:
HTML:
1
<p>&nbsp;</p>

is het ook niet echt.

Verwijderd

Topicstarter
Het maakt ff niet uit hoe alles heet of wat ik als tijdelijke dummy-opvulling gebruikt heb. Lorem Ipsum tekst is ook niet erg begrijpelijk voor de eindgebruiker, maar is ook even als opvulling.

Waar het wel om gaat, is dat ik het volgende wil:

Een pagina met daarop horizontaal gecentreerd een table. Om de table heen is niets, alleen een witte achtergrond. Die table heeft geen algemene achtergrond, want in de buitenste cellen plaats ik een achtergrondje met een bepaalde border zodat het lijkt alsof de binnenste (grote) cel een mooie rand eromheen heeft die je niet kunt maken door slechts border=... te definieren. De binnenste grote cel heeft een eigen achtergrond, die voor een groot deel wit is, maar ook een aantal afbeeldingen heeft. Dit zit allemaal in de background. In die cel wil ik dus tekst en dat kan alleen maar met een div, want als ik er een cel voor maak, wordt de table te hoog (aangezien de grote binnenste cel de afmetingen heeft van de achtergrond).

Maar ik denk dat ik de oplossing al heb, aangezien het niet schijnt te kunnen de div in elke resolutie dezelfde centrering te geven. Ik zet de tekst ook wel gewoon in de image van de background. Zo weet ik zeker dat alles goed staat... Kan de tekst ook nog eens niet geript worden _/-\o_

Verwijderd

Verwijderd schreef op maandag 06 november 2006 @ 22:20:
Ik zet de tekst ook wel gewoon in de image van de background. Zo weet ik zeker dat alles goed staat... Kan de tekst ook nog eens niet geript worden _/-\o_
...en niet geïndexeerd worden door zoekmachines en niet makkelijk ge-update worden...

Dit lijkt me niet echt de goede oplossing. Ik denk dat je beter een aantal CSS-tutorials door kunt nemen, daar heb je later ook nog wat aan ;).

  • MBV
  • Registratie: Februari 2002
  • Laatst online: 28-11 22:35

MBV

Verwijderd schreef op maandag 06 november 2006 @ 22:20:
Het maakt ff niet uit hoe alles heet of wat ik als tijdelijke dummy-opvulling gebruikt heb. Lorem Ipsum tekst is ook niet erg begrijpelijk voor de eindgebruiker, maar is ook even als opvulling.

Waar het wel om gaat, is dat ik het volgende wil:

Een pagina met daarop horizontaal gecentreerd een table. Om de table heen is niets, alleen een witte achtergrond. Die table heeft geen algemene achtergrond, want in de buitenste cellen plaats ik een achtergrondje met een bepaalde border zodat het lijkt alsof de binnenste (grote) cel een mooie rand eromheen heeft die je niet kunt maken door slechts border=... te definieren. De binnenste grote cel heeft een eigen achtergrond, die voor een groot deel wit is, maar ook een aantal afbeeldingen heeft. Dit zit allemaal in de background. In die cel wil ik dus tekst en dat kan alleen maar met een div, want als ik er een cel voor maak, wordt de table te hoog (aangezien de grote binnenste cel de afmetingen heeft van de achtergrond).
Dat was nou een goed begin geweest voor de TS
Maar ik denk dat ik de oplossing al heb, aangezien het niet schijnt te kunnen de div in elke resolutie dezelfde centrering te geven. Ik zet de tekst ook wel gewoon in de image van de background. Zo weet ik zeker dat alles goed staat... Kan de tekst ook nog eens niet geript worden _/-\o_
Goed, ik ga dus nooit meer reageren in dit topic :(. Jij wilt iets wat ten eerste al erg lastig is (mixen van tabel-layout en CSS-layout), en negeert vervolgens alle berichten die er komen :(. Wat ben je dan voor l*l? Ik heb de oplossing al gegeven (MBV in "[div] Div-vakken verschuiven bij andere ..."), vervolgens stond er nog ergens de verstandige tip om alles in 1 div te gooien die je centreert, en de tip van sandra om zinvolle namen te gebruiken zodat wij weten waar je heen wilt.
Als jij beweert dat het onmogelijk is, moet je eens op www.csszengarden.com kijken, of op mijn eigen site www.mvdvlist.nl. Op die laatste zal je zien dat ik prima kan centreren met niks anders dan CSS.

Oftewel: Make up your mind. Voor wat jij wilt (als ik je onleesbare tekst een beetje interpreteer) moet je eens naar mijn pagina kijken. Het komt erop neer dat je dus een structuur als dit moet hebben:
HTML:
1
2
3
4
5
6
<div class="container">
  <h1>titel</h1>
  <p> Lorem ipsum bladibla</p>
  <p> Lorem ipsum bladibla </p>
</div>
<p class="footer"> copyright bladibla</p>

Die container div centreer je, met een van de methodes die ik heb gegeven. In die <p> tags (DIE JE DUS NOOIT GEBRUIKT VOOR SPACING!!!) zet je je tekst. Die zijn dus automatisch gecentreert, omdat je container gecentreert is.
Je footer class zet je met absolute positionering onderaan, zodat je geen ranzige <br/> ofzo nodig hebt.

En als je dat gedoe met die divs niet wilt leren begrijpen, dan moet je maar fijn verder werken met tables. divs enzo is leuk, flexibeler, minder ranzig, maar zoals jij het toepast voegt het niks toe en kan je beter alles met tables doen.

Als je dit niet snapt moet je iemand anders om hulp vragen, want mijn kansen heb je zojuist verbruikt. Jammer dat je je post-history niet kan filteren >:)

Verwijderd

Die CSS Zen Garden is echt een aanrader!

Verwijderd

Topicstarter
MBV schreef op dinsdag 07 november 2006 @ 00:17:

Goed, ik ga dus nooit meer reageren in dit topic :(. Jij wilt iets wat ten eerste al erg lastig is (mixen van tabel-layout en CSS-layout), en negeert vervolgens alle berichten die er komen :(. Wat ben je dan voor l*l?

Als jij beweert dat het onmogelijk is, moet je eens op www.csszengarden.com kijken, of op mijn eigen site www.mvdvlist.nl. Op die laatste zal je zien dat ik prima kan centreren met niks anders dan CSS.

Oftewel: Make up your mind. Voor wat jij wilt (als ik je onleesbare tekst een beetje interpreteer) moet je eens naar mijn pagina kijken. Het komt erop neer dat je dus een structuur als dit moet hebben:
-Ik wil iets dat lastig is: eens
-Ik negeer alle berichten die er komen: oneens. Ik heb alle oplossingen uitgeprobeerd, maar ze losten het probleem simpelweg niet op.
-Zen Garden: ziet er goed uit, is wel even een stuk ingewikkelder dan mijn simpele siteje.
-Jouw site: daar zie ik ook allerlei problemen met uitlijning en positionering. Gelukkig ben ik niet de enige. :P

  • moozzuzz
  • Registratie: Januari 2005
  • Niet online
Je probleem is simpel: je zet divs absoluut in je pagina met een vaste breedte tov van de linkerkant. Die vast breedte wijzigt uiteraard niet met de resolutie, noch met de breedte van je scherm (kijk maar als je je browserscherm versmalt). De oplossing is:
- Een vd oplossingen zoals hierboven reeds gesuggereerd werd (ik gebruik dit soort constructies niet dus weet niet of ze werken)
- Met Javascript positie laten aanpassen.

Als je er niet uitraakt, neem je best een prof. design-bureau onder de arm, of zoek je ergens op liquid design en css templates.

  • MBV
  • Registratie: Februari 2002
  • Laatst online: 28-11 22:35

MBV

tegen al mijn goede voornemens in toch nog 1 reactie:
Verwijderd schreef op dinsdag 07 november 2006 @ 09:52:
[...]


-Ik wil iets dat lastig is: eens
Jij wilt een layout die supersimpel is, maar kiest de moeilijkste weg om die te bereiken: je gaat table-layout met css-layout mixen, en vindt het raar dat dat niet werkt.
-Ik negeer alle berichten die er komen: oneens. Ik heb alle oplossingen uitgeprobeerd, maar ze losten het probleem simpelweg niet op.
Vanavond gooi ik jouw pagina met de oplossing die ik hierboven heb gegeven online, en zal je zien dat mijn oplossing wel degelijk werkt. Zelfs met jouw belachelijke HTML-code is het met een simpele CSS-fix te verhelpen.
-Zen Garden: ziet er goed uit, is wel even een stuk ingewikkelder dan mijn simpele siteje.
Is ook een showcase van hoe het kan. Ik heb van de diverse voorbeelden daar stukjes
-Jouw site: daar zie ik ook allerlei problemen met uitlijning en positionering. Gelukkig ben ik niet de enige. :P
Welke problemen met uitlijnen zie jij dan op mijn website? Heb ik iets geupdate zonder in IE te checken ofzo :X
moozzuzz schreef op dinsdag 07 november 2006 @ 10:17:
Je probleem is simpel: je zet divs absoluut in je pagina met een vaste breedte tov van de linkerkant. Die vast breedte wijzigt uiteraard niet met de resolutie, noch met de breedte van je scherm (kijk maar als je je browserscherm versmalt). De oplossing is:
- Een vd oplossingen zoals hierboven reeds gesuggereerd werd (ik gebruik dit soort constructies niet dus weet niet of ze werken)
- Met Javascript positie laten aanpassen.

Als je er niet uitraakt, neem je best een prof. design-bureau onder de arm, of zoek je ergens op liquid design en css templates.
Of je huurt een tweaker in. Professionele bedrijven maken net zo goed ranzige troep hoor...

[ Voor 25% gewijzigd door MBV op 07-11-2006 10:55 ]


Verwijderd

Hmm, ik denk ook dat je de tables beter kunt laten sneuvelen en je achtergrond moet ophakken in delen zodat je niet met zo'n grote image zit. Tevens zou ik niet per se div's gebruiken maar alternatieven. <p>, <li>, <ul>, etc. alles kan, als je het maar goed in elkaar sleutelt. Je doet je best, dat is duidelijk, maar het is een beetje chaotisch. Laat me raden: gillende kinderen op de achtergrond? ;)

Probeer het zo simpel mogelijk en vanaf scratch nog een keer op te bouwen. Kunst van het toevoegen totdat je het resultaat krijgt wat je nodig hebt.

  • user109731
  • Registratie: Maart 2004
  • Niet online
Voeg ook even een doctype toe: IE in quirksmode gaat wat anders om met default afmetingen van het body-element, zodat margin:0 auto; idd niet zomaar werkt.

Doe eerst eens stap voor stap wat er hierboven gezegd word:
  • Zet <!doctype html> boven je <html>
  • Verwijder alle position:absolute, z-index, left, top en height properties in je stylesheet. Gebruik position:absolute/relative alleen als het echt niet anders kan.
  • Voeg een container toe waar alles inzit wat nu in de body zit: <body><div id="container">...</div></body>
  • Stel in je CSS voor #container width:...px in, en margin:0 auto om te centreren.
Kom je er hierna nog niet uit, dan helpen we je graag verder :)
Zoals al gezegd: HTML is niet bedoeld om tekst op te maken, daar is CSS voor. Neem ook een website als Modern Markup even door, dat maakt het vast wat duidelijker :)

Verwijderd

Topicstarter
Thanks allemaal en bessenbob in het bijzonder. Ik heb jouw adviezen opgevolgd, de image opgehakt en alles vanaf scratch opnieuw opgebouwd en het ziet er nu piekfijn uit. Minder code, prachtige cleane css, joehoe!!

Bedankt voor jullie geduld.

_/-\o_ O+

Oh en ja, bessenbob, inderdaad gillende kinderen op de achtergrond, maar nu ze slapen, heb ik er rustig aan kunnen sleutelen. Tip: bouw geen websites met zeurende kinderen om je heen :+

[ Voor 26% gewijzigd door Verwijderd op 07-11-2006 21:24 ]

Pagina: 1