Need some help with basic HTML and CSS pages below

Hello all. My name is David and I am new to writing in HTML and CSS. I am trying to write a basic site, really basic just to get my feet wet, but I am having trouble with a couple of things.

  1. My page is a 4 page site, but I can not get the links to work. So that when I make a change to my .css file that it impacts all of my pages, for example colors and so on.

  2. My columns seem to be based on how much text I have in them vs. a set size. Because of this one column is bigger than another and the pagewrapper background ends up showing.

  3. I am trying to insert a picture in the HTML but all I am getting is text. I moved the folder with the picture in it to my root server and I thought I did the link correct. But I guess I am off a bit.

I know it is really basic and I am sure you will see a lot of things that can be fixed. Any help would be great. Thank you all

<head>
  <meta charset="utf-8" />
  <title>DSG Electronics</title>
  <link href="project.css" rel="stylesheet" />
</head>

<body>
  <div id="pagewrapper">
  
    <div id="header">
      <h1><center>Welcome - DSG Electronics - Welcome</center></h1>
      <div id="nav">
        <ul>
          <li><a href="welcome.html" title="Welcome page">Welcome</a></li>
          <li><a href="products.html" title="Products page">Products</a></li>
          <li><a href="order.html" title="Order page">Order</a></li>
          <li><a href="about.html" title="About page">About</a></li>
	    </ul>
      </div>  <!-- end of nav -->
    </div>  <!-- end of header -->

    <div id="sidebar">
    
	  <h2><center>Current Customers</center></h2>
      
      <ul>
        <li>We have a large food distribution company with over 1000 employees.  We have purchased all of our cellular accessories from DSG not only for the price but the service<br /><br />- ABC Foods</li>
 
      </ul>
      
    </div>  <!-- end of sidebar -->
    
    <div id="content">
    
      <h2><center>Cellular Accessories and Beyond</center></h2>
      
	  <p class="justify">Today's Cellular Phone Industry is changing on a daily basis and with phone changes come Accessory changes.</p>
      <p class="justify">Accessories are also very expensive.  When you walk into your average cellular store most car chargers are around $25.</p>
      <p class="justify">Why pay more that you need to.  We can get OEM chargers to you for under $10</p>
	  <p class="justify">Contact us at DSG Electronics at 877-222-2222.</p>
	  <p><img src="home/students/d.hunt7/public_html/IPhone-5-Charger.jpg" width="200 height="200
	      alt="An example of an IPhone OEM Charger"/></p>
    </div>  <!-- end of content -->

    <div id="footer">
    
      <ul>
        <li><a href="welcome.html" title="Welcome page. ">Welcome</a></li>
        <li><a href="products.html" title="Products page. ">Products</a></li>
        <li><a href="order.html" title="Order page. ">Order</a></li>
        <li><a href="about.html" title="About page. ">About</a></li>
	  </ul>
      
	  <p id="copyright">&copy; 2013 DSG Electronics</p>
      
    </div>  <!-- end of footer -->
    
  </div>  <!-- end of pagewrapper -->
  
  </body>
  </html>

CSS

/* welcome.css */
/* Part 2 Begin */
#body  {font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 1em;
        color:#000000;
        background-color:#a7a09a;
        margin:0;
        padding:0;
        width:900px;}
         
#pagewrapper {background-color:#ffffff;}

#header   {background-color:#d47575;}

#nav         {background-color:#8d9fee;
          padding:25px 15px 35px 15px;}

#sidebar {float:left;
          width:20%;
          background-color:#ffffff;
          padding:10px;}
          
#content {float:right;
          width:70%;
          background-color:#ffffff;
          padding:10px;}
          
#footer  {clear:both;
         background-color:#dee518;
	     padding:5px 10px;}
         
#nav ul, #footer ul {margin:0;
                  padding:0;
                  list-style:none;}
                  
#nav li, #footer li  {display:inline;
                  margin:0;
                  padding:0;}
                  
h1         {margin:0;}

h2         {margin:.5em 1em;}

#footer p  {margin:0}

If the image is outside your web page document root (usually /var/www/ ) then it may not be accessible to your webserver without special configuration. I saw your image was in the home directory. Check file permissions on your image file and you could try making it globally readable just to test that out.

Other than that we may need to see your server error logs to see what error message is being thrown up when accessing that file.

Sent from my XT316 using Tapatalk 2

Hi Lotus4x . Welcome to the forums. :slight_smile:

Yes, there are various things to point out here, so let’s start from the top.

Firstly, make sure to include a “doctype” at the top of your pages, which just means an extra line of code. You also need an opening <html> tag. There are various kinds of doctype, but the simplest and most modern is simply this line in red, that goes right above the <head>, along with the <html> tag, shown in blue:

[COLOR="#FF0000"]<!DOCTYPE html>[/COLOR]
[COLOR="#0000FF"]<html lang="en">[/COLOR]
<head>

In your CSS, you have this:

[COLOR="#FF0000"]#[/COLOR]body  {
&#8942;
}

The bit in red shouldn’t be there. It’s trying to target an element with an ID of “body”, but that’s not what you have. You just want to target the element called <body>, so it should be this:

body  {font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 1em;
        color:#000000;
        background-color:#a7a09a;
        margin:0;
        padding:0;
        width:900px;}

However, it’s not a good idea to set a width on the body element itself. Rather, move that width to the #pagewrapper element, along with some extra styles:

#pagewrapper {
    background-color:#ffffff;
    [COLOR="#FF0000"]width:900px;
    margin: 0 auto;[/COLOR]
}

That will look a lot better.

I am trying to insert a picture in the HTML but all I am getting is text. I moved the folder with the picture in it to my root server and I thought I did the link correct.

You should just give the image links a simpler path. For example, let’s say the images are in a folder called “images”, which is in your root folder. In that case, set you image paths to this:

<img src="[COLOR="#FF0000"]/images/IPhone-5-Charger.jpg[/COLOR]" width="200[COLOR="#FF0000"]"[/COLOR] height="200[COLOR="#FF0000"]"[/COLOR]

If the images are just in the root folder, then the link would be

<img src="[COLOR="#FF0000"]IPhone-5-Charger.jpg[/COLOR]" width="200[COLOR="#FF0000"]"[/COLOR] height="200[COLOR="#FF0000"]"[/COLOR]

A couple of things to note:

  • it’s best to use all lowercase letters in code. You have capital letters in your image file name, and unless you type that exactly the same in your code, your image will not show up. So I recommend naming your images like this: iphone-5-charger.jpg. It’s just one less source of potential errors. :slight_smile:
  • I added the " at the end of the width and height settings, as they weren’t closed. You just had width="200 height="200.

Feel free to ask more questions if any of that’s not clear. :slight_smile: