Segmenten in een Container plaatsen

Status
Niet open voor verdere reacties.
D

delanderije

Gebruiker
Lid geworden
14 sep 2010
Berichten
9
Beste Allemaal,

Ik ben hier nu al een eeuw aan het sukkelen hoe ik m'n Photoshop ontwerp ( segmenten/Slices) in een Container kan plaatsen :(
heb vanalles geprobeerd,maar ik krijg het niet voorelkaar .

kan iemand me helpen pleaseeeeeeeeeeeeeeee ??

Groetjes Angelqiue
 
Hoi Angelique,
Kunnen we een hulpeloze drenkeling zomaar laten dobberen? ;)
We weten alleen helemaal niet, welke kant je op wilt zwemmen!
Hoe zien die slices er uit? In welke containers zouden ze moeten komen? Waarom zijn er eigenlijk slices? Wat heb je precies geprobeerd, en wat ging er dan de mist in? Hoe moet de webpagina er uit komen te zien, wat moet er in komen?

Van dat soort dingen, want in het algemeen valt hier weinig over te zeggen als we de bedoeling niet kennen.

Of het zou moeten zijn, dat de manier van Photoshop-slicen wel als makkelijk en handig wordt voorgespiegeld, maar dat dat lang niet altijd het geval is. Vaak krijg je tabellen (nee! die zijn daar niet voor bedoeld!) met onnoemelijk veel vakjes, en soms ook nog tabellen in tabellen om ergens bij te kunnen komen. Met dan weer knoeperende problemen als de tekst er niet in past enzo. Dus of het slicen zo aangeraden moet worden ... :rolleyes:

Maar dat zien we wel als we wat meer weten!

Met vriendelijke groet,
CSShunter
 
Hey CCShunter,

dank je wel dat je me wil helpen :) ik dobber al een eindje rond hahaha
heb speciaal boeken gekocht om dit op te zoeken,maar daar staat natuurlijk niet in wat ik zoek :(

ik heb even een screenshot gemaakt van het hele geheel :)

bovenaan zie je de DIV container in het blauw.

Daaronder ligt het geheel van slices, die ik dus niet in de container krijg :(
Hopelijk zie je wat op deze afbeelding ????
391861201.jpg
 
het lijkt wel of..

Hoi Angelique,

Wat ik op je screenshot zie is volgens mij een container die hooguit 25 px hoog is. daar past je hele slice (afbeelding, jpeg) niet in. het is namelijk niet zo dat een apDiv als container zich automatisch aanpast aan de afbeelding. je zult de afbeelding (slice) moeten aanpassen op de de container die je hebt gemaakt.
Je kunt de maten van de container opzoeken in de properties (eigenschappen) en deze aanpassen naar je afbeelding (lijkt me het meest logisch omdat je container zoals hij nu is niet echt veel aan inhoud kan hebben...:D) overigens is het dan handig om (al is dit vaak een discussie) als breedte maat 800 pix aan te houden.
Vervolgens kun je in de properties je slice toevoegen als achtergrond afbeelding.
volgens mij ben je hier aardig mee op weg, al is het maar een van de vele mogelijkheden om te werken met apdiv's en containers of achtergronden over een gehele pagina.

hieronder 2 links naar (vind ik ) erg handige hulpjes!

http://www.gratiscursus.be/Dreamweaver_CS3/index.htm (vooral vanaf les 9 wordt het mbt je vraag leuk)
http://www.webontwikkelaar.nl/css/cursus/ (erg handig in het algemeen)

ik hoop dat je er wat aan hebt!

groeten, Preatorian
 
Hoeps!
Nou had ik toch gisteravond een aardige brok reactie gegeven (dacht ik), maar kennelijk heb ik na het controleren van de links in het "Voorbeeld van bericht" venster pardoes de browsertab weggeklikt omdat het allemaal klopte.
Zonder eerst de opdracht "Reactie plaatsen" te geven ... alles foetsie dus. :o
Ik ga even reconstrueren!

Toen ik je afbeelding zag, moest ik meteen denken aan deze site: www.tresmode.nl, die soortgelijke ingrediënten qua opmaak en indeling heeft.
Nu is het plaatsen van een (achtergrond-) afbeelding in een <div> op zich geen probleem, zoals Preatorian aangaf hoe dat moet.
Ook geslice'de afbeeldingen zouden in principe op die manier in verschillende, naast/onder elkaar liggende <div>'s kunnen komen. Zodat het samen weer het hele plaatje wordt.

Alleen ben ik ("met aan zekerheid grenzende waarschijnlijkheid") bang, dat daarna pas de problemen gaan komen. Je zit er namelijk mee (dat was bij Tresmode ook het geval), dat een vast formaat achtergrond zich nooit kan aanpassen (meerekken en meekrimpen) met de inhoud aan tekst en afbeeldingen die in de pagina moeten passen. Die zijn eroverheen gedrapeerd (in een bovenliggende laag), en kunnen zo aardig uit beeld wandelen.
Daarbij maakt het geen verschil of de achtergrond nu uit één grote afbeelding bestaat, of uit een serie geslice'de vaste partjes (tenzij ... straks meer). Kijk:

middenstuk.png

Aan de linkerkant een pagina met weinig tekst (of een door de bezoeker klein ingestelde lettergrootte). Aan de rechterkant een langere pagina (of met een groter ingestelde lettergrootte). In de rechter afbeelding zien we dat er opeens meer ruimte in de achtergrond zit tussen het koffiekopje rechtsonder en het rechthoekje daarboven.
Maar om het zover te krijgen was best een klusje! :d
Hoe zo'n klusje opgeknapt kan worden, hebben we hier op het forum staan in een uit het leven gegrepen verhaal:
  • De stapsgewijze opbouw van de Tres-site, met flexibele achtergrond-opmaak, en zo min mogelijk afbeeldingen.
De kern van de zaak is: "Er is een ergens een tussenstuk nodig, dat naar behoefte in de hoogte kan groeien, zonder dat het patroonpapier een gat krijgt of gebroken wordt."
Bij jouw site zal denkelijk dezelfde methode gevolgd moeten worden. Daarbij hangt het er ook van af hoe je je de rest van de pagina gedacht had, zoals bv. hoe het menu er uit moet komen te zien (en hoeveel plaats dat moet gaan innemen).

Zo, nu kan de regenachtige herfst beginnen! ;)

Veel leesplezier, en veel succes!
(bij vragen horen we het wel)

Met vriendelijke groet,
CSShunter
 
preatorian zei:
Hoi Angelique,

Wat ik op je screenshot zie is volgens mij een container die hooguit 25 px hoog is. daar past je hele slice (afbeelding, jpeg) niet in. het is namelijk niet zo dat een apDiv als container zich automatisch aanpast aan de afbeelding. je zult de afbeelding (slice) moeten aanpassen op de de container die je hebt gemaakt.
Je kunt de maten van de container opzoeken in de properties (eigenschappen) en deze aanpassen naar je afbeelding (lijkt me het meest logisch omdat je container zoals hij nu is niet echt veel aan inhoud kan hebben...:D) overigens is het dan handig om (al is dit vaak een discussie) als breedte maat 800 pix aan te houden.
Vervolgens kun je in de properties je slice toevoegen als achtergrond afbeelding.
volgens mij ben je hier aardig mee op weg, al is het maar een van de vele mogelijkheden om te werken met apdiv's en containers of achtergronden over een gehele pagina.

hieronder 2 links naar (vind ik ) erg handige hulpjes!

http://www.gratiscursus.be/Dreamweaver_CS3/index.htm (vooral vanaf les 9 wordt het mbt je vraag leuk)
http://www.webontwikkelaar.nl/css/cursus/ (erg handig in het algemeen)

ik hoop dat je er wat aan hebt!

groeten, Preatorian
Klik om te vergroten...

Beste Preatorian,

Allereerst super bedankt dat je me geholpen hebt :)
ik ben meteen aan de slag gegaan !!!!

de container is groter nu, maar hij wil er nog niet in gaan :(
zo ziet het er nu uit....

391928052.jpg


en dit is de code....

<html>
<head>
<title>Layout 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (Layout 1.psd) -->
<style type="text/css">
<!--

#Tabel_01 {
position:absolute;
left:27px;
top:-26px;
width:1200px;
height:708px;
}

#Layout-1-01 {
position:absolute;
left:0px;
top:0px;
width:1200px;
height:132px;
}

#Layout-1-02 {
position:absolute;
left:0px;
top:132px;
width:306px;
height:576px;
}

#Layout-1-03 {
position:absolute;
left:306px;
top:132px;
width:771px;
height:452px;
}

#Layout-1-04 {
position:absolute;
left:1077px;
top:132px;
width:123px;
height:576px;
}

#Layout-1-05 {
position:absolute;
left:306px;
top:584px;
width:771px;
height:124px;
}
body {
margin: 0px;
padding: 0px;
}
#container {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 1200px;
height: 708px;
}
.Tabel_01 {
text-align: center;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (Layout 1.psd) -->
<div id="container">
<div class="Tabel_01" id="Tabel_01">
<div id="Layout-1-01"> <img src="afbeeldingen/Layout-1_01.jpg" width="1200" height="132" alt=""> </div>
<div id="Layout-1-02"> <img src="afbeeldingen/Layout-1_02.jpg" width="306" height="576" alt=""> </div>
<div id="Layout-1-03"> <img src="afbeeldingen/Layout-1_03.jpg" width="771" height="452" alt=""> </div>
<div id="Layout-1-04"> <img src="afbeeldingen/Layout-1_04.jpg" width="123" height="576" alt=""> </div>
<div id="Layout-1-05"> <img src="afbeeldingen/Layout-1_05.jpg" width="771" height="124" alt=""> </div>
</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

wat doe ik nu verkeerd ..???

gek allemaal want ik heb dit allemaal al eens gedaan, en toen is het me gelukt, ik kan niet meer vinden wat het was :(
deze website heb ik ook zo opdezelfde manier gemaakt :) http://www.delanderije.be

Groetjes Angelique
 
Hoi Angelique,

Geen dank, ik vind het leuk om iets te kunnen betekenen voor iemand. ik ben zelf al vaak een kleine of soms grote stap verder gekomen door dit forum dat ik het alleen maar leuk vind om te doen!

Anyway, mbt je vraag. ik kan inderdaad zien dat je de Container hebt aangepast. Het lijkt echter alleen nog steeds wel of je afbeelding zich niet in de container bevindt, maar ergens in de onderliggende laag (vanaf je screenshot lijkt het te zijn alsof de afbeelding zich bevindt in de pagina zelf, dus achter de Container Div. Daarnaast valt me de witruimte op aan beide zijden van je afbeelding. Ik ben zo vrij geweest om je code even te "lenen" omdat ik hoopte dat ik daar iets uit kon opmaken. Wat ik eruit kon halen is dat er iets niet goed gaat.... al moet ik je ook gelijk zeggen dat ik niet snap wat er niet goed gaat. Mijn vermoeden gaat uit naar de container div..
Ik heb even snel in elkaar gezet hoe ik denk dat je het op kan lossen. wel moet je hierbij in de gaten houden dat mijn voornaamste reden voor mijn werkwijze is dat ik wil dat (vrijwel) iedere browser alle aparte segmenten tot aan tekst aan toe juist weergeeft en er dus geen verschuivingen zijn. Dat betekent dat al mijn div's opgebouwd zijn met een "float, left". Dit is een keuze.
Csshunter gaat hierin nog een stapje verder, hij geeft je een manier om je site bijna "fluid"te maken, erg mooi, en eigenlijk ook de manier om het juist te doen, maar ook best moeilijk voor iemand die misschien wat minder html kennis heeft of css nog niet zo door heeft.( CSShunter, please correct if i'm wrong!) maar eerlijk is eerlijk, csshunter geeft een erg goede beschrijving, en ik raad je aan om die te volgen.
Mijn manier zal ik zo meteen even posten. duurt even 10 minuten, dan heb je de code!

ik hoop dat je er iets aan hebt, groeten, Preatorian
 
Hierbij zoals ik het op zou lossen (let op, ik heb een concessie moeten doen waardoor je ontwerp een slice extra nodig heeft) wat ik met name wil laten zien in onderstaande code is de wijze van opbouwen (alles in de container en alles float)
ik krijg het niet voor elkaar om de index bij te voegen, als je een email adres hebt, dan stuur ik het je wel even toe.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#Container {
position:inherit;
width:1200px;
height:708px;
z-index:1;
text-align: center;
margin-right: auto;
margin-left: auto;
}
#apDiv1 {
position:inherit;
width:1200px;
height:132px;
z-index:1;
float: left;
}
#apDiv2 {
position:inherit;
width:306px;
height:576px;
z-index:1;
float: left;
}
#apDiv3 {
position:inherit;
width:771px;
height:452px;
z-index:1;
float: left;
}
#apDiv4 {
position:inherit;
width:123px;
height:452px;
z-index:1;
float: left;
}
#apDiv5 {
position:inherit;
width:771px;
height:123px;
z-index:1;
float: left;
}
#apDiv6 {
position:inherit;
width:123px;
height:123px;
z-index:1;
float: left;
}
</style>
</head>

<body>
<div id="Container">
<div id="apDiv1">apDiv1 (binnen container)</div>
<div id="apDiv2">apDiv2 (binnen container</div>
<div id="apDiv3">apDiv3 (binnen container)</div>
<div id="apDiv4">apDiv4 (binnen container)</div>
<div id="apDiv5">apDiv5 (binnen container</div>
<div id="apDiv6">apDiv6 (binnen container (concessie t.ov. ontwerp)</div>
</div>
</div>
</div>


</body>
</html>
 
csshunter zei:
Hoeps!
Nou had ik toch gisteravond een aardige brok reactie gegeven (dacht ik), maar kennelijk heb ik na het controleren van de links in het "Voorbeeld van bericht" venster pardoes de browsertab weggeklikt omdat het allemaal klopte.
Zonder eerst de opdracht "Reactie plaatsen" te geven ... alles foetsie dus. :o
Ik ga even reconstrueren!

Toen ik je afbeelding zag, moest ik meteen denken aan deze site: www.tresmode.nl, die soortgelijke ingrediënten qua opmaak en indeling heeft.
Nu is het plaatsen van een (achtergrond-) afbeelding in een <div> op zich geen probleem, zoals Preatorian aangaf hoe dat moet.
Ook geslice'de afbeeldingen zouden in principe op die manier in verschillende, naast/onder elkaar liggende <div>'s kunnen komen. Zodat het samen weer het hele plaatje wordt.

Alleen ben ik ("met aan zekerheid grenzende waarschijnlijkheid") bang, dat daarna pas de problemen gaan komen. Je zit er namelijk mee (dat was bij Tresmode ook het geval), dat een vast formaat achtergrond zich nooit kan aanpassen (meerekken en meekrimpen) met de inhoud aan tekst en afbeeldingen die in de pagina moeten passen. Die zijn eroverheen gedrapeerd (in een bovenliggende laag), en kunnen zo aardig uit beeld wandelen.
Daarbij maakt het geen verschil of de achtergrond nu uit één grote afbeelding bestaat, of uit een serie geslice'de vaste partjes (tenzij ... straks meer). Kijk:

middenstuk.png

Aan de linkerkant een pagina met weinig tekst (of een door de bezoeker klein ingestelde lettergrootte). Aan de rechterkant een langere pagina (of met een groter ingestelde lettergrootte). In de rechter afbeelding zien we dat er opeens meer ruimte in de achtergrond zit tussen het koffiekopje rechtsonder en het rechthoekje daarboven.
Maar om het zover te krijgen was best een klusje! :d
Hoe zo'n klusje opgeknapt kan worden, hebben we hier op het forum staan in een uit het leven gegrepen verhaal:
  • De stapsgewijze opbouw van de Tres-site, met flexibele achtergrond-opmaak, en zo min mogelijk afbeeldingen.
De kern van de zaak is: "Er is een ergens een tussenstuk nodig, dat naar behoefte in de hoogte kan groeien, zonder dat het patroonpapier een gat krijgt of gebroken wordt."
Bij jouw site zal denkelijk dezelfde methode gevolgd moeten worden. Daarbij hangt het er ook van af hoe je je de rest van de pagina gedacht had, zoals bv. hoe het menu er uit moet komen te zien (en hoeveel plaats dat moet gaan innemen).

Zo, nu kan de regenachtige herfst beginnen! ;)

Veel leesplezier, en veel succes!
(bij vragen horen we het wel)

Met vriendelijke groet,
CSShunter
Klik om te vergroten...

Goh een hele boterham zeg :shocked:

het ziet er allemaal schitterend uit wat je gemaakt hebt !!!
ik wil je ook echt bedanken voor je hulp :cool:

ik maak m'n websites in Photoshop en voer ze later door naar dreamweaver.
ook m'n aanpassingen doe ik in Photoshop, teksten enzo ook.
op deze manier worden ze een afbeelding,en heb ik geen last van verschuivingen :)
het middelste gebied pas ik dan altijd aan.

maar ik ga je informatie eens heel goed doornemen, want het klinkt superinteresant !!!!!

Hartelijk bedankt !!!
Groetjes Angelique
 
Hoi Angelique,
ik maak m'n websites in Photoshop (...) teksten enzo ook.
op deze manier worden ze een afbeelding, en heb ik geen last van verschuivingen. :)
Klik om te vergroten...
Juistem! Het zijn dus compleet tekstloze plaatjes-websites, met de links erin ge-image-mapt.
  • Voordeel: er kan niets mis gaan met het formaat van de letters. Het zijn geen letters, het zijn afbeeldingen! :D
Er zijn ook wat nadelen, daar zal ik in een volgende reactie nog wat op ingaan.
Maar nu de lacansaa-indeling, die dus zo moet worden, begrijp ik:

lacansaa-indeling.png

Om te beginnen zou ik even de Main♥Menu naar binnen img-05 schuiven, dan kan daar de image-map op komen (anders moet er ook een stukje imagemap in img-02 komen om de link goed te kunnen bedienen; kan eventueel wel).

Verder zou ik, net als Preatorian, lekker afstappen van een <table>-toestand. Met simpele floats valt het inderdaad goed op te lossen.
Het aantal mensen dat nog op 800x600px surft, zal intussen een héle kleine minderheid zijn (als het 4% is, is het veel, gok ik).
Voor de max. breedte zou daarom ik 980px aanhouden, dan komt het nog mooi op een beeldscherm met een resolutie van 1024x768px. Die maat wordt nog erg veel gebruikt, dus dat is wel zo gebruikersvriendelijk.
Om alles bij grotere resoluties in het midden van het scherm te krijgen, kan je de <body> de breedte van 980px geven, en er dan een {margin: 0 auto;} op loslaten. De "auto" = automatisch verdelen tussen de linker- en de rechterzijkant van wat over is boven de 980px > en daarmee altijd gecentreerd.
Binnen de body kunnen we nu alle images naar links gaan floaten (daar is verder geen extra #container voor nodig). Alleen de #rechterkolom moet naar rechts floaten, dan komt ie mooi op gelijke starthoogte als het middenstuk; zonder nummer 05 naar beneden te jagen.

Hiermee wordt voor de indeling de essentiële CSS:
Code: 
body {
	width: 980px;
	margin: 0 auto;
}
img {
	float: left;
	border: 0;
}
#rechterkolom {
	float: right;
	}
En de html wordt kortweg:
HTML: 
<body>	
   <img src="images/lacansaa-01.png" width="980" height="88" alt="" />
   <img src="images/lacansaa-02.png" width="249" height="469" alt="" />
   <img src="images/lacansaa-03.png" width="628" height="369" alt="" />
   <img id="rechterkolom" src="images/lacansaa-04.png" width="103" height="469" alt="" />
   <img src="images/lacansaa-05.png" width="628" height="100" alt="" />
</body>
That's all, folks! :D

In de praktijk:
Met vriendelijke groet,
CSShunter

PS: als je wilt reageren, kan je gewoon op de blauwe knop [+ Reageer op vraag] links onderaan klikken. Als je het Quote-knopje gebruikt, komen die lappen van mij er nog een keer in te staan (waarom dat knopje is uitgevonden, snap ik niet). Eén keer is wel genoeg, en beter voor het milieu! ;)
 
Laatst bewerkt:
csshunter zei:
Hoi Angelique,

Juistem! Het zijn dus compleet tekstloze plaatjes-websites, met de links erin ge-image-mapt.
  • Voordeel: er kan niets mis gaan met het formaat van de letters. Het zijn geen letters, het zijn afbeeldingen! :D
Er zijn ook wat nadelen, daar zal ik in een volgende reactie nog wat op ingaan.
Maar nu de lacansaa-indeling, die dus zo moet worden, begrijp ik:

lacansaa-indeling.png

Om te beginnen zou ik even de Main♥Menu naar binnen img-05 schuiven, dan kan daar de image-map op komen (anders moet er ook een stukje imagemap in img-02 komen om de link goed te kunnen bedienen; kan eventueel wel).

Verder zou ik, net als Preatorian, lekker afstappen van een <table>-toestand. Met simpele floats valt het inderdaad goed op te lossen.
Het aantal mensen dat nog op 800x600px surft, zal intussen een héle kleine minderheid zijn (als het 4% is, is het veel, gok ik).
Voor de max. breedte zou daarom ik 980px aanhouden, dan komt het nog mooi op een beeldscherm met een resolutie van 1024x768px. Die maat wordt nog erg veel gebruikt, dus dat is wel zo gebruikersvriendelijk.
Om alles bij grotere resoluties in het midden van het scherm te krijgen, kan je de <body> de breedte van 980px geven, en er dan een {margin: 0 auto;} op loslaten. De "auto" = automatisch verdelen tussen de linker- en de rechterzijkant van wat over is boven de 980px > en daarmee altijd gecentreerd.
Binnen de body kunnen we nu alle images naar links gaan floaten (daar is verder geen extra #container voor nodig). Alleen de #rechterkolom moet naar rechts floaten, dan komt ie mooi op gelijke starthoogte als het middenstuk; zonder nummer 05 naar beneden te jagen.

Hiermee wordt voor de indeling de essentiële CSS:
Code: 
body {
	width: 980px;
	margin: 0 auto;
}
img {
	float: left;
	border: 0;
}
#rechterkolom {
	float: right;
	}
En de html wordt kortweg:
HTML: 
<body>	
   <img src="images/lacansaa-01.png" width="980" height="88" alt="" />
   <img src="images/lacansaa-02.png" width="249" height="469" alt="" />
   <img src="images/lacansaa-03.png" width="628" height="369" alt="" />
   <img id="rechterkolom" src="images/lacansaa-04.png" width="103" height="469" alt="" />
   <img src="images/lacansaa-05.png" width="628" height="100" alt="" />
</body>
That's all, folks! :D

In de praktijk:
Met vriendelijke groet,
CSShunter

PS: als je wilt reageren, kan je gewoon op de blauwe knop [+ Reageer op vraag] links onderaan klikken. Als je het Quote-knopje gebruikt, komen die lappen van mij er nog een keer in te staan (waarom dat knopje is uitgevonden, snap ik niet). Eén keer is wel genoeg, en beter voor het milieu! ;)
Klik om te vergroten...

Beste CSSHunter,

Jeetje tenopzichte van jullie ben ik toch wel een echte amateur hahaha
ik heb dreamweaver lessen gevolgd, maar na deel 3 (Floats) werd m'n lesgever ziek :(
ik bewonder het enorm dat jullie me verder willen helpen :)
ongelofelijk super !!!!!!!

Dus het komt er nu opneer, in mijn taal hahaha dat ik nu van bv alle delen die ik gesliced heb allemaal apparte Floats te maken ??
Daar een klasse op te zetten om ze zo mooi tegen elkaar te laten schuiven.
ik ga eens flink aan de slag !!!
Hartelijk bedankt !!!!
ik kan nog veel leren van jullie :thumb:
Groetjes Angelique
 
csshunter zei:
Hoeps!
Nou had ik toch gisteravond een aardige brok reactie gegeven (dacht ik), maar kennelijk heb ik na het controleren van de links in het "Voorbeeld van bericht" venster pardoes de browsertab weggeklikt omdat het allemaal klopte.
Zonder eerst de opdracht "Reactie plaatsen" te geven ... alles foetsie dus. :o
Ik ga even reconstrueren!

Toen ik je afbeelding zag, moest ik meteen denken aan deze site: www.tresmode.nl, die soortgelijke ingrediënten qua opmaak en indeling heeft.
Nu is het plaatsen van een (achtergrond-) afbeelding in een <div> op zich geen probleem, zoals Preatorian aangaf hoe dat moet.
Ook geslice'de afbeeldingen zouden in principe op die manier in verschillende, naast/onder elkaar liggende <div>'s kunnen komen. Zodat het samen weer het hele plaatje wordt.

Alleen ben ik ("met aan zekerheid grenzende waarschijnlijkheid") bang, dat daarna pas de problemen gaan komen. Je zit er namelijk mee (dat was bij Tresmode ook het geval), dat een vast formaat achtergrond zich nooit kan aanpassen (meerekken en meekrimpen) met de inhoud aan tekst en afbeeldingen die in de pagina moeten passen. Die zijn eroverheen gedrapeerd (in een bovenliggende laag), en kunnen zo aardig uit beeld wandelen.
Daarbij maakt het geen verschil of de achtergrond nu uit één grote afbeelding bestaat, of uit een serie geslice'de vaste partjes (tenzij ... straks meer). Kijk:

middenstuk.png

Aan de linkerkant een pagina met weinig tekst (of een door de bezoeker klein ingestelde lettergrootte). Aan de rechterkant een langere pagina (of met een groter ingestelde lettergrootte). In de rechter afbeelding zien we dat er opeens meer ruimte in de achtergrond zit tussen het koffiekopje rechtsonder en het rechthoekje daarboven.
Maar om het zover te krijgen was best een klusje! :d
Hoe zo'n klusje opgeknapt kan worden, hebben we hier op het forum staan in een uit het leven gegrepen verhaal:
  • De stapsgewijze opbouw van de Tres-site, met flexibele achtergrond-opmaak, en zo min mogelijk afbeeldingen.
De kern van de zaak is: "Er is een ergens een tussenstuk nodig, dat naar behoefte in de hoogte kan groeien, zonder dat het patroonpapier een gat krijgt of gebroken wordt."
Bij jouw site zal denkelijk dezelfde methode gevolgd moeten worden. Daarbij hangt het er ook van af hoe je je de rest van de pagina gedacht had, zoals bv. hoe het menu er uit moet komen te zien (en hoeveel plaats dat moet gaan innemen).

Zo, nu kan de regenachtige herfst beginnen! ;)

Veel leesplezier, en veel succes!
(bij vragen horen we het wel)

Met vriendelijke groet,
CSShunter
Klik om te vergroten...

Beste CssHunter,

ik had nog een vraagje voor je:o
Hoe heb je die superdepup leuke foto show gemaakt in deze website ???
is dit een programma ?
Groetjes Angelique
PS.Prachtige website !!!!!:love:
 
csshunter zei:
Hoi Angelique,

Juistem! Het zijn dus compleet tekstloze plaatjes-websites, met de links erin ge-image-mapt.
  • Voordeel: er kan niets mis gaan met het formaat van de letters. Het zijn geen letters, het zijn afbeeldingen! :D
Er zijn ook wat nadelen, daar zal ik in een volgende reactie nog wat op ingaan.
Maar nu de lacansaa-indeling, die dus zo moet worden, begrijp ik:

lacansaa-indeling.png

Om te beginnen zou ik even de Main♥Menu naar binnen img-05 schuiven, dan kan daar de image-map op komen (anders moet er ook een stukje imagemap in img-02 komen om de link goed te kunnen bedienen; kan eventueel wel).

Verder zou ik, net als Preatorian, lekker afstappen van een <table>-toestand. Met simpele floats valt het inderdaad goed op te lossen.
Het aantal mensen dat nog op 800x600px surft, zal intussen een héle kleine minderheid zijn (als het 4% is, is het veel, gok ik).
Voor de max. breedte zou daarom ik 980px aanhouden, dan komt het nog mooi op een beeldscherm met een resolutie van 1024x768px. Die maat wordt nog erg veel gebruikt, dus dat is wel zo gebruikersvriendelijk.
Om alles bij grotere resoluties in het midden van het scherm te krijgen, kan je de <body> de breedte van 980px geven, en er dan een {margin: 0 auto;} op loslaten. De "auto" = automatisch verdelen tussen de linker- en de rechterzijkant van wat over is boven de 980px > en daarmee altijd gecentreerd.
Binnen de body kunnen we nu alle images naar links gaan floaten (daar is verder geen extra #container voor nodig). Alleen de #rechterkolom moet naar rechts floaten, dan komt ie mooi op gelijke starthoogte als het middenstuk; zonder nummer 05 naar beneden te jagen.

Hiermee wordt voor de indeling de essentiële CSS:
Code: 
body {
	width: 980px;
	margin: 0 auto;
}
img {
	float: left;
	border: 0;
}
#rechterkolom {
	float: right;
	}
En de html wordt kortweg:
HTML: 
<body>	
   <img src="images/lacansaa-01.png" width="980" height="88" alt="" />
   <img src="images/lacansaa-02.png" width="249" height="469" alt="" />
   <img src="images/lacansaa-03.png" width="628" height="369" alt="" />
   <img id="rechterkolom" src="images/lacansaa-04.png" width="103" height="469" alt="" />
   <img src="images/lacansaa-05.png" width="628" height="100" alt="" />
</body>
That's all, folks! :D

In de praktijk:
Met vriendelijke groet,
CSShunter

PS: als je wilt reageren, kan je gewoon op de blauwe knop [+ Reageer op vraag] links onderaan klikken. Als je het Quote-knopje gebruikt, komen die lappen van mij er nog een keer in te staan (waarom dat knopje is uitgevonden, snap ik niet). Eén keer is wel genoeg, en beter voor het milieu! ;)
Klik om te vergroten...

Sorry CssHunter :o nu klik ik op het goede knopje om je vraag te beantwoorden :cool:

ik heb alles wel 3 keer gelezen,maar ik ben er niet veel wijzer van geworden :(
er staan verschillende mogelijk heden door elkaar, wat best verwarrend is voor mij.

ik wil de tabellen afschaffen, en ales opnieuw opbouwen met Floats.....
Deze les had ik nog niet helemaal klaar :(
Dus nu wil ik gaan beginnen,
Ik maak floats aan, kan ik dan het beste de afbeeldingen als achtergrond afbeelding in voegen of gewoon als Afbeeliding ??
Ik maak de Css op de afmetingen van de afbeelding.

Hopelijk is dit een goed idee :)

Groetjes Angelique
 
Hoi Angelique,
We doen ze maar even in volgorde.

Bij nummer #11
Dus het komt er nu op neer, in mijn taal hahaha dat ik nu van bv alle delen die ik gesliced heb allemaal apparte Floats te maken ??
Daar een klasse op te zetten om ze zo mooi tegen elkaar te laten schuiven.
Klik om te vergroten...
Ja, dat is correct. Maar als je (via een css-regel) alles tegelijk naar links laat floaten, heb je niet voor alles een aparte class nodig om ze te laten aanschuiven. Kijk, met deze instructie worden alle images in de pagina naar links gefloat:
Code: 
img {
	float: left;
	border: 0;
}
Alleen voor het ene deel dat naar rechts moet, is dan een uitzondering nodig. Daarvoor heb ik bij de html van img-04 een id="rechterkolom" toegevoegd. Een ID is een "persoonlijke IDentificatie", dus die geldt alleen maar voor dat ene element. In de css geef je dan de regel dat alleen het element met dat id (dat is dus img-04) naar rechts moet floaten (het # in de css betekent dat het een id is):
Code: 
#rechterkolom {
	float: right;
}
Nu is het met css zo, dat het 't "waterval-principe" volgt. Alles wat hogerop geregeld is (algemene stijlregels) stroomt door naar wat lager ligt. Alle images krijgen dus de bui van de {float:left} over zich heen. Behalve nummer img-04, die hebben we nu een parapluutje gegeven waardoor deze niet nat wordt: zijn eigen id. Want de voorrangsregel is, dat wat specifieker is, voorrang krijgt.
In ons geval is img-04 (door zijn eigen id) specifieker, dus die volgt de css-opdracht op die aan zijn id verbonden is, en trekt zich niets aan van de algemene instructie voor zover deze afwijkt. Over borders wordt bv. via de id="rechterkolom" niets speciaal in de css geregeld, dus ook de border van img-04 volgt de eerder gegeven algemene regel: géén border.

Terzijde
Met css zijn er vaak verschillende mogelijkheden om op hetzelfde uit te komen. Je zou ook dit kunnen doen:
Code: 
.floatL {
   float: left;
}
.floatR {
   float: right;
}
Dan moet je alle images die naar links moeten drijven in de html de class="floatL" geven, en alle images die naar rechts moeten drijven, de class="floatR".
Images die geen class met een float hebben gekregen, komen dan gewoon in de regel zelf te staan.
Maar in ons geval moeten 4 van de 5 images naar links floaten, dus dat heb ik maar als algemene regel ingesteld. Dan hoeven die 4 images geen class="floatL" te krijgen, dat spaart weer code in de html.
De "fout" dat nu ook img-04 naar links drijft, is gecorrigeerd door img-04 zijn id te geven met zijn afwijking naar rechts.

Dat was nummertje #11. :)
 
Bij nummer #12
Hoe heb je die superdepup leuke foto show gemaakt in deze website ??? (www.tresmode.nl)
is dit een programma ?
Klik om te vergroten...
Het foto-carrousel is niet echt een los programma, maar bestaat uit een serie instructies die in de computertaal javascript worden gegeven. Dat javascript ("js") moet je zelf schrijven, of ergens plukken van internet.
  • Het is een combinatie van logica ("als dit het geval is, doe dan dat..." e.d.) met html ("zoek het element op dat het id='...' heeft" e.d.) en css ("maak de stijl van dat element: een paars randje").
    In javascript is het ook mogelijk om de factor "tijd" er in te brengen (dat zit niet in html of css), dus je kan bv. een wachttijd invoeren voordat de volgende dia komt. Voor de overvloeiers is daar ook gebruik van gemaakt: "wacht .. milliseconden, en geef dan de transparantie-eigenschap van de foto 1% minder" - door die instructie te laten herhalen, loopt de foto op van 0% (helemaal transparant) naar 100% (helemaal zichtbaar).
Het script voor het fotocarrousel van tresmode komt hier vandaan:
Hoe zoiets in de praktijk toegepast kan worden, staat aangegeven in het begin van het genoemde onderwerp in dit forum (want het begon met het carrousel, en toen kwamen we terecht bij het slicen!):
Ook al zo'n gezellig verhaal, als ik 't weer eens doorlees: dit forum geeft toch heel veel pret! :d

PS. Prachtige website !!!!! :love:
Klik om te vergroten...
Eens! IvoBookish had een prachtig ontwerp gemaakt, met schitterende afbeeldingen en veel oog voor detail. Het was puur plezier om bij te dragen aan de technische realisatie, zodat de site ging doen wat van 'm ('r?) verwacht werd.

Dat was bij nummertje #12.

Met vriendelijke groet,
CSShunter
 
Beste CssHunter,

Super bedankt voor de oplossing !!!!!
ik ben er volop aan bezig om alles te maken zoals je beschrijft :)

Moet dit alles dan ook in een container of niet ???
Want hierboven beschrijft Preatorian een gelijkaardige code maar dan met container.

Wat voor jullie kinderspel is, is voor mij best moeilijk :o
Ik doe echt m'n best om alles te begrijpen,en 1000x na te lezen hahaha

De eerste 2 lessen van dreamweaver waren lessen die ik eigenlijk al kende :(
nu kwam in de derde les Floats, wat ik echt wilde leren, toen m'n juf ziek werd .
Dus wat jullie allemaal bedoelen met Fluid enz enz is voor mij moeilijk te vertalen wat het allemaal betekend.
 
preatorian zei:
Hoi Angelique,

Geen dank, ik vind het leuk om iets te kunnen betekenen voor iemand. ik ben zelf al vaak een kleine of soms grote stap verder gekomen door dit forum dat ik het alleen maar leuk vind om te doen!

Anyway, mbt je vraag. ik kan inderdaad zien dat je de Container hebt aangepast. Het lijkt echter alleen nog steeds wel of je afbeelding zich niet in de container bevindt, maar ergens in de onderliggende laag (vanaf je screenshot lijkt het te zijn alsof de afbeelding zich bevindt in de pagina zelf, dus achter de Container Div. Daarnaast valt me de witruimte op aan beide zijden van je afbeelding. Ik ben zo vrij geweest om je code even te "lenen" omdat ik hoopte dat ik daar iets uit kon opmaken. Wat ik eruit kon halen is dat er iets niet goed gaat.... al moet ik je ook gelijk zeggen dat ik niet snap wat er niet goed gaat. Mijn vermoeden gaat uit naar de container div..
Ik heb even snel in elkaar gezet hoe ik denk dat je het op kan lossen. wel moet je hierbij in de gaten houden dat mijn voornaamste reden voor mijn werkwijze is dat ik wil dat (vrijwel) iedere browser alle aparte segmenten tot aan tekst aan toe juist weergeeft en er dus geen verschuivingen zijn. Dat betekent dat al mijn div's opgebouwd zijn met een "float, left". Dit is een keuze.
Csshunter gaat hierin nog een stapje verder, hij geeft je een manier om je site bijna "fluid"te maken, erg mooi, en eigenlijk ook de manier om het juist te doen, maar ook best moeilijk voor iemand die misschien wat minder html kennis heeft of css nog niet zo door heeft.( CSShunter, please correct if i'm wrong!) maar eerlijk is eerlijk, csshunter geeft een erg goede beschrijving, en ik raad je aan om die te volgen.
Mijn manier zal ik zo meteen even posten. duurt even 10 minuten, dan heb je de code!

ik hoop dat je er iets aan hebt, groeten, Preatorian
Klik om te vergroten...

Beste Preatorian,

Hartelijk bedankt voor deze code :-)
ik ben volop aan het puzzelen met de informatie van u en CssHunter :-)
Vind het vooral interesant hoe goed jullie Css kennen, ik wil ook graag weten hoe jullie dat nu allemaal doen !!!
Dus ik ga de codes bestuderen, want ik denk wel dat je er veel mee bezig moet zijn om er makkelijker in te worden .
m'n email adres is cattery@delanderije.be

Groetjes Angelique
 
... en dan nu bij nummer #13:
er staan verschillende mogelijk heden door elkaar, wat best verwarrend is voor mij.
Klik om te vergroten...
Eh, ja, dat zit zo.
  • In de maten die jij had opgegeven, was de totale breedte: 1200px.
  • Mijn suggestie was: zet de breedte op 980px (dan prima geschikt voor resolutie 1024x768px).
  • De breedtes van de onderdelen, en ook de hoogtes daarvan, gaan dan naar verhouding kleiner worden.
  • Die op schaal verkleinde maten heb ik aangehouden in mijn testpagina: zowel in de code als bij de gebruikte images.
  • Voor het gemak had ik jouw screenshot gebruikt voor het maken van de losse images, en daarin stonden bij mij nog (in het zwart) de grote maten. De echte door mij gebruikte maten zijn die in het rood en blauw.
  • Als je gaat voor de 1200px totale breedte, moet je dus de zwarte maten gebruiken (en mijn css voor de bodybreedte en mijn html voor de afbeeldingen-width's en -height's daarop aanpassen.
  • Als je gaat voor de 980px totale breedte, hoeft mijn code niet aangepast te worden (maar moeten wel de images kleiner getekend worden, in de met rood/blauw aangegeven afmetingen).
Welke van de twee mogelijkheden je neemt, wist ik niet, dus maar alletwee vermeld.

ik wil de tabellen afschaffen, en alles opnieuw opbouwen met Floats.....
Klik om te vergroten...
Niets dan lof! :thumb:

Dus nu wil ik gaan beginnen,
Ik maak floats aan, kan ik dan het beste de afbeeldingen als achtergrond afbeelding invoegen of gewoon als Afbeelding ??
Klik om te vergroten...
Het zou (alweer) als achtergrond-images of als voorgrond-images kunnen. Maar ik zou voor de voorgrond-images (gewoon als afbeelding) gaan:
  • dan heb je geen (extra) containers nodig om die achtergrond-afbeeldingen in te hangen,
  • en dan is het ook veel makkelijker om waar je links wilt hebben, die met een image-map aan te geven,
  • want een image-map op een achtergrond-afbeelding gaat niet 1-2-3, een image-map zit vast aan ... een image op de voorgrond.

Ik maak de Css op de afmetingen van de afbeelding.
Hopelijk is dit een goed idee :)
Klik om te vergroten...
Ehm, als de afmetingen van de (voorgrond-)images in de html staan, hoeven ze helemaal niet in de css te komen. In de css hoeft alleen de totale breedte, om de <body> te centreren bij grote beeldschermen.

Maar heb je al eens geprobeerd wat er gebeurt, als je in Dreamweaver:
  • een nieuwe lege pagina aanmaakt,
  • naar code-view gaat,
  • alles wat daar staat wegwist, en
  • alles van mijn broncode ervoor in de plaats zet?
  • d.w.z. met de aangepaste paden/namen naar de vindplaats van jouw images?
  • opslaan en kijken of het werkt!
Volgens mij (maar wie ben ik?!) is het namelijk véél eenvoudiger om rechtstreeks in de broncode te werken (zeker bij deze eenvoudige pagina), dan om door al die pop-uppende Dreamweaver eigenschappen-instel-venstertjes heen te laveren.
In de hoop dat je alle opties op de goede manier aanklikt, en dat je niet verplicht wordt om dingen op te geven die helemaal niet nodig zijn. ;)
Dan ben je eigenlijk meer bezig met de Dreamweaver-bediening dan met het even snel maken van de dingen die je wilt.
Want al met al gaat het om 10 regeltjes css en 10 regeltjes html voor de body - niet eens de moeite om Dreamweaver voor op te starten: Kladblok gaat sneller!

Met vriendelijke groet,
CSShunter

PS: ken je deze? www.web-garden.be/cursus-html/cursus-html
 
Hoi-hoi,
We zijn aan het kruisposten, zie ik! :)

Dus ik ga de codes bestuderen, want ik denk wel dat je er veel mee bezig moet zijn om er makkelijker in te worden.
Klik om te vergroten...
Klopt helemaal: in het begin van het bezig zijn met css komt er ontzettend veel tegelijk op je af, en dat is best lastig. Dat had ik ook in het begin. Maar gaandeweg ga je dingen "vanzelf" toepassen, en wordt het spannend wat er allemaal nog meer kan.

De #container van Praetorian kan inderdaad ook, maar hoeft niet perse. Als je aan de body de goede breedte opgeeft en de {margin: 0 auto;}, hoeft dat niet voor een container binnen de body opgegeven te worden.
Nog een paar opmerkingen:
  • {position: inherit;} hoef je er niet bij te zetten, want wat er ge-inherit wordt is de positie van het bovenliggende element: dat is voor de #container de <body>. Die positie zit standaard goed, en wordt ook standaard ge-erfd.
  • Ook de {position: inherit;} van de #apDiv1 enz. hoeft er niet bij, want die wordt ge-erfd van de #container, die ... enz.; dat gaat dus ook automatisch goed.
  • De {text-align: center;} voor de #container hoeft niet, want alle images zitten stuik tegen elkaar aan (door hun floats) en er valt niets te centreren.
  • De #container zou ik nooit een exacte hoogte opgeven. Als een <div> een breedte heeft, komt de hoogte altijd goed, en past zich aan aan wat er in zit.
    Alleen als je niet wilt dat iets binnen de #container groter dan een bepaalde hoogte wordt, zet je de hoogte van de container erbij. Om te vermijden dat wat er niet in past, dan onzichtbaar en onbereikbaar wordt, moet er wel bv. een {overflow: auto;} bij. D.w.z.: als de inhoud in hoogte te groot is, komt er bij dat element automatisch een eigen verticale scrollbar bij.
  • De {z-index: 1;} gaat over de stapeling van laagjes. In ons geval hoeft er niets bovenop een andere afbeelding te komen, dus dit is overbodig. De algemene achtergrond-figuur in de body komt er altijd automatisch onder te liggen.
  • De #apDiv's hoeven er in mijn modelletje niet eens omheen, want daarin worden de images direct zelf gefloat.
  • Terzijde: Dreamweaver gebruikt de term apDiv voor <div>'s met een absolute positie. Dat is hier gelukkig niet het geval (alles kan relatief), want die ap's brengen meestal meer schade aan dan dat ze handig zijn. Bij #apDiv's moet je precies weten wat ze doen, anders krijg je voordat je het weet een vaste positie ten opzichte van de linkerbovenhoek van het scherm > en krijg je bv. je pagina nooit meer goed gecentreerd bij een andere resolutie dan waarop je je pagina ontworpen hebt. Brr!
Succes!
Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan