...

View Full Version : Resolved Shadow border



quartzy
02-13-2011, 03:56 PM
I want to make a shadow border on my container so that the page stands out, a border like this http://www.pet-supermarket.co.uk/productlist.asp?SearchString=milburns&a=resetsearch, the site takes some time to load but there are a lot of images on the site so I hope it is not the shadow. My site has a dark gold background, so would the shadow still work well? Is there a way to do this in CSS? My container is 800px or 57.143em

Excavator
02-13-2011, 04:40 PM
Good morning quartzy,
The shadow on that page is done with this image - http://www.pet-supermarket.co.uk/images/wrapper_bg.jpg

Here is a CSS drop shadow example (http://nopeople.com/CSS%20tips/drop_shadow/index.html).

And, of course, CSS3's shadow (http://www.css3.info/preview/box-shadow/).

quartzy
02-13-2011, 05:01 PM
HI to you too excav

Thanks so much it is a very clever image, just making the ends shaded. But I would have to see if I could do that too in inkscape.

The code for the css shadow just seems to be too complicated adding other code to what I have so I will try the image first and may have to use the code.

Excavator
02-13-2011, 05:19 PM
HI to you too excav

Thanks so much it is a very clever image, just making the ends shaded. But I would have to see if I could do that too in inkscape.

The code for the css shadow just seems to be too complicated adding other code to what I have so I will try the image first and may have to use the code.

The image method is pretty bulletproof since all browsers can display an image. A small one like that repeated y doesn't cost much bandwidth at all, it would have little or no bearing on the slow load speed you mentioned that page had.

quartzy
02-13-2011, 05:56 PM
I have made the image, but there is a 1px border of white showing on each end of my navigation. Can you help?


.indentmenu {
width: 100%;
}

.indentmenu ul {
float: left;
display: inline;
width: 100%;
background: black url(../images/box3.jpg) center center repeat-x;
}

#bodyblock {
width: 1002px;
margin: 0 auto;
background-image: url('../images/container.jpg'); background-repeat: repeat-y;}

#container {
width: 57em;
background: #fff;
position: relative;
height: auto; /* For IE */;
margin: 0 auto;
text-align: left;/*Hack to fix IE6 to center*/;
margin-top: 1em;}

Excavator
02-13-2011, 06:02 PM
In the CSS for your ul, I'm not sure why you float a full width element or why you center a repeat-x image. I don't think either of those would cause a 1px border though, can you post the entire code?

quartzy
02-13-2011, 06:16 PM
Yes, my mistake it is not a whole border just the outer ends.

I will post the code for the navgiation, it is from a script so that explains why the code may be not right, I have not touched it, just added another navigation.




.indentmenu {
width: 100%;
}

.indentmenu ul, .indentmenu2 ul {
float: left;
display: inline;
width: 100%;
background: black url(../images/box3.jpg) center center repeat-x;
}
.indentmenu2 ul {background: gray url(../images/box2.jpg) center center repeat-x;}

.indentmenu ul li, .indentmenu2 ul li{display: inline;}

.indentmenu ul li a, .indentmenu2 ul li a{
float: right;
color: white;
font-weight: bold;
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #fff;
display: block;
}
.indentmenu2 ul li a {float:left; display: inline; padding: 2px 9px; text-transform: uppercase;}

.indentmenu ul li a:visited{color: white;}

.indentmenu ul li a:hover, .indentmenu2 ul li a:hover, {
color: white !important;
color: white; /*for IE*/
padding-top: 6px;
padding-bottom: 4px;
background: black url(../images/box4.jpg) center center repeat-x;}

.indentmenu2 ul li a:hover{
padding-top: 2px;
padding: bottom: 2px;}

quartzy
02-13-2011, 06:20 PM
When I removed the float: left; the whole of the navigation disappeared. Very strange. Removed the center center ok though

Excavator
02-13-2011, 06:30 PM
This may be one
.indentmenu ul li a, .indentmenu2 ul li a{
float: right;
color: white;
font-weight: bold;
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #fff;
display: block;
}


Really need your markup along with that CSS before we can reproduce your problem locally.

quartzy
02-13-2011, 06:45 PM
Here is my layout code:


html, body {
height: 100%;
width: 100%;
font-family: Trebuchet, Helvicta, Arial, Sans-serif; background: #FFCC00;
font-size: 100%;
line-height: 1.6;}

#bodyblock {
text-align: left;/*for IE6*/;
width: 1002px;
margin: 0 auto;
background-image: url('../images/container.jpg'); background-repeat: repeat-y;}

#container {
width: 57em;
background: #fff;
position: relative;
height: auto; /* For IE */;
margin: 0 auto;
text-align: left;/*Hack to fix IE6 to center*/;}

.logo_seniors {
width: 25em;
padding-top: 3em;
padding-left: 1em; }

#header {
height: 10em;
width: 57em;
margin: 0; padding: 0;}



and the mark up
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="en" name="language" />
<meta name="description" content="What's On at Seniors, our timetable and things you can do, plus notice board for special events"/><meta name="keywords" content="What's on timetable, noticeboard, seniors"/>
<title>Seniors - What's On</title>
<link href="../styles/mainstyle.css" rel="stylesheet" type="text/css" />
<link href="../styles/navigation.css" rel="stylesheet" type="text/css" />
<link href="../styles/layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="bodyblock">
<div id="container">
<div id="header" class="seniors"><div class="indentmenu"><ul>
<li><a href="location.html">Location</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="homepage.html">Home</a></li></ul>
<!--end .indentmenu--></div><div class="logo_seniors"><img alt="Seniors logo" height="101" src="../images/seniors_logo.gif" width="343" title="Return to hompage" /></div>
<address class="top">260 Stanstead Road<br/>London SE23 1DD<br/></address> </div>
<!--header--><div class="indentmenu2"><ul>
<li><a href="cafe.html">Cafe</a></li>
<li><a href="newsletter.html">Newsletter</a></li>
<li><a href="volunteering.html">Volunteering</a></li>
<li><a href="donations.html">Donations</a></li>
<li><a href="album.html">Photo Album</a></li></ul><!--end .indentmenu--></div>
<div id="content"><h1>What's On</h1>
<p>We offer various classes in the week, as outlined in the Timetable below. </p>
<p>We occasionally open for Special Events on Fridays, Saturdays and Sundays
- please check here for extra upcoming events.</p>
<div class="notice">
<h4 class="booking_box">Special Events Notice Board</h4><div class="inner"><p class="inner2">No
special events at present</p></div></div><div class="clear"></div>

<h2 class="center">Time Table</h2>
<table class="timetable">
<tr class="table_header">
<th>Times</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th></tr>
<tr><td>10.30 am</td><td></td><td>Choir ends 12.00pm</td><td>
<ul class="list">
<li>Art Group ends 12.15pm</li>
<li>Creative Writing ends 12.00pm</li>
<li>Knit 'n'&nbsp; Natter ends 12.00pm</li>
</ul></td><td></td></tr>
<tr><td>11.00 am</td><td>Line Dancing ends 1.00pm</td><td></td><td></td><td>
<ul class="list">
<li>Thai Chi ends 12.00 pm</li>
<li>Computer Class (not active presently)</li>
</ul></td></tr><tr><td>1.00 pm</td><td>French<br />Class ** </td>
<td>Film Club ends 4.30pm</td><td></td><td>Vista Reminiscence Group ** ends 4.30pm</td></tr>
<tr><td>2.00 pm</td><td></td><td></td><td>
<ul class="list">
<li>Keep Fit ends 3.00pm</li>
<li>Armchair Bingo ends 4.00pm</li></ul></td><td></td></tr></table>
<p>** Externally organised groups</p>
</div><!--content--><div id="footer">
<ul class="foot_list">
<li><a href="sitemap.html">Site Map</a></li></ul>
<p class="right">&copy; Seniors 2011</p>
</div><!--footer--></div><!--container--></div><!--bodyblock--></body></html

I have been looking at it, but I cant work it out.

Excavator
02-13-2011, 07:00 PM
but there is a 1px border of white showing on each end of my navigation. Can you help?


.indentmenu ul li a, .indentmenu2 ul li a{
float: right;
color: white;
font-weight: bold;
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #fff;
display: block;
}

quartzy
02-14-2011, 01:38 AM
I moved the border to the left and the border on the right has gone. But now I still have a 1px border on the left and the border is also on my footer, so its not the navigation.

For the navigation I have been trying to remove the border on the left of the first item, but it refuses to go. Can you see what I am doing wrong?


indentmenu ul li.first a, indentmenu2 ul li.first a {border-left:0;}

.indentmenu ul li a, .indentmenu2 ul li a{
float: right;
color: white;
font-weight: bold;
padding: 5px 11px;
text-decoration: none;
border-left: 1px solid #fff;
margin-right: 1px;
display: block;
}

