Jump to content

Search the Community

Showing results for tags 'margin padding CSS'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 1 result

  1. I'm trying to learn some html,CSS and jQuery, and doing so step by step. First I look at the html and CSS :-) I have made a layout design, but it doesn't appeare the way I want it to, and I don't know what I'm doing wrong. First of all I get unwanted space around my sections. I have tried to set both the padding and margin to 0px, but it doesn't dissapeare. Second problem is the border at the r-section, and the background-color at the l-section. I want those to go down to the bottom and stop at the footer-section. Third problem is the item5 and item 6 at the nav-section. I want those to be at the same line as the rest of the items. Can anyone go through my html and CSS, and tell me what I have done wrong here? <!DOCTYPE html><html><head> <title>myTitle</title> <meta charset="UTF-8" lang="nb"> <link rel="stylesheet" type="text/css" href="style2.css"> <script type="text/javascript" src="jquery"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="script2.js"></script></head><body> <!-- <div id="container"> --> <div id="t-section"> <h1>myHeading</h1> <p><em>t-section</em><p> </div> <div id="nav"> <!--Navigation bar--> <ul><em>nav-section</em> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <div> <ul style="text-align:right"> <li>item5</li> <li>item6</li> </ul> </div> </ul> </div> <div id= "l-section"> <!--Left navigation bar/ section--> <ul><em>l-section</em> <li id="heading">heading1</li> <div class="sub1"> <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> </ul> </div> <br> <li id="heading">heading2</li> <div class="sub2"> <ul> <li>alphabetic navigation</li> </ul> </div> <br> <li id="heading">heading3</li> <div class="sub3"> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> </div> </ul> </div> <div id= "r-section"> <!--Right section--> <br> <br> <p><em>r-section</em> <p>Something something something</p> </div> <div id="aticle"> <!--Main section at center of screen--> <br> <br> <p><em>main-section</em></p> <p>Text text text text</p> </div> <div id="footer"> <!--Footer at bottom of page--> <ul><em>footer-section</em> <li>info1</li> <li>info2</li> <li>info3</li> </ul> </div> <!--</div>--></body> </html> /* Styling for element selectors */html, body{ background-color: #fff; font-family: "Helvetica", "Courier", "Arial";}h1 {}h2 {}h3 {}p {}a {}ul {}li {}div {}/* Styling for id selectors *//*#container { min-height: 100%; position: relative;}*//* Title section */#t-section { background-color: #ffdf92; height: 100px; width: 100%; text-align: center; padding: 0; margin: 0;}/* Navigation bar */#nav { background-color: #272727; text-align: center; color: #fff; padding: 0; margin: 0;} /* Navigation bar elements */ #nav ul { list-style-type: none; } #nav li { display: inline; }/* Left section */#l-section { width: 200px; background-color: #7B6B4A; color: #FFD685; float: left; height: 100%;} /* Left section elements */ #l-section ul { list-style-type: none; }/* Right section */#r-section { border-left: solid 2px #C4BEB1; width: 300px; float: right; height: 100%;} /* Right section elements *//* Article section */#article { margin-left: 250px; padding-left: 1em; /*float: left;*/ height: 100%;} /* Article section elements */ #article p { padding-left: 15px; }/* Footer section */#footer { width: 100%; /*height: 1em;*/ text-align: center; font-weight: bold; font-size: 0.8em; position: absolute; bottom: 0; background-color: #272727; color: #fff;} /* Footer section elements */ #footer ul{ list-style-type: none; } #footer li{ display: inline; } #heading { background-color: purple;}/* Class */.sub1 { background-color: red; display: none;}.sub2 { background-color: blue; display: none;}.sub3 { background-color: green; display: none;} If I have posted this wrong, please let me know :-)
  • Create New...