Resolved Can't style a div for main content within wrapper?

meridionaljet · 08-12-2011, 07:28 PM

Hello,

For some reason I am unable to apply styles to a div which I have declared for the main content section of my page. It is inside the wrapper div, which also includes the website header div above the main section. As far as I know, declaring two divs, one after another, inside another div is just fine, and I should be able to style the second one just as I was able to style the first one. However, if I use CSS to apply, say, text-align: center to the text inside the second div, it does not apply, and the text stays justified to the left. Any help would be appreciated.

Here is the code snippet:

Code:

#main-section
 { 
 text-align: center; 
 }

<body>
<div id="wrapper">
 <div id="banner">
  <ul id="navbar">
  <li id="current-page"><a href="index.html">Home</a></li>
  <li><a href="storminfo.html">Current Storm Info</a></li>
  <li><a href="invest-tracking.html">Invest Tracking</a></li>
  <li><a href="analysis.html">Analysis Tools</a></li>
  <li><a href="links.html">Links Database</a></li>
  </ul>
 </div> <!-- end banner -->
 <div id="main-section">
  
This is the home page.

 </div> 
</div> <!-- end wrapper -->
</body>

Sammy12 · 08-12-2011, 07:36 PM

try posting your full code, it could be something else restricting it

Did you wrap the css in <style> </style> ?

meridionaljet · 08-12-2011, 07:41 PM

Quote:

Originally Posted by Sammy12

try posting your full code, it could be something else restricting it

Did you wrap the css in <style> </style> ?

Yes.

Code:

<!DOCTYPE html>
<html>
<head>
 <title>Tropical Tidbits</title>
 <meta name="description" content="Tropical Tidbits - tropical weather and Atlantic hurricane information, analysis, and forecasts" />
 <meta name="keywords" content="tropical,tidbit,tidbits,atlantic,hurricane,weather,storm,Levi,Cowan,Levi Cowan,analysis,information,forecast,cyclone,ocean,caribbean,united states,tracking,models,news,depression,honduras,nicaragua,jamaica,cuba,puerto rico,florida,gulf of mexico,radar,satellite,surface,data,loops,maps,current,invest,africa,rain,wind,flooding,storm surge,meteorology,official,links" />
 <meta name="author" content="Levi Cowan" />
 <style type="text/css">
 body { 
 font-family: arial, sans, sans-serif;
 font-size: 10pt;
 margin-top: 0;
 background-image: url('images/wrapper-dropshadow.jpg');
 background-position: center;
 background-repeat: repeat-y;
 }
 #wrapper 
 {
 width: 1024px;
 margin: 0 auto;
 }
 #banner 
 { 
 background-image: url('images/banner.jpg');
 width: 1024px;
 height: 169px;
 }
 #navbar
 {
 list-style-type: none;
 margin: 0;
 padding: 0;
 position: relative; left: 200px; top: 110px;
 }
 #navbar li
 { 
 float: left;
 margin: 0;
 padding: 0; 
 margin-left: 5px;
 background-color: rgba(0,106,205,0.35);
 border-radius: 12px;
 }
 #navbar a
 {
 display: block;
 padding: 13px 15px;
 color: #FFFFFF;
 font-size: 14pt
 }
 #navbar a:link
 { text-decoration: none }
 #navbar a:hover
 { 
 background-color: rgba(0,16,97,0.35);
 border-radius:12px; 
 }
 #navbar #current-page
 {
 background-color: rgba(0,16,97,0.35);
 }
 <!--End Styling of Banner and Navigation-->
 #main-section
 { 
 text-align: center; 
 }
 
 </style> <!-------End Style Sheet------->
</head>
<body>
<div id="wrapper">
 <div id="banner">
  <ul id="navbar">
  <li id="current-page"><a href="index.html">Home</a></li>
  <li><a href="storminfo.html">Current Storm Info</a></li>
  <li><a href="invest-tracking.html">Invest Tracking</a></li>
  <li><a href="analysis.html">Analysis Tools</a></li>
  <li><a href="links.html">Links Database</a></li>
  </ul>
 </div> <!-- end banner -->
 <div id="main-section">
  
