[html+css]Ideeën voor layout site

[Joopieboy]

Ik ben al een tijdje aan het denken voor een nieuwe layout voor mijn site. Zelf maak ik in fotoshop de "layout", die slice ik en ik maak met die stukjes de site met div's en vaste hoogstes.
Nu zijn er zat sites die de hoogte afhankelijk van de inhoud hebben. Nu is dat geen punt, maar, kan je een tekstvak een auto hoogte geven dat die zich aanpast aan de inhoud, breedte is vast, met daarnaast links en rechts een div die een plaatje is en een vaste breedte heeft maar dezelfde hoogte krijgt als het "tekstvak" tussen in.

Ten eerste, is dit mogelijk met html en css? En mocht het mogelijk zijn, hoe kan ik het beste doen, kent er iemand goed leesvoer hiervoor, begrippen die ik in google kan miken edg?

Nogmaals het is gewoon een wild idee en ik hoop dat jullie mij kunnen helpen.

[Muthas]

Als je die links en rechts div nou in een andere div zet en links en rechts vervolgens als hoogte 100% geeft?

[Joopieboy]

Dus een div die 2 div's omgeeft, breedte van die 3 samen, dan de linker en rechter hoogte 100%, de middelste auto hoogte? Of?

[Muthas]

Ja, alleen dan stop je wel de 3 divs erin (dus ook de middelste ).
Volgens mij heet zoiets een wrapper div, wordt ook gebruikt om te centreren.

[ Voor 16% gewijzigd door Muthas op 30-12-2007 19:02 ]

[bakakaizoku]

Wellicht dat je dit bedoelt ? -> http://www.alistapart.com/articles/fauxcolumns/

[Joopieboy]

Mm, ben wat aan het prutten geslagen maar volgens mij begrijp ik het een en ander nog niet helemaal, lukken doet het ook niet, ik krijg de linker en rechter zijbalk helemaal niet te zien. (wel bij vaste hoogte)

Wat de bedoeling is, dat ik een tekstvak heb die de lengte automatisch meekrijgt van de tekst die erin zit, niet moeilijk verder.
Wat wel moeilijk is om die linker en rechter zijbalk de zelfde hoogte te laten geven, want nu staat er niks in dus word ie ook niet weergegeven...

[Muthas]

fauxcolumns ja, dat waren ze! Vergeet wat ik zei, gebruik dat

[Joopieboy]

Fauxcolumns, bedankt, gaan we daar eens naar zoeken.

[MoietyMe]

Joopieboy schreef op zondag 30 december 2007 @ 19:18:
Fauxcolumns, bedankt, gaan we daar eens naar zoeken.

Daar word hier al een linkje naar gegeven:

mattttt schreef op zondag 30 december 2007 @ 19:05:
Wellicht dat je dit bedoelt ? -> http://www.alistapart.com/articles/fauxcolumns/

[Joopieboy]

Sorry ben scheel.

Maar met die "truuk" van die site dat je repeat-y 50% 0; achter de background image gebruikt krijg ik helemaal niks te zien van het menu vak de links en rechtsliggende achtergrond image...

Dus ik krijg nu ook na wat zoekwerk enzo het idee dat wat ik nu wil niet echt zal gaan werken? Beter om vaste maten te gebruiken?

[ Voor 24% gewijzigd door Joopieboy op 31-12-2007 21:24 ]

[RobIII]

Als je nou eens de (relevante!) code die je hebt, of een (uitgeklede!) testcase online zet waar we naar kunnen kijken dan krijg je vast zinnige(re) input.

[disjfa]

Joopieboy schreef op maandag 31 december 2007 @ 21:18:
Maar met die "truuk"

Html schrijven is geen truuk, dat is gewoon html schrijven zoals het hoort. Als je al omwegen loopt te zoeken ga je al mis.

Maar zoals gezegd, code graag.

[Joopieboy]

Sorry dat ik niet de code heb doorgegeven, ben de afgelopen 2 dagen niet helemaal helder geweest... Maar goed, hier komt het alsnog.

Hier schreven ze (wat ik heb begrepen) dat je achter de achtergrond deze code erbij moet zetten: repeat-y 50% 0; voor dat Faux Columns gebeuren.

Als voorbeeld het menu gedeelte:

Cascading Stylesheet:

#links {width: 160px;
    float: left;
    }
#menulinks {background-image: url(layout/menulinks.jpg) repeat-y 50% 0;
    background-repeat: repeat-y;
    width: 20px;
    text-align: center;
    float: left;
    }
#menu {background-image: url(layout/menu.jpg);
    background-repeat: repeat-y;
    width: 160px;
    text-align: center;
    float: left;
    }
#menurechts {background-image: url(layout/menurechts.jpg) repeat-y 50% 0;
    background-repeat: repeat-y;
    width: 20px;
    text-align: center;
    float: left;
    }
#menufooter {background-image: url(layout/menufooter.jpg);
    width: 160px;
    height: 30px;
    float: left;
    }

De site is grofweg in 2 gedeeltjes opgedeelt, links en rechts, in de linkerkant begin je met een vaste achtergrond met vaste maten waaronder het menu komt die variabel is met daaronder de vaste footer van het menu met vaste maten. Het menu zelf heeft een balkje links en een balkje rechts waar verder niks kwa inhoud instaat, alleen een afbeelding die evenhoog moet worden als het middelste stuk, het middelste stuk heeft wel inhoud en krijgt afhankelijk van de inhoud een lengte mee. Maar de balkjes ernaast niet dus...

Volgens mij snap ik het princiepe niet, dus ik heb het nu anders gedaan.

Code van het menu:

Cascading Stylesheet:

#links {width: 160px;
    float: left;
    }
#menu {background-image: url(layout/menu.jpg);
    background-repeat: repeat-y;
    width: 160px;
    text-align: center;
    float: left;
    }
#menufooter {background-image: url(layout/menufooter.jpg);
    width: 160px;
    height: 30px;
    float: left;
    }

En hier de code's van de ul die alleen met het menu te maken heeft:

Cascading Stylesheet:

ul {font-family: Verdana;
    font-size: 14px;
    list-style: none;
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 24px;
    }

Dit werkt weer wel goed, maar volgens mij is dit niet de goede methode?

[disjfa]

Ik denk dat je het faux column verhaal niet gelezen hebt aangezien je de basis daarvan niet eens vat. Ik zou het nog een keer doornemen als ik jouw was. Ik begrijp echt niets van je verhaal verder.

[Joopieboy]

Haha, kan me voorstellen, laat dit topic maar even hangen.

Ik laat nog wel eens wat horen als ik het wel goed snapt maar toch tegen problemen aanloop...

[bakakaizoku]

Zoals disfja al zei, je hebt dat hele verhaal op ALA niet gelezen of geskimmed en dacht dat je het wel begreep.

Wat ze in het code voorbeeld van ALA laten zien, is dat je 1 background image maakt, deze instelt als background image voor een container, en in die container je 3 divjes zet.

bijvoorbeeld, je hebt een image van 500px breed en 1px hoog, met daarin 100px rood, 300px blauw en 100px groen, die sla je dan bijvoorbeeld op als achtergrond_container.gif en geeft deze mee aan de container style:

HTML:

<div style="width: 500px; background-image: url(images/achtergrond_container.gif);">
  <div style="float: left; width: 100px"></div>
  <div style="float: left; width: 300px"><p>Dit is een kolom<br/>met<br/>tekst<br/>waarvan de hoogte<br/>niet staat<br/>vastgesteld.</p></div>
  <div style="float: left: width: 100px"></div>
</div>

Wat je hiermee dus krijgt is dat je 3 kolommen hebt, die even groot "lijken" doordat deze kolommen zijn ingekleurd dmv. de achtergrond image van de container div.

Ik zou zeggen, lees het nog eens door of gebruik de search [search=faux columns]

[Joopieboy]

Ow op die manier, stom stom stom...
Ik zat helemaal fout te denken, ok, mijn engels is al niet te best maar dit slaat alles.

Harstikke bedankt mattttt, ik snap hem nu en het werkt ook goed.


@Mods, sorry voor dit slechte topic van mij en het warrige geblaat van mijn kant.

[ Voor 18% gewijzigd door Joopieboy op 02-01-2008 00:38 ]