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 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2007
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts

    HTML/CSS Layout and Image Positioning Problem

    Hello,

    I've created a very basic website template page, it consists of a header and a footer bar with a panel down the full left hand side of the page.

    The layout is primarily derived from CSS. The issue that I am having is that I want to place some images on this layout, (one in the top left hand corner of the header, one in the top right hand corner of the header and a few button images down the left hand panel).

    I can put the images in no problem using CSS and have them positioned exactly where I want, the problem with that though is that I don't want to use CSS to create hyperlinks so I wanted the images linked directly from within in the html file.

    So basically, how would I go about placing those images as described into my HTML page directly, I know obviously how to place the images in, but I cant seem to get them positioned where I want them.

    Am I going overboard by using CSS exclusively for my layout or should I just simplfy things and use tables (as much as I hate tables for layout)?

    Thanks

    HTML Code

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Home- Intranet</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="Header_Footer.css" />
    <style type="text/css">
    .style1 {
    	text-align: center;
    }
    .style2 {
    	text-align: left;
    	font-size: x-small;
    }
    </style>
    </head>
    
    <body>
    <div id="outer"> 
      <div id="left" style="left: 0px; top: 0px"> 
            <p></p>
      </div>
      <div id="clearheader"></div>  <!-- to clear header -->
    	<div id="centrecontent"><!--centre content goes here -->
     
      <p>kjkjkjk</p>
    		<p></p>
    		  </div>
      <div id="clearfooter"></div>  <!-- to clear footer -->
    </div><!-- end outer div -->
     
    <div id="footer"> 
    	<div class="style1">
    		<br/> © 2010  <br/>   
    		</div>
      <p class="style2"><span style="padding-left:20px">Page Author: Sean Neasham&nbsp;&nbsp;&nbsp;&nbsp; 
    	Last Update: 12-November-2010</span></p>
    </div>
     
    <div id="header">
    	</div>
    	 
    	   
    	
    
    </body>
    </html>

    CSS

    Code:
    }
    #outer{
    	height:100%;
    	min-height:100%;
    	margin-left:160px;
    	background:white; /*sets the central page colour*/
    	border-left:1px solid #000;
    	border-right:1px solid #000;
    	margin-bottom:-52px;
    	color: #000000;
    	border-color:white;
    
    
    }
     
    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    #header{
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	height:70px;
    	background-image: url('header.jpg'); /*sets the header colour*/
    	border-top:1px solid #000;
    	border-bottom:1px solid #000;
    	overflow:hidden;
    	color: #000000;
    	border-color:0;
    	
    
    }
    
    
    
    
    
    #left {
    	position:relative;/*ie needs this to show float */
    	width:160px;
    	float:left;
    	margin-left:-159px;/*must be 1px less than width otherwise won't push footer down */
    	padding-top:72px;/*needed to make room for header*/
    }
    #left p {padding-left:3px;padding-right:2px}
     
     .body {
    	font-family: Calibri;
    	color: black;
    	font-size:medium;
    	text-indent:10px;
    }
    #footer {
    	width:100%;
    	clear:both;
    	height:50px;
    	border-top:1px solid #000;
    	border-bottom:1px solid #000;
    	background: url('footer.jpg');
    	background-color: #0A143A; /*sets the footer colour*/
    	color: #FFFFFF;
    	text-align:center;
    	position:relative;
    	border-color:0;
    	font-family:Calibri;
    	font-size:x-small;
    }
    * html #footer {/*only ie gets this style*/
    	\height:52px;/* for ie5 */
    	he\ight:50px;/* for ie6 */
    }
    #clearheader{height:72px;
    z-index:-1;}/*needed to make room for header*/
    #clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
    p  {margin-top:0}
    div  {margin-top:0}/*clear top margin for mozilla*/
    * html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
    
    .floatright { float: right; margin: 15px 15px 50px 50px; } 
    .floatleft { float: left; margin: 15px 15px 15px 157px; }

  • #2
    Banned
    Join Date
    Jul 2010
    Posts
    66
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hi,
    I have a question do you want to use<img src> instead of using backgroundproperty or do you want anchor link as image if u want anchor link as image just write a class for anchor tag and have image as its back ground please explainn to me clearly sothat i can have it done and spot the mistake

  • #3
    New Coder
    Join Date
    Mar 2007
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hello,

    I wanted it contained in an img tag, I've sort of fixed my problem, I was being a bit stupid. Not sure if its the most efficient way that I've put my image in, but its in with a link. I created another div class in my css and placed it within the header div in my html, then directly placed the image in the HTML within the div (if that makes sense?)

    However the problem I am now having is that I've got one image positioned how I want with a link fine in the top left of my header, but I can't get another image with a link positioned in the top right hand corner of my header.

    Hopefully the code will make more sense of what Im trying to explain.

    CODE]<div id="header"><div id="home"><a href="http://www.google.com"><img src="home_btn.png" alt="Home" style="border-style: none"/></a><div id="salem"></div></div>
    </div>[/CODE]

    Most of that all works, its the final div id which doesnt work how I want it too (salem).

    Code:
    #header{
    	position:absolute;
    	top:0;
    	left:0;
    	width:100%;
    	height:70px;
    	background-image: url('header.jpg'); /*sets the header colour*/
    	border-top:1px solid #000;
    	border-bottom:1px solid #000;
    	overflow:hidden;
    	color: #000000;
    	border-color:0;
    	
    
    }
    
    #salem { float: right; margin: 15px 15px 50px 50px;
    position:absolute;
    
    width:160px;
    height:45px;
    
    background-repeat: no-repeat;
    	
    }
    
    #home { float: left; margin: 10px 25px 0px 75px;
    position:absolute;
    border-color:0;
    width:50px;
    height:50px;
    background-repeat: no-repeat;
    	
    }
    I want the salem div to be positioned in the top right of my header slightly pushed inwards from the right by about 50px, I think its an error in my CSS?

    Thanks

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello neash83,
    You can either float an element or position it absolutely... but not both.

    Try something like this to get you started -
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	background: #FC6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    }
    #header{
    	width: 100%;
    	background: url('header.jpg'); /*sets the header colour*/
    	border-top: 1px solid #000;
    	border-bottom: 1px solid #000;
    	overflow: auto; 
    }
    #home {
    	height:50px;
    	width:50px;
    	float: left;
    	margin: 10px 25px 0px 75px;
    	background: #ff0;/*for demonstration only*/
    }
    #salem {
    	height:45px;
    	width:160px;
    	float: right;
    	margin: 15px 15px 50px 50px;
    	background: #00f;/*for demonstration only*/
    }
    </style>
    </head>
    <body>
        <div id="container">
            <div id="header"> 
                <a href="http://www.google.com" id="home"><img src="home_btn.png" alt="Home" style="border-style: none"/></a>
                <div id="salem">placeholder for img that goes here</div>
            <!--end header--></div>
        <!--end container--></div>
    </body>
    </html>

    See how I gave the image the id of home instead of wrapping the image in a div? There's nothing wrong with wrapping an image in a div but most times it's not needed.

    I also removed the height:70px; from your #header. The combined height of #salem and it's margins are greater than 70px and was breaking your box model.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    neash83 (11-17-2010)

  • #5
    New Coder
    Join Date
    Mar 2007
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks a lot for that, I've got it all sorted now.


  •  

    Posting Permissions

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