Jump to content

silverdigit

Members
 View Profile  See their activity

  • Content Count

    7

  • Joined

  • Last visited

Community Reputation

0 Neutral

About silverdigit

  • Rank
    Newbie
  1. silverdigit
  2. silverdigit
    I have done that and can't see anything that would cause this to happen.
  3. silverdigit
    <body> <div id="container"> <div class="header_right"></div> </div> <div id="navigation"> <ul> <li> </li> <li><a href="https://twitter.com/?lang=en-gb target="_blank">Social Media</a></li> <li><a href="https://youtube.com/user/meolebraceschool/" target="_blank">YouTube Channel</a></li> </ul> </div> <div id="topspace"></div> <div id="content-container1"> <div id="container_flyout"> <div id='flyout_menu'> <ul class="style1"> <li><a href='#'>Surfboards</a> <ul> <li><a href='#'>QuickSilver</a> <li><a href='#'>BillaBong</a> <ul> </ul> </li> </ul> </li> <li><a href='#'>Wetsuits</a> <ul> <li><a href='#'>BillaBong</a> <li><a href='#'>Rip Curl</a> <li><a href='#'>QuickSilver</a> <ul> </ul> </li> </ul> </li> <li><a href='#'>WindSurfing</a> <ul> <li><a href='#'>Book and Hire</a> <li><a href='#'>Buy</a> <ul> </ul> </li> </ul> </li> <li><a href='#'>Scuba Diving</a></li> <ul> <li><a href='#'>Book and Hire</a> <li><a href='#'>Buy</a> <ul> </ul> </li> </ul> </li> </ul> </div> </div> <div id="content"> <p class="text">Welcome to Wind & Waves!</p> <p class="text_v2">We are a WaterSports company on the UK coast. We sell and hire WaterSport products to our tourists, our local residents and people who do the sport as a hobbie or do it very regular. </span></p> <p class="main_image_surfing_flip_board_up"><img src="images/Surf Board.jpg" width="300" height="200" alt="surf_board"></p> <p class="main_image_scuba_diving"><img src="Scuba Diving.jpg" width="300" height="300" alt="scuba_diving"></p> </div> <div id="footer"></div> </div> </div>
  4. silverdigit
    As you can see by the screenshot I have an unwanted horizontal scroll bar. The styles are below: #container { width: 100%; background: #fff; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } #header { background: #fff; padding: 20px; height: 1%; } .header_right { background-color: #fff; float: right; height: 2%; display: inline; margin-bottom: 0px; } #header h1 { margin: 0; } #navigation { float: left; width: 100%; background: #333; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color: #fff; text-decoration: none; border-right: 1px solid #fff; } #navigation li a:hover { background: #383; } #topspace { clear: both; background:#fff; text-align: right; padding: 10px; height: .25%; } #bottomspace { clear: both; background:#fff; text-align: left; padding: 10px; height: 0.15%; } /*Flyout CSS menu */ #flyout_menu { font-weight: 600; width: 200px; float: left; } #flyout_menu ul, li { list-style: none; margin: 0; padding: 0; } #flyout_menu ul li.hover, #flyout_menu ul li:hover { position: relative; z-index: 599; } #flyout_menu ul ul{ visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; } #flyout_menu ul li:hover > ul { visibility: visible; } #flyout_menu ul ul { top: 0; left: 100%; } #flyout_menu span, #flyout_menu a { display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; } #flyout_menu li { background-color: #333333; } #flyout_menu li:hover, #flyout_menu li.active { background-color: #666666; } #flyout_menu a { color: #FFF; line-height: 160%; padding: 16px 8px 16px 28px; width: 164px; } #flyout_menu ul ul li { background: #006C6C; border-bottom: 1px solid #007171; } #flyout_menu ul ul li:hover { background-color: #999999; } /* end of flyout menu */ #content-container1 { float: left; width: 100%; background: #fff url(/wp-content/uploads/layout-three-liquid-background1.gif) repeat-y 20% 0; } #content-container2 { float: left; width: 100%; background: url(/wp-content/uploads/layout-three-liquid-background2.gif) repeat-y 80% 0; } #section-navigation { float: left; width: 16%; padding: 20px 0; margin: 0 2%; display: inline; } #section-navigation ul { margin: 0; padding: 0; } #section-navigation ul li { margin: 0 0 1em; padding: 0; list-style-type: none; } #content { float: right; width: 56%; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0%; padding-top: 20px; padding-right: 25%; padding-bottom: 20px; padding-left: 0%; } #content h2 { margin: 0; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center; color: #000066; } #aside { float: right; width: 16%; padding: 20px 0; margin: 0 2% 0 0; display: inline; } #aside h3 { margin: 0; } #footer { clear: both; background: #333; text-align: right; padding: 7px; height: 1%; color: #FFFFFF; } .video { background-color: #0066CC; text-align: center; } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; font-style: normal; line-height: 1.25em; font-weight: normal; } Thank you in advance
  5. silverdigit started following Unwanted horizontal scroll
  6. silverdigit
    That worked - thanks for your help :-)
  7. silverdigit
    Can no-one help with this?
  8. silverdigit
    Hi, Having a few problems with something that should be dead simple. See image Firstly I need some space between the horizontal and vertical menus.[1] Secondly the menu isn't picking up the styles at all? Thirdly I cannot get the content div to sit next to the flyout_menu Here is the CSS: #container { margin: 0 auto; width: 100%; background: #fff; } #header { background: #ccc; padding: 20px; height: 80px; } .header_right { background-color: #00CCCC; float: right; height: 100px; display: inline; margin-bottom: 0px; } #header h1 { margin: 0; } #navigation { float: left; width: 100%; background: #333; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color: #fff; text-decoration: none; border-right: 1px solid #fff; } #navigation li a:hover { background: #383; } #topspace { display: block; float: left; padding: 5px 10px; color: #fff; } /* flyout menu styles */ #flyout_menu { font-weight: 600; width: 200px; } #flyout_menu ul, li { list-style: none; margin: 0; padding: 0; } #flyout_menu ul li.hover, #flyout_menu ul li:hover { position: relative; z-index: 599; } #flyout_menu ul ul{ visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; } #flyout_menu ul li:hover > ul { visibility: visible; } #flyout_menu ul ul { top: 0; left: 100%; } #flyout_menu span, #flyout_menu a { display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; } #flyout_menu li { background: #005555; } #flyout_menu li:hover, #flyout_menu li.active { background: #5FD367; } #flyout_menu a { color: #FFF; line-height: 160%; padding: 16px 8px 16px 28px; width: 164px; } #flyout_menu ul ul li { background: #006C6C; border-bottom: 1px solid #007171; } #flyout_menu ul ul li:hover { background: #5FD367; } #content-container1 { float: left; width: 100%; background: #fff url(/wp-content/uploads/layout-three-liquid-background1.gif) repeat-y 20% 0; } #content-container2 { float: left; width: 100%; background: url(/wp-content/uploads/layout-three-liquid-background2.gif) repeat-y 80% 0; } #section-navigation { float: left; width: 16%; padding: 20px 0; margin: 0 2%; display: inline; } #section-navigation ul { margin: 0; padding: 0; } #section-navigation ul li { margin: 0 0 1em; padding: 0; list-style-type: none; } #content { float: right; width: 56%; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0%; padding-top: 20px; padding-right: 25%; padding-bottom: 20px; padding-left: 0%; } #content h2 { margin: 0; } #aside { float: right; width: 16%; padding: 20px 0; margin: 0 2% 0 0; display: inline; } #aside h3 { margin: 0; } #footer { clear: both; background: #ccc; text-align: right; padding: 20px; height: 1%; } Here is the HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Yr8 CSS & HTML </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > <link rel="stylesheet" type="text/css" href="styles.css" > </head> <body> <div id="container"> <div id="header"> <div class="header_right"><img src="imagesAudi_RS4.jpg" alt="audi R8" width="200" height="100"></div> <h1>Put your site name here</h1> </div> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact us</a></li> </ul> </div> <div id="content-container1"> <div id="content-container2"> <div id='flyout_menu'> <ul> <li><a href='#'><span>Link 1</span></a></li> <li><a href='#'><span>Link 2</span></a> <ul> <li><a href='#'><span>Product 1</span></a> <ul> <li><a href='#'><span>Sub Product</span></a></li> <li><a href='#'><span>Sub Product</span></a></li> </ul> </li> <li><a href='#'><span>Product 2</span></a> <ul> <li><a href='#'><span>Sub Product</span></a></li> <li><a href='#'><span>Sub Product</span></a></li> </ul> </li> </ul> </li> <li><a href='#'><span>Link 3</span></a></li> <li><a href='#'><span>Link 4</span></a></li> </ul> </div> <div id="content"> <h2> Page heading </h2> <p> </p> </div> <div id="aside"> <h3> Aside heading </h3> <p> </p> </div> <div id="footer"> Copyright © Site name, 20XX </div> </div> </div> </div> </body> </html> Any help gratefully received.
×
×
  • Create New...