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,177
    Mentioned
    454 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.


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
  •