Web Design Forums

pauravi · 07-12-2004, 05:02

Hi! I am very new to designing sites in CSS without any tables. This is my first site made without any tables and I'm facing a lot of problems.

Can anyone please take a look at this url?
http://www.pigtailpundits.com/Pauravi/index.htm

The CSS is as follows:
body{
margin-top:0px;
padding-top:0px;
margin-left:60px;
margin-right:60px;
padding-left:60px;
padding-right:60px;
text-align:center;
}

#container{
text-align:left;
}

.logocontainer{
position:absolute;
left:454px;
top:11px;
}

#mainlink{
position:relative;
top:115px;
left:150px;
margin:0px auto;
}

#mainlink ul{
list-style-type: none;
margin: 0px auto;
padding:0px;
}

#mainlink ul li{
display: inline;
margin: 0px auto;
padding:0px;
}

#mainlink ul li a{
margin: 0px auto;
padding:0px;
}

#integrated a{
width: 100px;
height:35px;
background: url(homeimgs/integrated.gif) no-repeat;
}

#integrated a:hover{
width: 100px;
height: 35px;
background: url(homeimgs/integrated.gif) no-repeat;
}

#independent a{
width: 108px;
height:35px;
background: url(homeimgs/independent.gif) no-repeat;
}

#independent a:hover{
width: 108px;
height: 35px;
background: url(homeimgs/independent.gif) no-repeat;
}

#international a{
width: 126px;
height:35px;
background: url(homeimgs/international.gif) no-repeat;
}

#international a:hover{
width: 126px;
height: 35px;
background: url(homeimgs/international.gif) no-repeat;
}

The problem is that I'm getting this gap between the navigation images.
Also there is a problem with the positioning as the 'services' image is overlapping the image on its left.

Please help!

pauravi · 23-12-2004, 01:25

Is there anybody going to listen to my story...
All about the code that's gone astray?!

emil · 23-12-2004, 02:57

Hi

I tried to duplicate your layout, you can find it here:
http://www.randomcolors.com/uploads/pauravi/

take a look at the css in the head section and at the way the divs are placed.
You also need to have a proper doctype, something like this:

<!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">

if you are in doubt, try to validate your source and CSS (www.w3.org), that should point out some of the mistakes you may have overlooked.

as for the list-thing I suggest doing some reading here
http://css.maxdesign.com.au/
also check out
www.csszengarden.com

I hope that helps

pauravi · 24-12-2004, 07:47

Hey, thanks! Just going through the url. Will let you know if I'm stuck.

emil · 24-12-2004, 10:25

I answered your PM.

nakedintruder · 16-01-2005, 17:11

try this;

#mainlink ul{
list-style-type: none;
margin: 0px;
padding:0px;
}

#mainlink ul li{
float:left;
margin: 0px;
padding:0px;
}

I've not looked at the layout more, you look like you're absolute positioning so change your x and y. this tidies the menu anyway.

You're also using way too many divs, give classes and i'ds to HTML elements, you don't HAVE to use divs, eg. the UL for the menu, why not give the id="mainlink" to that and lose the div?

07-12-2004, 05:02	#1 (permalink)
pauravi PeaBee Join Date: Dec 2004 Location: India Posts: 63	CSS Troubles Hi! I am very new to designing sites in CSS without any tables. This is my first site made without any tables and I'm facing a lot of problems. Can anyone please take a look at this url? http://www.pigtailpundits.com/Pauravi/index.htm The CSS is as follows: body{ margin-top:0px; padding-top:0px; margin-left:60px; margin-right:60px; padding-left:60px; padding-right:60px; text-align:center; } #container{ text-align:left; } .logocontainer{ position:absolute; left:454px; top:11px; } #mainlink{ position:relative; top:115px; left:150px; margin:0px auto; } #mainlink ul{ list-style-type: none; margin: 0px auto; padding:0px; } #mainlink ul li{ display: inline; margin: 0px auto; padding:0px; } #mainlink ul li a{ margin: 0px auto; padding:0px; } #integrated a{ width: 100px; height:35px; background: url(homeimgs/integrated.gif) no-repeat; } #integrated a:hover{ width: 100px; height: 35px; background: url(homeimgs/integrated.gif) no-repeat; } #independent a{ width: 108px; height:35px; background: url(homeimgs/independent.gif) no-repeat; } #independent a:hover{ width: 108px; height: 35px; background: url(homeimgs/independent.gif) no-repeat; } #international a{ width: 126px; height:35px; background: url(homeimgs/international.gif) no-repeat; } #international a:hover{ width: 126px; height: 35px; background: url(homeimgs/international.gif) no-repeat; } The problem is that I'm getting this gap between the navigation images. Also there is a problem with the positioning as the 'services' image is overlapping the image on its left. Please help!

23-12-2004, 02:57	#3 (permalink)
emil dt immigrant Join Date: Nov 2004 Location: Bucharest - Romania Posts: 7,000	Hi I tried to duplicate your layout, you can find it here: http://www.randomcolors.com/uploads/pauravi/ take a look at the css in the head section and at the way the divs are placed. You also need to have a proper doctype, something like this: <!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"> if you are in doubt, try to validate your source and CSS (www.w3.org), that should point out some of the mistakes you may have overlooked. as for the list-thing I suggest doing some reading here http://css.maxdesign.com.au/ also check out www.csszengarden.com I hope that helps Last edited by emil : 22-05-2005 at 05:53. Reason: changed link

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

23-12-2004, 01:25	#2 (permalink)
pauravi PeaBee Join Date: Dec 2004 Location: India Posts: 63	Is there anybody going to listen to my story... All about the code that's gone astray?!

24-12-2004, 07:47	#4 (permalink)
pauravi PeaBee Join Date: Dec 2004 Location: India Posts: 63	Hey, thanks! Just going through the url. Will let you know if I'm stuck.

24-12-2004, 10:25	#5 (permalink)
emil dt immigrant Join Date: Nov 2004 Location: Bucharest - Romania Posts: 7,000	I answered your PM.

16-01-2005, 17:11	#6 (permalink)
nakedintruder www.nakedintruder.com Join Date: Jan 2005 Location: Leeds, Yorkshire Posts: 383	try this; #mainlink ul{ list-style-type: none; margin: 0px; padding:0px; } #mainlink ul li{ float:left; margin: 0px; padding:0px; } I've not looked at the layout more, you look like you're absolute positioning so change your x and y. this tidies the menu anyway. You're also using way too many divs, give classes and i'ds to HTML elements, you don't HAVE to use divs, eg. the UL for the menu, why not give the id="mainlink" to that and lose the div?

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)