PDA

View Full Version : need help with dreamweaver and CSS

danny251
08-09-2008, 06:32 PM
I have attempted a layout using div tags positioned absolutely but when I drag an image into a section of the nav strip and add a link to that image file the box stretches and there's a blue border around the image.
This doesn't happen if the image is a background image in the div tag though.

here is the screenshots
http://img236.imageshack.us/img236/4894/dwcsssiteyx4.jpg

http://img396.imageshack.us/img396/4418/dwcsssite1ol1.jpg

I tried doing a table layout in the nav strip div but the same problem occurred.
thanks
ToughLuck
08-09-2008, 08:44 PM
If you want the border on the image to go away then try adding either

img {
border=none;
}

in the CSS or you could try adding

style="border=none;" into your image code.
danny251
08-09-2008, 09:12 PM
I tried that tough luck didn't work bud
ToughLuck
08-09-2008, 09:17 PM
Can you post your entire code then?
Nightfire
08-09-2008, 09:43 PM
You want

a img{
border:0;
}
danny251
08-09-2008, 11:17 PM
<!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>Untitled Document</title>
<style type="text/css">
<!--
#container {
position:absolute;
width:990px;
height:750px;
z-index:1;
left: 0px;
top: 0px;
background-color: #2b2b2b;
}
#content {
position: absolute;
height: 541px;
width: 649px;
top: 185px;
left: 309px;
background-color: #00FFFF;
}
#affiliates {
height: 206px;
width: 250px;
left: 35px;
top: 520px;
position: absolute;
background-color: #FF00FF;
}
#header {
position: absolute;
height: 165px;
width: 925px;
left: 35px;
top: 5px;
right: 35px;
background-image: url(images/header.jpg);
}
#navtop {
background-image: url(images/navtop.jpg);
height: 56px;
width: 250px;
}
#navhome {
height: 24px;
width: 250px;
}
#navroster {
background-image: url(images/navroster.jpg);
position: absolute;
height: 30px;
width: 250px;
}
#navigation {
position: absolute;
height: 300px;
width: 250px;
left: 35px;
right: 35px;
top: 185px;
background-color: #0000FF;
a img{
border:0;
}
-->
</style>
</head>

<body>
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="navigation">
<div id="navtop"></div>
<div id="navhome"><a href="index.php"><img src="images/navhome.jpg" width="250" height="24" /></a></div>
</div>
<div id="affiliates"></div>
</div>
<div></div>
</body>
</html>


Thats the full code
cheers
Nightfire
08-09-2008, 11:37 PM
Change

#navigation {
position: absolute;
height: 300px;
width: 250px;
left: 35px;
right: 35px;
top: 185px;
background-color: #0000FF;
a img{
border:0;
}

to

#navigation {
position: absolute;
height: 300px;
width: 250px;
left: 35px;
right: 35px;
top: 185px;
background-color: #0000FF;
}

a img{
border:0;
}
danny251
08-09-2008, 11:43 PM
Thanks a lot Nightfire your the man :D
That worked :)
danny251
08-10-2008, 01:55 AM
I was wondering if you could take a look at the site again I've uploaded it to http://gamers4life.co.uk/xbgx/

Everything was fine when I added the Home and Roster links to the images but after I inserted the div tag for the gamebattles image after the roster div the gamebattles div sits on top of the roster one.