Weird CSS Problem ( 5 Views )
-
My site has three basic layout components--the header, sidebar, and main content area. I'm using CSS to create a layout for my site. Here's the code:
Code:
body
{
font-family: Arial Verdana, sans-serif;
font-size: 1.5em;
padding: 0%;
margin: 0%;
}
.HeaderRegion
{
width: 100%;
height: 7%;
background-color: #E8E8E8;
border-bottom: dotted 1px #808080;
padding-bottom: 1%;
}
.Header
{
font-size: 2.5em;
margin-top: 1%;
margin-left: 1%;
}
.BlueText{color: #6495ED;}
.OrangeText{color: #FFA500;}
.GrayText{color: #808080;}
.Sidebar
{
width: 12%;
border-right: dotted 1px #808080;
padding-left: 1%;
}
.ContentFrame
{
margin-left: 13%;
border-right: dotted 1px #808080;
border-bottom: dotted 1px #808080;
}
.HomeLink{text-decoration: none;}
.HomeLink:hover
{
text-decoration: none;
border-bottom: dotted 2px #6495ED;
}
.Link
{
text-decoration: none;
color: #6495ED;
padding-right: 2.2%;
font-weight: bold;
}
.Link:hover
{
text-decoration: none;
color: #FFA500;
background: url(/Images/ForwardArrow.Gif) right center no-repeat;
}
There's only one problem. See the contents of the red box in the attachment below. (Wait for a mod to approve.)
The sidebar content pushes down the main content. Any ideas?
(Hasan , Greenland)
Show the XHTML please.
Right off the bat, you should probably change
.HeaderRegion, .Sidebar, .ContentFrame to
#HeaderRegion, #Sidebar, #ContentFrame and use ID instead of class. SInce you use those only once every page.
(Murat, Malawi)
Here's the XHTML:
HTML Code:
[color=#800080]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url]">
<?xml version="1.0" encoding="Utf-8"?>
<html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]" lang="en" xml:lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="/Styling.Css" />
</head>
<body>
<div class="HeaderRegion">
<div class="Header">
<a class="HomeLink" href="/"><span class="BlueText">Cyber</span><span class="OrangeText">Cory</span><span class="GrayText">.Net</span></a>
</div>
</div>
<div class="Sidebar">
<a class="Link" href="#">Hey!</a>
</div>
<div class="ContentFrame">
<a class="InlineLink" href="#">Over here!</a> Where do you think you're going?
</div>
</body>
</html>
[/color]
If possible, I'd like to keep using the class attribute. The id attribute is for identification.
(murat, Belize)
1- Generally, class is used for items that will be used more then once in a page. For example, if you want a text to be green at several places in the page, you’ll be using the <div class=”greentext”> more then once.
ID, is used when for items you use only once on the page. Page layouts for example, your header, sidebar and main content should be IDs.
2- I’d also remove the <?xml version="1.0" encoding="Utf-8"?> because it makes IE revert to a “quirky” mode which interprets CSS in a somewhat buggy fashion. Instead, put this: <META http-equiv="Content-Type" content="text/html; charset=Utf-8"> between your header tags
I’ll get back to you with the rest, have a bit of work to do.
(adnan, Jamaica)
Thanks for your help. Unfortunately, it still isn't working. :bawling:
(semih , Swaziland)
Revised:
XHTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<META http-equiv="Content-Type" content="text/html; charset=Utf-8">
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="Styling.Css" />
</head>
<body>
<div id="HeaderRegion">
<div class="Header">
<a class="HomeLink" href="/"><span class="BlueText">Cyber</span><span class="OrangeText">Cory</span><span class="GrayText">.Net</span></a>
</div>
</div>
<span id="Sidebar">
<a class="Link" href="#">Hey!</a>
</span>
<span id="ContentFrame">
<a class="InlineLink" href="#">Over here!</a> Where do you think you're going?
</span>
</body>
CSS:
Code:
body
{
font-family: Arial Verdana, sans-serif;
font-size: 1.5em;
padding: 0%;
margin: 0%;
}
#HeaderRegion
{
width: 100%;
height: 7%;
background-color: #E8E8E8;
border-bottom: dotted 1px #808080;
padding-bottom: 1%;
}
.Header
{
font-size: 2.5em;
margin-top: 1%;
margin-left: 1%;
}
.BlueText{color: #6495ED;}
.OrangeText{color: #FFA500;}
.GrayText{color: #808080;}
#Sidebar
{
width: 12%;
border-right: dotted 1px #808080;
padding-left: 1%;
}
#ContentFrame
{
margin-left: 13%;
border-right: dotted 1px #808080;
border-bottom: dotted 1px #808080;
}
.HomeLink{text-decoration: none;}
.HomeLink:hover
{
text-decoration: none;
border-bottom: dotted 2px #6495ED;
}
.Link
{
text-decoration: none;
color: #6495ED;
padding-right: 2.2%;
font-weight: bold;
}
.Link:hover
{
text-decoration: none;
color: #FFA500;
background: url(/Images/ForwardArrow.Gif) right center no-repeat;
}
(tolga, Palau)
Mmm... thanks Mad Project, but last night, I came up with my own solution: absolute poisitioning! Thanks anyway. ;)
(R..A..A..M..A..Z..A..N, Finland)
Yah, I was thinking about suggesting absolute positioning but I figured you had your reasons for sticking with margins.
(berkay, American Samoa)
Okay, thanks. ;)
(orhan, Bhutan)
Related Topics ... (or search in 1.720.883 topics !)
weird css problem (3)
weird css problem in ie (5)
weird css problem (4)
weird css problem (5)
css problem - looks weird in firefox (4)
weird css mouseover problem (6)
is this weird border a css or ie problem? (1)
weird css / ie6 problem (5)
weird problem with css border (8)
copyright © 2007-2031 Pfodere.COM ( 6 Pfoyihuee Online )
|