Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Jul 2015
    Posts
    2
    Member #
    50813

    Need opinion on whether this simple HTML/CSS code is good or can it be improved?

    Here's it:

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    
    <link rel="stylesheet" type="text/css" href="../normalize.css" />
    <link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300" rel="stylesheet" type="text/css" />
    
    <style type="text/css">
    	div
    	{
    		font-family: 'Roboto Slab', serif;
    		font-weight:400;
    	}
    	div.TitleContainer
    	{
    		width:60%;
    		margin:0 auto;
    		margin-top:4rem;
    	}
    	.THE, .SPECIALISTS
    	{
    		text-align:center;
    		font-size:1.8rem;
    		font-weight:300;
    	}
    	.ANALOG
    	{
    		text-align:center;
    		font-size:9rem;
    		margin-top:-2.3rem;
    	}
    	.SPECIALISTS
    	{
    		letter-spacing:2.4rem;
    		margin-left:1.2rem;
    		margin-top:-1.6rem;
    	}
    	ul
    	{
    		border-top:2px solid black;
    		border-bottom:2px solid black;
    		list-style:none;
    		padding-left:0;
    		text-align:center;
    		margin-top:4rem;
    		text-transform:uppercase;
    	}
    	ul li
    	{
    		display:inline-block;
    		padding:2rem 5rem;
    	}
    	.Landscape
    	{
    		width:1192px;
    		margin:4rem auto 2rem;
    	}
    </style>
    
    </head>
    
    <body>    
        <div class="TitleContainer">
            <div class="THE">THE</div>
            <div class="ANALOG">ANALOG</div>
            <div class="SPECIALISTS">SPECIALISTS</div>
        </div>
        
        <ul>
            <li>Home</li>
            <li>For Sale</li>
            <li>Repairs</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
        
        <div class="Landscape">
            <img src="http://i.gyazo.com/682ae05f0ac061e8ae46e5c12454a0be.png" alt="" width="1192" height="441" />
          <p>We specialize in the sales and repair of classic keyboards, in particular the Feder Rhodes Futilier 20500 and Hohner Clavinet. We specialize in the sales and repair of classic keyboards, in particular the Feder Rhodes Futilier 20500 and Hohner Clavinet.</p>
    	</div>
    
    </body>
    </html>
    In order to get the whole "The Analog Specialists" text to look this way, I've resorted to using lots of negative margins and putting each word in it's own DIV for more control and customization.

    Can the CSS be further streamlined and improved? Tks!

  2.  

  3. #2
    Junior Member ynef's Avatar
    Join Date
    Jul 2015
    Location
    Tallinn, Estonia
    Posts
    8
    Member #
    51156
    Well for starters you should use span and p tags for text and not div.

    Move the css from the html document into your external stylesheet.

    I also suggest minifying your css using CSS Minifier (might increase page loading speed).


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:24 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com