SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    Code:
    <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

    Code:
    /* 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}
    Last edited by ralph.m; Nov 4, 2013 at 18:20. Reason: added code tags


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
  •