[SOLVED] Newbie having a few CSS problems!!

Graeme36 · #1 Sep 26th, 2007, 20:41

Hi I am working on the layout of my first website. I am having a few teething problems and was wondering If anybody could help??

I have commented the problems in the css file.

Heres the HTML:

HTML: Select all

<%@MasterLanguage="C#"AutoEventWireup="true"CodeFile="MasterPage.master.cs"Inherits="MasterPage" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Untitled</title>
<linkhref=StyleSheet.csstype="text/css"rel=Stylesheet/>
</head>
<body>
<formid="form1"runat="server">
<divid="body">
<divid="header">
<divid="logo">
<imgsrc="logo.gif"style="z-index: 100; left: 66px; position: absolute; top: 25px"/>
</div>
<divid="headeraddress">
**********************<br/>
*********************<br/>
***********************<br/>
***************<br/>
******************<br/>
****************************
</div>
</div>
<divid="subheader">
</div>
<divid="container">
<divid="sidebar">
<divid="sidebarheader">
</div>
</div>
<divid="content">
<asp:ContentPlaceHolderID="ContentPlaceHolder1"runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<divid="footer">
</div>
</div>
</form>
</body>
</html>

and the CSS:

Code: Select all

body{
margin:15px45px15px45px;
padding:0;
background:white;
}
#header
{
background: red;
height: 180px; 
border-left: thin3pxblack;/*borders not working*/
border-top:thin3pxblack;
border-right:thin3pxblack;
}
 
#logo
{ 
margin-left:10px;
margin-top:10px;
float:left;
height: 160px; 
width: 160px; 
border:thick3pxblack;
background-image: url([logo.gif]);/*trying to place logo gif image in div*/

}
 
#headeraddress
{
padding-top:20px;
padding-right:10px;
float:right;
text-align:right;
color:white;
font-style:italic;
font-size:14pt;
font-weight:bolder;
}
#subheader
{
background:black;
height:30px;
border-left:thin3pxred;/*borders not working*/
border-bottom:thin3pxred;
border-right:thin3pxred;
}
 
#container/*container for sidebar and content*/
{
margin-top:15px;
}
#sidebar
{
background:red;
width:180px;
height:400px;
float:left;
}
#sidebarheader
{
background:black;
height:30px;
}
 
#content
{
float:right;
padding-left:10px;
/*would like to fill the remainder of the space to the right of the sidebar*/
 
}
 
 
#footer/*placing itself it main container*/
{
margin-top:15px;
background:black;
height:25px;
margin-bottom:15px;
}

The problems:
I would like to display the logo gif image using css i.e backgroung-image: url...
The borders dont seem to be working on the header / sub header divs.
I have created a container div to hold my sidebar and content. Ideally I would like the content div to fill the space to the right of the sidebar (less the padding/margin).
The footer is placing itself in the container div, I thought by placing the footer div tags outside the container div tags in the html would cause the footer to be below it. It seems not!!

Thanks in advance for any help...
Graeme.

Lchad · #2 Sep 27th, 2007, 01:31

For the border that is not working change the order.
Pixels first, thin then color. Also add spacing.
example:
border: 3px thin #000000;
Fix the other one below in your css as well
***************************************

for this one:

Code: Select all

#logo
{ 
margin-left:10px;
margin-top:10px;
float:left;
height: 160px; 
width: 160px; 
border:thick3pxblack;
background-image: url([logo.gif]);/*trying to place logo gif image in div*/

}

Delete the brackets around the image.
background-image: url (logo.gif) ;
And I do not see a div id="logo"></div> anywhere in your html?

************************************************** ****

Code: Select all

#content
{
float:right;
padding-left:10px;
/*would like to fill the remainder of the space to the right of the sidebar*/
 
}

Ok no problem. add a width to this.
width: 400px; Ok.. I just made up that pixel amount, play with the code until you have it filled up enough without throwing the rest of the design out of whack.
************************************************** ********

Footer Div issue:
You have:

Code: Select all

<divid="footer">
</div>
</div>

My guess is that you need to switch it a bit.
Test this and see:

Code: Select all

</div>
<div id="footer">
</div?

Question on any of this just let me know!

karinne · #3 Sep 27th, 2007, 12:38

And if you would have validated your HTML and CSS before-hand, it would have picked those up

Graeme36 · #4 Sep 27th, 2007, 20:53

Hi thanks for the advice.....the logo url is now working.. but he borders are still not showing...there was spacing in the coding but after pasting it it must have disappeared??
And the footer is still positioning itself in the container....I didnt alter the coding for this as I think it should work...the bottom div tag is for the body div tags.

Heres the css for the borders now:
#subheader
{
background:black;
height:30px;
border-left:3px thin red;/*borders not working*/
border-bottom:3px thin red;
border-right:3px thin red;
}

I have also tried using the bottom attribute in the footer tag:
#footer/*placing itself it main container*/
{
margin-top:15px;
background:black;
height:25px;
margin-bottom:15px;
bottom:10px;
}
But still no joy

Graeme36 · #5 Sep 27th, 2007, 21:14

Hi just an update the border problem is solved:

border-right:solid thin black;

Seemed to work.

alexgeek · #6 Sep 28th, 2007, 00:04

Quote:

Originally Posted by Graeme36

Hi just an update the border problem is solved:

border-right:solid thin black;

Seemed to work.

personally i think this is better practice and adds greater flexibility:
border-right: 1px solid #000000;

but its up to you

AdRock · #7 Sep 28th, 2007, 09:32

Quote:

Originally Posted by alexgeek

personally i think this is better practice and adds greater flexibility:
border-right: 1px solid #000000;

but its up to you

That's how I do it

Graeme36 · #8 Sep 28th, 2007, 20:24

Just an update......I think I'm getting there slowly but surely

I'm still having the footer problems, placing itself in the main container??
Also I have used width:450px; , for spacing out the content div....it looks great in VWD.....but when I debug it in IE .....it's either too big in a restored down window or too small in a maximized window?????
Is using percentages rather the px's the way to go ??
Ideally I would like to use the remaining space to the right of the sidebar (less the padding) for my main content. Why isnt there a remainder width property in CSS

Graeme.

AdRock · #9 Sep 28th, 2007, 20:46

What I would suggest is try indenting some of your HTML so you can see where <div>s start and end. That way you might find out why your footer is in the container

Graeme36 · #10 Sep 29th, 2007, 11:37

Hi Adrock
My coding has been indented, but when I copy/pasted to here the coding left aligned itself.
I will repaste the coding and edit it, and perhaps you could then tell me where I'm going wrong...
HTML:
<%@MasterLanguage="C#"AutoEventWireup="true"CodeFile="MasterPage.master.cs"Inherits="MasterPage" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Untitled</title>
<linkhref=StyleSheet.csstype="text/css"rel=Stylesheet/>
</head>
<body>
<formid="form1"runat="server">
<divid="body">

<divid="header">
<divid="logo"></div>
<divid="headeraddress">
*********************<br/>
*************<br/>
****************<br/>
***********<br/>
******************************<br/>
*****************************
</div>
</div>

<divid="subheader"></div>

<divid="container">
<divid="sidebar">
<divid="sidebarheader"></div>
</div>
<divid="content">
<asp:ContentPlaceHolderID="ContentPlaceHolder1"runat="server">
</asp:ContentPlaceHolder>
</div>
</div>

<divid="footer"></div>

</div>
</form>
</body>
</html>

CSS
body
{
margin:25px 75px 25px 75px;
padding:0;
background:white;
}
#header
{
background: red;
height: 180px;
border-left: solid 2px black;
border-top:solid 2px black;
border-right:solid 2px black;
}

#logo
{
margin-left:10px;
margin-top:10px;
float:left;
height: 160px;
width: 160px;
border:solid 2px black;
background-image: url(logo.gif);

}

#headeraddress
{
padding-top:20px;
padding-right:10px;
float:right;
text-align:right;
color:white;
font-style:italic;
font-size:14pt;
font-weight:bolder;
}
#subheader
{
background:black;
height:30px;

}

#container/*container for sidebar and content*/
{
margin-top:15px;
}
#sidebar
{
background:red;
width:180px;
height:300px;
float:left;
border:solid 2px black;
}
#sidebarheader
{
background:black;
height:30px;
}

#content
{
float:right;
padding-left:10px;
/*would like to fill the remainder of the space to the right of the sidebar*/
width:450px;/*works ok in VWD IDE yet when run in IE is either too big or too small depending on size of window*/
border:solid 2px black;
height:450px;
}

#footer/*placing itself it main container*/
{
margin-top:15px;
background:black;
height:25px;
margin-bottom:15px;
bottom:10px;
}

AdRock · #11 Sep 29th, 2007, 11:40

Has it been published yet or are you testing locally

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] Newbie having a few CSS problems!!