This is the home page.

 </div> 
</div> <!-- end wrapper -->
</body>
</html>

Sammy12 · 08-12-2011, 07:44 PM

Code:

<!--End Styling of Banner and Navigation-->

a css comment is /* */ can't put  in a <style>

once you have a mistake in the css everything below that will not function right.

meridionaljet · 08-12-2011, 07:51 PM

Quote:

Originally Posted by Sammy12

Code:

<!--End Styling of Banner and Navigation-->

a css comment is /* */ can't put  in a <style>

once you have a mistake in the css everything below that will not function right.

Thanks so much. I didn't know about the different comment sequence. That fixed the issue.

I can't figure out how to mark this thread as solved, though. I see no option at the top.

Sammy12 · 08-12-2011, 07:59 PM

you had a lot of problems with your code, here's it fixed:

to mark a thread as resolved, go to edit (on your first post), "go advanced", then there should be a little select next to the edit title

Remember that id's can only be used once, I made the "current" page .selected because classes can be used again and again

Code:

<!DOCTYPE html>
<html>
	<head>
		<title>Tropical Tidbits</title>
		<meta name="description" content="Tropical Tidbits - tropical weather and Atlantic hurricane information, analysis, and forecasts" />
		<meta name="keywords" content="tropical, tidbit, tidbits, atlantic, hurricane, weather, storm, Levi, Cowan, Levi Cowan, analysis, information, forecast, cyclone, ocean, caribbean, united states, tracking, models, news, depression, honduras, nicaragua, jamaica, cuba, puerto rico, florida, gulf of mexico, radar, satellite, surface, data, loops, maps, current, invest, africa, rain, wind, flooding, storm surge, meteorology, official, links" />
		<meta name="author" content="Levi Cowan" />
		<style type="text/css">
		
			/* resets margins and paddings for all tags */
			* { margin: 0; padding: 0; }
			
			ul { list-style: none; }
			
			body { 
				font-family: arial, sans, sans-serif;
				/* pt is not resizable, try using px or ems */
				font-size: 10pt;
				margin-top: 0;
				background-image: url('images/wrapper-dropshadow.jpg');
				background-position: center;
				background-repeat: repeat-y;
			}
			
			#wrapper {
				width: 1024px;
				margin: 0 auto;
			}
			
			#banner { 
				background-image: url('images/banner.jpg');
				width: 100%;
				height: 169px;
			}
			
			#navbar	{
				width: 758px;
				margin: auto;
				height: 49px;
				padding-top: 100px;
			}
			
			#navbar li	{ 
				float: left;
				margin-left: 5px;
			}
			
			#navbar li:first-child {
				margin-left: 0;
			}
			
			#navbar a {
				display: block;
				padding: 13px 15px;
				color: #FFF;
				/* your forgot an ; */
				font-size: 14pt;
				background-color: rgba(0,106,205,0.35);
				/* Need more browser support */
				border-radius: 12px; 
				-webkit-border-radius: 12px;
				-moz-border-radius: 12px;
			}
			
			#navbar a:link {
				text-decoration: none;
			}
			
			#navbar li:hover a {
				/* rgba is not suppoted in all browsers, try using hex codes instead */
				background-color: rgba(0,16,97,0.35);
			}
			
			#navbar li.selected a {
				background-color: rgba(0,16,97,0.35);
			}
			
			#main-section {
				text-align: center;
			}
			
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="banner">
				<ul id="navbar">
					<li class="selected"><a href="index.html">Home</a></li>
					<li><a href="storminfo.html">Current Storm Info</a></li>
					<li><a href="invest-tracking.html">Invest Tracking</a></li>
					<li><a href="analysis.html">Analysis Tools</a></li>
					<li><a href="links.html">Links Database</a></li>
				</ul>
			</div>
			<div id="main-section">
				This is the home page.
			</div> 
		</div>
	</body>
</html>