2 Replies - 2022 Views - Last Post: 11 October 2011 - 09:53 AM

#1 Btu  Icon User is offline

  • D.I.C Regular

Reputation: 36
  • View blog
  • Posts: 250
  • Joined: 16-May 11

CSS properties not working on <div>

Posted 11 October 2011 - 09:35 AM

Hey there, I'm new to CSS and I'm having a problem understanding why a certain <div> tag isn't showing a border or background color.

If I set the <div> properties nothing seems to work. But if I set properties in the h1.navigation, the border and backcolor show up.

The following html code is within the <body> tag:

This doesn't show a border or backcolor, nor can I position it anywhere.
<div class="navigation_page">			
	hi
</div>


This shows backcolor and border:
<div class="navigation_page">			
	<h1 class="navigation">hi</h1>
</div>





here's the css:

/* ---- Body ---- */

body {

margin:0 auto;
width:800px;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
background-color:silver;
 }
 
/* ---- Header ---- */

.header ul, li {
display:inline;

}
div.header{
width:100%;
text-decoration:none;
background-color:#000070;
color:white;
margin:0 auto;
width:100%;
border:2px solid #000070;

}

img.logo{
float:left;
}

img.headerleft1{
left: 0%; 
position: relative;
}

img.headerleft2{
left:7%;
 position: relative;
}

img.headerleft3{
left:12%;
 position: relative;
}

img.headerleft4{
left:17%;
 position: relative;
}

h1.header{
font-size:250%;
color:white;
text-align:center;
font-weight:bold;
}

/* ---- Content ---- */

div.content{
width:100%;
border:2px solid #000070;
margin-top:2em;
margin-bottom:2em;
background-color:white;
padding:1em;
}

/* ---- Left Sidebar ---- */

div.left{

}

td{
width:33%;
text-align:center;
}

/* ---- Navigation ---- */

div.navigation{
background-color:grey;
text-align:center;
width:100%;
margin-top:0;
margin-bottom:0;
text-decoration:none;
color:white;
font-size:16pt;
font-weight:bold;

}

/*
h1.navigation_title{
position:relative;
left:-15%;
width:26%;
font-size:24pt;
font-weight:bold;
color:white;
float:left;
border:2px solid black;
background-color:grey;
padding :3px;
}*/

}
div.navigation_page{
background-color:white;
width:100%;
margin-top:3px;
margin-bottom:0;
text-decoration:none;
color:white;
font-size:6pt;
border:2px solid #000070;
}
table.navigation{
width:100%;
}
td.navigation{
width:33%;
text-align:center;
}

/* ---- Top ----*/

a.top{
float:left;
font-size:12pt;
}

/* ---- Pseudoclasses ---- */

a:link{
text-decoration:none;
color:white;
}
a:visited{
text-decoration:none;
color:white;
}
a:hover{
color:#000070;
}



I'm new to web developing so please feel free to comment on anything..

Thanks in advance

Is This A Good Question/Topic? 0
  • +

Replies To: CSS properties not working on <div>

#2 MrWobbles  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 31
  • View blog
  • Posts: 328
  • Joined: 11-April 08

Re: CSS properties not working on <div>

Posted 11 October 2011 - 09:51 AM

You don't necessarily need the div.navigation_page to target that unless you are using the navigation_page class for other tags and want it to look different.

Try selecting just the class .navigation_page in your css and see if that helps.. not sure why what you have is not working, although it may have something to do with that extra '}' you have right before the div.navigation_page selector
Was This Post Helpful? 1
  • +
  • -

#3 Btu  Icon User is offline

  • D.I.C Regular

Reputation: 36
  • View blog
  • Posts: 250
  • Joined: 16-May 11

Re: CSS properties not working on <div>

Posted 11 October 2011 - 09:53 AM

Yes I need them all to look different..

I just noticed the extra '}'
..*sigh*

Thanks!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1