Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

verkeerde <div> plaatsing

3 antwoorden
  • Hoi, IK ben bezig om mijn site nu helemaal perfect te krijgen maar een ding lukt me niet. IK maak gebruik van een cms maar de layout kan ik helemaal via html en css maken. Ik heb daarvoor een layout geleend met toestemming maar ik wil een paar zaken anders hebben. Ik heb de volgende html file: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="description" content="" /> <meta name="" /> <meta name="author" content="" /> <meta name="copyright" content="" /> <meta name="company" content="" /> <meta name="revisit-after" content="" /> <title><txp:page_title /></title> <link rel="stylesheet" href="<txp:css />" type="text/css" media="screen" /> </head> <body> <div id="container"> <div id="head"> </div> <div id="wrapper"> <div id="sidebar-1"> <div id="menu"> *** hier komt het menu aanroep **** </div> </div> </div> <div id="content"> *** hier komt mijn content </div> <div id="foot"> Design by <a href="http://www.ryanarrowsmith.com/">Ryan Arrowsmith</a> but feel free to share / Proudly powered by <a href="http://www.textpattern.com/">Textpattern</a>. </div> </div> </body> </html> IK gebruik de volgende css file : .image { float: right ; margin: 20px; } body { background-color: #F9D7F8; color: #696969; font-family: Verdana, "Lucida Grande", Tahoma, Helvetica; font-size: 13px; line-height: 25px; } p { font-family: Verdana, "Lucida Grande", Tahoma, Helvetica; font-size: 13px; line-height: 25px; text-align: left; padding-left: 10px; padding-right: 10px; } .thesmall { text-align: right; margin-left: 10px; padding-top: 5px; padding-left: 5px; margin-right: 50px; padding-right: 0; margin-top: 1px; font-size: 10px; line-height: 14px; border-top: 1px solid #ccc; } .block { float: right; width: 250px; margin: 8px; padding: 15px; background: #eee; font-size: 11px; line-height: 20px; } .alert { color: #B8B800; float: left; width: 250px; margin: 8px; padding: 15px; background: #FFFFCC; font-size: 11px; line-height: 20px; } small { margin-left: 5px; } a { color: #000000; text-decoration: none; border-bottom: 1px solid #ccc; outline: none; } a:hover { color: #4a5e7a; text-decoration: none; border-bottom: 1px solid #ccc; } blockquote { margin: 40px; padding: 15px; background: #eee; font-size: 11px; line-height: 20px; } blockquote p { font-size: 12px; line-height: 21px; } #sidebar-1 p { line-height: 15px; font-size: 10px; text-align: left; } #head { text-align: center; background: #F9D7F8 url('/images/14.jpg') no-repeat top center; height: 497px; padding: 0; margin: 0; } #container { width: 800px; \width: 810px; w\idth: 800px; margin: 10px; margin-left: auto; margin-right: auto; padding: 0; background: #F9D7F8 url('/images/13.jpg') repeat-y top center; } .comment-block { margin: 40px; background: #eee; border: 1px solid #ccc; padding: 20px; } #sidebar-1 { float: left; width: 370px; \width: 370px; w\idth: 370px; margin: 10px; padding-top: 100px; } #wrapper { width: 400px; \width: 400px; w\idth: 400px; margin: 10px; text-align: left; display: block; } #content { margin-left: 495px; margin-right: 20px; padding-top: 10px; text-align: center; } #foot { clear: both; margin-top: 5px; text-align: right; height: 153px; background: #F9D7F8 url('/images/12.jpg') no-repeat top center; font-size: 10px; padding-right: 100px; padding-top: 60px; } #accessibility { position: absolute; top: -10000px; } #sidebar-1 a { border: 0px; color: #C00; } h1 { font-weight: normal; text-decoration: none; font-family: Georgia, Times, Serif; font-size: 3em; } h2 { font-weight: normal; font-family: Georgia, Times, Serif; font-size: 1em; font-style: italic; } h3 { font-weight: normal; font-family: georgia, times new roman, serif; font-size: 24px; line-height: 38px; padding-left: 10px; margin: 0; margin-top: 20px; text-align: left; } h3 a { border: 0px; font-weight: normal; font-family: Georgia, Times, Serif; font-size: 24ox; } h1 a, h2 a { border: 0px; } .caps { letter-spacing: 0.1em; font-size: 10px; } #content hr { color: #ccc; width: 66%; margin-top: 2em; margin-bottom: 2em; } img.divider { align: center; margin-top: 2em; margin-bottom: 2em; } input { border: 1px solid #696969; padding: 2px; font-size: 11px; color: #696969; font-family: verdana; } textarea { border: 1px solid #696969; padding: 2px; font-size: 11px; color: #696969; font-family: verdana; width: 300px; } ul#menu { text-align: left; width: 460px; list-style-type: none; background: #eee; margin: 0; padding: 10px; } ul#menu ol { display: none; text-align: right; list-style-type: none; margin: 0; padding: 5px; font-weight: bold; } ul#menu li, ul#menu a { font-family: verdana, sans-serif; font-size: 11px; color: #878787; font-weight: normal; } ul#menu li { border-bottom: solid 1px #ccc; line-height: 15px; } ul#menu ol li { border-bottom: none; } ul#menu ol li:before { content: "- "; } ul#menu a { text-decoration: none; outline: none; } ul#menu a:hover { color: #3f929e; } ul#menu a.active { color: #d84248; } Maar wat er nu gebeurt is dat de content wel naast het menu terecht komt. maar pas begint nadat het menu gestopt is. Wat ik bedoel , kun je zien op : http://test.tamarawobben.nl Wie o wie weet hoe ik dit goed krijg. Alvast bedankt. Roelof
  • in FF staat de inhoud wèl naast t mene, maar allebei wel heel erg ver naar beneden. Misshcien heb je wat aan deze links: http://stijlstek.nl/demo/aleppo/ http://stijlstek.nl/demo/damascus/ http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
  • Ik neem aan dat je het '[url=http://www.piggydidit.com/freebies/somethingfishy]Fishy[/url]'-template gebruikt hebt, die lijkt er het meest op. In dat geval is de #wrapper te smal (in Fishy wordt 700px gebruikt) en staat #content in de verkeerde div (in Fishy bevindt #content zich binnen de #wrapper). In je CSS staat ook ergens 'ox' i.p.v. 'px' en in je HTML wordt een h3 niet goed afgesloten.

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.