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 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2012
    Location
    Under your bed.
    Posts
    29
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Major positioning issue (images)

    What I want it to look like -> Only the chick with the phrase 'Foodstant Delivery is relevant'

    I previously used position:absolute to get the images to be lined up correctly.

    But it has its drawbacks and now I am attempting to use margins to align the 3 images together once again but unfortunately, I can't

    The 'delivery' block keeps being stuck at the time despite having a lager margin-top value compared to the other two images..

    Html code :
    Code:
    <!doctype html>
    	
    <html>
    	<head>
    		<meta charset="UTF-8"/>
    		<title> Foodstant Delivery </title>
    		<link rel="stylesheet" type="text/css" media="screen" href="stylo.css" />
    		<link rel="shortcut icon" href="favicon.ico" />
    	</head>
    	
    	<body>
    	
    	<figure>
    	<img id="com" src="images/combo31.png" alt="Foodstant Delivery logo" width="1000" height="700" />
    	</figure>
    	
    	<nav id="hnavbar">
    		<ul id="hli">
    			<li><a id="home" href="index.html">Home</a></li>
    			<li><a id="menu" href="menu.html">Menu</a></li>
    			<li><a id="cu" 	 href="ContactUs.html">Contact Us</a></li>
    			<li><a id="au"   href="aboutus.html">About Us</a></li>
    			<li><a id="tc"   href="TC.html">Terms & Conditions</a></li>
    			<li><a id="job"  href="jobs.html" target="_blank">Jobs</a></li>
    			<li><a id="yo"	 href="order.html">Your Order</a></li>
    		</ul>	
    	</nav>
        
    	</body>
    	
    	
    </html>
    CSS code:

    Code:
    /* Foodstant Delivery */
    
    * {
        margin: 0;
        padding:0;
    }
    body { font-family: 'Comic Sans MS',Verdana,Helvetica,Courier New,sans-serif;
    	background:url("images/bg.jpg");	
    }
    /* home page */
    #hnavbar{
    	border:1px solid blue;
    	font-size:2em;
    	margin:-3em 0 0 0;
    	}
    #hnavbar ul li {
    		list-style-type:none;		
    		width:325px;
    		display:inline;
    		padding:0 13px 0 13px; 
    		}
    #com {
    	border:1px solid blue;
    	margin-top:-5%;
    	margin-left:13.5%;
    	padding-bottom:;
    	}
    	
    
    /* home page */
    Last edited by CrashNsink; 05-24-2012 at 02:39 AM. Reason: typo error ~ CSS and html edit

  • #2
    New to the CF scene
    Join Date
    May 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Could you provide the dimensions of the 3 images?

    A workaround for such things is placing 1 image correctly and using "position: relative;" with correct left/top values to position the other ones after that.
    Last edited by Nitro3k; 05-23-2012 at 07:14 PM.

  • #3
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    369
    Thanks
    2
    Thanked 26 Times in 26 Posts
    Margins and floats require width to render correctly.

    The absolute positioning gets messed up because the position is relative to the page instead of a parent element. If you apply position:relative to the figure, then you can position within the figure to have better control.

    The problem is just incomplete and sloppy CSS. tighten it up so you have real control.


    Cd&
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&


  •  

    Posting Permissions

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