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 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    78
    Thanks
    1
    Thanked 0 Times in 0 Posts

    how do stop images from moving when shrinking browser

    so i have some image links and when i close the browser they tend to move closer to one another so all the links still fit the in the browser. what can i add to the css to make the links from overlapping when shrinking the browser size

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Hard to tell whats going on without seeing the site or code.
    Teed

  • #3
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,710
    Thanks
    41
    Thanked 191 Times in 190 Posts
    shot in the dark... remove the width:%'s and make them width: px's
    Last edited by alykins; 07-22-2011 at 05:47 AM. Reason: damn smiley face

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #4
    New Coder
    Join Date
    Oct 2010
    Posts
    78
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I tried about everything possible and everytime i shrink my browser the images and links overlap instead of overflow-x appear, i tried adding overflow to it, and it just stays greyed out

    heres my coding

    Code:
    .logo {
    	background-image: url(../images/logo/logo.png);
    	background-repeat: no-repeat;
    	width: 613px;
    	height: 205px;
    }
    
    .nav {
    	float: right;
    }
    
    .nav a{
    	text-decoration: none;
    }
    
    .nav ul {
    	word-spacing: -2px;
    	border-bottom: 4px solid pink;
    }
    
    .nav ul li  {
    	display: inline;
    }

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Last edited by effpeetee; 07-22-2011 at 08:55 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Set fixed width to parent div of images....


  • #7
    New Coder
    Join Date
    Oct 2010
    Posts
    78
    Thanks
    1
    Thanked 0 Times in 0 Posts
    heres an updated version of my work its not overlaping anymore and scroll bar is showing, but the scrollbar still appears no matter if the browser is full-size or small, and I can move the scrollbar all the way to right cause the page to shift to the left, how can i fix up the scrolling issue now...thanks

    Code:
    #header {
    	width: 100%;
    	height: 120px;
    }
    
    .logo {
    	position: relative;
    	background-image: url(../images/logo/logo.png);
    	background-repeat: no-repeat;
    	width: 613px;
    	height: 205px;
    	z-index: 999;
    }
    
    .nav {
    	position: relative;
    	top: -166px;
    	left: 670px;
    }
    
    .nav a{
    	text-decoration: none;
    }
    
    .nav ul {
    	word-spacing: -2px;
    }
    
    .nav ul li  {
    	display: inline;
    }
    
    .border-btm {
    	border-bottom: 4px solid pink;
    	position: fixed;
    	top: 106px;
    	left: 190px;
    	width: 1166px;
    }
    
    a#home img, a#aboutme img, a#gallery img, a#videos img, a#livecam img, a#signup img {
    	border-style: none;
    }


  •  

    Posting Permissions

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