...

View Full Version : 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:



#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> ?

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-77.png

meridionaljet
08-12-2011, 07:41 PM
try posting your full code, it could be something else restricting it

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



Yes.


<!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
<!--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
<!--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



<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum