<div> Hell

Started by Garrett, May 29, 2015, 08:14:06 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Garrett

Ever since I started learning how to code in HTML and CSS, <divs> have always given me problems. For the past two years, I have been using tables to layout my sites, as it worked flawlessly. But now I want to revert to my original ways and learn how to layout my sites using CSS (<divs>.) Most of the websites I've made so far, using tables, work very well and none of my web design  clients (or me) have had problems, but I want to upgrade my skills and use something more modern rather than 1990s-style layout techniques. Plus, this fall I'll (hopefully) be getting more clients and I want to use divs in my future sites.

At first, I liked and used containers a lot in my work. But containers annoyed me as it required two (not one) div classes, both with different settings. It's been two years since I last used a container in my work, and I can no longer reference what I did then to make a successful div-based site as the original sites are gone (thanks to a corrupt hard disk.)

So, basically, I'm trying to learn how to do it simpler, and in basic terms. I've tried working on my design firm's "next generation" site - but am not having luck. I want all the divs to be lined up, so I'm essentially using position: relative; with the width set equal on each div box. And I've got three main boxes, a header, content, and a footer. I worked out header, and used one box floated to the left to hold our logo, and another box to float to the right to contain the navigation menu (which has also given me countless problems - but I'm trying to sort out one problem at a time.)

Content, which holds the body, is my main focus at the time. It contains of two boxes - a "servcon" box that is floated to the left (contains basic info about all of our services) and a "home-con" box that contains the body text. I'd like to put the data in the "servcon" box in a nice, transitioning box using jQuery - but as I stated earlier, one issue at a time. Also, the content box is supposed to be white, but is showing up as the background color.

The footer box is sort of find, apart from the text being positioned strangely.

Below is the code. I'm trying to get my web design skills up to speed this summer, as most of my summer is going to be devoted to designing the graphics and program booklet for an upcoming event that a local organization is hosting later this summer.

Here is a link to the online test site. Note all links are broken on it as just that page has been created.
http://garrettswebsites.com/testbin/newgw-9984/

HTML Code:

<!DOCTYPE HTML>
<head>
<title>Garrett's Websites</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style>
#home-con {
position: relative;
float: right;
padding: 5px;
width: 465px;
}

#servcon {
position: relative;
float: left;
width:265px;
padding: 5px;
background-color: aaaaaa;
}

#footer {
position: relative;
width: 750px;
top: 950px;
margin-left: auto;
margin-right: auto;
border: 1px solid yellow;
color: #ffffff;
}
</style>
</head>
<body>
<div id="header">
<div id="logo"><a href="index.html"><img src="images/logo.png" alt="Logo" width="150" height="63.52" title="Garrett's Websites Logo" border="0"/></a></div>
<!--START Navigation Menu-->
<div id="nav">
<ul class="nav">
<li class="navt"><a href="index.html" title="Home">Home</a></li>
<li class="navt"><a href="about/index.html" title="About Garrett's Websites">About GarWeb</a></li>
<!--DON'T REMOVE
<ul class="nav2">
<li><a href="about/mission.html" title="Our Mission">Our Mission</a></li>
<li><a href="about/history.html" title="Our History">Our History</a></li>
<li><a href="about/bios.html" title="Staff Biographies">Staff Bios</a></li>
<li><a href="blog.html" title="GarWeb Blog">Our Blog</a></li>
</ul></li>-->
<li class="navt"><a href="services/index.html" title="Our Services">Our Services</a></li>
<!--DON'T REMOVE
<ul class="nav2">
<li><a href="services/wd/index.html" title="Website Design">Website Design</a></li>
<li><a href="services/gd/index.html" title="Graphic Design">Graphic Design</a></li>
<li><a href="services/sm/index.html" title="Social Media">Social Media</a></li>
</ul></li>-->
<li class="navt"><a href="testimonials.html" title="Client Testimonials">Testimonials</a></li>
<li class="navt"><a href="contact.html" title="Contact Us">Contact GarWeb</a></li>
</ul>
</div></div>
<!--END Navigation Menu; START Page Content-->
<div id="content">
<div id="home-con">
<p>Are you looking for someone who can design and maintain a website for your organization? Or perhaps you're looking for someone who can manage your social media needs - or graphic design needs? Here at Garrett's Websites, we can take care of all of your online marketing needs; from website design and maintenance to graphic design to managing your social media pages.</p>
</div>
<!--END Page Content; START Services Window-->
<div id="servcon">
<p class="servcon"><a href="services/wd/index.html" title="Website Design">Website Design</a></p>
<p>From consultation to the design process to maintenance, Garrett's Websites can help small businesses get online in an simple, yet affordable manner. Although Garrett's Websites specialty lies in desktop websites, we can also design your mobile websites that is tailored for use on mobile devices with ease.</p>
<p class="servcon"><a href="services/gd/index.html" title="Graphic Design">Graphic Design</a></p>
<p>Garrett's Websites offers a wide array of graphic design solutions, ranging from scanning images to touch-up of an image. We also create web and print banners and advertisements for websites, social media, and print use.</p>
<p class="servcon"><a href="services/sm/index.html" title="Social Media">Social Media</a></p>
<p>Want to quickly update your customers about special information such as sales and events? A social media page is the best solution for this problem, as most people have a social media account and can "subscribe" to your page. When used with a website, you have the ultimate online marketing system.</p>
</div></div>
<div id="footer">
<p>&copy;2015 Garrett's Websites | <a href="map.html" title="Site Map">Site Map</a> | <a href="contact.html" title="Contact Garrett's Websites">Contact GarWeb</a></p>
</div>
</body>
</html>