HTML

<div class="indentmenu"><ul>
<li><a href="location.html">Location</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="about.html">About Us</a></li>
<li class="first"><a href="homepage.html">Home</a></li></ul>
<!--end .indentmenu--></div>

Excavator
02-14-2011, 01:46 AM
indentmenu ul li.first a, indentmenu2 ul li.first a {border-left:0;}
is invalid.

I think you probably mean .indentmenu ul li.first a, .indentmenu2 ul li.first a {border-left:0;}


See the difference?

Excavator
02-14-2011, 01:53 AM
I just saw what you are trying to do. When targeting the first-child I think the syntax would be .indentmenu ul li:first-child a, .indentmenu2 ul li:first-child a {border-left:0;}


first-child is not supported in some browsers though. Sometimes it can be easier just to use inline styles to override the linked CSS.
Try some variation of this on your menu -


<ul>
<li style="border-left: none;">linky</li>
<li>linky</li>
<li>linky</li>
<li>linky</li>
</ul>

quartzy
02-14-2011, 02:14 AM
thanks ecav
I am not that clever to use first-child. Good idea to style the li tag itself, could have saved a lot of problems and frustration.

How silly of me to miss out the full stop. That's one problem out of the way, still hunting for the mystery 1px gap on the left. Need to get to bed though so will have to wait until tomorrow

quartzy
02-14-2011, 02:34 AM
Here is a screenshot of the site. So you can see the 1px gap on the left. Any ideas? I will post the whole code.

http://www.christinesweb.co.uk/screen.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<link href="styles/mainstyle.css" rel="stylesheet" type="text/css" />
<link href="styles/navigation.css" rel="stylesheet" type="text/css" />
<link href="styles/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="bodyblock">
<div id="container">
<div id="header" class="seniors"><div class="indentmenu"><ul>
<li><a href="location.html">Location</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="about.html">About Us</a></li>
<li class="first"><a href="homepage.html">Home</a></li></ul>
<!--end .indentmenu--></div><div class="logo_seniors"><img alt="Seniors logo" height="101" src="../images/seniors_logo.gif" width="343" title="Return to hompage" /></div>
<address class="top">260 Stanstead Road<br/>London SE23 1DD<br/></address> </div>
<!--header--><div class="indentmenu2"><ul>
<li class="first"><a href="cafe.html">Cafe</a></li>
<li><a href="newsletter.html">Newsletter</a></li>
<li><a href="volunteering.html">Volunteering</a></li>
<li><a href="donations.html">Donations</a></li>
<li><a href="album.html">Photo Album</a></li></ul><!--end .indentmenu--></div>
<div id="content"><h1>What&#39;s On</h1>
<p>We offer various classes in the week, as outlined in the Timetable below. </p>
<p>We occasionally open for Special Events on Fridays, Saturdays and Sundays
- please check here for extra upcoming events.</p>
<div class="notice">
<h4 class="booking_box">Special Events Notice Board</h4><div class="inner"><p class="inner2">No
special events at present</p></div></div><div class="clear"></div>

<h2 class="center">Time Table</h2>
<table class="timetable">
<tr class="table_header">
<th>Times</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th></tr>
<tr><td>10.30 am</td><td></td><td>Choir ends 12.00pm</td><td>
<ul class="list">
<li>Art Group ends 12.15pm</li>
<li>Creative Writing ends 12.00pm</li>
<li>Knit &#39;n&#39;&nbsp; Natter ends 12.00pm</li>
</ul></td><td></td></tr>
<tr><td>11.00 am</td><td>Line Dancing ends 1.00pm</td><td></td><td></td><td>
<ul class="list">
<li>Thai Chi ends 12.00 pm</li>
<li>Computer Class (not active presently)</li>
</ul></td></tr><tr><td>1.00 pm</td><td>French<br />Class ** </td>
<td>Film Club ends 4.30pm</td><td></td><td>Vista Reminiscence Group ** ends 4.30pm</td></tr>
<tr><td>2.00 pm</td><td></td><td></td><td>
<ul class="list">
<li>Keep Fit ends 3.00pm</li>
<li>Armchair Bingo ends 4.00pm</li></ul></td><td></td></tr></table>
<p>** Externally organised groups</p>
</div><!--content--><div id="footer">
<ul class="foot_list">
<li><a href="sitemap.html">Site Map</a></li></ul>
<p class="right">&copy; Seniors 2011</p>
</div><!--footer--></div><!--container--></div><!--bodyblock--></body></html

