Toon posts:

[CSS/DIV]Pagina opeens "afgekapt"?

Pagina: 1
Acties:

zaterdag 21 mei 2005 18:38

Acties:
  • sjaakaq
  • Registratie: September 2003
  • Laatst online: 17-04 10:24

sjaakaq

It might get loud

Topicstarter
Ik heb een nogal vreemd probleem; ik heb een site opgebouwd uit DIV's. Relevante code (alle DIV's):
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

body {
    margin: 0px;
    padding: 0px;
                background: url('bg.jpg') top center #9ce400;
                background-repeat: repeat-y;
}

body, p, html, table, td {
    font-family: arial, trebuchet ms, verdana, tahoma, sans-serif;
    font-size: 11px;
    line-height: 14px;
         color: #000; 
}

div#container{ 
  position: relative; 
  left: 50%; 
  width: 600px; 
  margin: 0 0 0 -300px; /* helft 700 */ 
  background: url('titel.png') top center no-repeat #fff;
}

#rightcolumn {
    position: absolute;
    left: 460px;
         top: 132px;
    width: 125px;
}

#centercolumn {
    position: relative; 
         right: -15px;
         top: 110px;
    width: 430px;
}

Zie http://www.mijnogen.net/

In IE (In Opera/FF dus niet), wordt de pagina opeens ergens "afgekapt". Echter, als ik de tekst selecteer en ook "buiten het scherm verder ga met selecteren" (erg lastig uit te leggen :X :P ) en vervolgens plak, staat de tekst die dus niet zichtbaar is op het scherm wél op het klembord :?

Op een of andere manier is de tekst er dus wel, maar hij wordt niet gerenderd... Ook is er wel een scrollbar maar als deze tot onderen is gescrolld is er dus toch nog tekst die buiten het scherm valt...

In de CSS staan verder geen overflow's of max-width/heights... De pagina's waarin dit voorkomt (de frontpage ne de archiefpagina) hebben verder ook geen interne stylesheets...

Komt dit door de bovenmarge van de 2 content-DIV's? Want iets anders kan ik niet bedenken.

leoaq.fm // Jeune Loop

zaterdag 21 mei 2005 18:49

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

Verklaren kan ik het zo 123 ook niet, maar ik heb wel een voorstel om je layout op een andere manier te bewerkstelligen, wat waarschijnlijk je probleem ook oplost.

Waarom laat je je "centercolumn" div niet weg en pas je op je "container" div padding toe om de eigenlijke content op de goede plaats te zetten.. dus iets als
code:
1

padding: 135px 15px 2px 15px;

Misschien dat je hier wat aan hebt? :)

[ Voor 16% gewijzigd door Sappie op 21-05-2005 18:51 ]

Specs | Audioscrobbler

zaterdag 21 mei 2005 18:56

Acties:
  • sjaakaq
  • Registratie: September 2003
  • Laatst online: 17-04 10:24

sjaakaq

It might get loud

Topicstarter
Hmm heb het geprobeerd maar je krijgt dan 2 problemen:
1-tekst gaat achter "rightcollumn" langs; max. breedte tekst is erg lastig te controleren.
2-Het principe van de container; de boel horizontaal centreren, werkt niet meer :)

Toch bedankt voor de hulp.

leoaq.fm // Jeune Loop

zaterdag 21 mei 2005 18:57

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

je moet uiteraard de width van de container ook aanpassen dan he :) (W3C box-model)

Lijkt me stug dat het op de manier die ik voorstel niet kan..

Edit: verder moet natuurlijk de padding eerder iets als dit zijn: (net ff rechter padding vergeten 8)7 )
Breedte is dan 600 - 155 - 15: 430px;
code:
1
2

padding: 135px 155px 2px 15px;
width: 430px

[ Voor 75% gewijzigd door Sappie op 21-05-2005 19:04 ]

Specs | Audioscrobbler

zaterdag 21 mei 2005 19:08

Acties:
  • sjaakaq
  • Registratie: September 2003
  • Laatst online: 17-04 10:24

sjaakaq

It might get loud

Topicstarter
Ja...maar hoe zit het dan met "rightcollumn" :) Die zit binnen "container", en het gaat nogal wat problemen opleveren als ik die niet binnen container plaats...

leoaq.fm // Jeune Loop

zaterdag 21 mei 2005 19:12

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

hij zit toch ook binnen de container :).. padding zit _binnen_ een element. Hier ff een snel in elkaar geflanst voorbeeldje, waarbij ik maar wat willekeurige hoogtes heb genomen voor de container en de "rightcolumn":
code:
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Footer - Little Content</title>
<style type="text/css">
body {
    margin: 0px;
    padding: 0px;
   background: url('bg.jpg') top center #9ce400;
   background-repeat: repeat-y;
}

body, p, html, table, td {
    font-family: arial, trebuchet ms, verdana, tahoma, sans-serif;
    font-size: 11px;
    line-height: 14px;
    color: #000; 
}

div#container{ 
  position: relative; 
  left: 50%; 
  padding: 135px 155px 2px 15px;
  width: 430px;
  margin: 0 0 0 -300px; /* helft 700 */ 
  background: url('titel.png') top center no-repeat #fff;
  height: 700px;
}

#rightcolumn {
    position: absolute;
    left: 460px;
    top: 132px;
    width: 125px;
    background: red;
    height: 300px;
}
</style>
</head>
<body>
    <div id="container">
        <div id="rightcolumn"></div>
        <p>blaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdgblaat bla bla gfd gdf gfdg</p>
    </div>
</body>
</html>

[ Voor 8% gewijzigd door Sappie op 21-05-2005 19:13 ]

Specs | Audioscrobbler

zaterdag 21 mei 2005 19:31

Acties:
  • sjaakaq
  • Registratie: September 2003
  • Laatst online: 17-04 10:24

sjaakaq

It might get loud

Topicstarter
Ehm...moet "rightcollumn" niet ook rekening houden met deze padding-right, waardoor deze veel te ver naar links komt te staan?

Ik heb het overigens geprobeerd: hele layout ver ***t en het probleem is er nog steeds ;)

leoaq.fm // Jeune Loop

zaterdag 21 mei 2005 19:35

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

leokennis schreef op zaterdag 21 mei 2005 @ 19:31:
Ehm...moet "rightcollumn" niet ook rekening houden met deze padding-right, waardoor deze veel te ver naar links komt te staan?
je positioneert je rightcolumn toch absoluut en haalt het daarmee uit de normale "flow"... Ik denk dat je met hetgeen ik uitgewerkt heb er uit moet kunnen komen en aangezien je deze vraag stelt adviseer ik je je eens wat meer te verdiepen in CSS.

[ Voor 11% gewijzigd door Sappie op 21-05-2005 19:36 ]

Specs | Audioscrobbler

zaterdag 21 mei 2005 20:08

Acties:
  • sjaakaq
  • Registratie: September 2003
  • Laatst online: 17-04 10:24

sjaakaq

It might get loud

Topicstarter
Hmm het werkt idd. Excuus voor mijn ignorance :)

Ik dacht vooral dat het niet zou werken omdat ik niet wist dat een "absolute" DIV geen rekening hield met padding.

Dank voor de oplossing ;)

leoaq.fm // Jeune Loop

Pagina: 1
Reageer