Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien

[html+css]Ideeën voor layout site

Pagina: 1
Acties:

  • Joopieboy
  • Registratie: Mei 2006
  • Laatst online: 29-12-2020

Joopieboy

No smoke, no poke

Topicstarter
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.

Het leven is te kort om geduld te hebben!


  • Muthas
  • Registratie: December 2005
  • Niet online

Muthas

O+

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

  • Joopieboy
  • Registratie: Mei 2006
  • Laatst online: 29-12-2020

Joopieboy

No smoke, no poke

Topicstarter
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?

Het leven is te kort om geduld te hebben!


  • Muthas
  • Registratie: December 2005
  • Niet online

Muthas

O+

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
  • Registratie: Januari 2002
  • Laatst online: 20-11 10:59
Wellicht dat je dit bedoelt ? -> http://www.alistapart.com/articles/fauxcolumns/

rm -rf ~/.signature


  • Joopieboy
  • Registratie: Mei 2006
  • Laatst online: 29-12-2020

Joopieboy

No smoke, no poke

Topicstarter
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...

Het leven is te kort om geduld te hebben!


  • Muthas
  • Registratie: December 2005
  • Niet online

Muthas

O+

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

  • Joopieboy
  • Registratie: Mei 2006
  • Laatst online: 29-12-2020

Joopieboy

No smoke, no poke

Topicstarter
Fauxcolumns, bedankt, gaan we daar eens naar zoeken. :)

Het leven is te kort om geduld te hebben!


  • MoietyMe
  • Registratie: Juli 2003
  • Laatst online: 26-05 08:10

MoietyMe

zij/haar

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:
;)

  • Joopieboy
  • Registratie: Mei 2006
  • Laatst online: 29-12-2020

Joopieboy

No smoke, no poke

Topicstarter
Sorry ben scheel. :P

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 ]

Het leven is te kort om geduld te hebben!


  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
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.

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


  • disjfa
  • Registratie: April 2001
  • Laatst online: 04-11 11:05

disjfa

be

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.

disjfa - disj·fa (meneer)
disjfa.nl


  • Joopieboy
  • Registratie: Mei 2006
  • Laatst online: 29-12-2020

Joopieboy

No smoke, no poke

Topicstarter
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#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:
1
2
3
4
5
6
7
8
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?

Het leven is te kort om geduld te hebben!


  • disjfa
  • Registratie: April 2001
  • Laatst online: 04-11 11:05

disjfa

be

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.

disjfa - disj·fa (meneer)
disjfa.nl


  • Joopieboy
  • Registratie: Mei 2006
  • Laatst online: 29-12-2020

Joopieboy

No smoke, no poke

Topicstarter
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...

Het leven is te kort om geduld te hebben!


  • bakakaizoku
  • Registratie: Januari 2002
  • Laatst online: 20-11 10:59
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:
1
2
3
4
5
<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]

rm -rf ~/.signature


  • Joopieboy
  • Registratie: Mei 2006
  • Laatst online: 29-12-2020

Joopieboy

No smoke, no poke

Topicstarter
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. :X

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 ]

Het leven is te kort om geduld te hebben!

Pagina: 1