14 replies [Last post]
Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 7 years 28 weeks ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

Well, I searched, poked, prodded, read, invented, and guessed wildly to no avail. So here I am.

I'd like to float an image (crest.gif) over top of two divs... my header and the main nav. I just can't seem to figure out how to do this. I think that the crest image is hiding behind everything, but I can't seem to pull it out front. I'm just not sure where to put the related chunk of code, and I'm not even sure if the info in that chunk of code is anything close to correct. Actually, I know it's not (I ended up removing the "float" reference because I was baffled as to what to put in it).

Any help would be greatly appreciated!

http://www.digitalpawprint.com/caseytest/caseytest.html

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Try this on #crest

Try this on #crest instead:

position: absolute; top: -135px; left: 280px; /* roughly */ z-index: 10;

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 7 years 28 weeks ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

success and questions

That worked ~ thanks Tyssen. Just a few questions to make sure that I understand it correctly...

1) Should I still have "margin" and "padding" references in there, or do I need them?

2) What does the z-index do?

3) Does it matter where in my style sheet I list the #crest div? Or is it just for the sake of good organization (which I prefer) that divs and such are listed together with other related items?

Thank you so much.

Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 7 years 28 weeks ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

That worked in Firefox,

That worked in Firefox, Safari, and Opera... but the crest didn't show up in IE. It's doing something weird instead ~ easier to see it than to try to explain.

1) Is there a hack or something that I need to make it work in IE?

2) Should I still have "margin" and "padding" references in there, or do I need them?

3) What does the z-index do?

4) Does it matter where in my style sheet I list the #crest div? Or is it just for the sake of good organization (which I prefer) that divs and such are listed together with other related items?

Thank you so much.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Sorry, I forgot to mention

Sorry, I forgot to mention yesterday that the height should be 160px, not 100%.

Also, the positioning of the div in the HTML is causing problems because the positioning context set on #innercontainer. What I'd do is move #crest to the very end of your page, just before the last closing so that it's parent is #globalcontent. Give position: relative to #globalcontent to establish a new positioning context (ie #crest takes its coordinates from the top left of #globalcontent instead of the window) and then amend #crest to this:

#crest { width: 160px; height: 160px; background: url(./images/crest.gif) no-repeat; position: absolute; top: 15px; left: 289px; z-index: 10; }

The z-index is just to make sure the image sits above everything else.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 7 years 28 weeks ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

Just one glitch...

I get it!

And it worked. The only strange thing that's happening now is that in IE my main nav seems to have disappeared. It's there in other browsers though. How could this be?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

IE's not liking the

IE's not liking the position: absolute on the list items. Might I suggest looking at another navbar/image replacement technique.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 7 years 28 weeks ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

I'm working on your

I'm working on your tutorial, but am so far having trouble getting as far as "Example 1"... I've just got regular links showing, no image in sight yet. It's getting a bit confusing for me. I've commented out my old CSS code for the rollovers, as I'm hesitent to delete them just yet... at least until I get this working. I can't tell where I've gone wrong, as I thought I'd followed your instructions to the letter. I know my positioning might be off, but I don't think I should still be seeing the plain links. I'll keep working on it, but if you happen to see something obvious that I've got wrong in the meantime, I'd be happy to hear about it!

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

The main problem is that

The main problem is that you're referencing .homemenu li (for example) when it's actually li.homemenu.

So, try this:

.nav { list-style: none; } .nav li { float: left; } .nav li, .nav li em { height: 25px; } .homemenu, .homemenu em { width: 32px; } .servicesmenu, .servicesmenu em { width: 47px; } .aboutmenu, .aboutmenu em { width: 33px; } .casesmenu, .casesmenu em { width: 33px; } .contactmenu, .contactmenu em { width: 41px; } .linksmenu, .linksmenu em { width: 28px; } and then you're going to need to adjust all your widths and left values.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 7 years 28 weeks ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

Okay, I think I'm getting

Okay, I think I'm getting it. What you just explained brought everything into a more logical focus for me. I did what you suggested, played with it a bit more, and now am facing four obstacles:

1) The last button (links) doesn't visibly show up. I know it's there, because the "hand" is hovering over an invisible button... but it's hiding for some reason. Can't figure out why as the code looks the same as all of the other buttons.

2) The generic links haven't gone away. Is this because "text-indent: -9999px" should be going somewhere?

3) I've got the whole "nav IR" ul inside of a div called "mainnav" so that I can control where the nav sits on the page (it's supposed to be up in the beige area on either side of the crest). But strangely enough, when I put a red border around my "mainnav" div, I discover that the ul is not inside of it... it's sitting below it. So I haven't yet been able to bring the nav up (vertically) to where I want it. Is it something obvious I'm missing?

4) The buttons don't yet show in IE. Only the old generic links.

I'm definitely not going to attempt the dropdowns until I get this all working perfectly! I certainly am amazed (and intrigued) by how much there is to CSS.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

1. it should be .linksmenu

1. it should be .linksmenu em (you've left out the dot).
2. You don't need text-indent (the idea behind this method is that the text is viewable onscreen for those with images off). The problem is that you've given each link a width only equal to the width of the actual text on the image. The width should encompass the width of the text and the spaces between each item too, thus covering up everything behind. So for example, for the home link, the left position would be 0 because you want to cover everything from the beginning and its width would be greater to cover everything up to the next link.
3. You could either reduce the height of #header and remove the top margin from #innercontainer, but it would probably be better if the nav was actually in #header. You could probably also do away with #mainnav and just apply the positioning to .nav itself.
4. We'll worry about IE later Wink

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 7 years 28 weeks ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

Okay, I seem to have got

Okay, I seem to have got that working.

Is it okay the way I did it? Since there is a space between the third and fourth menu item (for the crest in the middle), I had to get a bit creative with my positioning.

It looks pretty screwed up in IE, but I'll take your advice and ignore that for now. Smile

In the meantime I'll start tackling the next step of your tutorial ~ the dropdown menus.

Lambinastormtro...
Lambinastormtroopersuit's picture
Offline
Enthusiast
Canada
Last seen: 7 years 28 weeks ago
Canada
Timezone: GMT-4
Joined: 2006-06-02
Posts: 279
Points: 86

*sigh* I followed the

*sigh*

I followed the drop-down instructions to the letter, up to the point where you start to prettify them. I can't figure out why my submenu words are outside of the submenu box. Aren't they supposed to be lined up nicely inside of the submenu box? Sad

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Works OK in FF & Opera but

Works OK in FF & Opera but it's still stuffed in IE but unfortunately, I don't have any more time to look at it right now.







Philip K. Casey: Criminal Defence Barrister and Solicitor



/* The unique combination of images, colours, sizes, typography, and positioning ("the design")
is copyright 2006 Digital Paw Print and may not be reproduced. */
/* Last updated 11 July 2006 */

html
{
min-width: 740px;
}

/* Helpers and base rules */

img {
border: 0;
}

img.counter
{
display: inline;
margin-left: 5px;
}

/* Primary layout divisions start here */
body
{
text-align: center;
margin: 0;
padding: 0;
border: 0;
background: url(http://www.digitalpawprint.com/caseytest/images/bkgd_stripe.gif) repeat;
background-color: #330000;
color: #000;
font: small/18px "Franklin Gothic light", Verdana, Helvetica, sans-serif;
behaviour: url(hover.htc);
}

#wrapper
{
margin: 0 auto;
padding: 1px 0 0 0;
border: 0;
width: 740px;
background: url(http://www.digitalpawprint.com/caseytest/images/wrapper.gif) top center repeat-y;
background-color: #fff;
color: #000;
}

#globalcontent
{
margin: 0 auto;
padding: 0;
border: 0;
width: 740px;
background: url(http://www.digitalpawprint.com/caseytest/images/bkgd_stripe.gif) repeat;
background-color: #fff;
color: #000;
position: relative; z-index: 1;
}
/* Primary layout divisions end here */

/* header starts here */
#header
{
height: 175px;
background-position: center;
background-color: #fff;
position: relative;
color: #000;
margin: 0 auto;
padding: 0;
border: 0;
}

#header h1
{
margin: 0 auto;
padding: 0;
text-indent: -9999px;
height: 175px;
background: url(http://www.digitalpawprint.com/caseytest/images/casey_law_title3.gif) no-repeat;
background-position: center;
border: 0;
}

#crest
{
width: 160px;
height: 160px;
background: url(http://www.digitalpawprint.com/caseytest/images/crest.gif) no-repeat;
position: absolute;
top: 15px;
left: 289px;
z-index: 10;
}

/* Main nav function starts here */
ul.IR li
{
position: relative;
font-size: 0.9em;
}

.IR em
{
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

/* For IE5.x mac only */
* html>body .IR
{
position: static;
font-size: 10px;
}

* html>body .IR em { position: static; }

.nav
{
margin: -25px 0 0 23px;
padding: 0;
list-style: none;
}

.nav li { float: left; }

.nav li, .nav li em { height: 25px; }
.homemenu em, .servicesmenu em, .aboutmenu em, .casesmenu em, .contactmenu em, .linksmenu em
{
background: url(http://www.digitalpawprint.com/caseytest/images/main_nav2.gif) no-repeat;
cursor: pointer;
}

.homemenu, .homemenu em { width: 100px; }
.servicesmenu, .servicesmenu em { width: 120px; }
.aboutmenu, .aboutmenu em { width: 73px; }
.casesmenu, .casesmenu em { width: 84px; }
.contactmenu, .contactmenu em { width: 87px; }
.linksmenu, .linksmenu em { width: 71px; }

.homemenu { left: 0; }
.homemenu em { background-position: 0px 0; }
.homemenu:hover em, .homemenu:active em { background-position: 0px -25px; }
.servicesmenu { left: 0; }
.servicesmenu em { background-position: -100px 0; }
.servicesmenu:hover em, .servicesmenu:active em { background-position: -100px -25px; }
.aboutmenu { left: 0; }
.aboutmenu em { background-position: -222px 0; }
.aboutmenu:hover em, .aboutmenu:active em { background-position: -222px -25px; }
.casesmenu { left: 134px; }
.casesmenu em { background-position: -428px 0; }
.casesmenu:hover em, .casesmenu:active em { background-position: -428px -25px; }
.contactmenu { left: 134px; }
.contactmenu em { background-position: -513px 0; }
.contactmenu:hover em, .contactmenu:active em { background-position: -513px -25px; }
.linksmenu { left: 134px; }
.linksmenu em { background-position: -600px 0; }
.linksmenu:hover em, .linksmenu:active em { background-position: -600px -25px; }
/* main nav function ends here */

/* sub nav function starts here */
.nav a { display: block; }

/* The Holly Hack */
* html .nav a { height: 1%; }

.nav li ul
{
position: absolute;
z-index: 100;
top: 24px;
left: -999em;
width: 8em;
margin-left: 0; padding-left: 0;
list-style: none;
border: 1px solid #ffcc00;
background: #FFF;
}

.nav li:hover ul { left: auto; }
.nav .homemenu:hover ul { left: 60px; }
.nav .servicesmenu:hover ul { left: 36px; }
.nav .casesmenu:hover ul { left: 10px; }

.nav li li {
height: auto;
font-size: 110%;
border-bottom: 1px solid #ffcc00;
}

.nav li ul a {
text-align: left;
width: 6.8em;
padding: 0.25em;
color: #FF6600;
background: #FFFFCC;
}
.nav li ul a:hover {
color: #CC0000;
background: #FFCC00;
}
/* sub nav function ends here */

/* content starts here */
#innercontainer
{
width: 720px;
position: relative;
margin: 10px auto 0;
padding: 0;
background: url(http://www.digitalpawprint.com/caseytest/images/wrapper.gif) repeat-y;
background-position: center;
color: #000;
border: 0;
background-color: #fff;
}

#content
{
margin-left: 40px;
margin-right: 40px;
padding: 25px;
text-align: left;
height: 100%;
background-color: #fff;
color: #000;
border: 2px solid #ccc;
}
/* content ends here */

/* footer starts here */
#footer
{
background: url(http://www.digitalpawprint.com/caseytest/images/footer.gif) no-repeat;
position: relative;
height: 125px;
width: 740px;
margin: 0 auto;
padding: 0;
border: 1px solid green;
}

#footer ul
{
margin: -21px 0 auto;
padding: 0;
border: 1px dotted orange;
}

#footer li.reg
{
list-style: none;
margin: 0 auto;
padding: 0 15px 0 15px;
display: inline;
}

#footer li.left
{
list-style: none;
margin: 0 auto;
padding: 0 75px 0 15px;
display: inline;
}

#footer li.right
{
list-style: none;
margin: 0 auto;
padding: 0 15px 0 75px;
display: inline;
}

#footer #return
{
width: 100px;
height: 50px;
margin: 0 auto;
padding: 10px 0 0 0;
border: 1px red dotted;
}

#footer #return a
{
display: block;
width: 100px;
height: 50px;
margin: 0 auto;
background: url(http://www.digitalpawprint.com/caseytest/images/returntotop.gif) no-repeat;
text-indent: -9999px;
text-decoration: none;
}

#footer #return a:hover
{
margin: 0 auto;
width: 100px;
background: url(http://www.digitalpawprint.com/caseytest/images/returntotop.gif) 0 -50px no-repeat;
}

p.copyright
{
margin: 12px 0 auto;
padding: 0;
border: 1px solid blue;
}

p.credit
{
margin: 0 auto;
padding: 0;
border: 1px solid red;
font: small/8px "Franklin Gothic Condensed Bold", Verdana, Helvetica, sans-serif;
}
/* footer ends here */


  • Services

    • General

    • Fees


  • About

    • Phil Casey

    • Testimonials


  • Cases
    • General

    • Case 1

    • Case 2

    • Case 3

    • Contact

    • Links






    • Mission

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse nonummy elit
      posuere mi. Maecenas aliquet quam sit amet sapien. Quisque vulputate porttitor magna.
      Sed non augue id massa lobortis bibendum. Duis placerat sapien at felis. Suspendisse
      potenti. Suspendisse vehicula quam vitae ligula. Aliquam lorem. Aliquam consectetuer.
      Fusce quis mauris. Duis lacinia pulvinar erat. Nulla in ligula ac metus facilisis vehicula.


      Praesent feugiat ligula eu nunc. Praesent dapibus lectus tristique purus. Nulla nunc
      est, pretium et, venenatis in, lobortis in, diam. Curabitur rhoncus. Cras sodales leo quis
      arcu. Sed accumsan, leo et aliquam vestibulum, felis felis porta massa, vel pretium erat
      nulla vel pede. Ut ut metus. Duis eros pede, malesuada vitae, hendrerit eu, suscipit id,
      velit. Integer viverra, metus quis ornare vehicula, lectus est suscipit felis, et rhoncus
      purus arcu vitae metus. Integer sed mauris. Proin facilisis ullamcorper ligula. Mauris non
      nisi ut nunc suscipit cursus. Aliquam accumsan, ante sed pretium viverra, mi nibh accumsan
      dui, sed tempus purus sem eget tellus. Sed metus. Integer luctus. Donec laoreet pulvinar
      dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
      Curae;


      Morbi erat sapien, sagittis scelerisque, euismod nec, pulvinar nec, orci. In hac
      habitasse platea dictumst. Vivamus ornare cursus eros. Nam aliquet, odio eu ullamcorper
      mollis, dui nibh suscipit dui, sed semper justo nisl et nibh. Vivamus dolor. Praesent leo.
      Integer orci nibh, porta tempus, porta vitae, tincidunt et, eros. Ut vestibulum. Sed sit
      amet turpis. Proin pulvinar diam sit amet mauris. Pellentesque tincidunt dignissim pede.
      Fusce luctus, ipsum egestas dignissim egestas, magna nisi condimentum sem, sed convallis
      metus lectus quis tellus. Vivamus est mi, cursus id, tincidunt congue, faucibus non, erat.
      Etiam magna nunc, sollicitudin sit amet, ornare nec, malesuada eu, nisi. Etiam venenatis
      risus adipiscing mi. Sed euismod tortor eu lorem. Ut dapibus, quam id vestibulum dignissim,
      ipsum lectus faucibus neque, sed condimentum quam ligula eu ante.


      Donec id quam et dui aliquam varius. Nam luctus neque non enim. In hac habitasse platea
      dictumst. Sed tempus placerat velit. In pulvinar arcu. Ut a justo sit amet dui pellentesque
      tincidunt. Integer scelerisque bibendum enim. Mauris vel lorem quis erat rutrum molestie.
      Phasellus euismod odio ut orci. Pellentesque condimentum massa at orci. Morbi dui tortor,
      porttitor vel, vestibulum in, auctor nec, lorem. Nam et dolor. Sed vel felis et dolor
      consequat rhoncus. Etiam mauris odio, cursus eu, mollis vel, venenatis id, turpis. Nam ac
      quam. Sed placerat turpis a nisl. Etiam pretium sollicitudin ante. Duis ac est. Praesent
      sit amet massa eu erat scelerisque euismod. Donec dui tortor, sodales id, iaculis a, semper
      at, est.


      Aliquam erat volutpat. Maecenas congue, nulla et adipiscing porttitor, ligula arcu
      porttitor eros, sed gravida lacus leo non nulla. Donec rutrum porta mi. Mauris nec elit
      eu mauris pharetra blandit. Quisque lorem dolor, laoreet non, vehicula nec, facilisis eget,
      metus. Suspendisse potenti. Vivamus purus lacus, lobortis nec, imperdiet pharetra,
      hendrerit non, sapien. Cum sociis natoque penatibus et magnis dis parturient montes,
      nascetur ridiculus mus. Etiam vitae ipsum. Duis posuere euismod sem. Nunc tincidunt
      mauris id dui. Praesent sagittis risus non dui. Vestibulum consectetuer molestie lorem.






    • Home

    • Services

    • About

    • Cases

    • Contact

    • Links


    • Site designed and developed by Digital Paw Print



      How to get help
      Post a link. If you can't post a link, jsFiddle it.
      My blog | My older articles | CSS Reference

      Lambinastormtro...
      Lambinastormtroopersuit's picture
      Offline
      Enthusiast
      Canada
      Last seen: 7 years 28 weeks ago
      Canada
      Timezone: GMT-4
      Joined: 2006-06-02
      Posts: 279
      Points: 86

      You've been really generous

      You've been really generous with your time and help ~ thank you so much. I'll keep working at it myself, and will start a new post with others if/when I get stuck. I really appreciate all of your efforts! Catch you later.