Need some quick help

**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:

This is how it's supposed to look:

here's my html code

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">
<!-- header begins -->
	<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>

<!-- header ends -->
<!-- content begins -->
<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;">
<!--content ends -->
<!--footer begins -->
	</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>
<!-- footer ends-->
</body>
</html>

and the style sheet

Code:

/*
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

Originally Posted by traq

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

Originally Posted by Doomtomb

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

Originally Posted by traq

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.

Thread: Need some quick help

Thread Tools

Search Thread

Need some quick help

Bookmarks

Bookmarks

Posting Permissions