layout.css

body, ul, li, div, form, blockquote, table, td, th, tr {margin: 0; padding: 0;}

html, body {text-align: center;height: 100%; width: 100%; font-family: Trebuchet, Helvicta, Arial, Sans-serif; background: #FFCC00; font-size: 100%; line-height: 1.6;}

#bodyblock {/*for IE6*/; width: 1002px; margin: 0 auto; background-image: url('../images/container.jpg'); background-repeat: repeat-y;}

#container {border: 0; width: 912px; background: #fff; position: relative; height: auto; /* For IE */; margin: 0 auto; padding-left: -2px;text-align: left; /*Hack to fix IE6 to center*/;}

#header {height: 10em; width: 912px; margin: 0; padding: 0;/*holding page*/}

.logo_venue{padding-left: 1em; padding-top: 0.75em; float:left; display: inline; width: 14.643em;}

.logo_seniors {width: 343px; padding-top: 3em; padding-left: 0.50em; }

.top2 {float: left; display: inline; width: auto;}

p.tagtitle {font-style: italic; text-align: center; margin-left: 2.143em; padding-top: 2.857em;}

address.top {border: 1px solid #CCC;position: absolute; width: 11em; top: 3em; right: 0.55em; text-align: right; background-image: url('../images/box_strip_sm.jpg'); background-repeat: repeat-x; padding: 0.60em;}

a:link {color: #FFCC00; text-decoration: underline;}
a:visited {color: #330000; font-weight: bold; text-decoration: underline;}
a:hover {color: #000; text-decoration: none; background: #CCC;}

#header p.head_right {/*holding page*/ position: absolute; top: 2.143em; left: 39.286em;}

#content {width: 87%; float:left; display: inline; background: #fff; overflow: hidden; padding: 3.571em;
margin: 0 auto;}

#footer {color: #fff; clear: both; height: 3.10em; background-image: url('../images/box_foot.jpg'); background-repeat: repeat-x; text-align: center; width: 100%;}footer p {text-align: center; font-weight: bold;}

mainstyle.css

.notice {width: 80%; margin: 0 auto; height: auto;}

.inner {width: 97.30%; height: auto; float:left; display: inline; margin-top: -1.65em; margin-bottom: 1em;padding: 0 0.50em; border: 1px solid #CCC;}

p.inner2 {margin-top: 40px;}

img a {border:none;}

#content.center {/*holding page only*/text-align: center; margin: 0 auto; background: #fff; width: 57.143em;}

.bookings {width: 17.857em; float: right; border: 1px solid #666; margin-top: 3em; padding-top: 0;}

.bookings p {padding: 0.700em;}

.clear {clear: both; font-size: 0; line-height: 0px;}

.contacts {margin-left: 30px; width: 13.43em; float:left; display: inline; margin-top: 3.75em;}

.left {float:left; width: 48%; display:inline; margin-bottom: 1.25em; overflow: hidden; }
.right, .right7 {width:48%; float:right; overflow: hidden;}
.right7 {margin-top: 1em; padding: 1em; width: 45%; border: 1px dotted #666;}
.left2, .left4, .left5 {background: #F4F4F4; border: 1px dotted gray; width: 16em; padding: .500em;
float:left; display: inline; margin-top: 3em; margin-left: 60px;}

.left2 {background: url('../images/box_strip_bg.jpg'); background-repeat: repeat-x;}
.left4 {margin-top: 0; background: #fff; border: 0;}
.left5 {margin-left: 0; width: 28em; margin-top: 0; background: #fff; border:0;}

.right2, .right4 {border: 1px dotted gray; width: 21em; float:left; padding: 1em; height: auto; margin-left: 2.80em;}

.right4 {border: 0; padding-top: 3.75em;}
.left3, .right3 {margin-bottom: 0; width: 12em; padding: .313em; float: left; display: inline;}
.left6, .right6 {width: 15em; float:left; display:inline;}

span.line {border-bottom: 1px solid #999;}
span.red {color: red;}

img.border {border: 1px solid #666; padding: .188em;}

.image {height: 21.25em; float:right; padding: 0.313em; overflow: hidden; margin: 1em;}
.image2 {float:right; margin:1em; overflow: hidden; width: auto;}
.image3 {float:left; display: inline; margin: 0 1em 1em 1em; overflow: hidden; width: auto;}
p.ques, span.ques {font-style: italic; font-weight: bold; font-size: 1.25em; color: #666;}
p {margin-bottom: 1em; margin-top: 0; padding-top:0;}
p.caption {text-align:center; font-size: 0.75em;}
p.form_thanks {margin-bottom: 14.286em;}
p.office {border-top: 1px solid #666; background-image: url('../images/box_strip_sm.jpg'); background-repeat: repeat-x; font-style: italic; margin:0; padding: 0.214em;}
p.clearp {clear:both; padding-top: 0.50em;}
p.shaded {padding: 1em; background-image: url('../images/box_strip_sm.jpg'); background-repeat: repeat-x;}
p.right {padding: 0.30em; text-align: right;}
p.donate {border: 1px dotted #666; padding: 1em; font-style: italic; background-image: url('../images/box_strip_bg.jpg'); background-repeat: repeat-x; width: 20%;}
h4.booking_box, h4.booking_box2 {text-align: center; color: #FFF; background-image: url('../images/box.jpg'); background-repeat: repeat-x;}

div#info {width: 260px; height: 300px; overflow:scroll; padding: 0.50em; margin: 0; float:right;}

p.ticker {width: 240px; border-bottom: 1px dashed #ccc; padding-bottom: 1em; margin: 0; padding-top: 5px;}

h4.booking_box2 {text-align: left;}

h4.charges {background: #666; color: white; width: 27.857em; margin: 0; padding: 0; background-image: url('../images/box2.jpg'); background-repeat: repeat-x;}

h1 {color: #000; margin-top: -0.714em;}
h2 {color: #666;}
h3 {color: #808080;}
h2.center {width: 95%; text-align: center; margin: 0; padding: 0;}
h4 {margin: 0; padding: 0;}
ul.foot_list {width: 100%; display: inline; margin: 0; padding: 0;}
.foot_list li {margin-left: 43%; font-size: 0.88em; list-style: none; display: inline; padding: 0.214em 0.357em;}

ul.list3 li{background-image: url('../images/bullet.jpg'); background-repeat: no-repeat; background-position: left center; padding: 0 0 0 1.786em; list-style-position: outside; list-style: none;}

ul.list2 li {background-image: url('../images/star_bullet.gif'); background-repeat: no-repeat; background-position: left center; padding: 0 0 0 1.786em; list-style-position: outside; list-style: none;}

ul.list {list-style-position: outside; padding-left: 0.80em;}

ul.list1 {list-style-position: outside; padding-left: 1.429em;}

blockquote.charges {padding: 0.714em; font-weight: bold; font-size: 0.88em; border-top: 1px solid #666;}

table.timetable {width: 95%; border: 1px solid #666; font-size: 0.88em;}

table.timetable tr.table_header {background-image: url('../images/box2.jpg'); background-repeat: repeat-x; color: #fff; text-align: center;}
table.timetable th {padding: 0.214em; font-weight: bold;}
table.timetable td{padding: 0.214em; width: 20%; border: 1px solid #999; vertical-align: top;}

table.hire, table.nested {width: 27.857em; padding: 0.357em; border: 1px dotted #666;}
table.nested {border-top: 0;}
table.hire tr.eve {width: 60%;}

navigation.css

.indentmenu {width: 912px; margin:0; padding: 0;}

.indentmenu ul, .indentmenu2 ul {
float: left;
display: inline;
width: 100%;
background: black url('../images/box3.jpg') repeat-x;
}
.indentmenu2 ul {background: gray url('../images/box2.jpg') repeat-x;}

.indentmenu ul li, .indentmenu2 ul li{display: inline;}

.indentmenu ul li a, .indentmenu2 ul li a{
float: right;
color: white;
font-weight: bold;
padding: 5px 11px;
text-decoration: none;
border-left: 1px solid #fff;
display: block;
}
.indentmenu ul li.first a, .indentmenu2 ul li.first a {border-left:0;}

.indentmenu2 ul li a {float:left; display: inline; padding: 2px 9px; text-transform: uppercase;}

.indentmenu ul li a:visited{color: white;}

.indentmenu ul li a:hover, .indentmenu2 ul li a:hover {
color: white;
padding-top: 6px;
padding-bottom: 4px;
background-image: url('../images/box4.jpg'); background-repeat: repeat-x;}

.indentmenu2 ul li a:hover{
padding-top: 3px;
padding: bottom: 3px;
background-image: url('../images/box1.jpg'); background-repeat: repeat-x; background-position: center center;}

quartzy
02-14-2011, 04:20 PM
I just made the shadow smaller and miracously it has also removed the gap.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum