Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Help a newbie!! (CSS/HTML Question)

A

applekid

macrumors 68020
Original poster
Jul 3, 2003
2,097
0
Okay...

I just started to catch on to CSS yesterday (it's going pretty smoothly), and I'm using Dreamweaver (so I'm not really doing much HTML coding).

So, you know how many websites have their logos in the top left corner and it's just a link to take you back to the homepage? How do I do that for every page on the website I am designing? So far the closest thing I can do is get it in the body.

I have a sidebar done in CSS on the left. I decided to move the logo into that sidebar, but there are many rendering problems with that.

An example of what I'm talking about is MacRumors. I'm going for what MacRumors has from the ad banner and below, in essence.
 
Typically when sites do this, they have a header div, and the site's logo is placed inside the header div. The sidebar and content divs are placed below the header.

With some code or a place to see what you have so far, it's difficult to tell you what exactly your problem is.
 
Relevant HTML Code:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="shortcut icon" href="favicon.ico">
<title>Homepage</title>  
  <link rel="stylesheet" href="mystyle.css">
  <style type="text/css">
<!--
.style1 {font-size: 10px}
-->
  </style>
</head>

<body>

<!-- Title bar -->
<h1 class="banner"><a href="index.html"><img src="logo.jpg" alt="logo"/></a></h1>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Portfolio</a>
  <li><a href="index.html">Events</a>
  <li><a href="index.html">Environment</a>
  <li><a href="index.html">Pricing</a>
  <li><a href="index.html">Contact</a>
</ul>

CSS Code:

Code: 
/* CSS Document */

body {
	padding-left: 15em;
	font-family: Georgia, "Times New Roman",
		Times, serif;
	color: white;
	background-color: #000000
}

ul.navbar {
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: absolute;
	left: 1em;
	width: 10em 
}

h2 {
font-family: Helvetica, Geneva, Arial,
	SunSans-Regular, sans-serif 
}

ul.navbar li {
	background-color: #333333;
	margin: 0.5em;
	padding: 0.3em;
	border-right: 1em solid white
}

ul.navbar a { 
	text-decoration: none
}

a:link { 
	color: white;
	font-weight: bolder
}

a:visited {
	font-weight: bolder 
}

At the moment, where I want to place the logo.jpg is an empty space (the top left corner). I mean, I guess I could keep the way it is, with the logo being in the body, but I would prefer the corner. The code posted is when I don't put the logo in the sidebar.
 
I'm not going to save your code and view it, so I'm not sure exactly what you have a problem with visually, but I can tell you that you shouldn't be using an <h1> tag around your logo. It's pointless -- you're applying formatting intended for text to nothing but an image. H* tags have margins on them by default, so you might be encountering that. Replace it with a <div> to denote your banner. If you're still not getting what you want, post a screenshot (or put it somewhere on the web where we can access it) so we can see exactly what you're talking about.
 


I want the Memorable Instants logo in the top left corner, not right of the sidebar.
 
Well, you could try changing it to a <div> tag, like I said. By default, the div tag should occupy the width of its own container. If its own contents are left-aligned, then the logo will wind up on the left.
 
um actually, if the logo (and any text next to it) are your main heading/site title for the page, a H1 is the correct tag to use.

using DIV tags everywhere is a mistake. aim to write semantic code, and then apply CSS to it. eg:

HTML: 
<html>
....

<body>
<h1>Site Name</h1>
<h2>Page Name</h2>
<ul>
<li>Nav item</li>
....
</ul>
<div>
<p>Body content</p>
<p>More content</p>
</div>
 
pengu: Not if con't have text in your header, or if the header is going to container other things (like a search box, etc). H1 is a text tag. Division tags are intended to separate major portions of the page -- a header, a sidebar, etc. You don't use text tags to separate different parts of the page, you use them around text. If he had a text header next to that logo, then H1 would be the correct tag.

Of course this is all semantics. If you bend the CSS enough you can use whatever tag you want, but it will cause you more trouble in the end -- like in this case, when you're using an H1 tag to delineate a header but don't want any margins. It makes more sense, both semantically and codewise, to use a div. That's what they're for.
 
That screenshot I posted was with <div>. I think something is possibly wrong with my CSS code...? :confused:
 
you're right, H1 is a text element. so put it in, and use CSS to apply the img as a background, so that when css is off, it appears as text, and use positioning to put your search box at the top.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back