relatieve hoogte verminderen met bepaald aantal pixels - Softwareontwikkeling

donderdag 13 juli 2006 15:02

Acties:

Topicstarter

hey allemaal!

ff n vraagje;
Is het mogelijk een div met een relative hoogte van 100% minder hoog te maken door er een bepaald aantal pixels vanaf te trekken?
Beetje lastig uitleggen, maar ik bedoel dus iets in de vorm van '100% - 150px' bijvoorbeeld.
Is dit mogelijk en zo ja, hoe moet ik dat dan verwerken?

Dit heb ik nodig omdat ik een div van 100% niet helemaal bovenaan de pagina wil plaatsen. Natuurlijk geef ik dan een andere positie op. Daarmee wordt echter mn pagina groter en kan ik aan de zijkant scrollen, wat dus niet de bedoeling is.

Ik wil de hoogte relatief doen zodat de website er goed uit ziet op elke res.

Ik hoop dat ik het zo een beetje duidelijk verwoord heb en natuurlijk dat jullie de perfecte oplossing voor mij hebben!

Alvast bedankt!!

donderdag 13 juli 2006 15:21

Acties:

Sendy

Zonder javascript is dat niet mogelijk. Je moet vanuit de andere kant redeneren. Plaats een blok van 150px en plaats eronder/erboven het andere blok. Zeg tegen dit laatste blok dat het 100% van de overige ruimte moet innemen.

donderdag 13 juli 2006 15:42

Acties:

NeORay

Topicstarter

Sendy schreef op donderdag 13 juli 2006 @ 15:21:
Zonder javascript is dat niet mogelijk. Je moet vanuit de andere kant redeneren. Plaats een blok van 150px en plaats eronder/erboven het andere blok. Zeg tegen dit laatste blok dat het 100% van de overige ruimte moet innemen.

bedoel je p deze manier?

code:

<html>
<head>
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="Layer1" style="position:static; left:0px; top:0px; width:100%; height:150; z-index:1; background-color: #FF0000; layer-background-color: #FF0000; border: 1px none #000000;"></div>
<div id="Layer2" style="position:static; left:0px; top:150px; width:100%; height:100%; z-index:2; overflow: auto; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;">blaat</div>
</body>
</html>

Het onderste blok wordt dan raar genoeg gewoon plat(ongeveer teksthoogte).

edit: ow ff vergeten te previewen. in FF en IE heb ik dan weer dat ie langer dan de pagina wordt en dus weer n scrollbar krijgt.. hij pakt de 100% keurig van de hele pagina en daarom wordt ie dus te groot.

[ Voor 16% gewijzigd door NeORay op 13-07-2006 15:46 ]

donderdag 13 juli 2006 15:56

Acties:

Sendy

Van mij mag dat test gevalletje wel korter (waarom zit die suffe dreamweaver javascript erin, bijvoorbeeld). Verder kan ik hele lange horizontale regels niet goed lezen, dus even die css in een apart <style> element plaatsen (met enters).

Verder lijkt me dit niet de juiste manier.

1) Ik snap je position:static niet
2) height:100% blijft hieght:100%, ook al verplaats je het hele blok 150px naar beneden.

Wat ik bedoel is zoiets:

code:

<style>
#pix150 {
    height: 150px;
}

#anders {
    bottom: 0px;
}
</style>
<div id="pix150">150pixels hoog</div>
<div id="anders">rest div</div>

De "anders" div begint precies onder de pix150 div. Omdat zijn bottom op 0 staat zal-ie dus de resterende ruimte innemen.

(Allemaal uit het hoofd, ik heb geen idee of het in IE ook een beetje werkt)

[ Voor 8% gewijzigd door Sendy op 13-07-2006 15:57 ]

donderdag 13 juli 2006 16:08

Acties:

Rowanov

Kop eens wat anders...

Bottom gaat niet werken zonder absolute/fixed positionering. Static is de standaard waarde, dus het is vrij nutteloos die in je code op te nemen. Zie ook: http://www.w3.org/TR/1998...ren.html#propdef-position

