Hello, I am not really sure how best to explain this, so here is a link:
http://tryfluid.com/testing.html
Basically, I am trying to get a small image to be in the navigation bar, set to the right edge (or close to it)
I did not set a height on the div area, I thought that meant it would automatically "sense" what is inside it and adjust to accomodate everything... this does not seem to be happening, and even worse, the image is offsetting the size of the boxes below it, which are set to percentages of the container element...
Im very confused, maybe someone can help.
Here is the code from the style sheet:
Code:
@charset "UTF-8";
body {
background-image: url(images/background2.jpg);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#container {
width: 75%;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
background-image: url(images/transsquare2.png);
}
#navBartop {
background-color: #FFF;
width: 100%;
margin-top: 7px;
border-top-width: thin;
border-bottom-width: thin;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #7BABFF;
border-right-color: #7BABFF;
border-bottom-color: #7BABFF;
border-left-color: #7BABFF;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
vertical-align: top;
}
#content {
width: 65%;
padding-left: 25px;
padding-top: 10px;
padding-bottom: 65px;
padding-right: 20px;
}
#header {
width: 75%;
margin-right: auto;
margin-left: auto;
height: 100px;
vertical-align: bottom;
}
.mainText {
font-family: 'Inconsolata';
font-size: 14px;
color: #333;
padding-top: 8px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 25px;
margin: 0px;
}
.mainText a {
color: #036;
text-decoration: none;
}
#thumbArea {
background-color: #999;
float: right;
padding: 12px;
height: 200px;
width: 27%;
margin-top: 25px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 0px;
}
and here is the actual source code:
Code:
<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>fluid designs</title>
<!-- TemplateEndEditable -->
<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<style type="text/css">
<!--
-->
.headText {
font-family: 'Inconsolata', Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #333;
letter-spacing: 1em;
padding-top: 8px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 25px;
margin: 0px;
}
.NavBarText {
font-family: 'Inconsolata', verdana;
font-size: 14px;
color: #063;
padding-top: 3px;
padding-left: 25px;
letter-spacing: .3em;
margin: 0px;
padding-bottom: 3px;
}
.NavBarText a {
color: #036;
text-decoration: none;
}
.NavBarText a:hover {
color: #F00;
}
</style>
<link href="../fluidStyles.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<div id="header"><img src="../images/head_fluid.png" alt="fluid" width="294" height="100" hspace="19" align="left" /><img src="../images/head_stars.png" alt="stars" width="160" height="100" align="right" /></div>
<div id="container"><p class="headText" >GRAPHIC DESIGN & CREATIVE SERVICES SINCE 1998</p>
<div id="navBartop">
<p class="NavBarText"><a href="index.html">HOME</a> <a href="portfolio.html">PORTFOLIO</a> <a href="clients.html">CLIENTS</a> <a href="print.html">PRINT SERVICES</a> <a href="contact.html">CONTACT</a> <img src="../images/facebook.png" hspace="15" / align="right"></p>
</div>
<div id="thumbArea">Why is the facebook icon not staying inside the "navBarTop" div, and why is it forcing this div area to not align with the right edge?
</div><div class="mainText" id="content">
<p><strong>Welcome to fluid.</strong>*<br />
<br />
Founded in 1998, fluid designs has been offering professional and affordable graphic design services in the Wilmington, NC community. Since then our client base has expanded to include clients all over the country, in a range of industries.*<br />
<br />
Our creative work is professional, on time, and within your budget.*<br />
<br />
No matter what business you're in, there is a way we can help. Our love for design, and our ability to deliver your concept in a realistic fashion is what sets us apart from other small agencies. We listen to your suggestions and ideas, and then we deliver.*<br />
<br />
<strong>Fluid Designs is a one stop shop</strong>*for all your design and promotional needs. Since we offer a full range of design services as well as promotional products, you can stop worrying about getting your logos or artwork from one agency to another in order to get your promotional products printed. You'll also never have to worry about what type of file your logo is, what type of resolution is required for what you need... Just call us, or send us an email, and we'll take care of the rest.</p>
<p><strong>Spend more time managing your business, not your art files</strong><em>.</em>*<br />
<br />
<strong>Again, welcome to fluid designs,</strong>*let us take care of your design needs so you can take care of your business needs. Give us a call at 910+616+5665 or*<a href="mailto:allen@tryfluid.com">send us an email</a>, see how simple it can be. We'll work hard to make sure you look good.</p>
</div>
</div>
</body>
</html>
Thanks to anyone who can help, I'm stumped here... Hope the link above shows my problem clearly enough.
Thanks!
Login 
Web Design & Development 
Search 
Facebook
Twitter
TechGuy.tv
TSG Mobile