Forum Moderators: not2easy
I have a bunch of questions.
1) why doesn't the red background line "information.." not extend the width of the box below it.
2) why doesn't the footer extend the width the box above it.
3) why does this page look so much different under netscape 7.1 & mozilla. Gap between content and products changes quite a bit between netscape and IE.
4) did I lay this out the wrong way? I mean should I be using tables?
Thanks for any advice
[edited by: engine at 2:15 pm (utc) on July 17, 2003]
[edit reason] No urls, thanks. See TOS [webmasterworld.com] [/edit]
There are tons of really sharp people willing to help on this site (and the help is quick in the coming), but let me ask you to rephrase your question.
1. Dont put up links. This forum does not allow it, as links go up and down continually. YOu can see how this is a problem when subsequent forum readers looking for a particular problem click your link.. and its not found. How can they then follow the rest of the discussion? So what do you do? This:
2. Give us code snippets, isolating your problem. AFter all, you want us to go to your site, download your css, download your page, when you could do the initial work of isolating your issue into something much more manageable.
Try this format:
My problem. Also, indicate which browser is causing the problem, and anything else someone would need to know in recreating the problem
My code associated with the problem
Trust me, you will get all the css help you could ever hope to in this forum :)
its what got me learned *wipes tear from eye*
Now if only I could learn grammer.
Questions.
1) How do I get the Banner with a 4pixel gap right below the main content?
2) Is there a way to fix the gap between content and products so it is always 4 pixels? By using % is gets wider and narrower.
3) Why does my logo area have a margin around it. When I set position:absolute the logo is pos is correct but the contenthdg and content move up under the logo.
I am trying to remove absolute because others said this is part of my problem.
Thanks for any help... here's the html
I have tried removing any extra junk
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>My Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo">
<p>Logo goes here but it should start at 0,0 why is this padded? <br>
logo<br>
logo<br>
logo <br>
logo <br>
logo </p>
</div>
<div id="menu">Menu goes here</div>
<div id="contenthdg"> <img src="../media/images/left-corner.gif" width="10" height="13" class="LeftCorner" />Information
# shoots listed for 2003 </div>
<div id="content">
<h1>My Heading Goes Here</h1>
<p>Blah Blah Blah provides an on-line searchable blah blah database. Now you
can search for blah blah blah in your area. At our website blah blah.
</p>
<h1>Another Heading</h1>
<p>More text</p>
</div>
<div id="productshdg"> <img src="../media/images/left-corner.gif" width="10" height="13" class="LeftCorner">Products
in our Store </div>
<div id="products">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="121" class="infoBoxCenter"> picture 1</td>
</tr>
<tr>
<td class="infoBoxCenter">picture 2 </td>
</tr>
<tr>
<td class="InfoBoxRowBorderLR"> </td>
</tr>
<tr>
<td bgcolor="8a0000"> <div align="center">
<p class="columnheadertext">Friends & Sponsors</p>
</div></td>
</tr>
<tr>
<td class="infoBoxCenter" ><strong><font size="-1">more text</font></strong></td>
</tr>
<tr>
<td height="56" valign="top" class="infoBoxCenter">pic 3 </td>
</tr>
<tr>
<td height="64" valign="top" class="infoBoxCenter"> <div align="center">pic
4 </div></td>
</tr>
</table>
</div>
<div id = "footer"><strong>Banner goes here</strong><a href="#" title="home page"><br />
Home</a> <a href="#" title="Find">Find</a> etc<br />
copyright </div>
</body>
</html>
Here's the css
/* CSS Document */
body{
padding :0;
margin :5px;
background-color: #CCCCCC;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
}
#contenthdg {
float:left;
margin-top: 20px;
width:80%;
left: 4px;
padding: 0px;
background-color: #8a0000;
color: White;
font-style: italic;
font-weight: bold;
font-family: serif;
font-size: 90%;
}
#content{
top:157px;
width:80%;
float:left;
margin-bottom: 5px;
left: 4px;
border-width: 1px;
border-style: solid;
border-color: black;
background: White;
}
#content h1 {
font-size: 100%;
font-weight: bold;
color: #000000;
background-color : transparent;
position: relative;
line-height: 0px;
margin-top: 10px;
margin-bottom: -6px;
text-align: left;
font-style: normal;
font-family: Arial;
margin-left: 7px;
margin-right: 7px;
}
#content h2 {
font-family: arial;
font-size: 100%;
font-weight: bold;
color: #000000;
background-color : transparent;
padding: 0px;
margin-top: -.8em;
margin-bottom: -1.2em;
margin-left: 7px;
margin-right: 7px;
}
#content p{
font-family: arial, Georgia, "Times New Roman", Times, serif;
font-size: 95%;
font-weight: normal;
color: #000000;
background-color : transparent;
line-height : 115%;
margin-left: 7px;
margin-right: 7px;
}
#logo{
width:100%;
top : 0px;
left : 0px;
z-index : 9;
background: White;
}
#menu {
position : absolute;
top : 105px;
left : 0px;
z-index : 99;
width : 100%
}
#productshdg {
position: absolute;
top: 130px;
background-color: #8a0000;
right: 4px;
width: 150px;
color: White;
font-style: italic;
font-weight: bold;
font-family: serif;
font-size: 90%;
border-right-style: solid;
border-right-width: 2px;
border-right-color: #8a0000;
}
#products {
position:absolute;
top: 147px;
right: 4px;
width: 150px;
float: right;
border-width: 1px;
border-style: solid;
border-color: black;
text-align: center;
background-color: #FFFFFF;
}
#footer {
position:absolute;
border: 1px solid;
margin-right: 12px;
margin-left: -1px;
margin-bottom: 0px;
margin-top: 4px;
padding: 5px;
background-color: #FFFFFF;
font-size: 65%;
text-align: center;
}
<div id="logo">Logo goes here</div>
<div id="content">
<h1>My Heading Goes Here</h1>
<p>Blah Blah Blah
<h1>Another Heading</h1>
<p>More text</p>
</div>
<div id="menu">Menu goes here</div>
<div id="products">
<h2>Products in our Store</h2>
<p>Stuff
<p>Stuff
</div>
<div id="footer">
<em>Banner goes here</em>
<a href="#" title="home page">Home</a>
<a href="#" title="Find">Find</a>
</div>
body {
margin: 0;
padding: 5px;
background: #ccc;
}/* place the logo at the very top */
#logo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 6em;
background: white;
}/* place the menu just below the logo */
#menu {
position: absolute;
top: 6em;
right: 0;
height: 2em;
width: 100%;
background: red;
}/* provide enough space to start the content, and push it over to provide space for the product */
#content {
margin-top: 8em;
margin-right: 150px;
border: 1px solid black;
}/* position the products on the right side, below the logo and menu */
#products {
position: absolute;
border: 1px solid black;
top: 8em;
right: 0;
}/* or whatever */
#products h2 {
margin-top: 0;
color: white;
background: red;
font-size: 1em;
}/* 4px gap between footer and content, since everything else is moved out of the flow */
#footer {
margin-top: 4px;
border: 1px solid black;
}
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
"products in our store"
I want a curved graphic on the left hand edge to get it a rounded corner look.
I also need to elminate the black border that goes around "Products in our store". But the black border should be there in the box below it that will actually hold the information.
Do I need to create a new class for the "products in our store". One for heading and one for content? If yes, how do I get the content of products to line up directly under it.
Thanks
To put a border around the contents, put another div inside #products:
#products #products-inner {
border: 1px solid black;
}
<div id="products">
<h2>Products</h2>
<div id="products-inner">
<p>Stuff Stuff Stuff
</div>
</div>
Its always easier to nest content than to try to align things, why cause yourself extra pain when you've got something that's in the right spot already :)
I took your advice using this
#products #products-inner {
border: 1px solid black;
}
Now I do get the border where I want but there are two new problems.
There is a gap between products & #products-inner
Plus if I need to make the column wider, the graphic at the top only expands if it has more text in it. Let say the #products h2 has "ABC" in it but in products inner you have bunch of text and it's 10 characters wide. The #products header is only 3 characters wide.
Maybe Its my lack of understanding about which methods for CSS to use to get the look I want.
I have been through many tutorials that cover basic layout but none that really cover adding graphic headings, etc.
I was wrong about the other issue.
If the inner text makes the box wider, the heading box get wider too.
I was thinking the inner box text should wrap instead of making the box wider.
Thanks for any further advice
Thanks for any help
