Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

layer probleem

19 antwoorden
  • Hoi, Ik ben bezig een site te maken over mijn pasgeboren meisje. Nu zit ik met een probleem. Als achtergrond gebruik ik een plaatje van een soort bladzijde. Nu heb ik als eerste pagina nu een plaatje van 755px. Voor de tekst van de zwangerschap heb ik een tekening van 1600 px nodig. Om dit in css voor elkaar te krijgen gebruik ik nu een inline style sheet waar ik als background-image het juiste plaatje zet. Nu wil ik graag naar een externe style sheet zodat de site makkelijker te veranderen is indien dat nodig is. Hoe krijg ik twee layers die op dezelfde plaats liggen en maar een van de twee gebruik goed in die stylesheet. Om te zien wat ik bedoel , kun je nu kijken naar http://members.home.nl/tamarawobben/index.html voor de kleine plaatje en http://members.home.nl/tamarawobben/zwangerschap.html voor het grote plaatje. Alvast bedankt voor het meedenken. Roelof
  • beide links geven een 404. http://members.home.nl/r.wobben/ geeft een webspace die niet geactiveerd is... t.
  • sorry, De links moeten zijn: http://members.home.nl/tamarawobben/index.htm http://members.home.nl/tamarawobben/zwangerschap.htm Roelof
  • Je kunt de body van elke pagina een id meegeven. De body van index.htm geef je bijv. #index mee en de body van zwangerschapspagina geef je bijv. #zwanger mee, dus [code:1:4f592f1c36]<body id="zwanger">[/code:1:4f592f1c36](Kan ook een class zijn, dus <body class="zwanger">.) Vervolgens geef je in het stylesheet de kleine background mee aan #index en de grote aan #zwanger, dus in jouw geval [code:1:4f592f1c36]#index #Container background-image: url(pagina_site.gif);[/code:1:4f592f1c36](en hetzelfde voor #zwanger, maar dan met pagina_site2.gif.)
  • Oke, ik snap niet helemaal wat je bedoelt. Ik heb nu een layer container #Container { position:absolute; left:173px; top:168px; height:1558px; width:749px; padding: 20px; background-image: url(pagina-site2.gif); z-index:1; overflow: visible; } Als ik er nu bijvoorbeeld <body id="zwanger" doe en in de css file : #index #container enz. moet ik dan ook de positie in de #index #container doen of gewoon in #container laten.
  • Ik zie een repeterend patroon in het achtergrond. Wellicht dat je het kan opsplitsen in drie delen. - Bovenstuk - Midden (repeterend achtergrond) ([url=http://www.w3schools.com/css/css_background.asp]repeat-y[/url]) - Onderstuk Op die manier kan je de hoogte achterwege laten en scheelt dat weer in het exact afmeten van de tekst en het achtergrondplaatje. Maar dan zit je weer met het probleem dat het middenstuk vloeiend moet overlopen met het onderstuk. Ik denk dat het beter is om de container te centreren i.p.v. deze te plaatsen d.m.v. absolute positionering. Je hebt zelf een 17" beeldscherm?
  • Ik heb gewoon een achtergrondkleur gezet in de body, dus geen repeterend patroon. De andere plaatje van de baby en het kleine menu zijn op dit moment aparte layers die apart gepostioneerd heb. En wat betreft de container centeren. Deze code is gemaakt door Dreamweaver. Hier moet ik dus mee aan het werk om te zorgen dat de layout op alle resolutie's er goed uitziet. Ik heb zelf een 19 inch LCD scherm. Maar kun je eens uitleggen wat er bedoelt met de site opdelen in drie gedeelten ?? Roelof
  • Idd, je moet de afmetingen van de #Container dan voortaan meegeven aan #zwanger #Container. h4xX0r bedoelt dat het niet nodig is om mensen zo'n grote achtergrondafbeelding te laten laden (222KB! Da's 44 seconden met een 56K-modem!). Omdat er een herhalend patroon in zit, kun je net zo goed een klein stukje uitknippen en dat herhalen. Je kunt de afbeelding in stukken verdelen en een groot deel van de afbeelding herhalen. Als je het in drie stukken verdeelt, namelijk bovenkant, middenstuk en onderkant, dan kun je 80% van het middenstuk weglaten, door een klein stuk van het middenstuk te herhalen. Van het middenstuk knip je een horizontaal stuk ter hoogte van bijv. drie kartels en die herhaal je vervolgens met repeat-y, denk aan tiles. Overigens is het ook zo, net als h4xX0r zegt, dat je beter geen gebruik kun maken van absolute positionering. Beter is gebruik maken van de flow van het document. Een voorbeeld: een div wil altijd 100% breed zijn, dus als je een div maakt van 800px breed, wordt elke div daarin 800px breed. En zet je in de source enkele divs onder elkaar, dan staan ze in beeld ook zonder enkele stijlregels precies onder elkaar. Ik zou de HTML als volgt er uit laten zien: [code:1:ace483bae4]<body class="index"> <div id="container"> <div id="logo"> <ul id="submenu"> <li> » <a href="index2.htm">home</a></li> <li> » <a href="contact.htm">contact</a></li> </ul> </div> <div id="hoofdmenu"> <ul> <li> » <a href="zwangerschap.htm">Zwangerschap</a></li> <li> » <a href="bevalling.htm">Bevalling</a></li> <li> » <a href="maand1.htm">1e maand</a></li> <li> » <a href="maand2.htm">2e maand</a></li> </ul> </div> <div id="foto"> <p><img src="tamara.jpg" alt="foto van onze dochter" /></p> <ul> <li>Even voorstellen: bladiebla</li> <li>Geboren : bladiebla</li> <li>Gewicht: bladiebla</li> <li>Lengte : bladiebla</li> </ul> </div> </div> <!-- einde van #container --> </body>[/code:1:ace483bae4]Alles staat zo in #container. Die centreer je m.b.v. http://maxdesign.com.au/presentation/center/ . Vervolgens hoef je verder geen afmetingen of posities te geven aan de divs, behalve een height aan #logo en #container en evt. een height aan #container. In geval van h4xX0r heb je overigens nog een #footer nodig.
  • oke, ik geloof dat ik je bedoeling snap. Alleen ben ik er nog niet achter hoe ik nu de rest van de layers moet declareren in mijn css zodat alles wel op de juiste plaats komt binnen die div. Moet ik dat dan doen via #container # logo of gewoon via #logo ?? En voor het achtergrondplaatje , daar moet ik dus ook drie layers voor maken. De hoofd , binnenstuk en footer ?? Laatste vraag. Is er ook ergens op het internet een soort van cursus die me goed uit kan leggen hoe dit soort zaken werken met layers en positionering ?? Roelof
  • In het topic '[url=http://forum.computertotaal.nl/phpBB/viewtopic.php?t=150696]CSS, HTML en starten met een website[/url]' staan een hoop links naar nuttige informatie. Ook op [url=http://www.communitymx.com/free.cfm]CommunityMX[/url] staan een hoop nuttige artikelen, bijv. de serie 'Introduction to CSS'. Als je een div gewoon als een blok ziet en niet als een layer, en als je probeert het scherm te vullen met die blokjes, door ze met gebruikmaking van hun natuurlijke gedrag in elkaar, naast elkaar of onder elkaar te plaatsen (niet over elkaar heen in lagen!), dan kom je een heel eind. Met floats of beperkt gebruik maken van margins kom je ook een heel eind. Succes! En een prettige jaarwisseling..
  • hoi, Dank je voor de links. Ik "moet" dus de positie relatief maken in plaats van vast. Alleen is het nog toch niet helemaal duidelijk hoe het zit met de groot plaatje, die beter in drie gedeelten verdeeld kan worden. Kun je eens laten zien hoe je dat in het html doet ? En ik dacht dat je via #index #container { background-image : enz.} het juiste plaatje nu op de juiste plaats kon krijgen, als je in de html zette <body id="index>. Alleen lijkt dat niet te werken. Wat is mijn denkfout ?? Roelof
  • Hier: http://forum.computertotaal.nl/phpBB2/viewtopic.php?t=155325 staat: [quote:b85fce2000="snowman2"]Hoi, Ik ben er bijna helemaal uit alleen loop ik tegen een probleem aan. Ikheb een nieuwe pagina gemaakt zie http://members.home.nl/tamarawobben/test.htm Alleen als ik in het voorbeeld scherm kijk van DW, dan lijkt mijn layout goed , Kijk ik in IE 6.0 dan is het logo ineens weg en zie ik de zijkanten niet meer. Wat doe ik fout ?? Roelof[/quote:b85fce2000] en we gaan hier dus gewoon verder. t.
  • oke, wat mij betreft hadden we ook met de andere mogen doorgaan en deze sluiten.
  • Als je een site bouwt, is het beter om je layout te checken in Opera (gratis te downloaden op www.opera.com/download/) of Firefox (www.getfirefox.com), het gebruik van het Dreamweaverscherm of IE geeft een verkeerde indruk. Je kunt bij 'Preferences' instellen dat je met F12 of CRTL+F12 een voorbeeld ziet in een browservenster. Het idee met dat plaatje heb je inmiddels door, zo te zien :) Is door handig knippen van 222KB teruggebracht naar 46KB, een hele verbetering! Je kartelbackground ziet er raar uit, omdat de breedte van #container niet groot genoeg is. Overigens zou ik voet.jpg als background-image zetten van #footer en geen <img> gebruiken. En eigenlijk hoeft dat hoofdmenu ook niet in een div, dat kan gewoon in #logo. Daar kan dat andere menu ook in.
  • dank je voor je compliment betreffende het achtergrondplaatje. Maar ik heb nog geen antwoord op de vraag waarom mijn logo en submenutje niet te zien zijn. Sorry dat ik zoveel vragen stel, maar als de site in Firefox er goed uitziet (behalve het logo) . in IE de achtergrond van mijn menu opeens niet meer te zien is. Heel leerzaam deze ervaring maar ook heel frusterend.
  • Rome is niet in één dag gebouwd? Ik kan je wel vertellen hoe ik de pagina heb nagebouwd, maar daar leer je niet zoveel van. Of, zoals Youp in z'n conference zei, het gaat om de de reis er naartoe. Als je de reis langer maakt, kun je onderweg meer oppikken. Ik zou zoveel mogelijk zaken als position nogwattes proberen te vermijden, dat is vaak helemaal niet nodig. Ook margin is in jouw geval bijna nooit nodig. En verder zou ik stapsgewijs werken, niet alles tegelijk positioneren. Eerst bijv. de container: [code:1:cd461bac9d]#container{ margin-left: auto; margin-right: auto; width: 57em; text-align: left; }[/code:1:cd461bac9d] Daarna de divs binnen de container van boven naar beneden stylen. Eerst logo:[code:1:cd461bac9d] #logo { background-image: url(hoofd.jpg); height: 15em; }[/code:1:cd461bac9d]Dan kijken wat er gebeurt. Vervolgens #foto: [code:1:cd461bac9d]#foto { background-image:url(midden.jpg) ; background-repeat:repeat-y ; }[/code:1:cd461bac9d]En dan kijken wat er gebeurt. Daarna #footer op dezelfde manier als #logo, en weer kijken wat er gebeurt. Dan moet het lukken. Uiteindelijk krijg je misschien dat #foto niet goed aansluit op #logo en #footer. Dat komt volgens mij doordat de inhoud van #foto een margin heeft. De margin van #foto 0 maken zorgt in dat geval dat alle divs op elkaar aansluiten. Na het positioneren van de divs zou ik pas de inhoud stylen (de styling van de menu's was overigens al goed; je kunt ze op hun plaats krijgen door bijv. text-align, of door padding/margin op de ul te zetten).
  • hoi, Ik ben erachter waarom er een rand zit tussen #hoofdmenu en #foto. We hebben het plaatje tussen <p> tags gezet om het te kunnen centreren. Maar de <p> tag zorgt er ook voor dat er een rand onstaat tussen de layers. Morgen maar even puzzelen hoe dat op te lossen.
  • display: inline; of gewoon in een span container knallen. t.
  • Nee, ik heb het niet in een p gezet om te centreren, dat lukt ook zonder die p, ook zonder span of display:inline. Elementen zijn er in eerste instantie om structuur aan te brengen, niet voor de layout. Aan je voorbeeldpagina te zien, wil je álles binnen #foto centreren, niet alleen de foto. Als je (in de stylesheet!) text-align: center op #foto had gezet, dan centreert alles binnen #foto, of het nou in een p staat of niet. CSS maakt zaken als '<p align="center">' overbodig. Als je iets aan de opmaak wil veranderen, verander dat dan in het stylesheet.

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.