?

Log in

No account? Create an account

Previous Entry | Next Entry

Need help with Image Map As Header / SOLVED

  • Aug. 17th, 2009 at 8:42 AM

Hi,

I really could use some help. I use the Expressive Subway blue and tried to make an Image Map as Header following this tutorial. Well, it wont work and I do not know what I did wrong, I had to change some things to adjust it to my journal, maybe I did somethng wrong there. Thankfully I tweak all new layouts in my test journal at first and only apply them to the main journal when everything works fine.

I would be greatful for some help.




Custom CSS:

#header-inner {

    background-image: url("http://i281.photobucket.com/albums/kk221/Lintalome/LJ%20Layout/vintage_header_8_Lin.jpg");

            height: 280px;

}

 

 

#header {

    background-image: none;

}

 

 

#header-name { display:none; }

#header-description { display: none; }

.nav { display: none; }

 

 

/* Set the size of the definition list dl and add the background image. */

#imap {

display:block;

background:url("http://i281.photobucket.com/albums/kk221/Lintalome/LJ%20Layout/vintage_header_8_Lin.jpg") no-repeat;

position:relative;

}

 

 

/* Place the dd's in the correct absolute position. */

#imap dd {

position:absolute;

padding:0;

margin:0;

}

#imap #picusername {

left:0px;

top:150px;

z-index:20;

}

#imap #picrecent {

left:0px;

top:0px;

z-index:20;

}

#imap #picarchive {

left:189px;

top:0px;

z-index:20;

}

#imap #picfriends {

left:377 px;

top:0px;

z-index:20;

}

#imap #picuserinfo {

left:565 px;

top:0px;

z-index:20;

}

#imap #picmemories {

left:753 px;

top:0px;

z-index:20;

}

 

 

/* Style the dd and a links physical size and the background for the hover. */

#imap a#username {

display:block;

width:940px;

height:108px;

background:transparent -100px -100px no-repeat;

text-decoration:none;

z-index:20;

}

#imap a#recententries {

display:block;

width:188px;

height:142px;

background:transparent -100px -100px no-repeat;

text-decoration:none;

z-index:20;

}

#imap a#archive {

display:block;

width:188px;

height:142px;

background:transparent -100px -100px no-repeat;

text-decoration:none;

z-index:20;

}

#imap a#friends {

display:block;

width:188px;

height:142px;

background:transparent url -100px -100px no-repeat;

text-decoration:none;

z-index:20;

}

#imap a#userinfo {

display:block;

width:188px;

height:142px;

background:transparent -100px -100px no-repeat;

text-decoration:none;

z-index:20;

}

#imap a#memories {

display:block;

width:188px;

height:142px;

background:transparent -100px -100px no-repeat;

text-decoration:none;

z-index:20;

}

 

 

/* style the span text so that it is not displayed */

#imap a span, #imap a:visited span {

display:none;

}

 

 

#container-inner {

    border: 0;

}

 

 

body {

background-image: url("http://i281.photobucket.com/albums/kk221/Lintalome/LJ%20Layout/back_3.jpg");

background-repeat: repeat;

background-attachment: fixed ;

}

 

.asset-footer {

margin-bottom : 30px;

border-bottom : 1px solid #999;

}

 

.powered-widget {

display: none;

}

 

.designed-widget {

    display: none;

}

 

#header-content-inner {

    margin: 180px 15px 117px 10px;

}

 

 

#container-inner {

    border: 0;

}






Layout Specific Layer:

layerinfo "type" = "theme";

layerinfo "Vintage" = "";

set base_theme = "subway-blue";

function Page::lay_print_header_links() {

# Menu start

"""<div id="message-window" class="hidden"></div>\n""";

container_open("header");

container_open("header-content");

 

"""

<dl id="imap">

<dd id="picusername">

<a id="baralin" title="baralin" href="http://baralin.livejournal.com"><span>baralin</span></a>

</dd>

<dd id="picrecent">

<a id="recententries" title="Recent Entries" href="http://baralin.livejournal.com/"><span>Recent Entries</span></a>

</dd>

<dd id="picuserinfo">

<a id="userinfo" title="Userinfo" href="http://baralin.livejournal.com/profile"><span>Userinfo</span></a>

</dd>

<dd id="picmemories">

<a id="memories" title="Memories" href="http://www.livejournal.com/tools/memories.bml?user= baralin"><span>Memories</span></a>

</dd>

<dd id="picarchive">

<a id="archive" title="Archive" href="http://baralin.livejournal.com/calendar"><span>Archive</span></a>

</dd>

<dd id="picfriends">

<a id="friends" title="Friends" href="http://baralin.livejournal.com/friends"><span>Friends</span></a>

</dd>

</dl>

""" ;

 

"""<div id="header-photo">\n<div id="header-photo-inner"></div>\n</div>\n""";

"""<div id="header-text"><ul class="nav">\n""" ;

 

# Standard Journal Pages (Recent, Archive, Friends, Userinfo)

foreach var string v ($.views_order) {

var string url = $.view_url{$v};

var string text = lang_viewname($v);

var string class = "item";

if($v == $.view) {

$class = $class + " current";

}

if($v == $.views_order[0]) {

$class = $class + " first";

}

 

$class = " class=\"$class\"";

 

}

 

var Link memories_url = $.journal->get_link("memories");

 

# Memories

if($memories_url.url != "") {

println """<li class="item"><a href="$memories_url.url" title="$*text_view_memories">$*text_view_memories</a></li>""";

}

 

# Menu end

"""

</ul>

<div id="header-name">""";

var string base_url = $.journal->base_url();

var string friends_url = $.view_url{"friends"};

if ($this isa FriendsPage) {

"""<a href="$friends_url"><span class="title">""" + $this->view_title() + """</span></a>""";

} else {

"""<a href="$base_url"><span class="title">$.global_title</span></a>""";

}

"""

</div>""";

 

if(not $this isa FriendsPage) {

"""

<div id="header-description"><span class="subtitle">$.global_subtitle</span></div>""";

}

 

"""

</div>

</div><span id="header-content-decor" class="decor"><b></b><u></u><s></s><i></i></span></div><!-- End Header Content -->

</div><span id="header-decor" class="decor"><b></b><u></u><s></s><i></i></span></div><!-- End Header -->""";

}



