[css] hoogte berekenen - Softwareontwikkeling

donderdag 27 november 2003 10:14

Acties:

Verwijderd

Topicstarter

Ik wil een divje tot onderaan laten lopen en die met overflow laten scrollen als hij bij deonderkant is nu start het divje op 105px; en als ik 100% zeg dan neemt hij de hoogte van de browser dus komt er nog 105px bij. Ik wil eigenlijk height 100%-105px kunnen berekenen in CSS helaas is dat niet mogelijk is er een soort hack voor dit probleem.
voorbeeld: http://www.pietertje.nl/images/css.jpg

[ Voor 3% gewijzigd door Verwijderd op 27-11-2003 10:14 ]

donderdag 27 november 2003 10:16

Acties:

Hangloozz

{ @$%&# }

kun je niet wat code online zetten?
dan kunnen we misschien zien of er met een kleine toevoeging iets te bereiken is..
Tis nu een tikje koffiedik kijken

www.jurgroessen.nl

donderdag 27 november 2003 10:19

Acties:

Verwijderd

Topicstarter

natuurlijk kan dat:

Cascading Stylesheet:

html,body {
    height:100%;
}
body { 
    margin:0; 
    padding:0; 
}
#tekst {
    position:absolute; 
    left:205px; 
    top:105px; 
    width:435px;
    height:100%;
    padding: 60px 20px 20px 20px;
    overflow:auto;
    z-index:2;
}
#illustratie {
    position:absolute; 
    left:0px; 
    top:0px; 
    width:779px; 
    height:105px; 
    z-index:1;
}

donderdag 27 november 2003 10:20

Acties:

Willem

Plus dat je voor IE 5 ontwikkeld en dat is nu niet echt de eerste beste browser die goed wil meewerken aan juiste weergave, maak ok

Motor (of auto) onderhoud bijhouden

donderdag 27 november 2003 10:25

Acties:

Verwijderd

Topicstarter

is er dan wel een oplossing voor IE 6? want de site moet gemaakt worden voor PC met IE5.5 volgens mij daarna kan ik wel wat verzinnen als iemand een oudere browser heeft.

donderdag 27 november 2003 10:27

Acties:

Willem

Ehm, (i)frames is geen optie?

Wordt in IE5+ voor PC gewoon prima weergegeven namelijk.

_{Afgezien van het feit dat je met JavaScript best de schermhoogte kunt uitlezen, en vervolgens je <div> die height meegeeft....}

Motor (of auto) onderhoud bijhouden

donderdag 27 november 2003 10:30

Acties:

Verwijderd

Topicstarter

iframe is geen optie omdat er bovenin nog een uitklap-menu komt die dan over dat frame moet, maar javascript is misschien wel goed idee

kom erachter dat het uitklap menu geen alst heeft van iframes, dus dan gaan we die kant op!

zit ik nog steeds met hetzelfde probleem van moet aangeven hoe hoog hij moet zijn dus toch nog javascript...

[ Voor 49% gewijzigd door Verwijderd op 27-11-2003 11:01 ]

donderdag 27 november 2003 11:48

Acties:

Verwijderd

Ik weet niet of IE 5 op de Mac dit begrijpt, dacht het wel, voor IE op de PC zal je toch wat javascript moeten gebruiken.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body,html {
    height:100%;
    margin:0px;
    padding:0px;
}
#frame {
    position:absolute;
    top:105px;
    left:0px;
    bottom:0px;
    height:auto;
    width:600px;
    border: 1px #000 solid;
    overflow:auto;
}
</style>

</head>

<body>
<div id="frame">hoi</div>
</body>
</html>

donderdag 27 november 2003 12:17

Acties:

crisp

Devver

Pixelated

en anders creatief doen met padding enzo:

HTML:

<html>
<head>
<title>bla</title>
<style type="text/css">

body {
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

#container {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 105px;
  -moz-box-sizing: padding-box;
}

#thediv {
  height: 100%;
  overflow: auto;
  background-color: #0000ff;
}

</style>
<body>
<div id="container">
  <div id="thediv">
    content<br />content<br />content<br />content<br />
    content<br />content<br />content<br />content<br />
    content<br />content<br />content<br />content<br />
    content<br />content<br />content<br />content<br />
    content<br />content<br />content<br />content<br />
    content<br />content<br />content<br />content<br />
    content<br />content<br />content<br />content<br />
    content<br />content<br />content<br />content<br />
    content<br />content<br />content<br />content<br />
    content<br />content<br />content<br />content<br />
  </div>
</div>
</body>
</html>

Intentionally left blank

donderdag 27 november 2003 12:20

Acties:

Clay

cookie erbij?

Daar was laatst toch ook een topic over? door in strict met <?xml ?> header te werken bleef IE in quirks en gaat dat dus goed, Opera had een bug waardoor het werkte, en in moz enzo kon je de boxmodel aanpassen waardoor het ook werkte.

_{imo een zeldzame samenwerking van bugs en rariteiten die voor de verandering eens in je voordeel werken ipv andersom}

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

donderdag 27 november 2003 12:25

Acties:

creative8500

freedom.

crisp:

code:

1	body {overflow: hidden; }

Ik wil je op het volgende wijzen:

quote: http://milov.nl/1691
Hmm... My adding of body{overflow:hidden;} to the stylesheet of various dhtml animations of late is causing Phoenix (and probably any Gecko-based browser) to display a blank page... Removing the overflow-property makes them work again.

donderdag 27 november 2003 12:32

Acties:

crisp

Devver

Pixelated

creative8500 schreef op 27 november 2003 @ 12:25:
[...]

Ik wil je op het volgende wijzen:

[...]

dat krijg je alleen als je puur met absoluut gepositioneerde elementen werkt. De height van je body en html element op 100% zetten lost dat op

Intentionally left blank

donderdag 27 november 2003 12:39

Acties:

Verwijderd

code:

function init() {
    var headerHeight = document.getElementById('Header').offsetHeight;
    var footerHeight = document.getElementById('Footer').offsetHeight;

    document.getElementById('Content').style.height = document.body.scrollHeight - (headerHeight+footerHeight) + "px";
}

Hierbij wordt de content dus net zo hoog als de scrollHeight van het document minus de hoogte van de header + footer.

Werkt in IE6.x Mozilla 1.4 en Opera 7.2x onder windows XP.

donderdag 27 november 2003 12:39

Acties:

Verwijderd

Topicstarter

thnx!
ik zal dit ook testen, javascript werkte ook goed alleen deed ie raar(divje breder maken) in safari maar dat deed ie ook zonder javascript

donderdag 27 november 2003 12:54

Acties:

Verwijderd

Topicstarter

crips oplossing werkt beter dan javascript want kan nu ook rezided worden behalve in moz werkt het nog niet goed daar staat ie nog onder de pagina.

Clay schreef op 27 november 2003 @ 12:20:
Daar was laatst toch ook een topic over? door in strict met <?xml ?> header te werken bleef IE in quirks en gaat dat dus goed, Opera had een bug waardoor het werkte, en in moz enzo kon je de boxmodel aanpassen waardoor het ook werkte.

weet je nog welke?
ik wil namelijk graag het box model in mozilla aanpassen

donderdag 27 november 2003 13:01

Acties:

crisp

Devver

Pixelated

dat was deze: [rml][ css] 3 rows, 2 vast, de ander zoekt het maar uit[/rml] (zelfde principe, maar met nog een vaste footer)

Hij werkt hier trouwens prima in Mozilla hoor

en met -moz-box-sizing pas je dus het boxmodel aan in Mozilla

Intentionally left blank

donderdag 27 november 2003 13:08

Acties:

Woudloper

« - _ - »

Verwijderd schreef op 27 november 2003 @ 12:54:
weet je nog welke?
ik wil namelijk graag het box model in mozilla aanpassen

Is dat niet deze reactie van clay? Verder had ik begrepen dat als je IE in quirk wil dan moet je gewoon  in de HTML zetten.

donderdag 27 november 2003 13:25

Acties:

Clay

cookie erbij?

IE6 doet het alleen "goed" als de doctype het eerste ding in het document is. Met die <?xml ?> header erboven slaat IE de doctype over oid, en gaat die in quirkmode. Is een (in dit geval handige) bug.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

donderdag 27 november 2003 13:34

Acties:

Verwijderd

Topicstarter

crisp schreef op 27 november 2003 @ 13:01:
...
Hij werkt hier trouwens prima in Mozilla hoor
...

ook op de mac?
hier gaat het niet helemaal goed op de mac zowel IE+Safari(die doet ook neit aan body{overflow:hidden})+Mozilla gaan nog uit van die 100% browserhoogte en kappen vervolgens de scrollbar af aan de onderkant, weird misschien toch maar JS

donderdag 27 november 2003 15:29

Acties:

mr.inno

ik denk dat je het op heel veel manieren kunt doen mar dat alle pogingen om het met css op te lossen zullen mislukken ergens op een of andere brouwser.
de gene die brouwsers maken hebben namelijk volgens mij nog nooit gehoort van W3C een protocols. die dingen zijn er niet voor niets.. vooral microsoft heeft er een lak aan.

java script is denk ik toch de oplossing. of een combi van.

inno

donderdag 27 november 2003 15:39

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op 27 november 2003 @ 13:34:
[...]

ook op de mac?
hier gaat het niet helemaal goed op de mac zowel IE+Safari(die doet ook neit aan body{overflow:hidden})+Mozilla gaan nog uit van die 100% browserhoogte en kappen vervolgens de scrollbar af aan de onderkant, weird misschien toch maar JS

Konqueror/Safari hebben nog heel veel kinderziektes, IE op de Mac is een nationale ramp, en ik weet niet wat voor versie Mozilla je hebt. Hier met 1.3, 1.4 en 1.5 onder windows werkt het wel, maar mijn ervaring is dat Mozilla op andere platformen inderdaad wel eens iets anders wil reageren wat dan meestal gewoon een bug blijkt te zijn...

Intentionally left blank

donderdag 27 november 2003 15:45

Acties:

Verwijderd

Topicstarter

maak er maar een internationale ramp van.
ik maak het wel werkend voor PC en leesbaar voor mac dan is (bijna) iedereen tevreden

Pagina: 1

Reageer