4 replies [Last post]
idarph
Offline
newbie
United Kingdom
Last seen: 13 years 13 weeks ago
United Kingdom
Joined: 2009-11-01
Posts: 2
Points: 3

Hi I'm new around here and I have done the search but haven't found what I'm looking for.

This is what I want my site to look like.

thumb_Picture 1.png

My html so far is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mick Barnes.co.uk - Portfolio, Blog and mini sites</title>
<link href="style-main.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="container-front">
<div id="header-front">
	<div id="header-left-fr"><img src="images/mickbarnes-header-fr.gif" alt="Mick Barnes dot co dot uk" /></div>
<!-- header-left-fr div -->
	<div id="header-right-fr"><img src="images/front-images/batman.gif" alt="Batman Fan site" /></div>
  <!-- header-right-fr div -->
</div><!-- container-front div -->
<div id="content-front">
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
		<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
		<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero </p>
</div><!-- header-front div -->
</body>
</html>

The CSS:

@charset "UTF-8";
/* CSS Document */
 
html,body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	margin: 0;
	padding: 0;
	height: 100%;
}	
#container-front {
 	position:relative;
	width: 100%;
	height: 100%;
}
/* index page */
 
#header-front {
	background:#339900;
	border-bottom:#006600 solid 2px;
	width: 100%;
	height: 50%;
	color:#FFFFFF;
}
#header-left-fr {
	padding-left:10%;
	float:left;
	width: 40%;
	min-height:50%;
	text-align:left;
}
#header-right-fr {
	padding-right:10%;
	float:right;
	width: 40%;
	text-align: right;
}
# {
}
# {
}
#content-front {
	width:40%;
	background:#FFFFFF;
	padding-left:10%;
}
/* page */

The problem I am getting is the page title and the image (which is batman on the example) both show at the top of the header div and I am wanting them at the bottom of the div. I have it so that the page is fluid. Does ANYONE know how to get them to show at the bottom of the header and stay there if the screen is resized (so that the design doesn't distort).

Any help on this would really be appreciated.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 20 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

You need to position the

You need to position the images absolutely..

So, something like [UNTESTED]

#header-left-fr {
	background:#339900;
	border-bottom:#006600 solid 2px;
	width: 100%;
	height: 50%;
	color:#FFFFFF;
        position: relative;
}
#header-left-fr {
        position: absolute;
        left: 0;
        bottom: 0;
}
#header-right-fr {
        position: absolute;
        right: 0;
        bottom: 0;
}

idarph
Offline
newbie
United Kingdom
Last seen: 13 years 13 weeks ago
United Kingdom
Joined: 2009-11-01
Posts: 2
Points: 3

Thanks for the comment. Have

Thanks for the comment. Have tried that. It works fine but when the screen is resized the title image drops below the green section.

Please have a look. (note there ain't anthing linked in yet)

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 21 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

set the container to

nm

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 20 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

idarph wrote: Thanks for the

idarph wrote:

Thanks for the comment. Have tried that. It works fine but when the screen is resized the title image drops below the green section.

Please have a look. (note there ain't anthing linked in yet)

I wouldn't get too upset with that. Most people don't resize frequently and I don't see having to refresh after a resize as a big issue.