css scalen

[Verwijderd]

Ik wil een pagina netjes laten scalen, google en got gezocht op css, scalen en beide niets nuttigs gevonden.

ik heb:

code:

body
{overflow:hidden;}

.left
{
position: absolute;
height: 428px;
width: auto;
left:0px;
right: 471px;
top:0px;
background-image:url(../images/1px_ver.jpg);
layer-background-image:url(../images/1px_ver.jpg);
}

.right
{
position:absolute;
height: 428px;
width: 417px;
right: 0px;
top: 0px;
background-image:url(../images/right.jpg);
layer-background-image:url(../images/right.jpg);
}

.px
{
position: absolute;
bottom:21px;
right:0px;
width: 50px; 
height: auto;
top: 428
}


.bottom
{
Position:absolute;
bottom:0px;
left:0px;
right:0px;
height: 21px;
width: 100%;
background-image:url(../images/blauw.jpg);
layer-background-image:url(../images/blauw.jpg);
}

Het lijkt mij te kloppen maar aan de andere kant er klopt fucking weinig van. Ik ben dan ook wel een n00b maar toch. check www.mediaversa.nl/arnojacobs

Alvast bedankt

[J_Davelaar]

Wat versta je precies onder "scalen"?

[HawVer]

Het lijkt mij te kloppen maar aan de andere kant er klopt fucking weinig van

En wat klopt er niet? Het ziet er allemaal goed uit hier.

[BalusC]

HawVer schreef op maandag 28 februari 2005 @ 14:36:
En wat klopt er niet? Het ziet er allemaal goed uit hier.

Pas eens de breedte van de browservenster willekeurig aan

[J_Davelaar]

BalusC schreef op maandag 28 februari 2005 @ 14:41:
[...]

Pas eens de breedte van de browservenster willekeurig aan

Maar dat zal je altijd houden als je werkt met plaatjes. Voor zover ik weet is het niet mogelijk om een plaatje mee te laten schalen met css. En trouwens ook als je tekst echt te groot wordt voor de box.

Misschien met met js maar daar heb ik geen ervaring mee.

[Verwijderd]

het moet toch lukken als je een plaatje hebt en daar een achtergrond bij insteld??
Achtergrond blijft links staan en de achtergrond verschijnt zodra je blok groter wordt?

Hoe denken jullie anders dat ik het het best kan doen als dit zo nooit zal gaan werken?

Bedankt voor de reacties

p.s. waarom komt dat rooie ding onderin niet helemaal rechts te staan?? staat toch duidelijk right:0px;

[ Voor 16% gewijzigd door Verwijderd op 28-02-2005 15:15 ]

[Rowanov]

Iets in deze trant?

Cascading Stylesheet:

.blokje {
    background: #ff0000;
    background-image: url(bla/bla.gif);
}

Verwijderd schreef op maandag 28 februari 2005 @ 15:14:
p.s. waarom komt dat rooie ding onderin niet helemaal rechts te staan?? staat toch duidelijk right:0px;

Dat blokje staat daar omdat je waarschijnlijk je margin, border of padding niet op 0 hebt staan.

[ Voor 34% gewijzigd door Rowanov op 28-02-2005 16:28 ]

[Verwijderd]

meer in de trant zoals ik het nu heb een 1px plaatje als achtergrond en dan in dat blok een plaatje plempen zodat als het blok scaled het plaatje links blijft staan en de achtergrond zichtbaar wordt (die het dan een mooi geheel maakt)

[IschaGast]

misschien heb je hier wat aan:
http://www.alistapart.com/articles/elastic/
http://www.htmldog.com/articles/elasticdesign/demo/

[Verwijderd]

Dit heeft meer met variabele tekengrootte te maken.

Bedankt allemaal ik heb het nu op een hele proffesorische manier opgelost namelijk daar deze css te gebruiken (lach me niet uit het werkt)

code:

body
{overflow:hidden;}

.left
{
position: absolute;
height: 428px;
width: 1000px;
left:0px;
top:0px;
background-image:url(../images/1px_ver.jpg);
layer-background-image:url(../images/1px_ver.jpg);
overflow:hidden;
}

.left_menu
{
position: absolute;
height: 428px;
width: 300px;
left:0px;
top:0px;
}

.right
{
position:absolute;
height: 428px;
width: 471px;
right: 0px;
top: 0px;
background-image:url(../images/right.jpg);
layer-background-image:url(../images/right.jpg);
overflow:hidden;
}

.px
{
position: absolute;
right:0px;
width: 50px; 
height: 1000px;
top: 428px;
background-image:url(../images/1px_hor.jpg);
overflow:hidden;
}


.bottom
{
Position:absolute;
bottom:0px;
right:0px;
height: 21px;
width: 110%;
background-image:url(../images/blauw.jpg);
layer-background-image:url(../images/blauw.jpg);
}

.plaai
{
position: absolute;
top: 428px;
left: 0px;
height:500px;
width: 160px;
}

Miojn kennende staat er veel dubbel in en veel overbodig maar zoals ik zei het werkt (oja ook ff scrollbalk hard uitgezet)

SLOTJE denk ik zo mods

[ Voor 41% gewijzigd door Verwijderd op 01-03-2005 09:32 ]

[Rowanov]

Je kan toch ook gewoon als header een div pakken met floats op je plaatjes? Vervolgens wel ff de margin, padding en border van je div en plaatje op 0 zetten.

Cascading Stylesheet:

div {
    width: 100%;
        background: #xxxxxx; //zelfde kleur als je plaatjes
}
.left {
    float: left;
}
.right {
    float: right;
}

code:

<div>
[img]"ding.png"[/img][img]"ding.png"[/img]
</div>

Of bedoel je dit niet?

edit:

En die andere dingent moeten ook niet zo moeilijk zijn met een fixed footer en zo, google werk.

[ Voor 20% gewijzigd door Rowanov op 01-03-2005 19:18 ]

[Schonhose]

Verwijderd schreef op dinsdag 01 maart 2005 @ 09:32:
SLOTJE denk ik zo mods

Een slotje wordt hier nooit geplaatst wanneer een topic is opgelost. Wanneer er niet meer in gereageerd wordt zakt het vanzelf naar beneden. (en uit het zicht)

[BalusC]

Het lijkt me overigens wijs om een min-width in de CSS te zetten .. Wanneer ik de browservenster resize naar minder dan 800px, dan ziet het er helemaal niet uit. Je zou deze kunnen gebruiken:

Cascading Stylesheet:

div#container {
  min-width:800px; 
  width:expression(document.body.clientWidth<800?'800px':'100%');
}

Die width:expression is omdat IE de min-width niet kent
De HTML ziet er dan zo uit:

HTML:

<html>
  <head></head>
  <body>
    <div id="container">
      <!-- hier je code -->
    </div>
  </body>
</html>

Mocht je ook een maximum breedte aan willen koppelen, zoals 1280 pixels, dan kun je dat als volgt doen:

Cascading Stylesheet:

div#container {
  min-width:800px; 
  max-width:1280px; 
  width:expression(document.body.clientWidth<800?'800px':(document.body.clientWidth>1280?'1280px':'100%'));
}

Zoiets heb ik ook op mijn website ingebouwd. Want anders worden de CPU tabellen veel te breed en onoverzichtelijk. Het beste is trouwens altijd om een fixed width te gebruiken. 800px of 1024px, you choose.

[ Voor 11% gewijzigd door BalusC op 02-03-2005 09:08 ]