Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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>
    Last edited by meridionaljet; 08-12-2011 at 09:37 PM.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    try posting your full code, it could be something else restricting it

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

    Last edited by Sammy12; 08-12-2011 at 08:39 PM.

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    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>

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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.

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    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.

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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>
    Last edited by Sammy12; 08-12-2011 at 09:05 PM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •