Need some quick help [Archive] - Dynamic Drive Forums

Doomtomb

04-11-2010, 09:16 PM

Hi guys, so I'm making a website and they want a logo to the left above the navigation. I'm using a template I found but I can't figure out how to make everything appear on the same line and everything. Here's what I mean in pictures:

This is what happens when I try to add the logo:
http://img15.imageshack.us/img15/6729/problem1je.jpg

This is how it's supposed to look:
http://img132.imageshack.us/img132/3227/problem2d.jpg

here's my html code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>iStar Jr. Consulting - Making Your Company Shine Like a Star</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="content">
<img src="images/left_header.jpg">

<div id="menu">
<ul>
<li id="button1"><a href="#" title="">Home</a></li>
<li id="button2"><a href="#" title="">About Us</a></li>
<li id="button3"><a href="#" title="">Portfolio</a></li>
<li id="button4"><a href="#" title="">Calendar</a></li>
<li id="button5"><a href="#" title="">Contact Us</a></li>
</ul>
</div>



<div id="main">
<div id="right">
<div id="header">
<div id="logo">
<h1><a href="#">Jr. Consulting</a></h1>
</div>
</div>
<h3>Mission</h3>
<img src="images/pic01.jpg" alt="" title="" style=" float:right; padding-right: 20px; padding-left:15px;"/>

<p>We will provide consulting services and develops projects for small and medium size companies, groups and societies in industrial, management and business areas</p>

<div class="read"><a href="#">read more</a></div>
<h3>News</h3>
<div id="right">
<p><a href="#"><h1>Sample News Item 1 Title</h1></a></p>
<p>04-09-2010</p>
<p>News description. If it is necessary, a read more link to the article.</p>

<div class="read"><a href="#">read more</a></div>

<div class="righthr"></div>
</div>

<div id="right">

<p><a href="#"><h1>Sample News Item 2 Title</h1></a></p>
<p>04-09-2010</p>
<p>News description. If it is necessary, a read more link to the article.</p>

<div class="read"><a href="#">read more</a></div>
</div>

</div>
<div id="left">
<div id="left_top"></div>
<div class="leftbg">
<h3>Categories</h3>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about_us.php">About Us</a></li>
<li><a href="leadership_team.php">Leadership Team</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="products.php">Products</a></li>
<li><a href="portfolio.php">Portfolio</a></li>
<li><a href="testimonials.php">Testamonials</a></li>
<li><a href="calendar.php">Calendar</a></li>
<li><a href="careers.php">Careers</a></li>
<li><a href="contact_us.php">Contact Us</a></li>
</ul>
</div>
<div class="leftbg">
<h3>Events</h3>
<div class="comnews">
<a href="#">04-09-2010</a>
<h2>Game Tournament</h2>
<p>Call of Duty: Modern Warfare 2, time, cost, food, etc. description.</p>
<div class="read"><a href="#">read more</a></div>
</div>
<div class="lefthr"></div>
<div class="comnews">
<a href="#">05-11-2009</a>
<h2>Another event</h2>
<p>Description.</p>
<div class="read"><a href="#">read more</a></div>
</div>

</div>
</div><div style="clear:both;">


</div>
<div id="footer">
<p>Copyright © 2010 iStar Consulting. <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
<p>Design by <a href="http://www.metamorphozis.com/" title="Free Website Templates">Free Website Templates</a>
</p>
</div></div>
</div>

</body>
</html>

and the style sheet

/*
Design by Metamorphosis Design
http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 License
*/

*
{
margin: 0px;
padding: 0px;
}

a{
font-family: Arial, Helvetica, sans-serif;
color: #1f4155;
font-weight:bold;
text-decoration: none;
font-size: 12px;
}

.floatleft { float: left; }

.floatright { float: right; }

a:hover {

color: #000000;
}

body {
background: #269fdb url(images/bg.jpg) top repeat-x;
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
}

#content{
margin: 0 auto;
width: 1008px;
text-align: left;
}

#main{
width: 1008px;
margin: 0 auto;
clear:both;
background: url(images/mainbg.png) repeat-y;
}

#header {
width: 681px;
height: 370px;
background: url(images/header.jpg) no-repeat top right;
}

#logo {
height: 93px;
text-align: left;
padding-left: 460px;
padding-top:280px;
}

#logo a {
text-decoration: none;
text-transform: none;
font-style: italic;
font-size: 18px;
color: #ffffff;
}

#logo H2 a{
font-size: 12px;
}

#menu{
width: 620px;
height: 49px;
background: url(images/menu.jpg);
background-repeat: no-repeat;
background-position: right;
padding-left: 380px;
margin-top: 95px;
}

#menu ul {
padding-left: 0px;
margin: 0px;
list-style:none;
}

#menu li {
display: inline;
list-style: none;
padding-left:0px;
}

#menu a {
float: left;
width: 120px;
height: 34px;
display: block;
text-align: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
padding-top: 15px;
font-size: 15px;

}

#menu a:hover{
width: 120px;
height: 34px;
background: url(images/menuhover.png);
background-repeat: no-repeat;
background-position: center;
}

#left{
width: 308px;
margin-left: 7px;
}

#left_top{
background: url(images/left_top.jpg) no-repeat;
height:7px;
}
#left H3{
height: 38px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
font-weight: normal;
color: #0f3349;
text-align: center;
margin-bottom: 10px;
background: url(images/title.gif);
background-repeat: repeat-x;
background-position: bottom;
margin-left: 1px;
margin-right: 3px;
padding-top: 10px;
}

.leftbg{
background: url(images/leftbg.jpg);
background-repeat: no-repeat;
background-position: top;
min-height:220px;
margin-top:1px;
margin-left: 2px;
}

#left ul{
font: bold 12px Arial, Helvetica, sans-serif;
list-style: none;
margin-bottom: 30px;
margin-left: 10px;
padding-top: 5px;
}

#left li{
font: bold 12px Arial, Helvetica, sans-serif;
background: url(images/ls.png) no-repeat 2px 3px;
padding-left: 25px;
margin-bottom: 10px;
}

#left ul li a{
font: bold 12px Arial, Helvetica, sans-serif;
color: #155a84;
}

#left ul li a:hover {
color: #000000;
}

.comnews{
background: url(images/ls2.png) no-repeat top left;
margin-left: 15px;
padding-left: 25px;
}

.comnews h2{
font-family: Arial, Helvetica, sans-serif;
color: #093960;
font-weight:bold;
font-size:12px;
}

.comnews p{
padding-right: 20px;
line-height:20px;
}

.comnews a{
font: bold 12px Arial, Helvetica, sans-serif;
color: #155a84;
text-decoration:underline;
}

.comnews a:hover {
color: #000000;
}

.lefthr{
background: url(images/lefthr.png) repeat-x;
height:1px;
margin-left: 1px;
margin-right: 3px;
margin-bottom: 18px;
}

#right{
float: right;
width: 681px;
margin-right: 8px;
}

#right H3{
height: 38px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
font-weight: normal;
color: #0f3349;
margin-left: 2px;
margin-right: 2px;
background: url(images/title.gif);
background-repeat: repeat-x;
background-position: bottom;
padding-left: 15px;
margin-bottom: 15px;
padding-top: 15px;
}

#right H4{
height: 30px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: normal;
color: #0f3349;
margin-left: 2px;
margin-right: 2px;
background: url(images/title.gif);
background-repeat: repeat-x;
background-position: bottom;
padding-left: 15px;
margin-bottom: 15px;
padding-top: 15px;
}

#right p {
margin: 0;
padding: 0;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
line-height:20px;
}

.righthr{
background: url(images/lefthr.png) repeat-x;
height:1px;
margin-left: 15px;
margin-right: 3px;
margin-bottom: 18px;
}

.read{
text-align:right;
padding-right: 30px;
padding-bottom: 10px;
}
.read a{
font: bold 12px Arial, Helvetica, sans-serif;
font-size: 12px;
color: #115079;
text-decoration:none;
}

.read a:hover{
color: #000000;
}

#rightleft{
float:left;
width: 340px;
}

#rightright{
float:right;
width: 340px;
}

#footer {
height: 40px;
width: 1002px;
clear: both;
padding-top: 19px;
font: 12px Arial, Helvetica, sans-serif;
background: url(images/footer.jpg);
background-repeat: repeat-x;
background-position: top;
margin-left: 3px;
}

#footer p {
margin: 0;
font: 12px Arial, Helvetica, sans-serif;
text-align: center;
color: #ffffff;
}

#footer a {
font: bold 12px Arial, Helvetica, sans-serif;
color: #ffffff;
}

#footer a:hover {
color: #000000;
}

traq

04-12-2010, 12:52 AM

please post a link to the page in question so we can help.

Doomtomb

04-12-2010, 04:25 AM

please post a link to the page in question so we can help.
It's not live right now, but all the code is there.

djr33

04-12-2010, 04:52 AM

When posting about a full design especially one with images, it's a good idea to post a link rather than code. We'd need to imagine or recreate the images and other referenced files to see how it would work. Create a temporary page and we can check it out. Otherwise it's a lot harder for someone to help you.

traq

04-12-2010, 03:09 PM

It's not live right now, but all the code is there.

As djr says, it's not enough. I did, in fact, copy all your code into a temp page and looked at it - but without the images (or at least their dimensions), it's impossible to conclusively determine what's going on, or how to "fix" it.

Doomtomb

04-12-2010, 04:38 PM

As djr says, it's not enough. I did, in fact, copy all your code into a temp page and looked at it - but without the images (or at least their dimensions), it's impossible to conclusively determine what's going on, or how to "fix" it.
Ya, sorry guys. I didn't realize that. I came up with a temporary solution though. Sorry for the bother. Next time I'll have a host.