[ Voor 59% gewijzigd door Rowanov op 13-07-2006 16:09 ]

donderdag 13 juli 2006 16:22

Acties:

NeORay

Topicstarter

Ok, ik heb het ff op die manier geprobeerd. Het onderste vlak was nu raar genoeg weer plat, (ook in de browser) dit was verholpen zodra ik er content in plaatste. De goede hoogte wordt t echter nog niet.

als ik er te veel content in plaatst met overflow op auto krijg ik geen scrollbar in het onderste vlak maar zoals steeds over de hele pagina.
hier ff n snelle testpagina:
http://213.134.225.210/testpagina.htm
het is dus de bedoeling dat er alleen in het grijze vlak een scrollbar komt.

deze code gebruik ik nu:

code:

<html>
<head>
<title>Untitled Document</title>
<style>
#pix150 {
    height: 150px;
}

#anders {
    bottom: 0px;

}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="pix150" style="background-color: #FF0000; layer-background-color: #FF0000; border: 3px none #fff000;">150px</div>
<div id="anders" style="background-color: #CCCCCC; layer-background-color: #CCCCCC; overflow: auto; border: 3px none #000fff;"> 
  <p>rest div</p>
  <p>blaat</p>
  <p>rest div</p>
  <p>blaat</p>
  <p>rest div</p>
  <p>enz....


</div>
</body>
</html>

edit: normaal had ik dit opgelost door frames of iframes te gebruiken maar dit is nu niet mogelijk ivm de implementatie(theme) in een cms.

[ Voor 20% gewijzigd door NeORay op 13-07-2006 16:26 ]

donderdag 13 juli 2006 16:26

Acties:

Rowanov

Kop eens wat anders...

Dat is niet wild ingewikkeld, je moet het alleen niet met javascript op willen lossen.

Iets als dit zoek je dus: http://limpid.nl/lab/css/fixed/header

Edit: het is ook geen overflow:auto, maar overflow: scroll;

[ Voor 18% gewijzigd door Rowanov op 13-07-2006 16:27 ]

donderdag 13 juli 2006 16:28

Acties:

NeORay

Topicstarter

Rowanov schreef op donderdag 13 juli 2006 @ 16:26:
Dat is niet wild ingewikkeld, je moet het alleen niet met javascript op willen lossen.

Iets als dit zoek je dus: http://limpid.nl/lab/css/fixed/header

Edit: het is ook geen overflow:auto, maar overflow: scroll;

dat werkt helaas niet in FF : (

wel auto anders krijg je sowieso een verticale én horizontale bar.

[ Voor 9% gewijzigd door NeORay op 13-07-2006 16:29 ]

donderdag 13 juli 2006 17:37

Acties:

Sendy

En ik ga je niet (verder) voorkauwen hoe het moet

Lees gewoon rustig verder tot je het snapt.

donderdag 13 juli 2006 17:47

Acties:

NeORay

Topicstarter

Sendy schreef op donderdag 13 juli 2006 @ 17:37:
En ik ga je niet (verder) voorkauwen hoe het moet Lees gewoon rustig verder tot je het snapt.

ok, kga t een en ander proberen.
iig thnx voor de moeite tot nu toe !

donderdag 13 juli 2006 20:03

Acties:

NeORay

Topicstarter

Het is nu gelukt hoor!

Mijn grote dank aan de mensen die me op weg hebben geholpen! $_/-\o_$

hier is mijn testpagina met wat het tot nu toe is.
http://213.134.225.210/testpage2.htm

ik zit nu met een volgend, soortgelijk probleem. Het blok rechtsonder moet namelijk 100% breed zijn.(ipv de 500px nu) Ik heb dit geprobeerd dmv dezelde methode als de verticale hoogte en plaatsing van het blok linksonder.
Helaas laat ie dan, als ik m op 100% zet, de blokken niet meer naast elkaar staan...

Iemand die me weer een zetje in de goede richting kan geven??
Alvast bedankt!

hieronder nog ff de code die ik nu heb:

code:

<html>
<head>
<title>testpagina</title>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="padding-top: 150px; style="padding-left:455px">
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:150; z-index:1; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;"></div>
<div id="Layer1" style="padding-left: -445px; position:static; width:455px; height:100%; background-color: #CCCCCC; z-index:1; background-color: #CCffCC; float: left; overflow: auto;">
  <p>blaaaaat</p>
  <p>blaaaaat</p>
  <p>blaaaaat</p>
  <p>blaaaaat</p>
  <p>enz..
</div>
<div style="position:static;  width: 500px; height: 100%; background-color: #CCffff; float: left; overflow: auto;"><p>blaat</p>
  <p>blaaaaat</p>
  <p>blaaaaat</p>
  <p>blaaaaat</p>
  <p>enz..
  </div>
</body>
</html>

[ Voor 15% gewijzigd door NeORay op 13-07-2006 20:03 ]

donderdag 13 juli 2006 21:51

Acties:

Kvn

Waarom heb 2x <style> in je body-tag staan?

(Waarvan er 1tje niet afgesloten is)

donderdag 13 juli 2006 22:49

Acties:

NeORay

Topicstarter

Kvn schreef op donderdag 13 juli 2006 @ 21:51:
Waarom heb 2x <style> in je body-tag staan? (Waarvan er 1tje niet afgesloten is)

oeps, slordigheidje

helaas werkt ie na het verbeteren daarvan niet

iemand nog ideetjes?

donderdag 13 juli 2006 23:24

Acties:

NeORay

Topicstarter

ok, nu heb ik ze dus netjes naast elkaar:
http://213.134.225.210/testpage3.htm
maar nu is het blok linksonder wat scrollen betreft weer fout

opzich logish denk ik, want nu is ie nie meer statisch en pakt ie voor de hoogte van 100% weer de hoogte de hele pagina zonder die 150px padding er af te trekken..

(hij is nu fixed)

Ik wordt er echt helemaal gek van...
Dit moet toch wel op te lossen zijn?!

edit: is er geen manier een static div toch een (horizontale) positie toe te wijzen (left:0px;)?? Volgens mij zou dat alles op lossen..

[ Voor 15% gewijzigd door NeORay op 13-07-2006 23:27 ]

donderdag 13 juli 2006 23:28

Acties:

plakbandrol

interessant, dit probleem heb ik ook een aantal keer gehad, maar nu weet ik dus hoe het moet

vrijdag 14 juli 2006 12:09

Acties:

NeORay

Topicstarter

nah, intussen ben ik weer ietsje gevorderd.
In Firefox en Opera ziet het er nu helemaal uit zoals ik bedoel.
Alleen zowel IE6 als 7 moeten de hele boel weer zonodig door elkaar gooien..

Ik zou zeggen kijk en oordeel zelf : http://213.134.225.210/testpage5.htm
Iemand enig idee waar dit aan kan liggen? maaar vooral ook hoe ik dit eventueel zou kunnen oplossen?
Alvast bedankt!

owja, hier nog ff de code die ik nu heb:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="padding-top:150px; padding-left: 455px; overflow:hidden;">
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:150; background-color: #CCCCCC; ">blaaaaaaaaaaaaaat</div>
<div id="Layer2" style="margin-left: -455; position:static; width:455px; height:100%; background-color: #CCffCC; float: left; overflow: auto;">
  <p>blaaaaat</p>
  <p>blaaaaat</p>
  <p>blaaaaat</p>
  <p>blaaaaat</p>
  <p>enz...
</div>
<div id="Layer3" style="position:static;  float:right; width: 100%; height: 100%; background-color: #CCffff;  overflow: auto;"><p>blaat</p>
  <p>blaaaaat</p>
  <p>blaaaaat</p>
  <p>blaaaaat</p>
  <p>enz....
  </div>
</body>
</html>

maandag 17 juli 2006 17:28

Acties:

NeORay

Topicstarter

subtiel kickje

ik ben er helaas nog steeds niet uit

mensen, dit moet toch te verwezenlijken zijn??!

ik hoop dat jullie nog met een goede oplossing/tip weten te komen!

Pagina: 1

Reageer