The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Can't get logo to appear over header image
conphill
post Nov 4 2010, 01:26 PM
Post #1





Group: Members
Posts: 3
Joined: 4-November 10
Member No.: 13,071
I just created a boundless header background from a piece of my header design, and now I want my logo to go in the upper left corner over the background. The issue I have been having is that the image appears below the header background image, in a separate container. How do I get the logo to appear in the upper left corner but still have the background image behind it have boundless extension.

HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="DEFAULT.css" rel="stylesheet" type="text/css" />


</head>

<body>
<div id="header">
<img src="images/CampusTaps-bg_01.gif" alt="College Spot" width="100%" height="133" />

<div id="container">




<ul id="nav">

<li><a href"#">Home</a></li>
<li><a href="#">LiquorPrices</a></li>
<li><a href="#">CollegeBars</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">ContactUs</a></li>

</ul>
</div><!---end header--->


CSS


html, body, div, span, applet, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strong,
dl, dt, dd, ol, ul, li,
fieldset, form, label {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

a {
text-decoration; non;
color:black;
}

a:hover {
text-decoration: underline;
}

/*MAIN STYLES*/

html {
}

#container {
width: 800px;
background: white;
margin: 3em auto
}
.header{
width:100%;

height:131px;
background:#333333 url(images/CampusTaps-bg_01.gif) repeat-x top;
}
ul#nav {
height:131px; width:415px;
margin-left:auto: 0 auto;
background:url(images/CampusTapsLogo.jpg);
}

#header {
overflow: hidden;
height: 100%; /*Needed for IE 6 */



}

#nav li {
display:inline;
padding-right: 27px;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Nov 4 2010, 01:50 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Can you provide the URL (address) of a document that demonstrates the problem?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
conphill
post Nov 4 2010, 02:04 PM
Post #3





Group: Members
Posts: 3
Joined: 4-November 10
Member No.: 13,071
QUOTE(Darin McGrew @ Nov 4 2010, 02:50 PM) *

Can you provide the URL (address) of a document that demonstrates the problem?


Not sure if this is what your looking for.

This post has been edited by conphill: Nov 4 2010, 02:42 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 4 2010, 03:49 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Did you forget something? smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · General Web Design · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 16th April 2024 - 04:51 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC