Toon posts:

mijn tekst en links veranderen bij verkleinen van webpagina

Pagina: 1
Acties:

Verwijderd

Topicstarter
Ik heb al verschillende dngen uitgeprobeerd maar hier kom ik niet uit, mijn tekst en button-links veranderen van positie als ik de webpagina verklein?
Dit is mijn css:
Cascading Stylesheet:
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
* {margin: 0; padding: 0; } 
in elementen die je met float voorzien 

div.body{
    position: relative;
    width: 800px;
    height: 600px;
    border-style: none;

}

div.button1{
    position: absolute;
    left: 240px;
    top: 61px;
    height: 38px;
    width: 251px;
    margin: 0 0 0 0;
}

div.button2{
    position: absolute;
    left: 240px;
    top: 99px;
    width: 254px;
    height: 44px;
    margin: 0 0 0 0;
}

div.button3{
    position: absolute;
    left: 240px;
    top: 147px;
    width: 250px;
    height: 39px;
    margin: 0 0 0 0;
}

div.button4{
    position: absolute;
    left: 242px;
    top: 195px;
    width: 251px;
    margin: 0 0 0 0;
}

div.button5{
    position: absolute;
    left: 238px;
    top: 239px;
    width: 251px;
    margin: 0 0 0 0;
}

div.text1{
    overflow : scroll ; 
    position:absolute;
    text-transform:none;
    left: 347px;
    top: 390px;
    width: 378px;
    height: 336px;
}

div.formulier{
    position:absolute;
    left: 297px;
    top: 361px;
    width: 719px;
}

div.text2{
    position:absolute;
    left: 490px;
    top: 417px;
}

div.text3{
    position:absolute;
    font:Verdana, Arial, Helvetica, sans-serif;
    font-size:20px;
    left: 356px;
    top: 538px;
}


dit is de url van de website: http://members.home.nl/michel1979/index2.html
Als jullie het probleem kunnen vinden ben ik jullie eeuwig dankbaar

Verwijderd

Ik ben niet zo'n CSS expert, maar je 'body' div heeft een relatieve positie, terwijl al je overige div's een absolute positie hebben...

Relatieve posities veranderen zodra de grootte van het venster veranderd (als ik het goed heb begrepen), dus volgens mij zit daar ergens je probleem...

Probeer dit eens:
div.body{
position: absolute;
etc...

  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

slindenau, zeg dan niks als je het niet weet ;)

mv2000, zou je de code tussen [code=css][/] tags plaatsen om het overzichtelijker te maken. Daarnaast lijkt het me niet handig om zomaar al je CSS hier neer te plempen en te verwachten dat wij het voor je oplossen :)

Probeer in je openingspost (dmv de Afbeeldingslocatie: http://gathering.tweakers.net/global/templates/tweakers/images/icons/edit.gif knop) aan te vullen met informatie zoals: wat heb je zelf geprobeerd, waar denk je dat het aan ligt, hoe heb je het zelf aangepakt.

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.


  • BtM909
  • Registratie: Juni 2000
  • Niet online

BtM909

Watch out Guys...

Overigens heb je zo'n spaghetti code gemaakt van je html + css.

Probeer even vanaf de basis het ontwerp op te maken. Waarom divjes om al je plaatjes en alles absoluut positioneren? Je hebt een menu, maak daar dan ook netjes lijsten van (UL / OL en IL's). Haal je code ook even door een validator (zoals http://validator.w3.org) en verbeter daar je fouten.

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.


Verwijderd

Sorry heer moderator, ik liet mijn gedachten enkel de vrije loop.

Heb de website inmiddels even met Firebug bekeken, en na het verwijderen van de regel
"in elementen die je met float voorzien" uit de stylesheet (welke daar werkelijk zo in staat) verschiet de pagina gelijk naar een foute layout.

Mijn suggestie nu: haal die bovengenoemde regel weg (of zet deze op zn minst tussen juiste CSS commentaar tags), en kijk dan nog eens naar de (absolute) positionering* van je 'body' div.

* tip: left: xxxpx; toevoegen.


offtopic:
@BtM909; wel even aangeven dat hij zn post moet editen...maar dit zelf niet doen :? Beetje vreemd nietwaar ;)

[ Voor 16% gewijzigd door Verwijderd op 12-03-2007 13:11 ]


Verwijderd

Topicstarter
BtM909 schreef op maandag 12 maart 2007 @ 12:26:
slindenau, zeg dan niks als je het niet weet ;)

mv2000, zou je de code tussen [code=css][/] tags plaatsen om het overzichtelijker te maken. Daarnaast lijkt het me niet handig om zomaar al je CSS hier neer te plempen en te verwachten dat wij het voor je oplossen :)

Probeer in je openingspost (dmv de [afbeelding] knop) aan te vullen met informatie zoals: wat heb je zelf geprobeerd, waar denk je dat het aan ligt, hoe heb je het zelf aangepakt.
Ten eerste mijn welgemeende excuses hiervoor!
ik heb alles wat jullie me vertellen al eens geprobeerd. Ik heb de site nu zo aangepast dat de body (waarom weet ik ook niet) nu links komt te staan, maar de rest wel alles normaal functioneerd. Ik heb de site idd niet echt mooi geprogrammeerd omdat ik hier niet zo veel tijd voor had.Anders had ik deze wel in PHP gedaan. bij het verkleinen blijft nu wel alles mooi op zijn plaats zitten alleen staat alles nu links van de pagina.

Verwijderd

Daarom ook mijn suggestie wat betreft die "left: xpx;" ;).

Als je dit eens aan je stylesheet veranderd, krijg je dan het gewenste resultaat?

code:
1
2
3
4
5
6
7
8
9
10
* {margin: 0; padding: 0; } 
/* in elementen die je met float voorzien */

div.body{
    position: relative;
    width: 800px;
    height: 600px;
    border-style: none;

}

veranderen in:

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
* {margin: 0; padding: 0; } 
/* in elementen die je met float voorzien */

div.body{
    position: absolute;
    left: 200px;
    width: 800px;
    height: 600px;
    border-style: none;

} 

[ Voor 5% gewijzigd door Verwijderd op 12-03-2007 14:14 ]

Pagina: 1