www.webdeveloper.com
Results 1 to 6 of 6

Thread: Need Help With CSS. Very Basic.

  1. #1
    Join Date
    May 2014
    Posts
    4

    Unhappy Need Help With CSS. Very Basic.

    Firstly let me apologise for such a nooby question.

    I have definitely learnt this but it has totally slipped my mind for some reason. I have a feeling I should use <div> tags?

    I have tried to use them and sadly it still hasn't worked. Here are my HTML and CSS codes:

    HTML Code:
    <!DOCTYPE html>
     
     <html> 
     
    		<head>
    				<title> My Family </title>
    				
    				<link href="stylesheet.css" rel="stylesheet" type="text/css">
    		</head>
    		
    	    <body> 
    	<div> 
    	<h1>
    
     
     
       	<img src="http://i.imgur.com/M3wjMqL.png"/> </h1>	
    	</div>
    	<p>As a starting point for my web development I have decided to build a site about my family. I plan to use this as a personal scrapbook, but if you enjoy it then that is a bonus.</p>
    	
    	<img src="http://i.imgur.com/0Y27c6l.jpg" >
    	
             </body>
     </html>

    CSS:

    Code:
    h1 {
    
    font-size: 70px;
    font-family: Cursive;
    text-decoration: underline;
    color: #83A7CC;
    
    }
    
    p  {
    
    font-size: 50px;
    font-family: Serif;
    color: #EFE3EF;
    
    }
    
    *   {
    
    text-align: center;
    
    }
    
    body {
    
    background-image: url("http://www.fabiovisentin.com/thumb.aspx?img=/photography/photo/25/sky-wallpaper-02939.jpg&w=1440&c=75");
    
    
    }
    
    img   {
    
    height: 300px;
    width: 300px;
    border: 4px solid #EFE3EF;
    
    }
    Please, excuse my newbisms.

  2. #2
    Join Date
    May 2014
    Posts
    4
    EDIT: Ignore the div tags. I realise they're in the wrong place. I forgot to remove them before posting this.

  3. #3
    Join Date
    May 2014
    Posts
    4
    EDIT of my EDIT: I fixed it:

    h1 img {

    border: none;
    height: 150px;
    width: 600px;
    }

  4. #4
    Join Date
    Oct 2013
    Posts
    472
    A quick comment here. You backed yourself in a corner by applying the 300x300 size for the IMG tag. Now, for every image (jpeg,gif,png, et al) you ever put on any page on your site you'll be fighting that size just as you did for the image in your H1.

    You're better off using the IMG tag's height and width attributes. Yes, it's old-school straight HTML, but you can make each image the size it really needs to be. Ergo:
    HTML Code:
    <h1>
    <img src="http://i.imgur.com/M3wjMqL.png" width="600" height="150" alt="fill in this attribute!"/>
    </h1>
    ----- AND FURTHER DOWN -----
    <img src="http://i.imgur.com/0Y27c6l.jpg" width="300" height="300" alt="fill in this attribute!"/>
    In the CSS you can remove the new h1 img {...} stuff. Then remove the width and height stuff from the img declaration:

    Code:
    img   {
    
    border: 4px solid #EFE3EF;
    
    }
    And another hint : Learn to use CSS "classes". It will save you a lot of headaches later -- those headaches being caused by pounding your head on your desk saying, "why oh why did I make ALL my text centered, why oh why did I put a border around EVERY image?"
    Last edited by Kevin2; 05-30-2014 at 11:55 AM.

  5. #5
    Join Date
    May 2014
    Posts
    4
    Quote Originally Posted by Kevin2 View Post
    -snip-
    Thanks a million for the advice, man. I am doing it like this as this is the order so far I have learnt. Any advice will prove valuable in the future.

    Thanks again.

  6. #6
    Join Date
    Oct 2013
    Posts
    472
    Another hint: Always resize your images to fit what they will display at in the page. For example, the picture of your family (I assume?) is 926x960. The HTML resizes it to 300x300. That does not resize the actual image! It only determines how that image will display. The user then must download an oversized image -- a waste of time and bandwidth.

    Anyway, I sort of rebuilt your page's code (HTML & CSS) as shown below. Not perfect, but it validates and conforms to my above comments as well as some generally recognized "best practices". See notes in the code.

    HTML Code:
    <!DOCTYPE html>
     
     <html lang="en"> 
     
    	<head>
    		<meta charset="utf-8">
    		<title> My Family </title>
    
    		<link href="stylesheet.css" rel="stylesheet" type="text/css">
    	</head>
    		
    	<body class="sky">
    	<header>	<!-- For validation purposes, an H1 cannot be just an image, hence this coding. -->
    		<h1 class="hidden">
    		The Barmy Army
    		</h1>
    		<img src="http://i.imgur.com/M3wjMqL.png" width="600" height="150" alt="The Barmy Army">
    	</header>
    	
    	<p class="largetext center">As a starting point for my web development I have decided to build a site about my family. I plan to use this as a personal scrapbook, but if you enjoy it then that is a bonus.</p>
    	
    	<p class="center">
    		<img class="border" src="http://i.imgur.com/0Y27c6l.jpg" width="300" height="300" alt="family pic">
    	</p>
    	
    	</body>
     </html>
    And the CSS:
    Code:
    h1 {
    
    font-size: 5em;			/* EM sized fonts scale better than pixel sizes (px) in different devices (think mobile and tablet). */
    font-family: sans-serif;	/* "Cursive" is not a font-family */
    /* text-decoration: underline; <-- DO NOT underline text! Links are underlined by default so this causes confusion! */
    color: #83A7CC;
    text-align: center;		/* H1 and H2 can be centered by default. H3 and H4 -- well, maybe. H5 and H6 definitely not; center if necessary using a class */
    
    }
    
    h1.hidden  {		/* positions and sizes the H1 to hide it and make it not reposition other content */
    
    text-indent: -99999px;
    width: 1px;
    height: 1px;
    
    }
    
    header  {
    
    text-align: center;
    
    }
    
    .largetext  {
    
    font-size: 3em;		/* 3em approximates 50px on my screen. */
    font-family: Serif;
    color: #EFE3EF;
    
    }
    
    .center   {
    
    text-align: center;
    
    }
    
    .sky {
    
    background-image: url("http://www.fabiovisentin.com/thumb.aspx?img=/photography/photo/25/sky-wallpaper-02939.jpg&w=1440&c=75");
    
    }
    
    .border  {    /* puts the border around your family photo -- or anything else needing it */
    
    border: 4px solid #EFE3EF;
    
    }
    HTH, and good luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles