Forum Moderators: not2easy
Here is my issue...my employer started out wanting a complete flash site, to which I replied...no....no good for SEO, which is something that is more important to them than how the site is built. Then, I decided to just have a flash intro that leads to an html page, fine, no problems. Now...I'm trying to design this page with a pre-set background....to give you an idea of how this background looks, you can view the flash and *table* version here:::
<snip>
You see how the top and bottom come in to view during the flash? This needs to remain the background throughout the entire site. No problem.
Now....after much searching and begging for help, I found someone nice enough to help me understand how to get multiple divs in one row without all the messed up crap that happens (going to another line, etc.) I basically need the top 3 images to be divs...the marketing button, the logo and the billing button.
Not to much of a problem, the code they gave me was fine. However, after I added that code, my background disappeared for some strange reason, also not a dilemma because I figured out how to get it back. What I'm struggling with is this (and this has never been a problem for me with tables) - if you look here <snip> you will see now those buttons are in divs, but, they are shoved way off to the left of what is a liquid layout, why is this happening and how do I fix it?
Also, (another issue I never had a problem with when using tables) - how do I "nudge" the images up or down within the div...I had to use br tags to get it to where I want it, but it doesn't look the same in FF and IE.
Oh, and then there's the lovely problem with the background in IE....why....oh why does it repeat in IE but not in FF? How do I fix this?
Here is my (probably messy) CSS::::
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background-image:url(images/bg.jpg);
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.swd #container {
width: 80%; /* this will create a container 80% of the browser width */
background: transparent;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.swd #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
ul,li{list-style:none;}ul.row {
clear:both;
overflow:hidden;
}
ul.row li {
float:left;
position:relative;
margin:0 50px;
display:inline;
}
and here is my HTML (less messy but who knows now that I've got more css than I ever planned on using in there):::
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head><body background="images/bg.jpg" class="swd">
<div id="container">
<div id="mainContent">
<ul class="row">
<li>
<br /><br /><br /><img src="images/marketing2.png" height="39" width="157" alt="Direct Marketing"></li>
<li> <img src="images/logo4.png" height="175" width="125" alt="SouthWest Direct" /> </li>
<li>
<br /><br /><br /><img src="images/billing2.png" height="39" width="162" alt="Billing Statements"></li>
</ul>
<br />
<p></p>
<h2></h2>
<p></p>
<!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>
Why is css such a pain when all I keep hearing is how easy it is to work with? Why is it such a horrible thing to keep using tables? Because it's outdated? There's got to be a more logical, scientific reasoning behind tabled layouts other than "because it's newer and cooler and you're a dumb if you keep using tables".
Can someone explain firstly, how to fix my problems and secondly, an intelligent reason to not use tables anymore? Thank you.
::::sigh::::
[edited by: swa66 at 4:00 pm (utc) on April 6, 2009]
[edit reason] No URLs, language see ToS [/edit]
All is nearly trivial to fix: loose the <br />'s in you html, loose the background on the body in the html etc: make is as lean as you can.
background on the body is already added in the CSS.
To position your images: you can use margin, padding etc as you like to position it where you like it.
Don't fight CSS, you'll love what it can do if you accept it.
