Forum Moderators: not2easy
I am redesigning a website, problem is this is the first time I've come across css (or indeed written any code at all). Happily web tutorials cover virtually everything, (I love all the people who dedicate their time to spread their knowledge this way :). So, with the help of a few excellent tutes and free designs, I've managed to cobble some semblance of working code together.
My problem is, that while the header and navigation bars are positioned exactly where I want them (took days, lol) the snazzy boxes with the text and pics aren't. When the page is stretched, the header & navigation bars move into the centre of the page, but the snazzy borders are all over the place. I want them centred under the header & nav bars at all times.
I know there must be a very simple solution, I'm just a little bit to much of a clueless n00b to figure it out. :(
Any help would be greatly appreciated.
Here's the css code
/*Body*/
body {
background: #ffffff;
font: Arial, Helvetica, sans-serif;
color: #53565D;
font-size: 1em;/*size determined by end users default.*/
}
/* Header */
#header {
width: 734px;
height: 53px;
margin: 0 auto;
background: url(images2/header.gif) no-repeat;
}
/*Horizontal Tab Menu*/
/* The Horizontal Tab Menu is within the header in the HTML. Nested list made inline by floating left "Top left & top right no repeat" positions tabs so they appear as wide as their content (the actual gif is a lot longer).*/
#TabMenu {
margin: 28px -40px auto;
float: left;
list-style-type: none;
}
#TabMenu li{
float: left;
padding: 0 0 0 10px ;
background: url(images2/tabgrey.gif) top left no-repeat;
}
#TabMenu li a{
color: #53565d;
font-size: 0.9em;
font-weight: bold;
background: url(images2/tabgrey.gif) top right no-repeat;
display: block;
padding: 4px 10px 1px 4px;
}
#TabMenu li.cur,
#TabMenu li.over,
#TabMenu li:hover
{
background: url(images2/tabdarkgrey.gif) top left no-repeat;
}
#TabMenu li strong,
ul#TabMenu li.cur a,
ul#TabMenu li.over a,
ul#TabMenu li:hover a
{
display: block;
color: #dbdcde;
padding: 4px 10px 1px 4px;
text-decoration: none;
background: url(images2/tabdarkgrey.gif) top right no-repeat;
}
/* Home Nav Bar*/
#HomeNavBar {
width: 734px;
height: 27px;
margin: 0px auto;
background: url(images2/bargray.gif)
}
#HomeNavBar ul {
margin: 0;
padding: 0;
list-style: none;
}
#HomeNavBar li {
float: left;
}
#HomeNavBar a {
display: block;
float: left;
height: 25px;
padding: 5px 20px 5px 20px;
text-decoration: none;
color: #53565d;
font-size: 0.9em;
font-weight: bold;
}
#HomeNavBar a:hover, #HomeNavBar .active a {
background: url(images2/bardarkgray.gif)no-repeat;
color: #dbdcde;
}
/* Content */
#content {
width: 734px;
margin: 0 auto;
}
/*Round Corner Snazzy Border Text boxes*/
#xsnazzy p {
margin:0 10px auto;
padding-bottom:1em;
padding-top:1em;
padding-left:0.5em;
}
#xsnazzy {
float: left;
width: 734px;
padding: 7px 0px 0px 0px;
margin: 0 auto;
}
.xtop, .xbottom {
display:block;
background:transparent;
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#f2f2f2;
border-left:1px solid #999;
border-right:1px solid #999;
}
.xb1 {margin:0 5px; background:#999;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block; background:#f2f2f2; border:0 solid #999; border-width:0 1px;}
/*Images within Snazzy Borders*/
img.floatLeft {
float: left;
margin: 4px;
}
img.floatRight {
float: right;
margin: 4px;
}
I'm using firefox on a linux machine here, so I have no idea how this is going to appear via IE until I get to the windows machines in work on Tuesday. Likely there's a whole nother saga to deal with there. :o
Thanks for any help.
[edited by: encyclo at 2:55 am (utc) on April 29, 2007]
[edit reason] no URLs please, see forum charter [/edit]
Joy of joys. When I remove the floatleft left over from an earlier incarnation. D'oh, it all positions nicely underneath the header & menu bars like I wanted.
#xsnazzy {
margin: 0 0 auto;
width: 734px;
}
Except the Snazzy border goes wiggy. The top left hand and bottom right sections of the border represented by this code:
.xb2, .xb3, .xb4 {
background:#f2f2f2;
border-left:1px solid #dbdcde;
border-right:1px solid #dbdcde;
}
are all out of whack. :(
The rest of the border is snazzy as advertised.
When I add a second instance of the border in the html, the second one displays fine, only the first snazzy border is affected.
It appears to be out of whack in exact vertical alignment with where the last list element in the home nav bar ends.
That's this bit of code:
#HomeNavBar {
width: 734px;
height: 27px;
margin: 0px auto;
background: url(images2/bargray.gif)
}
#HomeNavBar ul {
margin: 0;
padding: 0;
list-style: none;
}
#HomeNavBar li {
float: left;
}
#HomeNavBar a {
display: block;
float: left;
height: 25px;
padding: 5px 20px 5px 20px;
text-decoration: none;
color: #53565d;
font-size: 0.9em;
font-weight: bold;
}
#HomeNavBar a:hover, #HomeNavBar .active a {
background: url(images2/bardarkgray.gif) no-repeat;
color: #dbdcde;
}
Can anyone see what's wrong with this picture? Maybe I'd be better advised to give up & work on becoming a famous Swedish pop star instead?
[edited by: n00by_Two_Shoes at 5:33 am (utc) on April 29, 2007]
I'm sure there are some excellent tutorials to learn Swedish out on there. If there are any famous pop stars here from Sweden, i'd love to hear from you.
[edited by: n00by_Two_Shoes at 6:00 am (utc) on April 29, 2007]
