...

View Full Version : Web page borders



Charisma
01-29-2012, 08:00 PM
I have this page i built where the Background doesn't move but the content in the middle does, I have a frame with two frames inside. one is navigation and the other has text. How can I get rid of the borders on the left and right, so thetwo boxes look free?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Welcome to........</title>

<link rel="stylesheet" type="text/css" href="css/main.css">

</head>
<body>

<div id="container" >

<div id="top"></div><!-- this is required to push the #header down -->

<div id="header" >
<img src="images/Mug with foot.gif" alt="Foot holding mug" width="95" height="130" hspace="10" align="left">
<ul id="navigation">
<li><a id="current" href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--end #header -->

<div id="content" >
<p>My interest in photography started when I was about 15, when I watched
my older brother develop photos in a downstairs bathroom that he had
turned into a darkroom. Of course when I had a baby of my own the
interest in photography resurfaced once again. I'm sure I had the most
photographed baby in the world. In 2003 I joined the local camera club
and I became very serious about my hobby. I was the club's editor for
their newsletter for at least 4 years, and have earned many merits and
honours for my photos in our monthly photo comps. I have earned my way
into 'A' Grade, which is the top grade in our club. I have won various
photo competitions over the last five years.
</p>

<p>
By the way, I forgot to mention that I have a physical disability. I'm
a thalidomide victim which means I have very short arms with three
fingers on each hand, so I take most of my photos (other than using a
tripod) while holding the camera with my feet. Not many photographers
can put that on their resume.



</div>


</body>
</html>

Excavator
01-29-2012, 09:21 PM
Hello Charisma,
Those borders come from the three lines I've highlighted in red below. You can delete those lines, or comment them out, to remove the left and right borders.
#container {
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
box-shadow: 0 0 10px #000000;
color: #000000;
margin: auto;
min-height: 100%;
padding: 0 40px;
width: 700px;
}

Excavator
01-29-2012, 09:36 PM
There were a couple missing closing tags in your code. You should check out the links in my signature line about validation, they can help you a lot.

I've highlighted in red the closing tags I added. I also added some indentation and commenting that might help keep track of where elements are starting and ending -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Welcome to........</title>

<link rel="stylesheet" type="text/css" href="css/main.css">

</head>
<body>
<div id="container" >
<div id="top"></div><!-- this is required to push the #header down -->
<div id="header" >
<img src="images/Mug with foot.gif" alt="Foot holding mug" width="95" height="130" hspace="10" align="left">
<ul id="navigation">
<li><a id="current" href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--end #header -->
<div id="content" >
<p>
My interest in photography started when I was about 15, when I watched
my older brother develop photos in a downstairs bathroom that he had
turned into a darkroom. Of course when I had a baby of my own the
interest in photography resurfaced once again. I'm sure I had the most
photographed baby in the world. In 2003 I joined the local camera club
and I became very serious about my hobby. I was the club's editor for
their newsletter for at least 4 years, and have earned many merits and
honours for my photos in our monthly photo comps. I have earned my way
into 'A' Grade, which is the top grade in our club. I have won various
photo competitions over the last five years.
</p>
<p>
By the way, I forgot to mention that I have a physical disability. I'm
a thalidomide victim which means I have very short arms with three
fingers on each hand, so I take most of my photos (other than using a
tripod) while holding the camera with my feet. Not many photographers
can put that on their resume.
</p>
<!--end content--></div>
<!--end container--></div>
</body>
</html>

Charisma
01-29-2012, 11:21 PM
This was very helpful and cleaned things up. Thanks. Is there away to have the box like my header has, for my text part below it? and that will stretch as I add more text?

Excavator
01-29-2012, 11:33 PM
This was very helpful and cleaned things up. Thanks. Is there away to have the box like my header has, for my text part below it? and that will stretch as I add more text?

Sure, if you remove the height that element can expand to enclose however much text you put in it.
Like this -
#content {
background-color: rgba(49, 88, 126, 0.2);
border: 1px solid #5588AA;
border-radius: 10px 10px 10px 10px;
box-shadow: 4px 4px 8px #333333;
/*height: 285px;*/
margin: 39px auto 40px;
}

Excavator
01-29-2012, 11:36 PM
Some padding might be nice there too -
#content {
background-color: rgba(49, 88, 126, 0.2);
border: 1px solid #5588AA;
border-radius: 10px 10px 10px 10px;
box-shadow: 4px 4px 8px #333333;
margin: 39px 0 40px;
padding: 0 20px;
}

Charisma
01-29-2012, 11:49 PM
My content does't look like yours. I have two, Should I take both mine out and replace with yours?




#content {
padding-bottom:40px;
}
#content p {
font-size:100%;
color: #000 ;
text-shadow: 1px 1px 1px;
}

Charisma
01-29-2012, 11:55 PM
I tryed it. perfect. Thanks.

Excavator
01-30-2012, 12:17 AM
My content does't look like yours. I have two, Should I take both mine out and replace with yours?




#content {
padding-bottom:40px;
}
#content p {
font-size:100%;
color: #000 ;
text-shadow: 1px 1px 1px;
}



In that bit you've quoted above, the first one puts 40px padding on the bottom of #content.
The second one is styling the paragraph tags inside of #content, it doesn't do anything to #content itself.

Charisma
01-30-2012, 12:39 AM
I copied yours and it's perfect. Thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum