OT? a CSS question

[Tabasco1]

I am working on learning CSS to position "stuff" and ditch tables when
possible. But I am having trouble with a couple of things.

1. I am placing my websites logo in the top box but I want the box to have a
colored background. So it that when the box is larger than the image it will
look okay.

2. I would like the boarders to be completely filled out and have no breaks.


I have been googleing for the answer but to no avail. Here a page that shows
my issues.

thanks

Charles
Torrance, California
http://www.tcpslashipdomains.com Now accepting PayPal!
http://www.tcpslaship.com under construction

 

[Tabasco1]

I am working on learning CSS to position "stuff" and ditch tables when
possible. But I am having trouble with a couple of things.

1. I am placing my websites logo in the top box but I want the box to have
a colored background. So it that when the box is larger than the image it
will look okay.

2. I would like the boarders to be completely filled out and have no
breaks.


I have been googleing for the answer but to no avail. Here a page that
shows my issues.

Opps here is the link http://tinyurl.com/6jsg7

 

[Peter]

Tabasco1 schreef:

Opps here is the link http://tinyurl.com/6jsg7

I don´t see or don´t understand the problem.Looks OK to me
Peter

 

[Tabasco1]

Tabasco1 schreef:

I don´t see or don´t understand the problem.Looks OK to me
Peter

Thanks for looking.

1. If you look at the top you will see my logo at the top left. If your
browser is maximized you will see empty box at the top right. I would like
to fill that in with a dark green. But I can not seem to get it to fill in.

2. The left hand column should be separated by a line all the way up but it
stops before it reaches my logo.

While I suppose it isn't the end of the world I believe that details are
very important.


Thanks again;

Charles
Torrance, California
http://www.tcpslashipdomains.com Now accepting PayPal!
http://www.tcpslaship.com under construction

 

[bulge]

Thanks for looking.

1. If you look at the top you will see my logo at the top left. If your
browser is maximized you will see empty box at the top right. I would like
to fill that in with a dark green. But I can not seem to get it to fill in.

2. The left hand column should be separated by a line all the way up but it
stops before it reaches my logo.

1. The background colour doesn't go to the right side 'cause you
limited the #top width to 780px. I changed it to 100%. U had a closing
} there as a typo, too.

Adding a border around #top while working in the CSS (always a cool
trick when trying to visualise layouts) revealed #top's width limits
clearly.

2. Is this what you want?

I added the following:
body {margin: 0; padding: 0;}
So everything lines up without white gaps at the top.


Then:

#top
{
padding: 0;
border-bottom: 1px solid gray;
HEIGHT: 80px;
WIDTH: 100%;
background: url(http://www.tcpslaship.com/images/banner2.jpg)
no-repeat;
background-color: #006633;
}

Here I fixed the typo, added 100% instead of 780px and added no-repeat
for the graphic so it wouldn't repeat as the box stretches to 100%.



Then:

#leftnav
{
float: left;
width: 120px;
margin: 0;
background-color: #ffffff;
padding: .5em;
}

I think I left that the same.



Then:

#content
{
float: left;
border-left: 1px solid gray;
background-color: #ffffff;
padding: 1em;
max-width: 36em;
}

I got rid of the 130px margin and floated it to the left, so it sits
up against #leftnav. Left border seems to go straight to the top now.
Hopefully it's what you were looking for?

 

[Tabasco1]

Bulge you Rock.

Thank you so much.



Now that I see the correct way it makes perfect sense.





Charles
Torrance, California
http://www.tcpslashipdomains.com Now accepting PayPal!
http://www.tcpslaship.com under construction

 

[Tabasco1]

#top

{
padding: 0;
border-bottom: 1px solid gray;
HEIGHT: 80px;
WIDTH: 100%;
background: url(http://www.tcpslaship.com/images/banner2.jpg)
no-repeat;
background-color: #006633;
}

The line "no-repeat" is the key that fixed the puzzle for me. With out it
would repeat and fill out the rest of the box and with the width setup it
was impossible to fill in with the back ground color.

Thanks Again;

Charles
Torrance, California
http://www.tcpslashipdomains.com Now accepting PayPal!
http://www.tcpslaship.com under construction

 

[bulge]

The line "no-repeat" is the key that fixed the puzzle for me. With out it
would repeat and fill out the rest of the box and with the width setup it
was impossible to fill in with the back ground color.

Thanks Again;

Charles
Torrance, California
http://www.tcpslashipdomains.com Now accepting PayPal!
http://www.tcpslaship.com under construction

glad it worked out for you