SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member hoosekarter's Avatar
    Join Date
    May 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with div resize of both TEXT and IMG

    Hey guys, I'm having trouble with my navigation bar that includes text and images. I'm building a project site of the New Acura NSX to add to my professional portfolio, and I cannot seem to get the div containing the navi bar to resize correctly based on window size. God ive googled the problem so many times, and tried many different things, but its not working with me. Maybe im missing something? Here is a look at what im working with.

    This is how the site looks at a higher resolution
    example1_zpsb286305a.jpg

    This is how the site looks at a lower resolution, resize problem.
    example2_zps3217c650.jpg

    Here is my Html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="styling1.css"/>
    <title>Acura NSX</title>
    </head>
    
    <body class="mainpage">
    <div class="container">
    <div class="spacer"></div>
    <div class="navibar">
    <ul>
    <li><a href="index.html">Home</a></li>
    <img src="photos/n.png" width="35" height="47" />
    <li><a href="gallery.html">Gallery</a></li>
    <img src="photos/s.png" width="35" height="47" />
    <li><a href="news.html">News</a></li>
    <img src="photos/x.png" width="35" height="47" />
    <li><a href="forums.html">Forums</a></li>
    </ul>
    </div>
    </div>
    
    </body>
    </html>

    Here is my CSS
    Code:
    @charset "utf-8";
    
    .mainpage {
    	background:url(photos/background1.jpg);
    	background-repeat:no-repeat;
    	background-size:100%;	
    }
    
    .headlogo {
    	width:460px;
    	float:left;
    }
    
    .spacer {
    	width:60%;
    	float:left;
    	height:100px;
    }
    
    .navibar {
    	
    	margin-top:97px;
    	
    	}
    
    .navibar ul {
    	list-style-type:none;
    	margin:0;
    	padding:0;
    	
    }
    
    .navibar li {
    	display:inline;
    	margin:5px;
    	
    	
    	
    }
    
    .navibar img {
    	
    	}
    
    
    .navibar a:link { font-size:18px ; font:"Arial Black", Gadget, sans-serif, Helvetica, serif; font-weight:900 ; text-decoration:none; color:#006;}      /* unvisited link */
    .navibar a:visited  { font-size:18px ; font:"Arial Black", Helvetica, serif; font-weight:900 ; text-decoration:none; color:#006;}  /* visited link */
    .navibar a:hover { font-size:18px ; font:"Arial Black", Helvetica, serif; font-weight:900 ; text-decoration:none; color:#FFF;}  /* mouse over link */
    .navibar a:active { font-size:18px ; font:"Arial Black", Helvetica, serif; font-weight:900 ; text-decoration:none; color:#00C;}  /* selected link */
    
    
    /* CSS Document */

    ANY help would be apprecitated. THX!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You have a few choices there. You could either set a fixed width on the container so that it can't get any narrower, or use @media queries to set different styles at lower screen widths. For example, on narrow screens you could put the navigation under the logo.

    Either way, you need to redo the menu, as it's not legal HTML to have images between the LIs like that. A better option is to set them as BG images on the menu items themselves.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Tags for this Thread

Bookmarks

Posting Permissions

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