Marges van DIV's ten opzichte van elkaar...

[Verwijderd]

Ik ben bezig met een website, waarin ik gebruik maak van 3 div's, een linker- een middel- en een rechterkolom. De twee buitenste kolommen wil ik een vaste waarden geven (dus bijvoorbeeld 150px), en de middelste kolom krijgt een breedte die afhankelijk is van de schermresolutie van de bezoeker.

Tot zover gaat het allemaal goed. Nu heb ik alleen het probleem dat ik niet weet hoe ik aan moet geven dat de linker- en rechterDIV een marge van 10px tot de middelste DIV moeten hebben. Ik ben wat aan het rotzooien geweest met margin-left e.d., maar dat werkt natuurlijk niet naar behoren...

De voorbeeldpagina is te vinden op http://www.fanmeel.nl/pivot/index.php

[André]

Je moet dat puntje uit je link halen

Staat hier nog nuttige info?: http://www.glish.com/css/7.asp

[Verwijderd]

André, bedankt... Absoluut een goede site. Maar dan heb ik nog 1 vraag; wat moet ik instellen om die 3 verschillende kolommen niet aan elkaar vast te laten plakken, maar er een ruimte van zo'n 10 px tussen te laten zitten? De marge is hier nog altijd ten opzichte van de rechterzijkant, en niet ten opzichte van de middelste kolom...

[ Voor 22% gewijzigd door Verwijderd op 07-05-2004 11:54 ]

[André]

Van de middelste kolom maak je de margin-left en margin-right een aantal pixels hoger.

[Apolloc]

Check ook is de 3 onderstaande links voor als je verder geintreseert bent.
vooral de eerste link vondt ik persoonlijk extreem behulpzaam, gebruik de
informatie die ik daar vandaan gehaalt heb zelf veel in me webdesign.

http://www.fu2k.org/alex/css/frames ( supersite ^^ )
http://www.thenoodleincid...als/box_lesson/boxes.html ( grappig )
http://www.byronsbyte.com/bookmarks/#c. ( berg css info links, altijd handig )

[Verwijderd]

@ André: Hopelijk laatste vraag: wanneer je de marges van de middelste kolom veranderd, dan blijf je dus werken met een scherm van 100 procent, waarbij de linker- en rechterkolom altijd zwaar aan de buitenkant blijven, en de middelkolom bij een grote resolutie wel heel erg breed wordt...

Ik ben dus op zoek naar een oplossing, waarbij de breedtes van de 3 kolommen vast staan ( dus bijvoorbeeld 400 voor de middenkolom, en 150 voor beide buitenste kolommen). De middelste kolom moet gecentreerd staan, en de twee buitenste kolommen moeten bij elke resolutie op 10 px van de middelste kolom staan...

Hoop dat jullie me nog kunnen volgen en nog wat tips voor me hebben. Tis al een leerzame dag tot nu toe...

[T-MOB]

zoiets blokkendoos

[Verwijderd]

Niet helemaal... de middelste staat niet gecentreerd, en dat is nou net wat ik mooi vind! Een goed voorbeeld is wel http://www.stijlstek.nl/demo/3colhf.html , maar dan weer net niet... Ik ga weer even aan de slag! later meer...

[T-MOB]

Ow, dan bedoel je mss zoiets: blokkendoos ge-edit

...of zoiets: meer blokjes..

't is me nog niet helemaal duidelijk wat de bedoeling is.

[ Voor 22% gewijzigd door T-MOB op 08-05-2004 00:47 ]

[Verwijderd]

@T-MOB: volgens mij begrijp jij heel goed wat ik bedoel! Super, dankjewel!

Update: heb weer wat verder lopen kloten en heb nu het volgende: http://www.fanmeel.nl/pivot . Ook de middelste kolom heeft nu een vaste width. Was toch iets beter realiseerbaar voor mij.
De basis staat! Bedankt allemaal!

[ Voor 67% gewijzigd door Verwijderd op 08-05-2004 22:48 ]

[Verwijderd]

Toch nog een vraag: is het überhaupt mogelijk een pagina te maken met 3 kolommen, die op vaste afstand van elkaar staan, waarvan de buitenste 2 kolommen een vaste breedte hebben, en de grootte van de middelste DIV afhankelijk is van de grootte van de resolutie?

[T-MOB]

Ja, dat kan:

Dan moet je je linker- en rechterkolom absoluut links en rechts positioneren.

Je hoofdkolom geef je een linker-margin van {breedte-linkerkolom + afstand} en je rechterkolom een margin van {breedte rechterkolom + afstand}....

edit:
En weer een blokkendoos

[ Voor 15% gewijzigd door T-MOB op 12-05-2004 20:44 ]

[Verwijderd]

Misschien domme vraag, maar dan ben je tenminste eindelijk van me af...

Waar moet ik de afstand van col1 tot de linkerkant is dan instellen? Er gebeurt namelijk niets als ik de margin-left instel...

Zo dus:
#col1 {
position: absolute;
top: 0; left: 100;
width: 150px; height: 300px;
background: red;
}

[T-MOB]

Ik heb de laatstgeplaatste "blokkendoos" even van comments voorzien, dan is het mss iets duidelijker wat er allemaal gebeurt.
Wat er misgaat in je laaste post is dat je geen eenheid gebruikt voor left

code:

top: 0; left: 100;

0 behoeft geen eenheid, 0px is hetzelfde als 0em, 0ex, 0bromfietsen. Wanneer er echter meer dan 0 van iets is dan maakt het ook nog uit wat het is. In dit geval dus:

code:

top:0; left: 100px;

[ Voor 3% gewijzigd door T-MOB op 13-05-2004 00:03 ]

[Verwijderd]

HELD! Mijn dank is wederom van onmeetbare grootte ;-)

[Grom]

off-topic (sorry)

@ T-MOB:
Ik heb je blokkendozen zitten bekijken en zie iets waar ik zelf ook 'last' van heb bij een site namelijk dat er in IE er scrollbalk komt die verder geen nut heeft.
Mozilla laat het geheel zonder vertikale scrollbalk zien.

Weet jij hoe dit komt?

[T-MOB]

Urr.. die scrollbalk is default behaviour van IE, dat heeft niets met je pagina te maken...

[PuntPunter]

1. Sorry voor het omhoog schoppen, maar dit was de 'nieuwste' post met hetzelfde als waar ik naar opzoek was..

2. Werkt dit ook op deze manier, cross-browser ?
Ik heb op het moment geen FF, Opera of Safari bij de hand..

HTML:

<html>
  <head>
    <style type="text/css">
    body { padding: 0; }
    #colleft, #colright {
      margin: 0;
      padding: 1em;
      width: 150px;
      background-color: #0000FF;
    }
    #colmiddle {
      padding: 1em;
      margin: 10px 160px 10px 160px;
      background-color: #FF0000;
    }
    #colleft { float: left; }
    #colright { float: right; }
    </style>
  </head>
  <body>
    <div id="colleft">left</div>
    <div id="colright">right</div>
    <div id="colmiddle">middle</div>
  </body>
</html>

Alleen ja of nee is genoeg..

[Verwijderd]

Nee, Firefox geeft het anders weer dan IE.

[ Voor 4% gewijzigd door Verwijderd op 19-04-2006 14:00 ]

[André]

Dit is iets wat je zelf kunt testen, daar hoef je ons niet voor te 'gebruiken'. Ook het omhoog kicken van een oud topic is hier niet nodig.

Webdesign, Markup & Clientside Scripting Policy
Registratievoorwaarden en faq

[ Voor 30% gewijzigd door André op 19-04-2006 14:05 ]