(Html) Sidebar placeras under text [Löst!]

Trädvy Permalänk
Medlem
Registrerad
Jun 2012

(Html) Sidebar placeras under text [Löst!]

Tjena!

Håller just nu på med webbutveckling 1, men jag har fastnat på min uppgift och jag kan inte få min side bar att ligga vågrätt med texten, Den lägger sig nämligen under texten jag har skrivit (se bild)

Skulle någon av er kolla på min html och css kod och se om ni hittar felet?

<!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" xml:lang="sv" lang="sv"> <head> <link rel="stylesheet" type="text/css" href="mall.css"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Enkel sidlayout</title> </head> <body> <div id="wrapper"> <header> <h1>Enkel sidlayout</h1> </header><!-- header --> <div id="content"> <h1>Välkommen till Cancer site 123</h1> <img src="herpderp.jpg" width="180" height="240" alt="port&auml;tt" style="float:right; margin-left:8px;" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dictum ligula libero, laoreet lacinia enim tincidunt ac. Donec sodales, eros quis semper congue, nibh leo sagittis ante, quis convallis eros orci sit amet turpis. Nullam lectus augue, blandit sit amet nibh at, volutpat tempus lorem. Vivamus ut diam nec quam consectetur tincidunt sit amet vitae ligula. Aliquam non egestas odio. Nulla semper ligula id felis placerat, nec commodo enim euismod. Sed euismod libero vel consectetur lacinia. Integer sodales augue sed sapien vestibulum convallis. Aenean vitae leo nec mi condimentum volutpat. Ut imperdiet commodo varius. Nulla nec lobortis ex. Sed pellentesque consequat aliquam. In et ligula ut elit consectetur tincidunt. Sed et turpis magna. Aliquam purus mi, sagittis eu dictum et, feugiat vitae augue.</p> <p>Morbi tempor magna eu sem imperdiet, ac commodo urna sollicitudin. Suspendisse potenti. Nullam sollicitudin faucibus justo a imperdiet. Nunc ipsum magna, dignissim non suscipit quis, cursus nec augue. Phasellus ut justo faucibus, luctus sem in, facilisis tellus. Vivamus fringilla gravida metus, sit amet fermentum urna tincidunt et. Etiam eu dictum nisl, non ornare tellus. Maecenas at magna arcu. Donec ut ipsum semper, fringilla nisl vitae, placerat quam. </p> </div><!-- content --> <div id="leftColumn"> <div class="leftContainer"> <h1>Innehåll</h1> <ul> <li><a href="#">Hem</a></li> <li><a href="#">Blogg</a></li> <li><a href="#">Bilder</a></li> <li><a href="#">Kontakt</a></li> </ul> </div> <div class="leftContainer"> <h1>Nyheter</h1> <p>Aenean aliquam ultricies ipsum, eget porta arcu porta vitae. Curabitur nec turpis justo. Vestibulum vel tortor vel erat elementum egestas. Quisque sit amet nibh et enim euismod imperdiet. Duis at enim sit amet purus bibendum rutrum. Vivamus sit amet leo quis tortor rhoncus viverra. Morbi eleifend vitae nulla eget faucibus.</p> </div> </div> <footer> <span id="footerLeft">©Sidlayoutarna</span> <span id="footerRight"><a href="mailto:Iswedishshift@gmail.com">ISwedishShift@gmail.com</a></span> </footer><!-- footer --> </div><!-- wrapper --> </body> </html>

* { margin:0; padding:0; font-family:Verdana, Geneva, sans-serif; } body{ font-size: 100%; } p { font-size: 0.8em; margin-bottom: 10px; margin-top: 5px; margin-right: 10px; text-align: justify; } /* Wrapper */ #wrapper { width: 800px; margin-left: auto; margin-right:auto; margin-top:10px; border: 2px solid #000; } /* End wrapper */ /* Header */ header { text-align:center; height: 60px; background-color: black; color: white; } header h1{ font-family: Arial; font-size: 1.9em; padding-top: 0.25em; } /* End header */ /* leftColumn */ #leftColumn { float: left; width: 180px; margin: 4px; } .leftContainer { -moz-border-radius: 5px; /* Ger rundade hörn i Firefox, Safari, */ -webkit-border-radius: 5px; /* Opera, Google Chrome. Raka hörn i IE! */ border: 1px solid #999; padding: 4px; margin-bottom:5px; } #leftColumn ul { list-style:none; } #leftColumn li{ margin-top: 5px; border: 1px solid #000; } #leftColumn li a{ display:block; font-size: 0.8em; text-decoration: none; color: #aa0000; padding-left: 15px; background-color:#FFC; } #leftColumn li a:hover, #leftColumn li a:active, #leftColumn li a:focus{ background-color: grey; color: #ffffff; } #leftColumn h1 { font-family:Arial, Helvetica, sans-serif; font-size: 0.9em; } /* End leftColumn */ /* Content */ #content { margin-top: 8px; margin-left:200px; } #content h1{ font-family: Arial, Helvetica, sans-serif; font-size: 1.4em; } #content h2{ font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; } #content .container{ float:right; width: 99%; } /* End content */ /* Footer */ footer { height: 30px; background-color: black; color: white; font-size: 0.75em; clear:both; } footer #footerRight{ float:right; padding: 5px; } footer #footerLeft{ float:left; padding: 5px; } /* End footer */

Hjälp uppskattas

Trädvy Permalänk
Medlem
Registrerad
Jun 2012
Skrivet av Matsson82:

Tjena!

Håller just nu på med webbutveckling 1, men jag har fastnat på min uppgift och jag kan inte få min side bar att ligga vågrätt med texten, Den lägger sig nämligen under texten jag har skrivit (se bild)
http://i.imgur.com/49n7YBr.png

Skulle någon av er kolla på min html och css kod och se om ni hittar felet?

<!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" xml:lang="sv" lang="sv"> <head> <link rel="stylesheet" type="text/css" href="mall.css"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Enkel sidlayout</title> </head> <body> <div id="wrapper"> <header> <h1>Enkel sidlayout</h1> </header><!-- header --> <div id="content"> <h1>Välkommen till Cancer site 123</h1> <img src="herpderp.jpg" width="180" height="240" alt="port&auml;tt" style="float:right; margin-left:8px;" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dictum ligula libero, laoreet lacinia enim tincidunt ac. Donec sodales, eros quis semper congue, nibh leo sagittis ante, quis convallis eros orci sit amet turpis. Nullam lectus augue, blandit sit amet nibh at, volutpat tempus lorem. Vivamus ut diam nec quam consectetur tincidunt sit amet vitae ligula. Aliquam non egestas odio. Nulla semper ligula id felis placerat, nec commodo enim euismod. Sed euismod libero vel consectetur lacinia. Integer sodales augue sed sapien vestibulum convallis. Aenean vitae leo nec mi condimentum volutpat. Ut imperdiet commodo varius. Nulla nec lobortis ex. Sed pellentesque consequat aliquam. In et ligula ut elit consectetur tincidunt. Sed et turpis magna. Aliquam purus mi, sagittis eu dictum et, feugiat vitae augue.</p> <p>Morbi tempor magna eu sem imperdiet, ac commodo urna sollicitudin. Suspendisse potenti. Nullam sollicitudin faucibus justo a imperdiet. Nunc ipsum magna, dignissim non suscipit quis, cursus nec augue. Phasellus ut justo faucibus, luctus sem in, facilisis tellus. Vivamus fringilla gravida metus, sit amet fermentum urna tincidunt et. Etiam eu dictum nisl, non ornare tellus. Maecenas at magna arcu. Donec ut ipsum semper, fringilla nisl vitae, placerat quam. </p> </div><!-- content --> <div id="leftColumn"> <div class="leftContainer"> <h1>Innehåll</h1> <ul> <li><a href="#">Hem</a></li> <li><a href="#">Blogg</a></li> <li><a href="#">Bilder</a></li> <li><a href="#">Kontakt</a></li> </ul> </div> <div class="leftContainer"> <h1>Nyheter</h1> <p>Aenean aliquam ultricies ipsum, eget porta arcu porta vitae. Curabitur nec turpis justo. Vestibulum vel tortor vel erat elementum egestas. Quisque sit amet nibh et enim euismod imperdiet. Duis at enim sit amet purus bibendum rutrum. Vivamus sit amet leo quis tortor rhoncus viverra. Morbi eleifend vitae nulla eget faucibus.</p> </div> </div> <footer> <span id="footerLeft">©Sidlayoutarna</span> <span id="footerRight"><a href="mailto:Iswedishshift@gmail.com">ISwedishShift@gmail.com</a></span> </footer><!-- footer --> </div><!-- wrapper --> </body> </html>

* { margin:0; padding:0; font-family:Verdana, Geneva, sans-serif; } body{ font-size: 100%; } p { font-size: 0.8em; margin-bottom: 10px; margin-top: 5px; margin-right: 10px; text-align: justify; } /* Wrapper */ #wrapper { width: 800px; margin-left: auto; margin-right:auto; margin-top:10px; border: 2px solid #000; } /* End wrapper */ /* Header */ header { text-align:center; height: 60px; background-color: black; color: white; } header h1{ font-family: Arial; font-size: 1.9em; padding-top: 0.25em; } /* End header */ /* leftColumn */ #leftColumn { float: left; width: 180px; margin: 4px; } .leftContainer { -moz-border-radius: 5px; /* Ger rundade hörn i Firefox, Safari, */ -webkit-border-radius: 5px; /* Opera, Google Chrome. Raka hörn i IE! */ border: 1px solid #999; padding: 4px; margin-bottom:5px; } #leftColumn ul { list-style:none; } #leftColumn li{ margin-top: 5px; border: 1px solid #000; } #leftColumn li a{ display:block; font-size: 0.8em; text-decoration: none; color: #aa0000; padding-left: 15px; background-color:#FFC; } #leftColumn li a:hover, #leftColumn li a:active, #leftColumn li a:focus{ background-color: grey; color: #ffffff; } #leftColumn h1 { font-family:Arial, Helvetica, sans-serif; font-size: 0.9em; } /* End leftColumn */ /* Content */ #content { margin-top: 8px; margin-left:200px; } #content h1{ font-family: Arial, Helvetica, sans-serif; font-size: 1.4em; } #content h2{ font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; } #content .container{ float:right; width: 99%; } /* End content */ /* Footer */ footer { height: 30px; background-color: black; color: white; font-size: 0.75em; clear:both; } footer #footerRight{ float:right; padding: 5px; } footer #footerLeft{ float:left; padding: 5px; } /* End footer */

Hjälp uppskattas

Fixade det!

Hade placerat

<div id="leftColumn"> <div class="leftContainer"> <h1>Innehåll</h1> <ul> <li><a href="#">Hem</a></li> <li><a href="#">Blogg</a></li> <li><a href="#">Bilder</a></li> <li><a href="#">Kontakt</a></li> </ul> </div> <div class="leftContainer"> <h1>Nyheter</h1> <p>Aenean aliquam ultricies ipsum, eget porta arcu porta vitae. Curabitur nec turpis justo. Vestibulum vel tortor vel erat elementum egestas. Quisque sit amet nibh et enim euismod imperdiet. Duis at enim sit amet purus bibendum rutrum. Vivamus sit amet leo quis tortor rhoncus viverra. Morbi eleifend vitae nulla eget faucibus.</p> </div> </div>

under main istället för över main.