[SOLVED] css positioning issue

danny322 · #1 Nov 23rd, 2007, 11:17

Hiya people.

Could somebody please have a look at this link........its a bit messy at the moment i know but the problem im having is only small.

http://www.design365.co.uk/sef/ybfuk/default.asp

I need the black box to be right up to the orange line but its a couple of pixels out and i dont know why

the black box is under the id #flash which is inside a container that (should) start just below the orange line.

HTML:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset==getlang("langcharset")%>" />
<title><%sefdynamictitle "title"%></title>
<meta name="description" content="<%sefdynamictitle "description"%>" />
<meta name="keywords" content="<%sefdynamictitle "keywords"%>" />
<%inserturchinstats%>
<link href="ASPCalendar.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/sef.css" rel="stylesheet" type="text/css" />
 
</head>
<body>
<div id="banner_top">
<div id="sef_banner">
</div>
</div>
<div id="banner_middle"></div>
<div id="banner_bottom"></div>
<div id="container">
<div id="flash">
</div>
</div>

CSS:

Code: Select all

body{
 font-size:small;
 text-align:center;
 color:#000;
 margin:0px;
 background-color: #333333;
 margin: 0px;
 padding: 0px;
}
 
#banner_top{
background-image: url(../images/sef/banner_top.gif);
background-repeat: repeat-x;
height: 110px;
margin: 0px;
padding: 0px;
}
#sef_banner{
margin: 0 auto;
width: 764px;
height: 110px;
background-image: url(../images/sef/sef_banner.gif);
}
#banner_middle{
top: 110px;
height: 31px;
background-image: url(../images/sef/banner_middle.gif);
background-repeat: repeat-x;
}
#banner_bottom{
top: 92px;
height: 8px;
background-image: url(../images/sef/banner_bottom.gif);
background-repeat: repeat-x;
}
#container{
margin: 0 auto;
padding: 0px;
width: 764px;
background-repeat: repeat-y;
}
#flash{
width: 764px;
height: 220px;
background-repeat: no-repeat;
background-color: #000000;
}

Lchad · #2 Nov 23rd, 2007, 12:45

First off you need to close this css

Code: Select all

.bottomlinks a:visited{

and this code

Code: Select all

.px5{

Fix this code in your html

Code: Select all

div id="banner_top">

Add the opening <

To get the black area snug up against the orange bar, delete the top margin of 5 px from your container div.

danny322 · #3 Nov 23rd, 2007, 13:04

Hi lchad, im confused lol.

1. I havnt got a top margin of 5 pixels for my container div

2. where do i add .px5{ ?

3. There already is an opening < in banner_top.

Lchad · #4 Nov 23rd, 2007, 13:17

Well it's fixed now.. the black portion is up against the orange line.
So whatever you did, fixed it.

You don't want to add 5px you needed to take them out.

Also the opening < was my error... I didn't grab it when I copied and pasted your code.

All set now?

danny322 · #5 Nov 23rd, 2007, 13:32

lol yea its fixed thanks, i had 2 #container{} 's in my css, silly me!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] Basic Positioning Issue	Fearpig	Web Page Design	2	Apr 15th, 2008 12:30
[SOLVED] DIV Positioning Problem	winnard2007	Web Page Design	6	Jan 23rd, 2008 09:22
[SOLVED] div positioning problem	danny322	Web Page Design	5	Nov 28th, 2007 01:05
[SOLVED] txt positioning in a div	danny322	Web Page Design	2	Nov 13th, 2007 12:39
menu / layout positioning issue in IE	Pixelate	Web Page Design	2	May 9th, 2006 13:15

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] css positioning issue