Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Menu bar problem

    My website looks fine full screen, but when I decrease the size of my browser, the part of the menu bar that goes off screen becomes inaccessible even by scrolling to the right.

    Full size, it looks like this:


    This is the problem:



    Below is my source code:


    Code:
    <div id="wrapper">
    	<div id="header-wrapper">
    		<div id="header" class="container">
    			<div id="searchbar">
                <div id="socialmedia"><table width="250" border="0" >
      <tr>
        <td width="25"><a href="https://www.facebook.com/Davslens"><img src="images/social/facebook.jpg" alt=""  /></a></td>
        <td width="25"><a href="http://instagram.com/davslens"><img src="images/social/instagram.png" alt=""  /></a></td>
        <td width="25"><a href="https://twitter.com/Davslens"><img src="images/social/twitter.png" alt=""  /></a></td>
        <td width="25"><a href="http://pinterest.com/davslens"><img src="images/social/pinterest.png" alt=""  /></a></td>
        <td width="25"><a href="http://www.flickr.com/photos/davslens/"><img src="images/social/flickr.png" alt=""  /></a></td>
        <td width="25"><a href="https://plus.google.com/101852390444272012417/"><img src="images/social/google+.png" alt=""  /></a></td>
        <td width="25"><a href="http://500px.com/Davslens"><img src="images/social/500px.jpg" alt=""  /></a></td>
        <td width="25"><a href="http://www.linkedin.com/company/davslens-photography"><img src="images/social/linkedin.png" alt=""  /></a></td>
      </tr>
    </table>
    </div> 
    </div>
                <div id="logo">
    				<h1><a href="index.html"><img src="images/logo.png" alt="" height="113"  /></a></h1>
    			</div>
    
    <div id="menu">
    			<ul>
    					<li><a href="index.html">Home</a></li>
    					<li><a href="about.html">About us</a></li>
                        <li><a href="events.html">Events</a></li>
                        <li><a href="portraits.html">Portraits</a></li>
                        <li><a href="architecture.html">Architecture</a></li>
                        <li><a href="nature.html">Nature</a></li>
    					<li><a href="locations.html">Locations</a></li>
                        <li><a href="fullalbumsevents.html">Full Albums</a></li>
    					<li><a href="contact.html">Contact</a></li>
    				</ul>
                    
    		  </div>
    	  </div>
          </div>
    Here is the relevant CSS


    Code:
    #wrapper {
    }
    
    .container {
    	width: 1000px;
    	margin: 0px auto;
    }
    
    .container2 {
    	width: 1000px;
    	height: 150px;
    	margin: 0px auto;
    }
    
    a img {
        border: 0;
    }
    
    /* Header */
    
    #header-wrapper {
    	overflow: hidden;
    	padding: 30px 0px 0px 0px;
    	background: url(images/img07.png) repeat;
    }
    
    #header {
    	width: 1000px;
    	height: 150px;
    	margin: 0 auto;
    	padding: 0px 50px;
    	background-color: #000000;
    	background-image: url(images/img07.png);
    	background-repeat: repeat;
    }
    
    /* Logo */
    
    #logo {
    	float: center;
    	width: 300px;
    	margin: 0;
    	padding: 0;
    	color: #FFFFFF;
    }
    
    #logo h1, #logo p {
    }
    
    #logo h1 {
    	line-height: 100px;
    	letter-spacing: -2px;
    	font-size: 2.0em;
    }
    
    #logo h1 a {
    	color: #FFFFFF;
    	text-shadow: 1px 1px 0px rgba(0,0,0,.2);
    }
    
    #logo p {
    	margin: 0;
    	padding: 0px 0 0 0px;
    	letter-spacing: -1px;
    	font-style: italic;
    	color: #CCCCCC;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 18px;
    	font-weight: normal;
    	font-variant: normal;
    }
    
    #logo p a {
    	color: #CCCCCC;
    }
    
    #logo a {
    	border: none;
    	text-decoration: none;
    	color: #FFFFFF;
    	background-image: url(images/img07.png);
    }
    
    #searchbar {
    	float: right;
    	width: 300px;
    	margin: 0;
    	padding: 0;
    	color: #FFFFFF;
    }
    
    #searchbar h1, #logo p {
    }
    
    #searchbar h1 {
    	line-height: 100px;
    	letter-spacing: -2px;
    	font-size: 2.0em;
    }
    
    #searchbar h1 a {
    	color: #FFFFFF;
    	text-shadow: 1px 1px 0px rgba(0,0,0,.2);
    }
    
    #searchbar p {
    	margin: 0;
    	padding: 0px 0 0 0px;
    	letter-spacing: -1px;
    	font-style: italic;
    	color: #CCCCCC;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 18px;
    	font-weight: normal;
    	font-variant: normal;
    }
    
    #searchbar p a {
    	color: #CCCCCC;
    }
    
    #searchbar a {
    	border: none;
    	text-decoration: none;
    	color: #FFFFFF;
    	background-image: url(images/img07.png);
    }
    
    
    /* Social */
    #socialmedia {
    	float: right;
    	width: 300px;
    	margin: 0;
    	padding: 20px 0px 0px 0px;
    	color: #FFFFFF;
    }
    
    
    
    /* Splash */
    
    #splash {
    	width: 960px;
    	height: 200px;
    	margin: 0px auto;
    }
    
    /* Search */
    
    #search {
    	float: right;
    	width: 280px;
    	height: 60px;
    	padding: 20px 0px 0px 0px;
    }
    
    #search form {
    	height: 41px;
    	margin: 0;
    	padding: 10px 0 0 20px;
    }
    
    #search fieldset {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    
    #search-text {
    	width: 170px;
    	padding: 6px 5px 2px 5px;
    	border: 1px solid #E7EBED;
    	background: #FFFFFF;
    	text-transform: lowercase;
    	font: normal 11px Arial, Helvetica, sans-serif;
    	color: #000000;
    }
    
    #search-submit {
    	width: 50px;
    	height: 22px;
    	border: none;
    	background: #B9B9B9;
    	color: #FFFFFF;
    }
    
    /* Menu */
    
    #menu {
    	float: center;
    	width: 1000px;
    	height: 200px;
    	margin: 0 auto;
    	padding: 0;
    }
    
    #menu ul {
    	float: center;
    	margin: 0;
    	padding: 0px 0px 0px 0px;
    	list-style: none;
    	line-height: normal;
    }
    
    #menu li {
    	float: left;
    }
    
    #menu a {
    	display: block;
    	line-height: 50px;
    	margin-right: 1px;
    	padding: 0px 10px 0px 10px;
    	text-decoration: none;
    	text-align: center;
    	text-shadow: 1px 1px 0px rgba(0,0,0,.2);
    	text-transform: uppercase;
    	font-family: 'Abel', sans-serif;
    	font-size: 16px;
    	font-weight: 250;
    	color: #FFFFFF;
    	border: none;
    }
    
    #menu a:hover, #menu .current_page_item a {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    #menu .current_page_item a {
    	background-image: url(images/img07.png);
    }


    Link to my website to view the problem

    Thank you for your help, whoever can fix this.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,714
    Thanks
    0
    Thanked 238 Times in 233 Posts
    Hi there pleasehelpmenow,

    try changing this...
    Code:
    
    #header-wrapper {
        overflow:hidden;
        padding:30px 0px 0px 0px;
        background:url(images/img07.png) repeat;
     }
    
    ...to this...
    Code:
    
    #header-wrapper {
        padding:30px 0 0;
        background:url(images/img07.png) repeat;
     }
    #header-wrapper:after {
        content:'';
        display:block;
        clear:both;
     }
    Also note that you page has 45 Errors and 7 warnings...

    ...that may cause problems and should be addressed.

    coothead

  • #3
    New to the CF scene
    Join Date
    May 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That fixed the problem. Thank you.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,714
    Thanks
    0
    Thanked 238 Times in 233 Posts

    No problem, you're very welcome.

    coothead


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •