InsaneJournal

Tweak says, "Drink some water."

Rose Luehrman (beadedbracelet) wrote in rp_tutorials,
@ 2013-02-10 17:58:00

Entry tags:

question: html/css

Help with a gif?
Does anyone know how to make overlap a gif and a set of links? I'm not sure if there's a term for it, but I see it all the time. It's a gif, and on top of it there's usually a box where people link to their character's bio, threads, customs, etc? Any idea how to do this? Here's an example.

(Read comments) - (Post a new comment)

nympholepsy
2013-02-11 01:25 am UTC (link)

looks like something in your journal's overrides is affecting your table html. also i don't think your tags were nested right, which may have made things go wonky - try this and see how it looks?

(Reply to this) (Parent) (Thread)

beadedbracelet
2013-02-11 01:32 am UTC (link)

I edited the code, and it's still doing the same thing as before. It's gotta be the journal coding, in that case. I have no clue where, though. This is the layout I'm using.

FRIENDS_OPT_ITEMS=>10

GLOBAL_HEAD<=
<title>Love Like Woe</title>
<link rel="shortcut icon" href="http://i.imgur.com/clETsh9.png">
<link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Over+the+Rainbow' rel='stylesheet' type='text/css'>
<style>
 
 
/* credit: ~coding @ insanejournal.com; come to us for questions */
 
/* background colour */
body { background: url(http://i.imgur.com/RNa38lj.jpg) #8B1A1A; }
 
/* entry and navigation background colour */
.shadowed, .ljshadowed {background: #ffffff;}
td {background-color:#ffffff;}
 
/* gets rid of top left journal name */
table table tr.caption td.caption { display:none; visibility: hidden; }
 
/* link colour */
a { text-decoration: none; color: 548aac; vlink: 548aac; alink: #000000; }
 
/* font throughout the layout */
td { font-size: 12px; line-height: 12px; font-family: verdana; color: #000000; }
 
/* subject lines */
p table table td.caption { font-family: 'Petit Formal Script', cursive; font-size: 32px; line-height: 14px; text-align: left; letter-spacing: -1px; text-transform: none; font-weight: none; color: 548aac; text-shadow: #000000 1px 1px 1px; }
 
/* top right links, mood */
.index { font-family: verdana; font-size: 8px; line-height: 8px; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; color: 548aac; }
 
/* name title */
.shadowed td div { font-family: 'Over the Rainbow', cursive; font-size: 40px; line-height: 20px; letter-spacing: -1.5px; text-transform: none; font-weight: bold; color: #ffffff; background-color: #548aac; text-shadow: #000000 2px 2px 2px; }
 
/* comments */
.comments { font-family: verdana; font-size: 10px; line-height:3px; text-transform: uppercase; text-align: right; padding: 0px; }
 
/* top banner main navigation links */
table table table table td.meta { font-size: 10px; line-height: 10px; letter-spacing: 1px; font-family: calibri; text-transform: uppercase; }
 
/* borders */
table { border: 0px solid 548aac; }
table td { border-top: 3px solid 548aac; }
table table, table table td { border: 0; }
 
/* icon coding */
.shadowed img{ background: url() #0055a5; padding: 0px!important; border-top: 1px solid 548aac; border-left: 1px solid 548aac; border-right: 1px solid 548aac; border-bottom: 1px solid 548aac;}
 
/* friends page link colour */
.entrybox a.index font { color: 548aac; }
</style>
 
<=GLOBAL_HEAD

LASTN_OPT_ITEMS=>5

(Reply to this) (Parent) (Thread)

nympholepsy
2013-02-11 01:43 am UTC (link)

found it.

enter this into your overrides:

FRIENDS_OPT_ITEMS=>10

GLOBAL_HEAD<=
<title>Love Like Woe</title>
<link rel="shortcut icon" href="http://i.imgur.com/clETsh9.png">
<link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Over+the+Rainbow' rel='stylesheet' type='text/css'>
<style>
 
 
/* credit: ~coding @ insanejournal.com; come to us for questions */
 
/* background colour */
body { background: url(http://i.imgur.com/RNa38lj.jpg) #8B1A1A; }
 
/* entry and navigation background colour */
.shadowed, .ljshadowed {background: #ffffff;}
 
/* gets rid of top left journal name */
table table tr.caption td.caption { display:none; visibility: hidden; }
 
/* link colour */
a { text-decoration: none; color: 548aac; vlink: 548aac; alink: #000000; }
 
/* font throughout the layout */
td { font-size: 12px; line-height: 12px; font-family: verdana; color: #000000; }
 
/* subject lines */
p table table td.caption { font-family: 'Petit Formal Script', cursive; font-size: 32px; line-height: 14px; text-align: left; letter-spacing: -1px; text-transform: none; font-weight: none; color: 548aac; text-shadow: #000000 1px 1px 1px; }
 
/* top right links, mood */
.index { font-family: verdana; font-size: 8px; line-height: 8px; letter-spacing: 1px; text-transform: uppercase; font-weight: bold; color: 548aac; }
 
/* name title */
.shadowed td div { font-family: 'Over the Rainbow', cursive; font-size: 40px; line-height: 20px; letter-spacing: -1.5px; text-transform: none; font-weight: bold; color: #ffffff; background-color: #548aac; text-shadow: #000000 2px 2px 2px; }
 
/* comments */
.comments { font-family: verdana; font-size: 10px; line-height:3px; text-transform: uppercase; text-align: right; padding: 0px; }
 
/* top banner main navigation links */
table table table table td.meta { font-size: 10px; line-height: 10px; letter-spacing: 1px; font-family: calibri; text-transform: uppercase; }
 
/* borders */
table { border: 0px solid 548aac; }
table td { border-top: 3px solid 548aac; }
table table, table table td { border: 0; }
 
/* icon coding */
.shadowed img{ background: url() #0055a5; padding: 0px!important; border-top: 1px solid 548aac; border-left: 1px solid 548aac; border-right: 1px solid 548aac; border-bottom: 1px solid 548aac;}
 
/* friends page link colour */
.entrybox a.index font { color: 548aac; }
</style>
 
<=GLOBAL_HEAD

LASTN_OPT_ITEMS=>5

then, under look and feel, scroll down to theme, select custom colours, and delete all fields except page background, weak accent, and stronger accent - set those three fields to #ffffff. your layout should stay the same and the gif should be visible.

(Reply to this) (Parent) (Thread)

	beadedbracelet 2013-02-11 01:50 am UTC (link)
	It worked! Thank you so much for all your help! I would have eventually given up if you hadn't been around :) (Reply to this) (Parent) (Thread)

	nympholepsy 2013-02-11 02:07 am UTC (link)
	you're welcome! :] (Reply to this) (Parent)

(Read comments) -