Comments

( 9 comments — Leave a comment )
av8rmike
Aug. 17th, 2009 12:51 pm (UTC)
Did you set your theme layer to be the active one for your style?
baralin
Aug. 17th, 2009 01:49 pm (UTC)
Ok, I got 'something' working now. I did not activate the theme layer, as I did not know I have to do this. It is still not working the way it should, only 'Friends' and 'Archive' work and not at the place where they should be klickable. I will have to check the measurements again. Still, I am only able to click two things of six.
av8rmike
Aug. 17th, 2009 02:34 pm (UTC)
Yeah, unfortunately, the directions in that linked tutorial for how to change the theme layer to be the active one are pretty out of date. Since I didn't make the post, I can't edit it to reflect the new instructions. Looks like you got that part working, although this line is wrong in the theme layer:
layerinfo "Vintage" = "";

Maybe you mean this:
layerinfo name = "Vintage";

The reason your clicking areas aren't in the right place is because of two things. First, you need to remove this rule, which is offsetting the linked areas:
#header-content-inner {
    margin: 180px 15px 117px 10px;
}
Second, your "top" and "left" syntax isn't right: You need to take out the spaces between the numbers and the "px", e.g. left: 565 px;.
baralin
Aug. 17th, 2009 03:16 pm (UTC)
Most of it works now, thanks a lot. Only one part is not working and I cannot put my finger on what can be the reason as I barely know a thing about CSS.

From Recent Entries to Memories all works fine, only the klick on the 'Username' part does not work. The custom CSS should be ok now, no spaces and the measurements for top, left, width and height should work as well.

Here the parts I changed in the CSS concerning the username part:

#imap #picusername {
left:84px;
top:138px;
z-index:20;
}


#imap a#username {
display:block;
width:710px;
height:88px;
background:transparent -100px -100px no-repeat;
text-decoration:none;
z-index:20;


The only thing I can guess is a mistake in the theme layer, maybe here:

<dl id="imap">
<dd id="picusername">
<a id="baralin" title="baralin" href="http://baralin.livejournal.com"><span>baralin</span></a>
</dd>








I did not change the theme layer save for the thing with the name you mentioned. Do I have to replace 'username' here as well?

In the tutorial it sad I shoul replace all 'username' with my username, but I was not sure about this one. Is it enough to click save & compile after the change?

Sorry if I am bothering you overly much.


Edited at 2009-08-17 03:21 pm (UTC)
av8rmike
Aug. 17th, 2009 04:24 pm (UTC)
I don't understand; what part of it isn't working? All five of the icons appear to be linking where they're supposed to.
baralin
Aug. 17th, 2009 04:43 pm (UTC)
Yes they do. I thought it would also include a clickable link for the part in the red box of this picture. I do not know if this is possible at all.
If it is not possible, then it is ok like it is and the problem is solved and I can transfer it from my test jurnal to my main journal. Again, Thanks a lot for your help.
av8rmike
Aug. 17th, 2009 04:57 pm (UTC)
Your CSS ID names don't match now -- either change all the instances of "username" to "baralin" or leave them all saying "username" -- that's why the title isn't showing up as a clickable link. You have this in the CSS:
#imap #picusername { ...
#imap a#username { ...


But this is what's in the page source:
<dl id="imap">
<dd id="picbaralin">
<a id="baralin" title="Baralin" ...>


See how what's in id="..." doesn't match what's in the CSS?
baralin
Aug. 17th, 2009 05:21 pm (UTC)
Everything works now. I guessed the mistake was somewhere with this 'username' stuff, this was where the tutorial was most confusing for me as it said I should replace all 'username' in the theme layer part, but it did not say anything about replacing it in the CSS, at least I could not find it. Well, it is done now and I leaned something new and will certainly not forget it again.

I will set the post to Solved now! Thanks for your patience.
av8rmike
Aug. 17th, 2009 05:32 pm (UTC)
You're welcome! Glad to hear you got it all worked out.
( 9 comments — Leave a comment )

Latest Month

March 2016
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  

S2 Help Communities

Tags

Powered by LiveJournal.com
Designed by chasethestars