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,259
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


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,767
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

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

 



- Lo-Fi Version Time is now: 22nd November 2017 - 05:57 AM