Ashamed to ask, but I'm dumbfuddled
newbie
Location: Richmond
Posted: Thu, 2008-05-15 12:51
First of all, I would like to thank you for your time. I'm a recent convert from Tables, which I still miss. So I'm trying to refrain, therapy is helping.
On my new site I'm building which is http://droptodesign.com/test/2008/
The CSS file, main one is http://droptodesign.com/test/2008/2008main.css
You'll see my left and right bottom boxes, I would like for that text to shrink depending on browser etc, but when I moved the <div>s around things go nuts.
I realize this is an elementary question, and I've probably read the solution somewhere in the past couple of weeks, I could just use a boost. Thank you again.
CSS
/*body*/
#wrapper {
position: relative;
background-color: #999999;
font-size:12px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
height: 100%;
z-index: 1;
}
#header {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
width: 100%;
height: 150px;
position: absolute;
top: 0;
left: 0;
background-color: #FFFFFF;
background-image: url(images/2008Banner2.jpg);
background-repeat: no-repeat;
z-index: 2;
}
#middle {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
width: 100%;
position: absolute;
top:150px;
left: 0;
z-index: 10;
background-image: url(images/rockpatternback.jpg);
border-top: 3px solid #CCCCCC;
}
#middle_left {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
width: auto;
position: absolute;
top: 0;
left: 0;
background-color: #FFFFFF;
background-image: url(images/rockpatternback.jpg);
}
#rightb {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
width: 150px;
height:auto;
background-color: #FFFFFF;
text-align:center;
position: absolute;
right: 0;
bottom: 10%;
margin: 1em;
display: inline;
}
#leftb {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
width: 150px;
height: auto;
background-color: #FFFFFF;
position:absolute;
left:0;
bottom: 10%;
text-align:center;
margin:1em;
display: inline;
}
#footer{
position: absolute;
width: 100%;
height: 15px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
bottom:0;
left: 0;
background-color: #000000;
font-size: 12px;
text-align: center;
}
#botlinks {
background-color: #FFFFFF;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
padding:1em;
border: 0px solid #000;
padding: 5px;
list-style-image: url(images/bullet.gif);
}
.tv {
float:right;
display:inline;
padding: 2px;
}
/*main text*/
#par1 {
float : left;
position:relative;
width : 50%;
top: 0;
left: 25%;
padding:2em;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
letter-spacing:1px;
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
background-color:#FFFFFF;
}
.impact {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
font-weight: bold;
color: #FF0000;
background-color: #FFF;
border-top: 1px solid #FF0000;
letter-spacing: 1px;
}
.title {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #000;
background-color: #FFF;
letter-spacing: 1px;
padding;1px;
}
.article {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
font-style: italic;
letter-spacing: 1px;
}
.webtext {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
font-style: normal;
letter-spacing: 1px;
}
.signature {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333333;
font-style: italic;
letter-spacing: 1px;
}
.subtext {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:10px;
color:#CCCCCC;
background-image: url(images/redbackrose.jpg);
}
.caption {
background-color: #000000;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:14px;
text-align:center;
border-bottom: 1px solid #FF0000;
font-style: italic;
color: #FFFFFF;
position:relative;
}
li {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #000000;
background-color: #CCCCCC;
text-align:left;
list-style-type: disc;
list-style-position: inside;
}
ul {
margin-left: 0;
padding-left: 1em;
text-indent: 1em;
background-color: #FFFFFF;
}HTML
<!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=iso-8859-1" />
<title>Videography Richmond, VA - Drop to Design - Our Front Page</title>
<link href="2008main.css" rel="stylesheet" type="text/css" />
<link href="links.css" rel="stylesheet" type="text/css" />
</head>
<body id="wrapper">
<div id="header">
<div id="middle">
<div id="middle_left">
<ul class="ulinks">
<li class="links"><a href="services.html">Services</a></li>
<li class="links"><a href="aboutus.html">About Us</a></li>
<li class="links"><a href="contact.html">Contact</a></li>
<li class="links"><a href="testimonials.html">Testimonials</a></li>
</ul>
</div>
<div id="par1">
<div><span class="tv"><img src="images/tvcouple.jpg" alt="couple in tv" width="400" height="311" /></span>
<p class="title">Thank you for your interest in Drop to Design Video Productions.</p>
<p>We offer the most comprehensive wedding and event videography service in Richmond, VA and surrounding area.Don't miss out on your wedding, book today to preserve your memories. Only professional videography will preserve those memories, special moments you experienced and some you missed.</p>
<p><strong><em>Question:</em></strong></p>
<p><strong><em>"How much do I invest in videography?"</em></strong></p>
<p><strong><em>Answer:</em></strong></p>
<p><strong><em> While there isn't a dollar amount you can put on watching your first kiss, dancing with the love of your life, hiring a professional videography is the fruit of your investment.</em></strong></p>
</div>
</div>
<div id="footer"><p class="subtext">site designed by drop to design © 2003 - 2008 all rights reserved - (804) 269-4949 </p></div>
<div id="leftb"><p class="impact"> Do you have a wedding coordinator! Click Here</p></div>
<div id="rightb"><p class="caption">Preserve the memories</p><p class="impact">See what other's say about our services.</p></div>
</div>
</div>
</body>
</html>
newbie
Posts: 8
Joined: 2008-05-15
Location: Richmond
Forgot to add.
Posted: Thu, 2008-05-15 12:53
Also, the left and right boxes float over anything else, that's because I have absolute, but when I used float they spread across the screen, I'm still dumbfuddled.
Guru
Posts: 2605
Joined: 2005-12-14
Location: Victoria British Columbia
Congratulations on the valid
Posted: Fri, 2008-05-16 05:37
Congratulations on the valid html, though you should use a STRICT doctype, not transitional.
However there are some bad errors in your CSS, which can cause all sorts of weird problems. Please get these fixed up and come on back if the problem persists.
Nothing about your layout requires absolute positioning - it can all be done with floats.
I am not now, nor was I ever, any kind of "dude".
Ed Seedhouse
Leader
Posts: 841
Joined: 2008-02-04
Location: Netherlands
I'm guessing that if the
Posted: Fri, 2008-05-16 10:52
I'm guessing that if the floats went all over the place, there wasn't room for them?
I actually still have trouble seeing how this is supposed to look... middle looks like a general content wrapper so okay... the menu looks like it's supposed to be like a left sidebar? The secret to floats is making sure there's room for them-- so if there were supposed to be a sort of left sidebar with the navigation and then that par1 was supposed to be the main content part on the right/middle of the page (I'm not sure cause I see it's floated left), there'd be a left-margin so that there was a place for the nav sidebar. Set widths on floats or else some browsers will shrink-wrap them to the content width (what they are supposed to do) and others don't. So set a width on all floats (yeah there are times when I don't but just to make things easier on you until you're comfortable).
I noticed you have a class on every li but aren't using them in the CSS. Good, you don't need them : ) Remove the classes on the li's, that's just extra bloat : )
Second tip for playing with floats: give everyone an ugly background colour so you can see where everything is, and catch float bugs in browsers (like IE). Remove the backgrounds when you're done.
I'm no expert, but I can fake one on teh Interwebz