...

View Full Version : HTML/CSS Layout and Image Positioning Problem



neash83
11-16-2010, 08:42 AM
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


<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


}
#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; }

santhoshj400
11-16-2010, 09:09 AM
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

neash83
11-16-2010, 09:54 AM
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).


#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

Excavator
11-16-2010, 02:17 PM
Hello neash83,
You can either float an element or position it absolutely... but not both.

Try something like this to get you started -

<!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 (http://www.w3.org/TR/CSS2/box.html).

neash83
11-16-2010, 03:04 PM
Thanks a lot for that, I've got it all sorted now.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum