CSS plaatje over plaatje drawen

[Four]

Ik ben al even bezig om me layout op orde te krijgen van me site. ik wil een mooi kader om de center pagina.

Zien is begrijpen dus klik vooral hier Met mijn excusses voor de trage upload.

Verder vraag ik me af of ik de tabel welk ik gebruik mischien groter kan maken zodat hij alles binnen de pagina vult. Wellicht dat u hier ook tips over kunt geven. Als ik de tabel op 100% zet komt hij er onder uit. Als ik met exact aantal pixels ga werken ben ik me dynamiek kwijt (resizen window)

Ik zelf dev zelden webpages. Dus mijn excusses voor het niet voldoen aan alle conventies

Bijvoorbaad dank voor jullie hulp

[BasieP]

je site doet het niet (timeout)
zet je je server 's nachts uit? (das niet zo handig als je er een topic naar linkt )

in theorie dan maar:
plaatjes over plaatjes heen kan dmv absoluut positioneren.

Wat je doet is iig een plaatje position: absolute; en wat coordinaten meegeven. Dan zou je hem over een ander plaatje heen kunnen tekenen

verder zijn table tabellen natuurlijk wel een beetje uit de vorige eeuw. ik heb je site dus niet gezien, maar waarschijnlijk kan je hetzelfde berijken met divjes.
Die positioneren ook nog eens wat makkelijker

[Four]

mijn excusses voor de downtime. Me routertje ging weer eens over ze nek Site is weer op.

Positioneren heb ik al gedaan. Ik denk dat ik het zelfs al te veel heb gedaan Ik heb zo ongeveer alles gepositioneerd. Maar heb geen idee hoe ik mijn layout anders voor elkaar moet krijgen. Tips zijn meer als welkom.

[BasieP]

oke, ik zie dat je idd vrij agressief bezig ben geweest met position absolute.

eerst even over die 100% height en width van je table.
dit kan prima, alleen vergeet je dat body en html ook margin's en paddings hebben. Zet deze op 0 en dan zou het goed moeten gaan
tip:
ik begin zelf al mijn sites zo:

Cascading Stylesheet:

* {
  margin: 0;
  padding: 0;
}

verder over die plaatjes:
ik neem aan dat je het hebt over de afgeronde hoekjes van je pagina?

ik doe dit altijd zo:

HTML:

<div id="container">
  <div class="lefttop"></div>
  <div class="leftbottom"></div>
  <div class="righttop"></div>
  <div class="rightbottom"></div>

  ... hier je inhoud van je divje ...

</div>

Cascading Stylesheet:

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

#container {
  position: relative;
  height: 100%;  /* in jouw geval dus */
  border: 1px solid black; /*omdat het kan :o */ 

  padding: 30px;  /*anders komen de afgeronde hoekjes over je tekst heen*/
}

.topleft {
  position: absolute;
  background-image: url(img/lefttop.png); /*hier dus het plaatje dat over je hoekje heen gaat */
  width: 40px;
  height: 40px;
  left: 0;
  top: 0;
}

.topright {
  position: absolute;
  background-image: url(img/lefttop.png); /*hier dus het plaatje dat over je hoekje heen gaat */
  width: 40px;
  height: 40px;
  right: 0;
  top: 0;
}

etc..

---

als je dat wat hierboven staat gebruikt heb je eigenlijk al een werkend voorbeeld. Alleen je menu ontbreekt daar dan dus in.

[ Voor 10% gewijzigd door BasieP op 04-06-2007 10:52 ]

[Four]

Zeer volledig andwoord! Dank je wel! Ik ga het direct proberen.

Het is zo ongeveer gelukt. Zie ook hier


Maar ik heb nog een vraag. Is het mogelijk om in het "midden" waar nu de lipsum text staat een "scroll" optie te maken dmv iframse of zo? Op de huidige manier loopt mijn text er uit, dat vind ik een beetje jammer

[ Voor 70% gewijzigd door Four op 04-06-2007 13:19 ]

[BasieP]

Four schreef op maandag 04 juni 2007 @ 11:14:
Zeer volledig andwoord! Dank je wel! Ik ga het direct proberen.

Het is zo ongeveer gelukt. Zie ook hier


Maar ik heb nog een vraag. Is het mogelijk om in het "midden" waar nu de lipsum text staat een "scroll" optie te maken dmv iframse of zo? Op de huidige manier loopt mijn text er uit, dat vind ik een beetje jammer

ah die ben ik idd vergeten.

in je container class kan je overflow: auto; zetten
dit zou het op moeten lossen

en als je van die horizontale scrollbalk af wilt in IE moet je html en body ook overflow: auto; toevoegen

[ Voor 8% gewijzigd door BasieP op 04-06-2007 14:44 ]

[Four]

die overflow lukt me nog niet. Zou je mischien nog een maal voor me willen kijken?

bvbd

[Fuzzillogic]

BasieP schreef op maandag 04 juni 2007 @ 13:58:
[...]
en als je van die horizontale scrollbalk af wilt in IE moet je html en body ook overflow: auto; toevoegen

Bedoel je niet overflow: hidden;?

On a sidenote: TS, gebruik png voor die afbeeldingen. Jpeg is smerig. Bovendien krijg ik in Opera nog een border van 1px rondom het geheel, wat ook weer scrollbalken oplevert. Finally, ik gok dat je die tabjes netter en makkelijker kunt implementeren met CSS en nette links.

[Four]

woei!

helemaal voor elkaar.

Bedankt voor uwe hulp

[ Voor 90% gewijzigd door Four op 04-06-2007 22:24 ]

[Fuzzillogic]

Mooi. Maar het heeft natuurlijk helemaal volstrekt geen enkel nut om je jpeg-afbeeldingen te converteren naar png...

[Cartman!]

Waarom alles absoluut positioneren? Das echt nergens voor nodig imo.. ik hou zelf altijd aan om alles relatief te doen tenzij het echt niet anders kan en geloof me, dit kan anders Ga eens wat zoeken naar wat tutorials over positionering

btw : <body {overflow: auto;}>...?

[BasieP]

Cartman! schreef op dinsdag 05 juni 2007 @ 16:44:
Waarom alles absoluut positioneren? Das echt nergens voor nodig imo.. ik hou zelf altijd aan om alles relatief te doen tenzij het echt niet anders kan en geloof me, dit kan anders Ga eens wat zoeken naar wat tutorials over positionering

btw : <body {overflow: auto;}>...?

imo kunnen die hoekjes niet anders..
de container kan natuurlijk relatief (zie me voorbeeld)

als jij denkt dat die hoekjes ook relatief kunnen zou ik graag willen weten hoe (let wel, non-obstructing, dus zonder dat er andere dingen opschuiven)

ow en ik ben er trouwens vanuit gegaan dat dit voorbeeld op alle sites met afgeronde hoekjes gebruikt kan worden.
ik ben me bewust van het feit dat in dit specifieke geval, waarbij hij maar 1 blok heeft, wat ook nog eens voledig in beeld is, het veel makkelijker kan.

[ Voor 22% gewijzigd door BasieP op 05-06-2007 16:59 ]