/    Sign up×
Community /Pin to ProfileBookmark

image over background image

Copy linkTweet thisAlerts:
Aug 04.2004

I have created a header div which has a background image of a gradient that repeats across it. I want to put an image over the top of this header div so I made a logo div but the logo div isn’t displaying. What am I doing wrong?

[CODE]<style type=”text/css”>
body {
margin: 0px;
padding: 0px;
}
#header {
width: 760px;
height: 100px;
padding: 0px;
background-image: url(images/headergradient.jpg);
background-repeat: repeat-x;
text-align: bottom;
}
#logo {
/*float: left;*/
vertical-align: top;
background: url(images/companylogo.jpg);
background-repeat: no-repeat;
}
#navtext {
float:right;
vertical-align: bottom;
}
</style>
</head>
<body>
<div id=”header”>
<div id=”logo”>
</div>

<div id=”navtext”>
Weddings | Portraits | Dogs | Enquiry | Feedback
</div>
</div>
<!– <div id=”header”> <img src=”images/companylogo1.jpg” style=”vertical-align: top;”> –>
</body>[/CODE]

to post a comment
CSS

22 Comments(s) ↴

Copy linkTweet thisAlerts:
@JonaAug 04.2004 — [font=trebuchet ms]Looking deeper, try setting a width and height to your logo DIV.[/font]
Copy linkTweet thisAlerts:
@bradlesauthorAug 04.2004 — Thanks...That works.

The other problem I have is getting the navtext to appear at the bottom right of the header div box. Do you know what that isn't working? I have vertical-aligned the text to the bottom but it still appears at the top.

[CODE]<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#header {
width: 760px;
height: 100px;
padding: 0px;
background-image: url(images/headergradient.jpg);
background-repeat: repeat-x;
text-align: bottom;
}
#logo {
float: left;
vertical-align: top;
background: url(images/companylogo.jpg);
background-repeat: no-repeat;
height: 59px;
width: 314px;
}
#navtext {
float:right;
vertical-align: bottom;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
</div>

<div id="navtext">
Weddings | Portraits | Dogs | Enquiry | Feedback
</div>
</div>
<!-- <div id="header"> <img src="images/companylogo1.jpg" style="vertical-align: top;"> -->
</body>[/CODE]
Copy linkTweet thisAlerts:
@JonaAug 04.2004 — [font=trebuchet ms]The [i]verticali-align[/i] property only applies to [i]table[/i] elements, and so it would not affect the formatting of the text in this particular case. Since you are using a fixed width/height for your [i]header[/i] DIV, add a [i]margin-top[/i] to the [i]navtext[/i] DIV.[/font]

<i>
</i>#navtext {
float:right;
margin-top: 70px;
}


[font=trebuchet ms]Just be careful not to add too much of a margin-top, as people may wish to increase their font size, making it go below the header image.[/font]
Copy linkTweet thisAlerts:
@bradlesauthorAug 04.2004 — Is there a better way to do what I'm trying to do?

I wanted to have a header box 760x100 pixels. It has a gradient background image. I wanted to place my logo on the top right of this box and the navigational links on the bottom right of this box.

How do other programmers achieve this?
Copy linkTweet thisAlerts:
@JonaAug 04.2004 — [font=trebuchet ms]Actually, why not just use one DIV. Also, the markup should be semantic, so you should use an image replacement technique (such as Shea's Image Replacement).[/font]

<i>
</i>&lt;style type="text/css"&gt;
body {
margin: 0px;
padding: 0px;
}

#header {
width: 760px;
height: 100px;
padding: 0px;
background-image: #fff url(images/headergradient.jpg) top left repeat-x;
}

#header h1 {
margin: 0;
padding:0;
font-size: medium;
}

#header span {
position: absolute;
width :314px;
height: 59px;
background: transparent url(images/companylogo.jpg) top left no-repeat;
}

#header ul {
list-style: none;
}

#header ul li {
float: left;
padding:2px;
margin-top:2em;
border:solid 1px #000;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="header"&gt;
&lt;h1 title="Logo title"&gt; &lt;span&gt;&lt;/span&gt;Logo title&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;Weddings&lt;/li&gt;
&lt;li&gt;Portraits&lt;/li&gt;
&lt;li&gt;Dogs&lt;/li&gt;
&lt;li&gt;Inquiry&lt;/li&gt;
&lt;li&gt;Feedback&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/body&gt;
Copy linkTweet thisAlerts:
@bradlesauthorAug 04.2004 — I'm not yet experienced enough with things like:

#header

#header hi

Does this help abreviate your code in the <body>?

example:
[CODE]<div id="header">
<hi> code here </hi>
</div>[[/CODE]
If that is the case should I make my logo declaration as #header logo?

I tried to put [CODE]<div id="header">
<logo></logo>
</div>[/CODE]
but the logo wouldn't show.

I also ran your code but it doesn't fill the 760x100px gradient...it just shows the logo with the link boxes underneath it.
Copy linkTweet thisAlerts:
@ray326Aug 04.2004 — That's not an h[b]i[/b], it's an h[b]1[/b]. Your logo should just be an img.
Copy linkTweet thisAlerts:
@JonaAug 04.2004 — [font=trebuchet ms]Bradles, the purpose of my code is to provide semantic meaning for non-visual browsers, while still displaying graphic information in its place for browsers who can render images. If you run that code, without CSS, you will see the text; if you run the code without images, you will see the text. The purpose of the H1 tag (which literally means "heading one"), is to specify the primary heading of a document, much like the title (in some cases). Six sub-heading HTML elements are included in the (x)HTML specifications. These are: H2, H3, H4, H5, and H6. Sub headings of H1 elements are H2 elmeents, sub headings of [i]those[/i] sub headings are H3's, and so on. This way, a document can have more semantic structure. Think of it as a capital letter at the beginning of or a fullstop (period) at the end of a sentence; many people these days disregard these common grammatical guidelines. This is not recommended, obviously, yet there is no law that says you cannot. Sometimes, or often depending on your reading and comprehension skills, you can't understand what one is saying when little or no punctuation or capitalization is used. What's more, if you have a reading or comprehension disability, it may cause this information even more difficult to understand. The H1 element as your first heading to your document, declares that this is the primary subject of the document; even if it's a header, it is specifying where on the Web you are, and marking the beginning of a structured document, with sub-headings of different, yet related, subjects. The image replacement technique attempts to solve these problems by using semantic markup for browsers who do not render CSS or graphics, display a visual representation for those who have both, or display simply the text alone for those who have one or the other. I hope this makes more sense to you.[/font]
Copy linkTweet thisAlerts:
@bradlesauthorAug 04.2004 — I think I understand what you are getting at Jona.

I'm just wondering if I create a #header div that is going to contain other styled elements should i create those styles as:

#header logo

#header navlinks

if you know what I mean. Sorry if I'm not explaining it right as I am still reasonably new to CSS design.

I've started doing this design back with tables because i've found trying to learn divs pretty tough...eventually I will want to switch to divs though...there is only so much frustration I can put up though with if you know what I mean.

Thanks
Copy linkTweet thisAlerts:
@JonaAug 04.2004 — [font=trebuchet ms]Bradles, if you could attach a .zip file containing the images and your current CSS code, I can modify it and hopefully explain it further for you. Reverting back to tables is procrastination more than the result of frustration -- it's like going to a food place, deciding you don't want to eat there, ending up eating something unhealthy instead, and becoming sick during the next day.[/font]
Copy linkTweet thisAlerts:
@bradlesauthorAug 04.2004 — Jona,

I appreciate your help in explaining. I know I want to learn how to use css..I'm just having a lot of trouble with layouts. I know it will improve with experience...I'm still learning what certain tags can and cannot do.

I have attached the image and gradient spacer in a zip.

Here is the code:[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#header {
width: 760px;
height: 100px;
padding: 0px;
background-image: url(images/headergradient.jpg);
background-repeat: repeat-x;
}

#logo {
float: left;
/*vertical-align: bottom;*/
background: url(images/companylogo.jpg);
background-repeat: no-repeat;
height: 100px;
width: 314px;
}
#navtext {
float:right;
text-align: right;
margin-right: 5px;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
</div>

<div id="navtext">
Weddings | Portraits | Dogs | Enquiry | Feedback
</div>
</div>
<!-- <div id="header"> <img src="images/companylogo1.jpg" style="vertical-align: top;"> -->
</body>
</html>[/CODE]
I think you know what I'm trying to do here. Have a logo in a div at the far left in line with the top and then have nav text far right in line with the bottom.

I am more interested in learning if what I am doing is a good way/bad way and if not...how to go about coding more dynamically.

Thanks for checking it out anyway.

Brad.

[upl-file uuid=0f8a2254-f1bd-488c-8d8e-48cfa2445bf0 size=10kB]images.zip[/upl-file]
Copy linkTweet thisAlerts:
@Paul_JrAug 04.2004 — Try this.
[size=1]
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;style type="text/css"&gt;
body {
margin: 0px;
padding: 0px;
}
#header {
width: 760px;
height: 100px;
padding: 0px;
background-image: url(images/headergradient.jpg);
background-repeat: repeat-x;
}
#header h1 {
margin: 0;
padding:0;
font-size: medium;
}
#header span {
position: absolute;
width :314px;
height: 59px;
background: transparent url(images/companylogo.jpg) top left no-repeat;
}
#navtext {
padding: 0;
margin: 0;
list-style: none;
float: right;
margin-right: 5px;
margin-top: 55px;
}
#navtext li {
display: block;
padding: 0 5px;
line-height: 110%;
border-right: 1px solid #000;
float: left;
}
#navtext li#last {
border-right: 0;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="header"&gt;
&lt;h1&gt;&lt;span&gt;&lt;/span&gt;Company Title&lt;/h1&gt;

<i> </i>&lt;ul id="navtext"&gt;
<i> </i> &lt;li&gt;&lt;a href=""&gt;Weddings&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href=""&gt;Portraits&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href=""&gt;Dogs&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href=""&gt;Enquiry&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li id="last"&gt;&lt;a href=""&gt;Feedback&lt;/a&gt;&lt;/li&gt;
<i> </i>&lt;/ul&gt;
&lt;/div&gt;
&lt;!-- &lt;div id="header"&gt; &lt;img src="images/companylogo1.jpg" style="vertical-align: top;"&gt; --&gt;
&lt;/body&gt;
&lt;/html&gt;
[/size]
The reason the logo wasn&#8217;t showing is because you had it named [i]companylogo1[/i], but you forgot to add the [i]1[/i] in the URL in your CSS file.
Copy linkTweet thisAlerts:
@bradlesauthorAug 04.2004 — That looks downright hideous in the design view of dreamweaver Paul but when you display it in a web page it does what I want it to do.

Thanks. Now I just have to wrap my head around the CSS (being fairly new to it).
Copy linkTweet thisAlerts:
@ray326Aug 05.2004 — So switch from DW to HTML-kit and you'll have a better page development environment.
Copy linkTweet thisAlerts:
@Paul_JrAug 05.2004 — [i]Originally posted by bradles [/i]

[B]That looks downright hideous in the design view of dreamweaver Paul but when you display it in a web page it does what I want it to do.

Thanks. Now I just have to wrap my head around the CSS (being fairly new to it). [/B][/QUOTE]
Wow, that sure is odd &#8212; never used DW before, though. Homesite is my tool of choice. ?
Copy linkTweet thisAlerts:
@JonaAug 06.2004 — [font=trebuchet ms]Thanks for that, Paul, I had lost my Internet connection and wasn't able to connect for the past two days. It really frustrated me.[/font]
Copy linkTweet thisAlerts:
@Paul_JrAug 07.2004 — [i]Originally posted by Jona [/i]

[B][font=trebuchet ms]Thanks for that, Paul, I had lost my Internet connection and wasn't able to connect for the past two days. It really frustrated me.[/font] [/B][/QUOTE]
You're welcome. ?


[size=1]Woo! *Feels all special* ?[/size]
Copy linkTweet thisAlerts:
@pawkyAug 08.2004 — reading this has helped me as i have been able to just read more and c more use of it (i have seen all you have done before, just seeing more of it helps as well as others explaining it ?) Also, i like to use NoteTab Light for coding. It is a very nice program and free as well. The URL for it is http://www.notetab.com/ Its a great program and has a lot u can do w/ it and is also very simple or complex at the same time ? haha
Copy linkTweet thisAlerts:
@pawkyAug 08.2004 — i understood all of it except for one small peice of code. at one point Jona u put this code in:

background-image: #fff url(images/headergradient.jpg) top left repeat-x;

my question is shouldnt 'background-image' be just 'background'? because isnt background-image: used for when u are putting in just the image and then background: includes bg color, bg inamges, bg repeat, bg align all together. Thx for the help and i hope i made sense ? thx tc
Copy linkTweet thisAlerts:
@JonaAug 08.2004 — [font=trebuchet ms]Yes, pawky, you are correct. "background-image" is only for specifying the URL to search for the background image. My apologies.[/font]
Copy linkTweet thisAlerts:
@pawkyAug 08.2004 — thx ? just wanted to make sure i wasnt missing something ?
Copy linkTweet thisAlerts:
@JonaAug 08.2004 — [font=trebuchet ms]You're welcome.[/font]
×

Success!

Help @bradles spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...