CSS code:

/*GLOBAL STYLE ASSETS*/
body{
background-color: #00829b;}

/*NAVIGATION MENU STYLING*/
ul.nav {
list-style-type: none;
margin: 0;
padding: 0;
}

li.navt {
display: inline;
}

/*GLOBAL DIV ASSETS*/
#header {
position: relative;
width: 750px;
margin-left: auto;
margin-right: auto;
background-color: #ff829b;
}

#logo {
/*position: relative;*/
float: left;
width: 151px;
background-color: #00829b;
}

#nav {
float: right;
width: 599px;
height: 63px;
background-color: #00829b;
color: #ffff00;
}

#content {
position: relative;
width:750px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}

Owner and Operator, Garrett's Websites

Jason

Quote from: Garrett on May 29, 2015, 08:14:06 PM
Also, the content box is supposed to be white, but is showing up as the background color.

I'm not an expert by any means but I wonder if you need to clear your styles between div's...

I see a missing # in this section for the color:

#servcon {
   position: relative;
   float: left;
   width:265px;
   padding: 5px;
   background-color: aaaaaa;

Garrett

Don't know if it is Safari or a bug in SMF, but my "Quick Reply" box is bigger than the browser, and it wouldn't post

I don't know how I missed the # in that div, but I added it and it made the color a gray (what I was going for.) But the footer isn't white (like it is supposed to be) and the "home-con" box isn't lined up with the "servcon" box.
Owner and Operator, Garrett's Websites

Jason

Quote from: Garrett on May 30, 2015, 01:49:58 PM
the footer isn't white (like it is supposed to be) and the "home-con" box isn't lined up with the "servcon" box.

The footer class has:  color: #ffffff;

That should be:  background-color: #ffffff;

The servcon and homecon boxes are lined up correctly when I view it.   The first line of each div is vertically aligned.



Garrett

Quote from: Jason on May 30, 2015, 02:06:58 PM
Quote from: Garrett on May 30, 2015, 01:49:58 PM
the footer isn't white (like it is supposed to be) and the "home-con" box isn't lined up with the "servcon" box.

The footer class has:  color: #ffffff;

That should be:  background-color: #ffffff;

The servcon and homecon boxes are lined up correctly when I view it.   The first line of each div is vertically aligned.

Oops. I forgot to update the page.

The footer bg color actually is supposed to be the same color as the background. Crazy me!
Owner and Operator, Garrett's Websites