Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

work in progress: nieuwe website (titel gewijzigd)

24 antwoorden
  • Beste forumleden, Ik ben momenteel bezig met een nieuw webdesignproject. Ik loop hier tegen een conflict aan. zie voorbeeld: (op dit moment is er nog alleen een indexpagina) [url=www.planetdust.nl/joep]linkje[/url] als je de site in beiden browsers bekijkt zie je direct waar t probleem zit. Ik weet bijna zeker dat t aan de box model interpretatie ligt. ik heb alleen geen idee hoe ik er deze keer een goede oplossing aan moet bieden. iemand een suggestie? (het betreft dus de verschuiving van de middelste 2 boxes) bedankt voor evt suggesties :)
  • voor alle duidelijkheid: mijn css [code:1:81f08425a8] #holder{ width: 750px; margin-left: auto; margin-right: auto; position: relative; background-color: #FFFFFF; border-left-color: #FFFFFF; border-left-style: solid; border-left-width: 3px; border-right-color: #FFFFFF; border-right-style: solid; border-right-width: 3px; } #logo{ background-image: url(../images/toplogo.gif); width: 478px; height: 149px; } #topcar{ background-image: url(../images/top_car1.jpg); width: 269px; height: 149px; position: absolute; top: 0px; right: 0px; } body { background-color: #999999; } #subnav{ width: 750px; height: 30px; margin-top: 3px; background-color: #830326; } #nav_home{ width: 150px; height: 29px; background-color: #4c53ae; margin-top: 3px; border-bottom-color: #FFFFFF; border-bottom-style: solid; border-bottom-width: 1px; padding-left: 10px; line-height: 20pt; } #nav_maintenance{ width: 150px; height: 29px; background-color: #891031; border-bottom-color: #FFFFFF; border-bottom-style: solid; border-bottom-width: 1px; padding-left: 10px; line-height: 20pt; } #nav_occasions{ background-color: #9a304c; height: 29px; width: 150px; border-bottom-color: #FFFFFF; border-bottom-style: solid; border-bottom-width: 1px; padding-left: 10px; line-height: 20pt; } #nav_productverkoop{ background-color: #6d6d6d; width: 150px; height: 30px; padding-left: 10px; line-height: 20pt; } #recon{ background-image: url(../images/reconditioning_vlak.jpg); left: 160px; top: 182px; width: 315px; height: 121px; position: absolute; margin-right: 3px; margin-left: 3px; } #contact{ background-image: url(../images/contact_vlak.jpg); width: 269px; height: 121px; position: absolute; top: 182px; left: 481px; } #content{ width: 550px; margin-top: 3px; padding-left: 163px; padding-right: 35px; padding-top: 10px; text-align: justify; } #holder img { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } p { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 100%; } html { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color: #011150; } #content a { text-decoration: underline; color: #820024; font-weight: bold; } h1 { font-size: 130%; } .nav_link { color: #FFFFFF; text-decoration: none; font-size: 125%; font-weight: bold; } [/code:1:81f08425a8]
  • voeg toe aan #recon en #contact: margin-top: 3px; Je hebt wel een beetje last van diveritis moet ik zeggen. Die links kan je beter in een lijstje (ul, li) plaatsen. Divs zijn bedoeld om de verschillende onderdelen van je pagina weer te geven. Een menu is één onderdeel.
  • heel ff snel antwoord (kom er nog op terug, heb nu even haast). over het menu... ik wilde het eerst in een list doen zoals bij deze site van mijn hand: [url=www.kids-profi-portrait.com]linkje[/url] echter ik wist even niet zo snel hoe ik het moest oplossen omdat ik per link een andere kleur gebruik. in css kan ik wel een background color aan een list item meegeven.. maar weet niet of dat een goeie oplossing is.. (dus per list item een andere class) ik kom er in elk geval nog op terug. dank voor je reactie :)
  • [quote:03a70b7d94="D'acide"] in css kan ik wel een background color aan een list item meegeven.. maar weet niet of dat een goeie oplossing is.. (dus per list item een andere class) [/quote:03a70b7d94] dit is idd een goeie oplossing. In mijn ogen beter dan wat je nu hebt.
  • [quote:e63b15977b="marientje"]voeg toe aan #recon en #contact: margin-top: 3px; [/quote:e63b15977b] helaas, het toevoegen van een margin top heeft geen gewenst effect. ik ga nog maar eens verder zoeken op het web naar een andere oplossing.. misschien dat jij of een andere forumlid nog een suggestie hebben?
  • das raar. Met FF's Webdeveloper krijg ik t wel goed.
  • Nou in IE heeft het allemaal het gewenste effect. alleen mozilla werkt niet mee helaas.
  • Het menu positioneer je m.b.v. margins, maar die twee images ernaast m.b.v. relatieve positionering t.o.v. de parent. Waarom gebruik je twee manieren, terwijl je wel hetzelde resultaat wil bereiken (namelijk een bepaalde afstand vanaf die balk)? En idd dat menu zou een list moeten zijn.
  • dat menu probleem kan ik fiksen. Staat in de bovenste regionen van mijn to-do list. echter, het andere probleem blijft een beetje onduidelijk voor me. ik ga nu eerst het menu maken middels een list. dan heb ik dat tenminste gehad. Kan ik daarna mijn tijd besteden aan het positioneer probleem.
  • hmm, menu maken vanuit list is geen probleem. Het menu er op de zelfde manier eruit laten zien als hoe ik het eerst had is wel een probleem voor mij. ik moet van elke list item een andere class maken. dus als voorbeeld. het eerste menu item is de link "Home". ik moet dus een class maken waardoor deze list item 150px X 30px wordt. Tevens moet deze list item een bepaalde kleur krijgen. voorbeeld HTML [code:1:728c0161fa] <div id="nav"> <ul> <li class="li_home"><a href="index.php"> Home</a></li> <li><a href="maintenance.php">Maintenance</a></li> <li><a href="occasions.php">Occasions</a></li> <li><a href="productverkoop.php">Productverkoop</a></li> </ul> </div> [/code:1:728c0161fa] relevante css [code:1:728c0161fa] #nav{ width: 150px; position: relative; } #holder #nav ul { list-style-type: none; text-indent: -30px; } .li_home { background-color: #006600; height: 30px; width: 150px; } [/code:1:728c0161fa] dit levert absoluut niet hetgeen op wat ik wil. iemand toevallig een goeie resource waar ik meer info over deze kwestie kan vinden?
  • ik zit nu verder te denken. moet ik soms ipv de <li> elke link apart aanpakken. iemand een voorzetje?
  • [url=http://css.maxdesign.com.au/listutorial/]Listutorial[/url]? Met die kleurtjes betekent het denk ik idd dat elk item een aparte class zou moeten hebben.
  • heey boelie. dat is een interessante resource. dank je wel. was er inmiddels ook achtergekomen dat de taminglist van alistapart ook hierop in gaat. vind jouw link echter wat duidelijker.ga er straks of dit weekend direct mee aan de slag. dank.
  • Zo, ik heb weer tijd gevonden om verder te gaan met de site. ik heb inmiddels een rollover menu mbv css. (dank voor je link boelie). ik hoef nu slechts enkele classes te maken voor de diverse kleuren. Dit staat op de to-do list. wat ik veel belangrijker vind is het algemene positioning plaatje. ik loop hier al langer mee te sukkelen ondanks het feit dat ik over diverse boeken en online resources beschik. Het is me kort samengevat niet helemaal duidelijk wanneer ik bepaalde divs op een bepaalde manier moet positioneren. in het volgende bericht dat ik zometeen post zal ik een schematische afbeelding van mijn site plaatsen. Wellicht dat ik er dan met behulp van enige steun van jullie eindelijk de clue begrijp.
  • hier de recente versie ( 19.23u @ 13-3-2007) [url=www.planetdust.nl/joep]linkje[/url] hier de layout van mijn pagina [url=www.planetdust.nl/layout.gif[/url] het is duidelijk dat alle divs fixed afmetingen hebben. Behalve de container div (#holder), deze is namelijk afhankelijk van de hoeveelheid tekst in mijn content div (#content). wanneer moet ik in mijn geval een div relatief of absolute positioneren (en wanneer gebruik ik geen parameter bij "positioning")? ik hoop dat iemand mij hierbij kan helpen. dank
  • [edit] dubbelpost, foutje.[/edit]
  • [edit] dubbelpost, foutje[/edit]
  • Ik ben weer eens verder aan het werken aan de site. De positioneerproblemen zijn nog niet verholpen. Momenteel ziet de site er goed uit in IE maar verschuift er iets in mozilla. Waar ik wel mee zit zijn de link van mijn navigatie menu. Normaal centreerde ik tekst binnen een div mbv line height. Echter dit pakt niet goed uit in dit geval. dus: hoogte van een list item block is ongeveer 30px. Ik wil de tekst hierbinnen centreren. in welke richting moet ik nu dan denken? want die vertical align daar kan ik niks mee.
  • Ik heb ooit iets geschreven over [url=http://forum.computertotaal.nl/phpBB/viewtopic.php?p=1172936#1172936]positioneren[/url] Dat wijkt wel iets af van de manier waarop jij het doet (absoluut positioneren binnen een relatief element), maar het punt blijft hetzelfde: vaak is positioneren door de precieze locatie t.o.v. een linkerbovenhoek o.i.d. niet nodig en volstaat meestal aan te geven wat de marge is t.o.v. een naburig element. Dat maakt het ontwerp wat flexibeler: als een header bijv. wat hoger wordt, dan verplaatsen de blokken onder die header automatisch een stukje mee naar beneden. Heb je het absoluut gepositioneerd, dan blijven die blokken gewoon staan, ook al is de header hoger geworden. Heb je een wrapper met daarin block-level elementen zonder expliciet vastgelegde breedte, dan worden deze elementen net zo breed of smal als je de wrapper van breedte verandert. Op die manier zijn elementen eigenlijk een team, waarbij minder belangrijk is dat elk teamlid precies een bepaalde afstand t.o.v. van de zijlijn aanhoudt, maar juist kijkt waar hij het beste kan staan t.o.v. de anderen. Wat betreft je positioneringsproblemen: als je #nav, #recon en #contact float naar links en de floats cleart door bijv. een clear op #content, dan moet het volgens mij gewoon lukken. Geen verdere positionering nodig (behalve margins). En je kunt de line-height van een li toch instellen?

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.