www.webdeveloper.com
Results 1 to 12 of 12

Thread: Problems with margins on div's and images

  1. #1
    Join Date
    Apr 2005
    Posts
    481

    Problems with margins on div's and images

    I want zero space between div's and images
    I've tried everything, nothing works!
    I was hoping someone could point out where I was going wrong

    I have this code:

    Code:
    	<div style="width:100&#37;;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><a href="c.html"><img src="images/london-bridge.jpg" alt="Ferrari Car" style="width:100%;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"></a></div>
    		<div style="clear: both;"></div>
    	  <div style="width:40%;float:left;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><a href="c.html"><img src="images/1.jpg" alt="Ferrari Car" style="width:100%;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"></a></div>
    	  <div style="width:60%;float:left;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><a href="d.html"><img src="images/2.jpg" alt="Porsche Car" style="width:100%;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"></a></div>
    		<div style="clear: both;"></div>
    	  <div style="width:30%;float:left;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><a href="a.html"><img src="images/bmw.jpg" alt="BMW Car" style="width:100%;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"></a></div>
    	  <div style="width:70%;float:left;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><a href="b.html"><img src="images/bmw2.jpg" alt="BMW 2 Car" style="width:100%;position:relative;left:1px;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"></a></div>
    This image shows what I get:

    http://i.imgur.com/U8JdS.jpg

    I should explain why I have done this way and why the image widths are set to be 100% width

    The code is for a mobile website and I need the images to stretch all way across the screen - regardless of device or orientation

    ONE MORE PROBLEM: the single image at the top goes all the way across - this is fine.
    BUT, below this, I have 2 images side by side - the right hand image ALWAYS sits 1 pixel away from the right edge!
    Grrrr!!!!
    This is why I have added: position:relative;left:1px;

    Where am I going wrong?

    Thanks


    OM
    Last edited by OM2; 04-28-2012 at 07:35 AM.

  2. #2
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    Can you post a link to the actual on-line page?
    That is really the best way to get help on this.
    There may be other factors related to your issues.
    For example,
    I have added: position:relative;left:1px;
    You can't just give an element a declared position without considering the "Parent Rule".
    For example, if you give that element "position:relative;left:1px;" and the parent does not also have a declared position, the element will in fact be positioned as declared 1px left, but a space will be left as though the element was still in the natural flow.
    So to use position:relative plus an offset, you must first give the parent of that element a declared position.... or, you'll end up with a blank space.
    Best wsihes,
    EfV

  3. #3
    Join Date
    Apr 2005
    Posts
    481
    Evf, thanks for the reply

    See the link here:

    http://development-testing.info/app/

    I'm lost, even if there were other CSS rules, I would have thought if I applied the following to EVERYTHING:

    style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"

    that this would remove any margins predefined

    Let me know what you think

    Thanks


    OM

  4. #4
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    So are you saying you don't want any white space top, bottom, or sides of all the images?
    Space between the cars can be removed by getting rid of position:relative and the left: 1px;
    Space between the rows of images seems related to the fact that they are anchors (links) and font is bold for those links.
    Remove the <a>s and test with just the images. That will verify if the <a> part is causing the problems.
    EfV

  5. #5
    Join Date
    Aug 2011
    Location
    Canada, ON
    Posts
    10
    It's probably related to your positioning...
    anyway.... maybe play with border, as it is an aspect of the div.
    Could also have to do with the images themselves... if they were sliced poorly or something that'll do it.

  6. #6
    Join Date
    Apr 2005
    Posts
    481
    thanks for the replies

    i removed the <a> tags - same result
    i also added style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0" to the <a> tags first - same result

    Quote Originally Posted by Eye for Video View Post
    Space between the cars can be removed by getting rid of position:relative and the left: 1px;
    EfV
    i think i'm causing confusions here
    i put this in, because the right hand side edge doesn't go to the edge - and instead is 1 pixel in!

    i thought there would be a simple solution
    what am i doing wrong?

  7. #7
    Join Date
    Sep 2006
    Location
    new york
    Posts
    265

    html & body ?

    There's a link to jQuery stylesheet (with a lot of gradients, shadows and borders) but no link to one of your own. Would it help to zero out all margin & padding?

    html, body, img { padding: 0; margin: 0: width: 100&#37;; border: 0; }

  8. #8
    Join Date
    Apr 2005
    Posts
    481
    thanks for the reply

    just tried that
    i added the following after other css imports:

    <style type="text/css">
    html, body, img { padding: 0; margin: 0: width: 100&#37;; border: 0; }
    </style>

    no effect

    the thing is: there HAS to be a solution!
    i'm just not experienced at css like u guys!

  9. #9
    Join Date
    Aug 2011
    Location
    Canada, ON
    Posts
    10
    meh, don't worry about your experience. I'm slow a $hit when it comes to learning new things.... sometimes it's really a matter of how persistent you are and how much free time you have lol. I think I got it sorted out for you though... give this a go.

    index:
    Code:
    <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content=:text/html; charset=UTF-8" />
    		<title> tester </title>
    		<link href="tester.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div class="london"><a href="c.html"><img src="images/london-bridge.jpg" alt="Ferrari Car"></a></div>
    <div class="ferrari"><a href="c.html"><img src="images/1.jpg" alt="Ferrari"></a></div>
    <div class="porsche"><a href="d.html"><img src="images/2.jpg" alt="Porsche Car"></a></div>
    <div class="bmw"><a href="a.html"><img src="images/bmw.jpg" alt="BMW Car"></a></div>
    <div class="bmwtwo"><img src="images/bmw2.jpg" alt="BMW 2 Car"></a></div>
    
    </body>
    	
    </html>
    CSS:
    Code:
    img {max-height: 100&#37;;
    max-width: 100%;
    width: 100%;
    height: 100%;}
    
    div.london {position:relative;
    float: left;
    width: 100%;
    height:50%;
    display:inline;
    padding:0px;
    border:0px;
    margin:0px;}
    
    div.ferrari {position:relative;
    float: left;
    width: 40%;
    height: 25%;
    display:inline;
    padding:0px;
    border:0px;
    margin:0px;}
    
    div.porsche {position:relative;
    float: left;
    width: 60%;
    height: 25%; 
    display:inline;
    padding:0px;
    border:0px;
    margin:0px;}
    
    div.bmw {position:relative;
    float: left;
    width: 30%;
    height: 25%; 
    display:inline;
    padding:0px;
    border:0px;
    margin:0px;}
    
    div.bmwtwo {position:relative;
    float: left;
    width: 70%;
    height: 25%; 
    display:inline;
    padding:0px;
    border:0px;
    margin:0px;}
    Now, I got rid of ALL spacing because that's what I understood you were going for... if you still want the spaces between the rows just change {margin:0px;} to i believe {margin:15px 0 0 0;} (reads clockwise, top, right, bottom, left.) you may not need the px in there. The images expand to fit the div right now too so.... if you want them to keep their aspect-ratio you might need javascript.
    Last edited by TheBoot; 04-30-2012 at 09:32 AM.

  10. #10
    Join Date
    Mar 2012
    Posts
    1,243
    Quote Originally Posted by OM2 View Post
    I should explain why I have done this way and why the image widths are set to be 100% width The code is for a mobile website and I need the images to stretch all way across the screen - regardless of device or orientation
    You query seems to have been answered, I'd just like to question your above comment. Why do you assume that mobile = low resolution? The new iPad has a resolution considerably greater than Full HD! So, I think you need to consider what the site will look like on medium or hi-res screens as well.

    For example, I've just revised my small stable of sites to be displayed on screens from 320 or 400 px wide upwards. Some cannot realistically fit below 400 px without a major re-write hence the difference. I also used two different techniques:

    1. Sites which could adjust smoothly I made fully flexible between 320 px and 880 px width.

    2. Sites which looked naff in interim widths I constrained to three widths: 400 px, 640 px and 880 px, using PHP code.

    Of course, these techniques are not suited to all sites, but if you are interested, take a look here...

  11. #11
    Join Date
    Apr 2005
    Posts
    481
    @theboot: thanks a million for the code - really appreciated
    that didn't quite work, u can see the code here: http://development-testing.info/app/z.html

    someone else gave me code that did the trick

    this code did the trick:

    Code:
    html, body {margin: 0;}
    #container {
    	width: 100%;
    	margin: 0;
    	overflow: auto;
    	background: #999;
    }
    .width_30 {width: 30%;}
    .width_40 {width: 40%;}
    .width_60 {width: 60%;}
    .width_70 {width: 70%;}
    	.width_30, .width_40,
    	.width_60, .width_70 {float: left;}
    		.full_width {width: 100%;display: block;}
    img {border: none;}
    a {outline: none;}

  12. #12
    Join Date
    Apr 2005
    Posts
    481
    @jedaisoul, i'm targeting the iphone and going for a width of 640
    this seems to work well with all plaforms tested
    on bigger screens, it still looks ok - i wouldn't complain at all
    on smaller screens it also looks ok

    the trick for me was using width: 100%

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles