Help a newbie!! (CSS/HTML Question)

Discussion in 'Web Design and Development' started by applekid, Mar 30, 2007.

  1. applekid macrumors 68020

    Joined:
    Jul 3, 2003
    #1
    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.
     
  2. epochblue macrumors 68000

    epochblue

    Joined:
    Aug 12, 2005
    Location:
    Nashville, TN
    #2
    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.
     
  3. applekid thread starter macrumors 68020

    Joined:
    Jul 3, 2003
    #3
    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.
     
  4. rogersmj macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #4
    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.
     
  5. applekid thread starter macrumors 68020

    Joined:
    Jul 3, 2003
    #5
    [​IMG]

    I want the Memorable Instants logo in the top left corner, not right of the sidebar.
     
  6. rogersmj macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #6
    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.
     
  7. pengu macrumors 6502a

    Joined:
    Mar 20, 2005
    Location:
    Diddily Daddily...
    #7
    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>
    
     
  8. rogersmj macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #8
    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.
     
  9. applekid thread starter macrumors 68020

    Joined:
    Jul 3, 2003
    #9
    That screenshot I posted was with <div>. I think something is possibly wrong with my CSS code...? :confused:
     
  10. pengu macrumors 6502a

    Joined:
    Mar 20, 2005
    Location:
    Diddily Daddily...
    #10
    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.
     

Share This Page