PDA

View Full Version : Thanks for you help


tony09uk
10-25-2010, 12:58 PM
The index page is almost ready (its taken me ages!!!!!) all I need to do now is add my logo and a place holder next to it, at the top and add two divs, one on the right and one in the middle, below the spry navigation bar. Oh and the video then the rest should be pretty quick as everything is prepped.

I really need help finding a tutorial on how to position DIV'S, can you help?

Ricky55
10-26-2010, 03:38 PM
You need to look for a tutorial on CSS positioning not specifically Divs. All positioning is the same whatever the element is.

To position a logo in a header I prefer to use absolute positioning. Just set your containing element to position: relative; This sets a positioning context for any items within it. This just means that when you use left: 15px top: 15px for example you are measuring from the top left hand corner of this element rather that the whole of the page.

See very ruff example below:


<!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" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">
body {
margin: 0;
padding: 0;
}

div#header {
width: 600px;
height: 200px;
background: silver;
margin: 0 auto;
position: relative;
}

div#myLogo {
width: 175px;
height: 50px;
background: red;
position: absolute;
left: 15px;
top: 15px;
}


</style>

</head>

<body>

<div id="header">

<div id="myLogo"><p>I am a logo</p></div>

</div>

</body>
</html>

tony09uk
10-26-2010, 10:28 PM
cool thanks. I will get on that right away...i was beginning to lose the will....a small change seems to make a big difference :D

Ricky55
10-27-2010, 01:16 AM
stick at it. CSS like many things just clicks after a while and you'll wonder why you struggled with it.

One thing I do if I'm struggling to grasp something is give the elements in question a border just so i can see what's going on.

just give things border: 1px solid red; while you fix things up and then remove it once you can see whats going on.

Cheers

kearnsy
10-27-2010, 10:06 AM
yeah, definiely stick at it Tony, I'm a newbie like yourself, but slowly i'm getting there.

I've just hit on a similar problem to yourself, with positioning, as you say one small change messed everything up, but there's always an answer, and i suppose that'll come with experience.

It's like anything i suppose, the more you put in, the more you get out