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.
-
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.
-
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.
-
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">© 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}