Jump to content

silverdigit

Members
 View Profile  See their activity

  • Posts

    7

  • Joined

  • Last visited

 Content Type 

Posts posted by silverdigit

    Unwanted horizontal scroll

    in CSS

    Posted

    AFTER correcting what I think you are looking for, (add misplaced div to list, you really should validate before posting)

     

     

    Thanks for that, but despite all of your "corrections" it still has the unwanted horizontal scroll bar in IE and Chrome.

    Unwanted horizontal scroll

    in CSS

    Posted

    Press F12 in Firefox, Chrome or Internet Explorer to open developer tools. Open the HTML tab. Click on a small button that looks like a mouse cursor over a rectangle and the hover over the page looking for an element which has a bounding box outside the right edge of the page.

     

    I have done that and can't see anything that would cause this to happen.

    Unwanted horizontal scroll

    in CSS

    Posted

    can u also add your html code???

     

    <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>

    Unwanted horizontal scroll

    in CSS

    Posted

    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

    post-181721-0-79470200-1427049109_thumb.png

    vertical menu problems

    in CSS

    Posted

    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.

     

    post-181721-0-25600900-1425235701_thumb.png

×
×
  • Create New...