|
|
| Beppo5 2005-06-02, 4:16 am |
| I am new to CSS layouts. I am trying to design my personal site using css for
the layout, and I am pulling my hair out trying to make this work.
I am trying to set an image for the header and another that runs along the
bottom. I have been reading up on how to do this for the past several days.
Through research I found that a method to do this is setting the images to the
background of there respective div tags. I have one set inside the header the
header is nested inside the siteContainer. I set the image to run along the
bottom as the background image of the siteContainer.
The problem is, neither image is displayed at all. I know that the targeting
is right because the background image I set for the body tag is showing up just
fine. I am also having trouble displaying the sidebar properly. I set it to
float to the left of the contentContainer which it does however it appears
under the content text as if is has a clear left property, which it does not.
Here is the CSS code that I have constructed so far.
body {
background: #ddd url(../FW_images/texturemesh.gif) top left repeat;
color: #333;
margin: 0;
padding: 0;
border: 0;
border-top: 5px solid #bbb;
text-align: center;
font-family: verdena, Arial, Helvetica, sans-serif;
font-size:100.1%;
padding-bottom: 25px;
min-width:620px;
}
#siteContainer {
background-color:white;
border:1px solid black;
margin:5px auto;
text-align:justify;
width: 610px;
w/idth:610px;
height:auto;
background-image: url (../FW_Images/city_footer_singalImage.gif);
background-position: bottom;
background-repeat: no-repeat;
}
#header {
position:relative;
hieght:115px;
background-image:url(../FW_Images/header_image.gif);
background-repeat: no-repeat;
}
#contentContainer {
width:400px;
margin-left: 20px;
margin-bottom:60px;
}
#sideBar {
width:150px;
hieght:200px;
background-color:#999999;
border: 1px dotted black;
float:left;
margin-left: 450px;
margin-top:30px;
margin-right:20px;
}
#footer {
width:100%;
hieght:45px;
}
and here is the html that I have constructed so far:
ww.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="CSS/test_background.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="siteContainer">
<div id="header">
</div>
<div id="contentContainer">
Body text blah blah blah.
<div id="sideBar">Side bar text blah blah blah
</div>
</div>
</div>
</body>
I am probably missing somthing here but I am overwhelmed at the monment. Any
help would be greatly appriciated.
Thank you
| |
| Osgood 2005-06-02, 7:15 am |
| You have spelt 'height' incorrectly in your #header, #sidebar and
#footer <divs>. Change them from 'hieght' to 'height' and see what happens
Beppo5 wrote:
> I am new to CSS layouts. I am trying to design my personal site using css for
> the layout, and I am pulling my hair out trying to make this work.
>
> I am trying to set an image for the header and another that runs along the
> bottom. I have been reading up on how to do this for the past several days.
> Through research I found that a method to do this is setting the images to the
> background of there respective div tags. I have one set inside the header the
> header is nested inside the siteContainer. I set the image to run along the
> bottom as the background image of the siteContainer.
>
> The problem is, neither image is displayed at all. I know that the targeting
> is right because the background image I set for the body tag is showing up just
> fine. I am also having trouble displaying the sidebar properly. I set it to
> float to the left of the contentContainer which it does however it appears
> under the content text as if is has a clear left property, which it does not.
> Here is the CSS code that I have constructed so far.
>
> body {
> background: #ddd url(../FW_images/texturemesh.gif) top left repeat;
> color: #333;
> margin: 0;
> padding: 0;
> border: 0;
> border-top: 5px solid #bbb;
> text-align: center;
> font-family: verdena, Arial, Helvetica, sans-serif;
> font-size:100.1%;
> padding-bottom: 25px;
> min-width:620px;
> }
> #siteContainer {
> background-color:white;
> border:1px solid black;
> margin:5px auto;
> text-align:justify;
> width: 610px;
> w/idth:610px;
> height:auto;
> background-image: url (../FW_Images/city_footer_singalImage.gif);
> background-position: bottom;
> background-repeat: no-repeat;
> }
> #header {
> position:relative;
> hieght:115px;
> background-image:url(../FW_Images/header_image.gif);
> background-repeat: no-repeat;
> }
> #contentContainer {
> width:400px;
> margin-left: 20px;
> margin-bottom:60px;
> }
> #sideBar {
> width:150px;
> hieght:200px;
> background-color:#999999;
> border: 1px dotted black;
> float:left;
> margin-left: 450px;
> margin-top:30px;
> margin-right:20px;
> }
> #footer {
> width:100%;
> hieght:45px;
> }
>
> and here is the html that I have constructed so far:
>
> ww.w3.org/TR/html4/loose.dtd">
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
> <title>Untitled Document</title>
> <link href="CSS/test_background.css" rel="stylesheet" type="text/css">
> </head>
>
> <body>
> <div id="siteContainer">
> <div id="header">
> </div>
> <div id="contentContainer">
> Body text blah blah blah.
> <div id="sideBar">Side bar text blah blah blah
> </div>
> </div>
> </div>
> </body>
>
> I am probably missing somthing here but I am overwhelmed at the monment. Any
> help would be greatly appriciated.
>
> Thank you
>
| |
| Beppo5 2005-06-02, 7:23 pm |
| Osgood,
Silly me, fixing the spelling did help resolve some of the problems that were
puzzling me, however the images still are not showing up!
If you see any other problems with the style sheet or the html let me know.
Until then I will keep on trying to figuer this out.
Thanks
| |
| xcoldnet 2005-06-02, 7:23 pm |
| perhaps body { ... should be:
..body {...
there should be a dot before the name. Not sure if this is the problem but give it a try.
Dario
| |
| Beppo5 2005-06-02, 7:23 pm |
| Sorry,
I went back and double checked the CSS and HTML again for silly errors and
found that simple syntax and spelling errors were causeing all of my problems.
I guess I needed some sleep to figeur this out. Thank you Osgood for taking
the time to look through my post.
| |
| Jerry Baker 2005-06-02, 7:23 pm |
| xcoldnet wrote:
> perhaps body { ... should be:
>
> .body {...
>
> there should be a dot before the name. Not sure if this is the problem but give it a try.
There should only be a dot if it is a class name. When you are defining
styles for HTML tags there is no dot.
--
Jerry Baker
Insert Image+ and Insert (X)HTML Doctypes Extensions
http://dreamweaver.bakerweb.biz
| |
| Michael Fesser 2005-06-02, 7:24 pm |
| .oO(Beppo5)
>I went back and double checked the CSS and HTML again for silly errors and
>found that simple syntax and spelling errors were causeing all of my problems.
For the next time:
http://jigsaw.w3.org/css-validator/
http://validator.w3.org/
First validate (HTML and CSS), _then_ ask for help.
Micha
| |
|
| try defining <p> in the css file
Are your text paragraphs within the format :
<div id="text">example text</div>
I have a feeling that by not defining <p> the browser is still reading the <p>
default settings. Or you may be formatting paragraphs something like this
(wrongly):
<div id="text"><p>example text</p></div>
Within your css file (near the top), write the text attributes like this:
p{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
I hope that helps
| |
| nikonratm 2005-08-02, 7:21 pm |
| try 'font-family' instead of just 'font'
|
|
|
|
| Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |