anoniem Geplaatst: 6 april 2004 Delen Geplaatst: 6 april 2004 Mensen, Ik ben bezig met het maken van een pagina welke gecentreerd staat en welke de volledige hoogte (100%) van het beeldscherm in beslag (kan) nemen. Dus namate er meer tekst in de box komt moet de pagina langer worden en dus een scrollbar rechts komen. [url=http://img3.imageshack.us/img3/3738/boxen1.jpg][voorbeeld][/url] Nu ben ik boxen aan het positioneren maar ik krijg het niet voor elkaar om deze op de juiste manier in elkaar verwerkt te krijgen. [code:1:753881adb8]body { margin: 20px 0px 20px 0px; text-align: center; font-size: 11px; font-family: Verdana, arial, helvetica, sans-serif; color: #000000; } div#main { position: relative; width: 875px; height: 100%; text-align: left; border: 1px solid #000; background-color: red; } div#top { position: absolute; width: 875px; height: 200px; border: 1px solid #000; background-color: darkblue; } div#bottom { position: relative; top: 200px; width: 800px; height: 100%; border: 1px solid #000; background-color: lightblue; } div#left { position: relative; width: 200px; height: 100%; border: 1px solid #000; background-color: blue; } div#right { position: relative; left: 250px; width: 600px; height: 100%; border: 1px solid #000; background-color: green; }[/code:1:753881adb8] [code:1:753881adb8]<html> <head> <title>Vitaal Rotterdam</title> <link rel='stylesheet' href='style.css' type='text/css' /> </head> <body> <div id='main'> <div id='top'></div> <div id='bottom'> <div id='left'></div> <div id='right'></div> </div> </div> </body> </html>[/code:1:753881adb8] iemand die me een schop in de goede richting kan geven ? Quote Link naar reactie
anoniem Geplaatst: 6 april 2004 Auteur Delen Geplaatst: 6 april 2004 Hoe zou het er uit moeten te komen zien dan? Quote Link naar reactie
anoniem Geplaatst: 6 april 2004 Auteur Delen Geplaatst: 6 april 2004 zie voorbeeld [url=http://img3.imageshack.us/img3/3738/boxen1.jpg][voorbeeld][/url] wanneer er dus in de paarse boxen veel tekst ingevoerd is moeten alle boven meeschuiven naar beneden. Ik zit fout met de position: absolute/relative volgens mij maar weet niet hoe het wel moet. Quote Link naar reactie
anoniem Geplaatst: 6 april 2004 Auteur Delen Geplaatst: 6 april 2004 Container div absoluut positioneren (parent), overige div's nesten (child), Genestte div's relative positioneren (t.o.v. parent) Als de child langer word (hoger) rekt de parent mee. Volgens mij moet dat het zijn (ben nog niet 100% zeker) [layers werden Div-jes en heten nu ineens Boxen, verwarrend zeg die voortschrijdende technologie :wink: ] Quote Link naar reactie
anoniem Geplaatst: 6 april 2004 Auteur Delen Geplaatst: 6 april 2004 In dreamweaver worden het layers genoemd maar volgens mij is de 'spreektaal' boxen :) maar het zou dan iets in de geest van het onderstaande moeten worden: [code:1:4d8230f841]body { margin: 20px 0px 20px 0px; text-align: center; font-size: 11px; font-family: Verdana, arial, helvetica, sans-serif; color: #000000; } div#main { position: absolute; width: 875px; height: 100%; text-align: left; border: 1px solid #000; background-color: red; } div#top { position: relative; top: 0px; left: 0px; width: 875px; height: 200px; border: 1px solid #000; background-color: darkblue; } div#bottom { position: relative; top: 200px; left: 0px; width: 800px; height: 100%; border: 1px solid #000; background-color: lightblue; } div#left { position: relative; top: 0px; left: 0px; width: 200px; height: 100%; border: 1px solid #000; background-color: blue; } div#right { position: relative; top: 0px; left: 200px; left: 250px; width: 600px; height: 100%; border: 1px solid #000; background-color: green; }[/code:1:4d8230f841] Werkt wel alleen als ik de div#main een absolute waarde mee geef heb ik weer het probleem dat deze OF niet in het midden staat OF bij het kleiner maken van het beeld aan beide kanten uit beeld verdwijnt. boxen... zucht :) Daarnaast zit ik nog met het probleem dat op dit moment de div#right niet naast div#left komt te staan maar er schuin onder. nog meer oplossingen :-? Quote Link naar reactie
anoniem Geplaatst: 6 april 2004 Auteur Delen Geplaatst: 6 april 2004 Position relative alleen zegt niets; je moet natuurlijk wel een left en top waarde mee geven. Quote Link naar reactie
anoniem Geplaatst: 6 april 2004 Auteur Delen Geplaatst: 6 april 2004 zie dit draadje even: http://forum.computertotaal.nl/phpBB/viewtopic.php?t=116776&highlight=css resultaat: http://destroy.nl (geen spam, ff voor de kiek.) d. Quote Link naar reactie
anoniem Geplaatst: 6 april 2004 Auteur Delen Geplaatst: 6 april 2004 als eerste iig bedankt voor jullie posts, [quote:135b9bfb78]Position relative alleen zegt niets; je moet natuurlijk wel een left en top waarde mee geven. [/quote:135b9bfb78] zelfde verhaal :P //zie wijzigingen vorige post// Dilbert, leuk die spam ;) Maar het is bij mij de bedoeling dat zowel het linker ALS rechter scherm meegaan, bij jou is dit alleen links of rechts. Quote Link naar reactie
anoniem Geplaatst: 7 april 2004 Auteur Delen Geplaatst: 7 april 2004 [quote:c0aac2184c="Dilbert"]zie dit draadje even: http://forum.computertotaal.nl/phpBB/viewtopic.php?t=116776&highlight=css resultaat: http://destroy.nl (geen spam, ff voor de kiek.) d.[/quote:c0aac2184c]Als eens in mozilla die website bekeken? ;) back ontopic: http://www.alistapart.com/articles/fauxcolumns/ of http://css-discuss.incutio.com/?page=ThreeColumnLayouts . Quote Link naar reactie
anoniem Geplaatst: 7 april 2004 Auteur Delen Geplaatst: 7 april 2004 Ik bedoelde meer zoiets; (maar ik geloof dat ik de relative en absolute wat door elkaar gooide) [code:1:76f6f3efef]Body{ text-align: center; } #container{ background-color: #6666FF; position: relative; height: 295px; width: 450px; } #top{ background-color: #663399; position: absolute; height: 70px; width: 440px; left: 5px; top: 5px; } #left{ background-color: #FF9900; position: absolute; height: 190px; width: 90px; left: 5px; top: 90px; } #mid{ background-color: #6699CC; position: absolute; height: 190px; width: 200px; left: 100px; top: 90px; } #right{ background-color: #FFCC00; position: absolute; height: 190px; width: 140px; top: 90px; left: 305px; }[/code:1:76f6f3efef] En dan: [code:1:76f6f3efef]<div id="container" style=""> <div id="top" style=""></div> <div id="left" style=""></div> <div id="mid" style=""></div> <div id="right" style=""></div> </div>[/code:1:76f6f3efef] maar [url=http://www.handleidinghtml.nl/css/css-elementen/css-elementen07.html]HIER[/url] zul je ongetwijfeld betere informatie krijgen. Quote Link naar reactie
anoniem Geplaatst: 7 april 2004 Auteur Delen Geplaatst: 7 april 2004 ah, k snap m. dit kan toch ook met de tips besproken in mijn draadje? enige tip die ik dan ken is bv box A (links) 40% van de breedte te geven en box B ( rechts) 60%. dit geef je gewoon in je width op. ditzelfde kan met de hoogte. position kan dan 'absolute' blijven. //edit: ver*&omme, ToBee zit voor mij. :wink: d. Quote Link naar reactie
anoniem Geplaatst: 7 april 2004 Auteur Delen Geplaatst: 7 april 2004 [quote:f284bfae7d="[m]"][quote:f284bfae7d="Dilbert"]zie dit draadje even: http://forum.computertotaal.nl/phpBB/viewtopic.php?t=116776&highlight=css resultaat: http://destroy.nl (geen spam, ff voor de kiek.) d.[/quote:f284bfae7d]Als eens in mozilla die website bekeken? ;) back ontopic: http://www.alistapart.com/articles/fauxcolumns/ of http://css-discuss.incutio.com/?page=ThreeColumnLayouts .[/quote:f284bfae7d] Quote Link naar reactie
anoniem Geplaatst: 7 april 2004 Auteur Delen Geplaatst: 7 april 2004 [url=http://steve.pugh.net/test/test57.html]test57[/url] Quote Link naar reactie
anoniem Geplaatst: 7 april 2004 Auteur Delen Geplaatst: 7 april 2004 aan alistapart had ik wel wat, ik ben nu een aardig eind alleen de linker balk gaat nog niet mee. Ik heb het eindelijk ook voor elkaar weten te krijgen om het online te krijgen (FTP was d00d) [url=http://junk.xanuex.nl/test/]Voorbeeld[/url] tnx Quote Link naar reactie
anoniem Geplaatst: 7 april 2004 Auteur Delen Geplaatst: 7 april 2004 Nu reizen er bij mij toch enkelle vragen n.a.v. dit topic: Als ik de TS inmiddels goed begrepen heb wil hij én de boel gecentreerd én alles verticaal laten meeresizen ook al wordt er maar één holder met hoogte overschrijdend materiaal gevuld. (..ja lees die nog maar een keer..) Ik zie dat in de CSS van xanuex ineens dit staat:[code:1:615c97baa3]html>#footer{ en dan wat waarden}[/code:1:615c97baa3] Dat kende ik nog niet en binnen het geheel van die CSS is de functie ervan mij niet duidelijk. Maar nu zie ik in de CSS van termin8or (test57) hetzelfde staan maar in een wat logischer context. Begrijp ik hier nu uit dat met: [color=green:615c97baa3]html>#div huppeldepup[/color:615c97baa3] je de inhoud van een div kunt vormgeven in relatie tot een andere div? En een tweede vraag @ termin8or is; waarom binnen één CSS definitie verschillende eenheden gebruiken, dus in het geval van test57 de eenheden "em" en "px" binnen één CSS regel? Want daar zal ongetwijfeld een reden voor zijn. En tenslotte vraag ik me af waarom je 0 waarden toch moet definieren; [code:1:615c97baa3]margin: 0px; kun je dus niet gewoon helemaal weglaten?[/code:1:615c97baa3] Quote Link naar reactie
anoniem Geplaatst: 7 april 2004 Auteur Delen Geplaatst: 7 april 2004 [quote:790c4021ab=".:ToBee:."] En tenslotte vraag ik me af waarom je 0 waarden toch moet definieren; [code:1:790c4021ab]margin: 0px; kun je dus niet gewoon helemaal weglaten?[/code:1:790c4021ab][/quote:790c4021ab] omdat je anders de "standaardwaarde" van de browser als opmaak krijgt. t. Quote Link naar reactie
anoniem Geplaatst: 7 april 2004 Auteur Delen Geplaatst: 7 april 2004 Maar dat zou betekenen dat ik voor een bowser die standaard een margin en pading waarde van 5 geeft, als dat al bestaat, de margin en pading van de body op -5 moet instellen wil ik op 0 uitkomen. Of begrijp ik je nu verkeerd? Quote Link naar reactie
anoniem Geplaatst: 7 april 2004 Auteur Delen Geplaatst: 7 april 2004 Wat jij opgeeft als waarde komt volgens mij [i:803d67e751]in plaats van[/i:803d67e751] de standaardbrowserwaarde. Je moet het er dus niet bij optellen. René. Quote Link naar reactie
anoniem Geplaatst: 7 april 2004 Auteur Delen Geplaatst: 7 april 2004 Indeed. Er is een zogenaamd "UA.css", waarin HTML elementen standaard opmaak krijgen. Volgens cascase regels kan jouw style sheet dat overschrijven. 'margin:0;' is trouwens korter. De selector 'html>#footer' lijkt me sterk, tenzij het BODY element een ID met de waarde 'footer' heeft, aangezien het een child selector is (wordt niet ondersteund door IE en daarom vaak gebruikt als "hack"). Quote Link naar reactie
anoniem Geplaatst: 7 april 2004 Auteur Delen Geplaatst: 7 april 2004 margin:0 is zeker korter... 2 karakters :P anyways, ik heb een kleine aanpassing aan mijn ontwerp gemaakt, het probleem is nu voor mij iig verholpen. blijft leuk die boxen :) tnx all Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen