SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Layout Incorrect

    I have just finished reading Design Your Own Website the Right Way Using HTML & CSS, 2nd edition, Ian Lloyd, but I still don't know why my site uploaded at productreviewsbytyler.com will not display properly. Look at the gaps between all the sections, and why won't it align to the center despite my div align center command. Please help!!!

    Here is the current HTML file:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Description" content="You can find product reviews here for renowned internet products. This is an unbiased site that exposes bad products and promotes the good ones." />
    <meta name="Keywords" content="keyword1, keyword2,..." />
    <meta name="rating" content="General" />
    <meta name="revisit-after" content="14 days" />
    <meta name="ROBOTS" content="All" />
    <link href="style/main.css" rel="stylesheet" type="text/css" media="screen, projection" />
    <link href="style/dropdownmenus.css" rel="stylesheet" type="text/css" media="screen" />
    <title>Atlanta Review Group&trade;</title>
    </head>
    <body>
    <div id="header" align="center">&nbsp;</div>
    <div id="lowerheader" align="center">
    	<div id="blueshadow">
          <b><u>Home Page</u></b>
        </div>
      <!-- "Please Select a Page from Below" -->
        <!--[if !IE]> -->
    </div>
    <div id="body" align="center">
    <p class="redshadow">Hello, and welcome to Atlanta Review Group where we write about cool products circulating on the internet. We also work to expose the scams out there. This is some temporary text.</p>
        <!-- begin Personal navigation menu -->
    <ul id="pMenu">
    	<li><a href="http://www.atlantareviewgroup.com/health.html">health</a>
        		<div>
            		<h2>weight loss</h2>
                   		  <h3>fitness</h3>
                          		<ul>
                           		  <li><a href="#">under construction</a></li>
                                </ul>
                          <h3>dieting</h3>
                          		<ul>
                           		  <li><a href="#">under construction</a></li>
                                </ul>
       
                	<h2>skin care</h2>
                       <ul>
                   		  <li><a href="#">under construction</a></li>
            	       </ul>
    			</div>
        </li> 
           
    	<li><a href="http://www.atlantareviewgroup.com/insurance.html">insurance</a>
       		  <div>
                	<h2>property insurance</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
                        </ul>
                	<h2>auto insurance</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
                        </ul>
                	<h2>health insurance</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
                        </ul>
                	<h2>annuities</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
           	   			</ul>
               </div>
       	</li>
    
    	<li><a href="http://www.atlantareviewgroup.com/general.html">general</a>
       		  <div>
            		<h2>electronics</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
                        </ul>
                	<h2>style &amp; fashion</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
                        </ul>
                	<h2>food/dining</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
                        </ul>
                	<h2>cars/auto</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
           				</ul>
                </div>
       	    </li>
    
    	<li><a href="http://www.atlantareviewgroup.com/dating.html">dating</a>
        		<div>
                <ul>
            		<li><a href="#">RealMatureSingles</a></li>
                	<li><a href="#">SeniorPeopleMeet</a></li>
            	</ul>
                </div>
        	</li>
    	
    	<li><a href="http://www.atlantareviewgroup.com/education.html">education</a>
        		<div>
                <ul>
            		<li><a href="#">under construction</a></li>
            	</ul>
                </div>
        	</li>                    	
    </ul>
    	<!-- end Personal navigation menu-->
    </div>
    <div id="footer" align="center">
        <!--[if !IE]> -->
      <object type="application/x-shockwave-flash" data="thanksforvisiting.swf" width="380" height="68">
    <!-- <![endif]-->
    <!--[if IE]>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="380" height="68">
        <param name="movie" value="thanksforvisiting.swf" />
    <!--><!-- http://Validifier.com -->
      </object>
    <!-- <![endif]-->
    </div>
    <div class="blackshadow">&copy;AtlantaReviewGroup.com</div>
    <div class="blackshadow">Updated June 30, 2011</div>
    </body>
    </html>
    Here is the CSS file:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body{
    	background-image: url(bg.jpg);
    	background-position:top center;
    	background-color:#FFF;
    	background-repeat: no-repeat;
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    }
    
    #header{
    	background-image:url(header.jpg);
    	background-repeat:no-repeat;
    	width:635px;
    	height:126px;
    	text-align: center;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 24px;
    	margin:0;
    	padding:0;
    }
    
    #loveheader{
    	background-repeat:no-repeat;
    	width:635px;
    	height:126px;
    	text-align:center;
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:12px;
    }
    
    #lowerheader{
    	background-image:url(lowerheader.jpg);
    	width:783px;
    	height:100px;
    	margin:0;
    	padding:0;
    }
    
    #body{
    	background-image:url(body.jpg);
    	width:783px;
    	text-align: center;
    }
    
    #footer{
    	background-image:url(footer.jpg);
    	width:783px;
    	height:82px;
    	text-align: center;
    	margin:0;
    	padding:0;
    }
    
    .redshadow{
    	color:#CCC;
    	font-size:16px;
    	font-family:Verdana, Geneva, sans-serif;
    	text-shadow: 0px 0px 2px #900, 0px -7px 30px #966, 0px -14px 60px;
    }
    
    #blueshadow{
    	font-size:24px;
    	font-family:Verdana, Geneva, sans-serif;
    	color:#FFF;
    	text-align:center;
    	vertical-align:bottom;
    	text-shadow:0 0 4px #09F, 0 -5px 15px #009;
    	margin:0;
    	padding-top:.8em;
    }
    
    .redshadow{
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:16px;
    	color:#003;
    	text-shadow:0 0 2px #F60, 0 -3px 10px #900;
    }
    
    div.whitebox{
    	color:#000;
    	text-shadow:1px 1px 1px #000;
    	display:block;
    	background:#FFF;
    	border:6% inset #CCC;
    	width:70%;
    	height:auto;
    	padding:2%;
    	/*for IE*/
    	filter:alpha(opacity=50);
    	/*standard CSS3*/
    	opacity:0.5;
    }
    
    #realmaturesingles{
    	text-decoration:none;
    	font-family:Impact;
    	font-size:3em;
    	color:#CF0;
    	right:-6%;
    	top:-1em;
    }
    
    #seniorpeoplemeet{
    	text-decoration:none;
    	font-family:Tahoma, Geneva, sans-serif;
    	font-size:3em;
    	color:#FF0;
    	right:-39%;
    	top:-.2em;
    }
    
    .blackshadow{
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:12px;
    	text-shadow:0px 2px 2px #000;
    	text-align:center;
    	color:#000;
    }
    
    body,td,th {
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 16px;
    }
    
    #lowerheader tr td #redshadow b {
    	font-size: 16px;
    }
    
    p.redshadow {
    	color:white;
    	margin-left:20%;
    	margin-right:20%;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Use margin: 0 auto to center elements, rather than align="center".

    To romove the gaps, remove the default margins on your elements. E.g.

    Code:
    html, body, 
    h1, h2, h3, h4, h5, h6, p, img,
    form, fieldset, legend, label, textarea,
    table, tbody, td, tfoot, th, thead, tr, tt,
    dl, dt, dd, ol, ul, li {
        margin: 0;
        padding: 0;
    }
    
    img {
        border: 0;
        vertical-align: bottom;
    }

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Thanks for your AwEsOmE Post, ralph.m!

  4. #4
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is an accumulation of little things. None are serious, but they add up to a broken page.

    The align attribute doesn't work as you think it does, and has not been a part of html since 1998, anyway. Lose it, and never go looking for it.

    Wrap your whole page in a div, and give the div a width and set {margin: 0 auto;}. That will constrain the width of all descendants, and center them in one move.

    Google "margin collapse", and study the articles. Either set {margin-top: 0;} on the first element in the separated div, and {margin-bottom: 0;} on the last, or set {padding: 1px 0;} on the div itself. The explanation will be in the articles you find.

    Your #pMenu has float child elements and must be made to enclose them. Set {display: table;}. Most times, we use the overflow property, but you have dropdowns that preclude that. See Enclosing Float Elements for an explanation of your options.

    Set your flash thingie to run once and freeze. You cannot imagine how annoying the constant animation is.

    I imagine I will have forgot something, but this will get you going in the right direction.

    //edit: I did forget something. The a element in the list items need to be {display: block;}. --gt

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:

    Thanks Gary. I should have mentioned a centered wrapper. (I'm also ashamed that you caught me advocating a CSS reset. )

  6. #6
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see ralph.m slipped in while I was fiddling around. That's what I get for going for a quick snack of my homemade, buttered raisin-cinnamon bread. Ahhh!

    //edit: Rats! He did it again. BTW, you should be ashamed. See the following. --gt

    I'm going to take an opposing position on the resets, Ralph. They will apply globally, and will need to be over-ridden piecemeal. To be honest, I don't think they have any place in web development. See my arguments at Global resets considered harmful.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  7. #7
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Don't bust on the resets, they have their proponents. (Gary, I quoted you in Part 3 of that article, and linked to that comment.) Me, I use a very limited reset tweaked and trimmed for my own purposes, but those who do not will not hear me making fun.

  8. #8
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, Michael! That's quite an article, and quite fairly covers all the bases. I do appreciate the mention.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Now, it has been a number of years since I went through Ian's book -- but I am fairly certain he does NOT tell you to use a tranny doctype, META's that nothing actually uses, robots meta that doesn't do anything, multiple stylesheets for only one media type, and non-semantic markup with dozens of deprecated attributes and presentational classes, abuse of DIV and heading tags inside the menu list, flash for stupid little elements that do more to annoy the user than enhance the experience, or the dozen other things that say "time to throw away the HTML and start over clean".

    ...and for the life of me I STILL can't figure out what the devil you are trying to do inside that menu other than abuse heading tags and slap things in there any old way.

    ... and I'm trying to figure out how the devil it validates since I'm seeing unclosed tags and closing tags for elements that aren't even open here!

    I am guessing WILDLY here, but I suspect your markup should be more along these lines:

    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"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <meta
    	name="Description"
    	content="Product reviews for renowned Internet products featuring unbiased reviews expositing bad products and promoting the good ones."
    />
    
    <meta
    	name="Keywords"
    	content="weight loss, dieting, skin care, insurance, electronics, fashion, dining, cars, auto, dating"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Atlanta Review Group&trade;
    </title>
    
    </head><body>
    
    <div id="pageWrapper">
    
    	<h1>
    		Atlanta Review Group
    	</h1>
    
    	<p class="standout">
    		Hello, and welcome to Atlanta Review Group where we write about cool products circulating on the internet. We also work to expose the scams out there. This is some temporary text.
    	</p>
    
    	<ul id="mainMenu">
    		<li>
    			<a href="http://www.atlantareviewgroup.com/health.html">health</a>
    			<ul>
    				<li>
    					<div>
    						<span>Weight Loss</span>
    						<ul>
    							<li>
    								<span>Fitness</span>
    								<ul>
    									<li><a href="#">under construction</a></li>
    								</ul>
    							</li><li>
    								<span>dieting</span>
    								<ul>
    									<li><a href="#">under construction</a></li>
    								</ul>
    							</li>
    						</ul>
    					</div><div>
    						<span>skin care</span>
    						<ul>
    							<li><a href="#">under construction</a></li>
    						</ul>
    					</div>
    				</li>
    			</ul>
    		</li><li>
    			<a href="http://www.atlantareviewgroup.com/insurance.html">insurance</a>
    			<ul>
    				<li>
    					<span>property insurance</span>
    					<ul>
    						<li><a href="#">under construction</a></li>
    					</ul>
    				</li><li>
    					<span>auto insurance</span>
    					<ul>
    						<li><a href="#">under construction</a></li>
    					</ul>
    				</li><li>
    					<span>health insurance</span>
    					<ul>
    						<li><a href="#">under construction</a></li>
    					</ul>
    				</li><li>
    					<span>annuities</span>
    					<ul>
    						<li><a href="#">under construction</a></li>
    					</ul>
    				</li>
    			</ul>
    		</li><li>
    			<a href="http://www.atlantareviewgroup.com/general.html">general</a>
    			<ul>
    				<li>
    					<span>electronics</span>
    					<ul>
    						<li><a href="#">under construction</a></li>
    					</ul>
    					<span>style &amp; fashion</span>
    					<ul>
    						<li><a href="#">under construction</a></li>
    					</ul>
    					<span>food/dining</span>
    					<ul>
    						<li><a href="#">under construction</a></li>
    					</ul>
    					<span>cars/auto</span>
    					<ul>
    						<li><a href="#">under construction</a></li>
    					</ul>
    				</li>
    			</ul>
    		</li><li>
    			<a href="http://www.atlantareviewgroup.com/dating.html">dating</a>
    			<ul>
    				<li><a href="#">RealMatureSingles</a></li>
    				<li><a href="#">SeniorPeopleMeet</a></li>
    			</ul>
    		</li><li>
    			<a href="http://www.atlantareviewgroup.com/education.html">education</a>
    			<ul>
    				<li><a href="#">under construction</a></li>
    			</ul>
    		</li>
    	</ul>
    	
    	<div id="footer">
    		&copy;AtlantaReviewGroup.com<br />
    		Updated June 30, 2011
    	<!-- #footer --></div>
    	
    <!-- #pageWrapper --></div>	
    
    </body></html>
    Swinging an axe at the pointless "home page" text and the equally useless/annoying/broken flashtard nonsense in the footer.

    You may have gone through the book, but I think you failed to grasp it's intent; either that or I need to go back and check, and take it OFF my recommendation list. Either that, or I'm completely misunderstanding you -- are you basically saying that after reading the book you don't understand why your old outdated 1997 style code doesn't work; if so then you missed that the intent of Ian's book is to teach you a better way to build a site from the ground up, NOT to shlep along old code and broken/outdated methodologies.

  10. #10
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Okay, well I took out the flash animation, changed the home page text, removed align="center" attributes. I was able to get the gaps removed, but the page still won't align to center.

    Current markup:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Description" content="You can find product reviews here for renowned internet products. This is an unbiased site that exposes bad products and promotes the good ones." />
    <meta name="Keywords" content="keyword1, keyword2,..." />
    <meta name="rating" content="General" />
    <meta name="revisit-after" content="14 days" />
    <meta name="ROBOTS" content="All" />
    <meta http-equiv="Content-Language" content="en" />
    <link href="style/main.css" rel="stylesheet" type="text/css" media="screen,projection,tv" />
    <link href="style/dropdownmenus.css" rel="stylesheet" type="text/css" media="screen" />
    <title>Atlanta Review Group&trade;</title>
    </head>
    <body>
    <div style="width:100%; margin:0 auto;">
    <div id="header">&nbsp;</div><!-- end header div -->
    <div id="lowerheader">
    	<div id="blueshadow">
          <b><u>Welcome to Atlanta Review Group</u></b>
        </div>
    </div><!-- end lowerheader div -->
    <div id="body">
    <p class="redshadow">Hello, and welcome to Atlanta Review Group where we write about cool products circulating on the internet. We also work to expose the scams out there. This is some temporary text.</p>
        <!-- begin Personal navigation menu -->
    <ul id="pMenu">
    	<li><a href="http://www.atlantareviewgroup.com/health.html">health</a>
        		<div>
            		<h2>weight loss</h2>
                   		  <h3>fitness</h3>
                          		<ul>
                           		  <li><a href="#">under construction</a></li>
                                </ul>
                          <h3>dieting</h3>
                          		<ul>
                           		  <li><a href="#">under construction</a></li>
                                </ul>
       
                	<h2>skin care</h2>
                       <ul>
                   		  <li><a href="#">under construction</a></li>
            	       </ul>
    			</div>
        </li> 
           
    	<li><a href="http://www.atlantareviewgroup.com/insurance.html">insurance</a>
       		  <div>
                	<h2>property insurance</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
                        </ul>
                	<h2>auto insurance</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
                        </ul>
                	<h2>health insurance</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
                        </ul>
                	<h2>annuities</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
           	   			</ul>
               </div>
       	</li>
    
    	<li><a href="http://www.atlantareviewgroup.com/general.html">general</a>
       		  <div>
            		<h2>electronics</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
                        </ul>
                	<h2>style &amp; fashion</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
                        </ul>
                	<h2>food/dining</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
                        </ul>
                	<h2>cars/auto</h2>
                    	<ul>
                   		  <li><a href="#">under construction</a></li>
           				</ul>
                </div>
       	    </li>
    
    	<li><a href="http://www.atlantareviewgroup.com/dating.html">dating</a>
        		<div>
                <ul>
            		<li><a href="#">RealMatureSingles</a></li>
                	<li><a href="#">SeniorPeopleMeet</a></li>
            	</ul>
                </div>
        	</li>
    	
    	<li><a href="http://www.atlantareviewgroup.com/education.html">education</a>
        		<div>
                <ul>
            		<li><a href="#">under construction</a></li>
            	</ul>
                </div>
        	</li>                    	
    </ul>
    	<!-- end Personal navigation menu-->
    </div><!-- end body div -->
    </div><!-- end wrapping div -->
    <div id="footer">&nbsp;</div><!-- end footer div -->
    <div class="blackshadow">&copy;AtlantaReviewGroup.com</div>
    <div class="blackshadow">Updated June 30, 2011</div>
    </body>
    </html>
    The styles:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    html, body, 
    h1, h2, h3, h4, h5, h6, p, img,
    form, fieldset, legend, label, textarea,
    table, tbody, td, tfoot, th, thead, tr, tt,
    dl, dt, dd, ol, ul, li {
        margin: 0;
        padding: 0;
    }
    
    body{
    	background-image: url(bg.jpg);
    	background-position:top center;
    	background-color:#FFF;
    	background-repeat: no-repeat;
    	margin:0 auto;
    }
    
    #header{
    	background-image:url(header.jpg);
    	background-repeat:no-repeat;
    	width:635px;
    	height:126px;
    	text-align: center;
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 24px;
    	margin:0;
    	padding:0;
    }
    
    #loveheader{
    	background-repeat:no-repeat;
    	width:635px;
    	height:126px;
    	text-align:center;
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:12px;
    }
    
    #lowerheader{
    	background-image:url(lowerheader.jpg);
    	width:783px;
    	height:100px;
    	margin:0;
    	padding:0;
    }
    
    #body{
    	background-image:url(body.jpg);
    	width:783px;
    	text-align: center;
    }
    
    #footer{
    	background-image:url(footer.jpg);
    	width:783px;
    	height:82px;
    	text-align: center;
    	margin:0;
    	padding:0;
    }
    
    .redshadow{
    	color:#CCC;
    	font-size:16px;
    	font-family:Verdana, Geneva, sans-serif;
    	text-shadow: 0px 0px 2px #900, 0px -7px 30px #966, 0px -14px 60px;
    }
    
    #blueshadow{
    	font-size:24px;
    	font-family:Verdana, Geneva, sans-serif;
    	color:#FFF;
    	text-align:center;
    	vertical-align:bottom;
    	text-shadow:0 0 4px #09F, 0 -5px 15px #009;
    	margin:0;
    	padding-top:.8em;
    }
    
    .redshadow{
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:16px;
    	color:#003;
    	text-shadow:0 0 2px #F60, 0 -3px 10px #900;
    }
    
    div.whitebox{
    	color:#000;
    	text-shadow:1px 1px 1px #000;
    	display:block;
    	background:#FFF;
    	border:6% inset #CCC;
    	width:70%;
    	height:auto;
    	padding:2%;
    	/*for IE*/
    	filter:alpha(opacity=50);
    	/*standard CSS3*/
    	opacity:0.5;
    }
    
    #realmaturesingles{
    	text-decoration:none;
    	font-family:Impact;
    	font-size:3em;
    	color:#CF0;
    	right:-6%;
    	top:-1em;
    }
    
    #seniorpeoplemeet{
    	text-decoration:none;
    	font-family:Tahoma, Geneva, sans-serif;
    	font-size:3em;
    	color:#FF0;
    	right:-39%;
    	top:-.2em;
    }
    
    .blackshadow{
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:12px;
    	text-shadow:0px 2px 2px #000;
    	text-align:center;
    	color:#000;
    }
    
    body,td,th {
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 16px;
    }
    
    #lowerheader tr td #redshadow b {
    	font-size: 16px;
    }
    
    p.redshadow {
    	color:white;
    	margin-left:20%;
    	margin-right:20%;
    }
    I need to make a better graphic design for my page. It's so gray and bland.

  11. #11
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    And I removed the useless <meta> tags.

  12. #12
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    626
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I have also removed the presentational <u> and <b> markup from the XHTML. Why won't it align to center still?

  13. #13
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,200
    Mentioned
    105 Post(s)
    Tagged
    1 Thread(s)
    If you want the divs to center, you need to change the margin on #header and #lowerheader from margin: 0 to margin:0 auto;
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  14. #14
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @etidd:

    Did you not even look at my post? I gave you simple corrections that, except for one item, will fix your page with its present markup.

    If you don't quite understand someone's instructions, ask for clarification.

    gary

    N.B. Your structure is in need of improvement. Do study DS's post. --gt
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials


Tags for this Thread

Bookmarks

Posting Permissions

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