[CSS] div's width en height niet aan te passen

Pagina: 1
Acties:

  • RicX
  • Registratie: September 2003
  • Laatst online: 04-09 13:11

RicX

Het leven is geen ponypark

Topicstarter
Ik heb een vraagje:

normaal gesproken als je een width en een height opgeeft in pixels bij een div, wordt deze geresized naar deze hoogte, bij de volgende pagina van mij gebeurt dat niet....

kijk op http://test.robbiedebadeend.nl
Je ziet hier drie divs links een rode, in het midden een blauwe en rechts een gele... ze resizen allemaal niet als mijn stylesheet hetvolgende bevat:

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
#container {
    position:absolute;
    top:20%;
    width:100%;
    text-align:center;
}
#leftContainer {
    text-align: right;
    font-family: arial;
    background-color: red;
    height:400px;
    display: inline;
}
#centerContainer {
    text-align: center;
    font-family: arial;
    background-color: blue;
    height:400px;
    display: inline;
}
#centerContainer img {
    width: 200px;
    height: 400px;
}
#rightContainer {
    text-align: left;
    font-family: arial;
    background-color: yellow;
    height:400px;
    display: inline;
}


is dit een foutje in css, of ben ik nou zo stom?

Honesty is the best policy, but insanity is a better defense


Verwijderd

Ik vrees dat je "display: inline" gebruikt om ze naast elkaar te tonen. Maar dat heeft natuurlijk als consequentie dat je geen dimensies kan opgeven.

  • Predje
  • Registratie: December 2002
  • Laatst online: 03-03 11:55
Probeer eens height: 400px; in je #container te zetten en dan je left,center,right #container op 100%; te zetten.

  • Predje
  • Registratie: December 2002
  • Laatst online: 03-03 11:55
Verwijderd schreef op donderdag 04 januari 2007 @ 19:37:
Ik vrees dat je "display: inline" gebruikt om ze naast elkaar te tonen. Maar dat heeft natuurlijk als consequentie dat je geen dimensies kan opgeven.
Oja doe ipv display: inline; eens float: left;

  • RicX
  • Registratie: September 2003
  • Laatst online: 04-09 13:11

RicX

Het leven is geen ponypark

Topicstarter
Predje schreef op donderdag 04 januari 2007 @ 19:37:
Probeer eens height: 400px; in je #container te zetten en dan je left,center,right #container op 100%; te zetten.
jammer, had ik ook al geprobeerd....
Predje schreef op donderdag 04 januari 2007 @ 19:38:
Oja doe ipv display: inline; eens float: left;
Dit werkt wel, alleen dan is niks meer gecentreerd jammer genoeg... en dat is net wat ik wilde hebben....

Honesty is the best policy, but insanity is a better defense


Verwijderd

Heb je niet per ongeluk in die div zelf ook nog een style-attribuut meegegeven waar je dit soort dingen hebt aangepast?
Om toch gecentreerd te krijgen kun je beter met de attribuut align werken. text-align verrekt het nog wel eens in IE en FF.

[ Voor 34% gewijzigd door Verwijderd op 04-01-2007 20:10 ]


  • RicX
  • Registratie: September 2003
  • Laatst online: 04-09 13:11

RicX

Het leven is geen ponypark

Topicstarter
Verwijderd schreef op donderdag 04 januari 2007 @ 20:08:
Heb je niet per ongeluk in die div zelf ook nog een style-attribuut meegegeven waar je dit soort dingen hebt aangepast?
Om toch gecentreerd te krijgen kun je beter met de attribuut align werken. text-align verrekt het nog wel eens in IE en FF.
nee, zoals je in mijn sourcecode had kunnen zien, doe ik erna geen styles meer opzetten. En het nadeel van align is dat die het niet doet... :'(

Honesty is the best policy, but insanity is a better defense


  • curry684
  • Registratie: Juni 2000
  • Laatst online: 28-11 08:35

curry684

left part of the evil twins

Als ik het goed begrijp wil je dus een div van 400px hoog, waarin over de volledige breedte van het window 3 divs zitten, waarvan de middelste 200 pixels breed is en de buitenste 2 dynamisch meeschalen, zodat bij een window inner width van 980 pixels de 3 divs respectievelijk 390, 200 en 390 pixels breed zijn, waardoor de center div gecentreerd staat?

Zo ja: gefeliciteerd, niet alleen lijkt het design me volstrekt nutteloos maar het gaat je ook nog eens browserportable niet lukken zonder tables of javascript ;)

Professionele website nodig?


  • RicX
  • Registratie: September 2003
  • Laatst online: 04-09 13:11

RicX

Het leven is geen ponypark

Topicstarter
curry684 schreef op donderdag 04 januari 2007 @ 20:21:
Als ik het goed begrijp wil je dus een div van 400px hoog, waarin over de volledige breedte van het window 3 divs zitten, waarvan de middelste 200 pixels breed is en de buitenste 2 dynamisch meeschalen, zodat bij een window inner width van 980 pixels de 3 divs respectievelijk 390, 200 en 390 pixels breed zijn, waardoor de center div gecentreerd staat?

Zo ja: gefeliciteerd, niet alleen lijkt het design me volstrekt nutteloos maar het gaat je ook nog eens browserportable niet lukken zonder tables of javascript ;)
oke dan...
vraag 1: waarom is het nutteloos... als ik een bepaald design wil hebben, dan is dat toch mijn zaak...
vraag 2: waarom is het niet browser-portable? leg eens verder uit....
vraag 3: ik wil het zonder tables of javascript omdat de innerHTML van die divs dynamisch wordt opgebouwd....

Honesty is the best policy, but insanity is a better defense


  • curry684
  • Registratie: Juni 2000
  • Laatst online: 28-11 08:35

curry684

left part of the evil twins

RicX schreef op donderdag 04 januari 2007 @ 20:28:
[...]

oke dan...
vraag 1: waarom is het nutteloos... als ik een bepaald design wil hebben, dan is dat toch mijn zaak...
Voel je je nu aangevallen? :? Ik zeg enkel dat ik het nut niet in zie van een layout die browservullend is en 2 dynamische kolommen heeft. In plaats van beledigd reageren mag je ook uitleggen wat je er mee wil doen en me verrassen.
vraag 2: waarom is het niet browser-portable? leg eens verder uit....
Omdat iedere heden gangbare browser (inclusief Firefox) nog ver achterloopt op CSS-ondersteuning van kolomlayouts.
vraag 3: ik wil het zonder tables of javascript omdat de innerHTML van die divs dynamisch wordt opgebouwd....
En wat heeft dat ermee van doen? :?

Professionele website nodig?


Verwijderd

het centreren met CSS laat nogal de wensen over. Ik denk dat het wel kan maar dat het een bras partij wordt. Hier vind je voorbeelden van ingewikkelde designs, misschien kan je der iets mee?

Wat wil je eigenlijk langs de plaatjes hebben? Moeten dit verschillende kleuren worden? Of een kleur? Moet er nog tekst in?

//edit: link vergeten: http://www.cssplay.co.uk/layouts/index.html

[ Voor 9% gewijzigd door Verwijderd op 04-01-2007 20:55 ]


  • RicX
  • Registratie: September 2003
  • Laatst online: 04-09 13:11

RicX

Het leven is geen ponypark

Topicstarter
oke het idee is als volgt: ik ben bezig een site te maken waar alle, maar dan ook alle content in de databases zit en de site alleen maar via xml-request-objects divjes vult met database-content...
Hier ben/heb ik een cms aan het maken die de gehele site via een php-interface editable maakt on the fly..

Mijn uiteindelijk doel is dat ik dezelfde engine kan gebruiken om ieder type website te bouwen... van webwinkel tot personal site tot bedrijfwebsite. De content op de sites kan dan gewoon worden gekoppeld aan bepaalde div-ids...

Ik hoop dat ik het een beetje duidelijk uitleg, maar uitleggen is nooit mijn sterkste punt geweest :P

Honesty is the best policy, but insanity is a better defense


  • Predje
  • Registratie: December 2002
  • Laatst online: 03-03 11:55
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Predtest </TITLE>

<style type="text/css">

html, body
{
    margin: 0px;
    text-align: center;
    background-color: black;
    font-size: 20px;
    color: #FFF;
}

#Container
{
    height: 400px;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20%;
    white-space: nowrap;
}

#Left
{
    height: 100%;
    width: 25%;
    float: left;
    background-color: red;
}

#Center
{
    height: 100%;
    width: 50%;
    float: left;
    background-color: blue;
}

#Right
{
    height: 100%;
    width: 25%;
    float: left;
    background-color: yellow;
}

</style>

</HEAD>

<BODY>

<div id="Container">
    <div id="Left">links</div>
    <div id="Center">Center</div>
    <div id="Right">Right</div>
</div>

</BODY>
</HTML>


Werkt in FF en IE... wat wil je nog meer?

Verwijderd

Is dit een beetje wat je in gedachten had?
http://jnwmedia.nl/test.php

had ff niks te doen ;)

//toevoeging: het nadeel van mijn verticaal centreren is dat als de browser minder als 400 hoog is de bovenkant een stukje verdwijnt.

[ Voor 41% gewijzigd door Verwijderd op 04-01-2007 21:13 ]


  • curry684
  • Registratie: Juni 2000
  • Laatst online: 28-11 08:35

curry684

left part of the evil twins

Verwijderd schreef op donderdag 04 januari 2007 @ 21:09:
Is dit een beetje wat je in gedachten had?
http://jnwmedia.nl/test.php

had ff niks te doen ;)
De middelste moet een fixed width hebben, dat is nu net het probleem waardoor percentages noch fixed widths werken ;)

Professionele website nodig?


Verwijderd

curry684 schreef op donderdag 04 januari 2007 @ 21:13:
[...]

De middelste moet een fixed width hebben, dat is nu net het probleem waardoor percentages noch fixed widths werken ;)
Zeker weten? Ik zie in z'n TS alleen dat het plaatje een fixed width heeft. Maar uit jouw "conclusie" midden in de pagina dat de div fixed is. Dat wordt idd een probleem ;)

//update
Ik kon het niet uitstaan dat dit niet kon dus ben ff gaan zoeken, er zijn wel voorbeelden:
http://www.pmob.co.uk/temp/3col-centrefixed2.htm
http://www.pmob.co.uk/temp/fixed-center-fluid-sides.htm
http://www.imaginekitty.com/static-center.html
http://www.gunlaug.no/tos/alien/test_8572.html

De CSS is wel een beetje "apart" ;)

[ Voor 29% gewijzigd door Verwijderd op 04-01-2007 21:28 ]


  • curry684
  • Registratie: Juni 2000
  • Laatst online: 28-11 08:35

curry684

left part of the evil twins

Apart, maar geniaal :)

Ik ken de trucs met negatieve margins e.d. wel, maar deze had ik toch echt niet zo snel bedacht. Nice work aan de betreffende auteur :D

Professionele website nodig?


  • RicX
  • Registratie: September 2003
  • Laatst online: 04-09 13:11

RicX

Het leven is geen ponypark

Topicstarter
Predje schreef op donderdag 04 januari 2007 @ 21:08:
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Predtest </TITLE>

<style type="text/css">

html, body
{
    margin: 0px;
    text-align: center;
    background-color: black;
    font-size: 20px;
    color: #FFF;
}

#Container
{
    height: 400px;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20%;
    white-space: nowrap;
}

#Left
{
    height: 100%;
    width: 25%;
    float: left;
    background-color: red;
}

#Center
{
    height: 100%;
    width: 50%;
    float: left;
    background-color: blue;
}

#Right
{
    height: 100%;
    width: 25%;
    float: left;
    background-color: yellow;
}

</style>

</HEAD>

<BODY>

<div id="Container">
    <div id="Left">links</div>
    <div id="Center">Center</div>
    <div id="Right">Right</div>
</div>

</BODY>
</HTML>


Werkt in FF en IE... wat wil je nog meer?
Verwijderd schreef op donderdag 04 januari 2007 @ 21:15:
[...]


Zeker weten? Ik zie in z'n TS alleen dat het plaatje een fixed width heeft. Maar uit jouw "conclusie" midden in de pagina dat de div fixed is. Dat wordt idd een probleem ;)

//update
Ik kon het niet uitstaan dat dit niet kon dus ben ff gaan zoeken, er zijn wel voorbeelden:
http://www.pmob.co.uk/temp/3col-centrefixed2.htm
http://www.pmob.co.uk/temp/fixed-center-fluid-sides.htm
http://www.imaginekitty.com/static-center.html
http://www.gunlaug.no/tos/alien/test_8572.html

De CSS is wel een beetje "apart" ;)
my god ! superbedankt !!! Ik heb hiermee genoeg materiaal, hiermee moet het lukken !!! Ik ga vanavond of morgen hem helemaal in elkaar hacken... Over een maandje ofzo zal alles werken te zien zijn op http://www.robbiedebadeend.nl ! Heel erg bedankt !

Honesty is the best policy, but insanity is a better defense

Pagina: 1