how would i go about…

@Davey_MApr 08.2006

how would i go about positioning the images in the header within the div so they appeared like the image i’ve attached to this post?

Page i’m trying to edit
~~[url]~~http://merlins-realm.co.uk/header.html[/url]

view attached image to see how i’m trying to get it to look, thanks

~~[upl-file uuid=820336f7-1c89-47d5-b629-cc366776ab4e size=96kB]~~unslicedheader.jpg[/upl-file]

to post a comment

CSS

9 Comments(s) _↴

@WebJoelApr 08.2006 — #I'd go with Unordered List/<LI>s. After all, a navigation list is really a "list item".

No 'positioning' really required if done right. I might tweak around with this later and see if I can come up with something. The colors would/could remain the same, and the banner image would actually load faster due to fewer images...

One could actually make the "text" part change color or get slightly larger when 'active' (on mouseover), and even has a 'visited' state...

There is some kewl things that can be done. ?

@Davey_MauthorApr 08.2006 — #i'd b interested to see wot u can do with this, thanks ?

@Davey_MauthorApr 08.2006 — #i had a play around with it, though not sure how to go about creating an unordered list, just getting to grips with css (slowly)...

u'll see in the css wot i put anyways... just used 1 main image for the background then applied css for positioning of the text... wehther it's right or wrong i don't know but i'd be happy to take advice either way...

http://merlins-realm.co.uk/header2.html

hmmm just tried it in FF - only works in IE - maybe something else needs changed

@WebJoelApr 09.2006 — #(BAK, -had to go away for a few hours...)

Here is the revised code:

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
 <title>M e r l i n s R e a l m</title>
 <!-- http://merlins-realm.co.uk/header.html -->
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style type="text/css">
 body, html {margin:0; padding:0; border:0; background-color:#D8DEDB;} /* This re-sets IE from doing stupid things */
 
 /* Next: set up some basic page rules to abide by */
 p {margin-top:0; padding:0; padding-left:5px; line-height:1.07em; margin-bottom:1em;}
 h1 {font-size: 1.75em;}
 h2 {font-size: 1.65em;}
 h3 {font-size: 1.3em;}
 h4 {font-size: 1.2em;}
 h5 {font-size: 1em;}
 h6 {font-size: 0.8em;}
 h1, h2, h3, h4, h5, h6 {margin:0.8em 0 0.3em 0; font-family:arial, helvetica, sans-serif; }
 img {margin-right:9px; border:1px; padding:0; } 
 /* End basic page rules */
 
 /* Next: basic howw-to-handle links information */
 a   {text-decoration:none; margin:25px; line-height:1.5em;}
 a:link  {color:#fff;}
 a:visited {color: #fff;}
 a:hover  {color:#fff; text-decoration:underline;}
 a:active {color: #fff;}
 /* End how-to-handle information links */
 
 #header {
 margin: 0px auto;
 width:490px;
 height:105px;
 max-height:105px;
 max-width:490px;
 } /* This above is the banner/navigation links area */
 
 #menu {
 position:relative; top:-5px;
 margin: 0 auto;
 width:500px;
 height:35px;
 max-width:500px;
 max-height:35px;
 font-size:normal;
 color:#fff;
 background-color:rgb(155,0,0);
 }
 
 #content {position:relative; top:-5px; margin:0 auto; padding:30px 25px 0 25px; width:450px; height:800px; background-color:#E2E5E8;}
 </style>
 </head>
 <body>
 <div id="header"><!-- Next: I used YOUR image for this part, using an absolute path. Okay to leave this way -->
 <img src="http://merlins-realm.co.uk/images/header_body.gif" alt="" style="width:500px; height:105px; padding:0; border:0; margin:0;" />
 <div id="menu"><!-- This is the MENU/links area, same color as above, nested up to "header" div -->
 <span style="margin:0.5em"><a href="#nogo">Home</a><a href="#nogo">Downloads</a><a href="#nogo">Links</a><a href="#nogo">About</a><a href="#nogo">Contact</a></span></div>
 
 <div id="content">
 <h3>Here is your content area</h3>
 <p>In here you write about whatever you want. This is the main content area. You can say whatever you want. This is the body of this page.</p>
 <img src="images/this_picture.gif" width="30" height="35" style="float:left; border:1px solid #000;" />
 <p>In here you write about whatever you want. This is the main content area. You can say whatever you want. This is the body of this page. In here you write about whatever you want. This is the main content area. You can say whatever you want. This
 is the body of this page. In here you write about whatever you want. This is the main content area. You can say whatever you want. This is the body of this page.</p>
 </div>
 </div>
 </body>
 </html>
 [/CODE]

Now, it LOOKS bigger than what you had, but that is just text instead of images. I re-used your banner-image, -it looks as if this you want to keep. I was going to slice it apart to retain the "Merlins Realm" with reflection, but it probably would never match-up to a background-image 'fill' of that hash-design... So, I just used the whole image. It is not so large that it's unuseable.

I DID re-do the navigation links though in *css, -made them 'non-images'. They will work better that way, and are now visible in text-readers.

This might take you some time to figure out what is going on here, but this still highly-tweakable version of this page is a lot smaller in KB than using all those images...

Let me know if you encounter any problems.

-Joel

@ray326Apr 09.2006 — #Just to stir the pot a bit, here's the body HTML I'd start with. An the background of #header would be a vertical slice of the background you've got (attached), repeated x.

[code=html]
 <div id="header">
 <h1>Merlin's Realm</h1>
 <ul id="nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">Downloads</a></li>
 <li><a href="#">Links</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
 <ul>
 </div>
 [/code]

[upl-file uuid=8636cc48-5c4e-4bbb-9b9d-d64c0c86cbca size=35kB]merlinbg.jpg[/upl-file]

@Davey_MauthorApr 09.2006 — #thanks to u both

i guess using large padding at the top to place the links where i wanted them wasn't such a wise idea lol

i had considered slicing the banner but didn't know it would make any difference - thnks

@WebJoelApr 09.2006 — #Just to stir the pot a bit, here's the body HTML I'd start with. An the background of #header would be a vertical slice of the background you've got (attached), repeated x.

....[/QUOTE]

Thanks Ray, -you're the best! :-)

I tried doing that image-slice thing last night and got it messed-up and it looked like crap, so I just went with just using the whole thing (like I said, wht I offered was highly tweakable).

And the <LI> thing, -don't know where I got messed up there but mine kept wanting to display 'vertically' so I just went with anchors (horiz.)... I spent an intensive hour playing around with this yesterday afternoon and must have started becoming dismayed... this morning I worked on it again briefly, offline, and 'got it right' first try! Never under-estimate the recouperative powers of taking a break from doing these things...

-J

@ray326Apr 10.2006 — #I have to admit that getting the content right typically makes the presentation a bit more of a job but the result is worthwhile.

@Davey_MauthorApr 16.2006 — #thanks for the comments and advice to both of u, i managed to figure out a way to display it exactly how i wanted, tho i'm not sure i used the correct method...

i simply sliced the main part of the banner, and the part where the nav is into 2 seperate images then used css to position the text how i wanted... i think i've got the layout set out ok now...

thnx again

Also in #CSS _↴

Some issues with a layout...[RESOLVED] IE white space issue Css Ie Hack

Success!

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

Tweet This

how would i go about…

9 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

how would i go about…

9 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #CSS _↴