Runboard.com
You're welcome.
Runboard Extra! The Runboard Directory Runboard Knowledge Base
Chat room Runboard Knowledge Base (wiki) Search Facebook Twitter





runboard.com       You are not logged in.

Page:  1  2 

 
clabarfuil Profile
Live feed
Blog
Friends
Miscellaneous info

I'm Better Than You!

Registered: 04-2006
Location: Snail hunting
Posts: 427
Karma: -13 (+23/-36)
Reply | Quote
One small, tinsy, miniscule problem I cannot figure out...


I am doing a Holiday theme for the Bird Club. Which I am testing on my super top secret board, here. The little problem I'm having is that the background images for the forums, not the main page, is set too high and is cutting off the top part of the image. Look in that second main chat forum to see what I mean. the code I am using to change the background in each forum is...

quote:


#ak_forum_1 {background: url(http://4.bp.blogspot.com/-5JUyyS6eObc/UKJmIrHngNI/AAAAAAAAFMY/MhrJj9K75JY/s1600/Top+5+Christmas+Cat+HD+Wallpapers+1.PNG) center no-repeat; margin: 0;}

#ak_forum_2 { background: url(http://www.freevector.com/site_media/preview_images/FreeVector-Birds-Graphics.jpg) center no-repeat #dddddd; margin-top: 0;}



I've tried setting margins but that only moves the forum listing stuff.

Any help would be much appreciated!

---

11/18/2013, 1:21 pm Link to post Email clabarfuil   PM clabarfuil Yahoo Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Head of Runboard staff

Registered: 11-2005
Posts: 25181
Karma: 424 (+477/-53)
Reply | Quote
Re: One small, tinsy, miniscule problem I cannot figure out...


Hi Clabby,

Thanks for the link to your top secret board. emoticon

Since the bar at the top covers the top of the page background and isn't always the same height, you can put a div around your whole board, put the background image in that div, and give that div a min-height.


Beginning of HTML header:
<div id="container">

End of HTML footer:
</div><!-- end container -->

CSS:
#ak_forum_2 #container {

    background: #dddddd url(http://www.freevector.com/site_media/preview_images/FreeVector-Birds-Graphics.jpg) no-repeat center top;
    background-size: 100%;
}


Background-size is optional, and the above code will make your images the full width of the div (which will be the full width of the page, in this case).

---
Runboard Knowledge Base
Website Creation Tutorials
11/18/2013, 2:05 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
clabarfuil Profile
Live feed
Blog
Friends
Miscellaneous info

I'm Better Than You!

Registered: 04-2006
Location: Snail hunting
Posts: 427
Karma: -13 (+23/-36)
Reply | Quote
Re:


Thanks so much Lesa!

---

11/18/2013, 2:17 pm Link to post Email clabarfuil   PM clabarfuil Yahoo Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Head of Runboard staff

Registered: 11-2005
Posts: 25181
Karma: 424 (+477/-53)
Reply | Quote
Re:


You're very welcome, Clabby. emoticon

---
Runboard Knowledge Base
Website Creation Tutorials
11/18/2013, 2:57 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Head of Runboard staff

Registered: 11-2005
Posts: 25181
Karma: 424 (+477/-53)
Reply | Quote
Re: One small, tinsy, miniscule problem I cannot figure out...


I just realized you already have a <table> with the id of "container", so you'll need a different id for the <div>. Sorry I didn't catch that sooner.

---
Runboard Knowledge Base
Website Creation Tutorials
11/18/2013, 3:01 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
clabarfuil Profile
Live feed
Blog
Friends
Miscellaneous info

I'm Better Than You!

Registered: 04-2006
Location: Snail hunting
Posts: 427
Karma: -13 (+23/-36)
Reply | Quote
Re:


This isn't working. It has to do with the sidebar, I know it does!

---

11/20/2013, 3:54 pm Link to post Email clabarfuil   PM clabarfuil Yahoo Blog
 
clabarfuil Profile
Live feed
Blog
Friends
Miscellaneous info

I'm Better Than You!

Registered: 04-2006
Location: Snail hunting
Posts: 427
Karma: -13 (+23/-36)
Reply | Quote
Re:


It's working now! I had to redo the sidebar and now I've got to clean it up.

---

11/20/2013, 4:22 pm Link to post Email clabarfuil   PM clabarfuil Yahoo Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Head of Runboard staff

Registered: 11-2005
Posts: 25181
Karma: 424 (+477/-53)
Reply | Quote
Re:


I'm glad you got it sorted. emoticon

---
Runboard Knowledge Base
Website Creation Tutorials
11/20/2013, 6:39 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
clabarfuil Profile
Live feed
Blog
Friends
Miscellaneous info

I'm Better Than You!

Registered: 04-2006
Location: Snail hunting
Posts: 427
Karma: -13 (+23/-36)
Reply | Quote
Re:


Me too!

---

11/20/2013, 7:34 pm Link to post Email clabarfuil   PM clabarfuil Yahoo Blog
 
clabarfuil Profile
Live feed
Blog
Friends
Miscellaneous info

I'm Better Than You!

Registered: 04-2006
Location: Snail hunting
Posts: 427
Karma: -13 (+23/-36)
Reply | Quote
Re:


I've messed up the redirect when posting! Not sure how.

Here's the html...

quote:


<!--FORUM BACKGROUNDS //-->

<div id="mainpage">

<!-- BANNER //-->
<div class="banner">
</div>

<!-- SCROLLBAR //-->
<div id="marquee">
<marquee behavior=scroll direction="left" scrollamount="3" width="100%">
<b style=color:#CD0000>
Please hang all hammers on the coat rack, thank you!</marquee>
</div>

<!-- SIDEBAR //-->
<table id="container" cellpadding="0" cellspacing="10">
<tr><td id="sidebar">
<div class="sidebox">
<div class="sidebar"
<div class="sidebox">

</div>
<div class="sidebox">

<center><b>
<a href="javascript:for (i=0;i<document.styleSheets.length;i++) {void(document.styleSheets.item(i).disabled=true);}"><img src="http://www.westminsterchristmas.com.au/wp-content/uploads/2013/04/xmas-09711-200x150.jpg" alt="CLICK ME!"?</a>

<div class="hidden"><h1 style="text-align: center; color: #F00;"><blink>*By clicking on the Shiny Silver Bells all of your shinies have disappeared!*</blink></h1></div>


<br>
<a href="http://www.runboard.com/bthebirdclub"><img src="http://i89.photobucket.com/albums/k234/mysmiflies/bcimagelink.jpg" alt="TBC"></a>
<br>
<p style="font-family:veranda;font-size:120%;color:#cd3700">~Filter List~</p>
Acker - Odin<br>
Clabby - Malekith<br>
Micah - Selvig<br>
Moony - Loki<br>
Shadow - Thor<br>
So- Sif<br>
Starry - Darcy<br>

<p style="font-family:veranda;font-size:80%;color:#cd3700; text-align: left;">Here kitty, kitty, kitty! HERE KITTY KITTY KITTY!
<br>
<p style="font-family:veranda;font-size:120%;color:#cd3700;">~Links~</p>
<br>
<a href="http://www.runboard.com/brabidreader"><img src="http://i89.photobucket.com/albums/k234/mysmiflies/rabidrunboardlink.jpg" alt="Rabid Reader"></a><br><br>
<a href="http://www.runboard.com/bthewarofthebirdcats"><img src="http://i89.photobucket.com/albums/k234/mysmiflies/warbirdcathead.jpg" alt="War of the Birdcats"></a></b></center><br>
</div>
</td>
<td id="main">


<link rel="shortcut icon" href="http://www.iconj.com/ico/z/3/z3ktlynv9x.ico" type="image/x-icon" />




...footer
quote:


<!-- COUNTER AT BOTTOM //-->
<div align="center"><a href="http://www.amazingcounters.com"><img border="0" src="http://c6.amazingcounters.com/counter.php?i=1271504&c=3814825" alt="Web Site Hit Counter"></a><br><small><a href="http://www.4computercoupons.com"><font color="#999999">Dell Laptop</font></a> <a href="http://www.4computercoupons.com/dell-coupons.html"><font color="#999999">Computers</font></a></small></div>


</div><!--container//-->



here's the css...

quote:


/*CHANGES BACKGROUND IMAGES IN FORUMS*/

#ak_forum_1 #mainpage {
    background: #dddddd url(http://3dfreewallpapers.com/pics/cats/hd-desktop-pictures-1366x768-christmas-cats.jpg) no-repeat center top fixed;
}
#ak_forum_2 #mainpage {
    background: #dddddd url(http://www.freevector.com/site_media/preview_images/FreeVector-Birds-Graphics.jpg) no-repeat center top fixed;
}

#ak_forum_3 #mainpage {
    background: url(http://images4.fanpop.com/image/photos/20000000/Lovely-little-birds-to-sing-for-you-Berni-yorkshire_rose-20063564-1280-800.jpg) no-repeat center top fixed;
}

#ak_forum_4 #mainpage {
    background: url(http://1hdwallpapers.com/wallpapers/bright_shiny_blues.jpg) no-repeat center top fixed;
}

#ak_forum_5 #mainpage {
    background: url(http://4.bp.blogspot.com/-GK8DrUbiQLU/UTvVsrmaQpI/AAAAAAAADOI/0kYFxXu_P0I/s1600/bowie-glam-rock-6.jpg) no-repeat center top fixed;
}

#ak_forum_6 #mainpage {
    background: url(http://www.freefever.com/stock/free-christmas-wallpapers-and-screensavers.jpg) no-repeat center top fixed;
}

#ak_forum_7 #mainpage {
    background: url(http://digital-art-gallery.com/oid/20/1200x1120_5323_Christmas_time_2d_cartoon_cute_character_cats_animals_picture_image_digital_art.jpg) no-repeat center top fixed;
}

#ak_forum_8 #mainpage {
    background: url(http://i01.i.aliimg.com/wsphoto/v0/1404759671_1/Free-Shipping-70-59-cm-ZooYoo-Original-Christmas-Owls-Scroll-Tree-Decal-Removable-Wall-Sticker-Home.jpg) no-repeat center top fixed;
}

#ak_forum_9 #mainpage {
    background: url(http://www.hdwallpapersinn.com/wp-content/uploads/2012/11/santa_claus_drunk_wallpaper-normal.jpg) no-repeat center top fixed;
}

#ak_forum_10 #mainpage {
    background: url(http://www.bluebison.net/backgrounds/2011/1211/undersea-christmas-kelp-1280.png) no-repeat center top fixed;
}




/*SETS THE MAIN BANNER*/

.banner { height: 95px; background: /*url(http://i89.photobucket.com/albums/k234/mysmiflies/bcwishbanner.png)*/ top left no-repeat; }

/*PLEASE NOTE I HAD TO MAKE SOME CHANGES TO THE SIDEBAR TO GET THE BACKGROUND IMAGES IN THE FORUMS, CLABBY*/

/*MAIN TABLE*/


/*SIDE BAR CELL*/

#sidebar{
width : 15%;
}

/*FORUM CELLS*/

#sidebar, #main { vertical-align: top; }
.sidebox { margin-bottom: 1em;
           margin-top:4em; }

/*INNER SIDE BAR TABLE*/
.sidebox {
width : 222px;
font-size : 18px;color: #CD0000;
text-align : center;
}

.sidebox ul, .sidebox li {
margin : 0;
padding : 0;
list-style : none;
display : inline;
}

.sidebox ul a:link, .sidebox ul a:visited {
text-decoration : none;
display : block;
margin : 1px;
padding : 2px;
}

.sidebox ul a:hover {
text-decoration : none;
}

.sidebox h2 {
font-size : 15px;
margin : 1px;
height : 20px;
text-align : center;
}



/*HIDE SHARE OPTION*/

.share_menu {
       display: none;
}

/* DELETE POST WARNING MSG */
span.postlistdelete {
     position: relative;
}
    span.postlistdelete a span {
     display: none;
}
span.postlistdelete a:hover {
     font-size: 99%;
     font-color: #dc143c;
}
span.postlistdelete a:hover span {
    display: block;
     position: absolute;
     margin-top: 10px;
     margin-left: -10px;
width: 480px; height:14px;padding: 12px;
     color: #AAAAAA;
     background: #000000;
     font:bold 12px Arial, sans-serif;
     text-align: center;
     text-decoration: none;
}

/* AVATAR SIZE RESTRICTIONS */
.ak_msg_post_table img { max-height:250px; height: expression(this.height > 250 ? 250: true); max-width:250px; width: expression(this.width > 250 ? 250: true); margin-bottom: 1em;}

html body .ak_msg_post_signature_block img {
    max-width: 650px;
    max-height: 300px;
}

html .ak_msg_post_signature_block {
    width: 650px;
    height: 300px;
    overflow: auto;
    padding-bottom: 20px;
}

span.postlistpostbody img {
  max-width:500px;
  width: expression(this.width > 500 ? 500: true);}


/*CUSTOM USER TITLES FOR ADMINS MODS*/

.clabarfuil .postlistusername a:link,
.clabarfuil .postlistusername a:visited {
  display: block;
  padding-bottom: 40px;
  margin-bottom: -1em;
  background:url(http://i89.photobucket.com/albums/k234/mysmiflies/owl-32x32.png) bottom left no-repeat;
}

.starrytrekchic .postlistusername a:link,
.starrytrekchic .postlistusername a:visited {
  display: block;
  padding-bottom: 90px;
  margin-bottom: -1em;
  background:url(http://i89.photobucket.com/albums/k234/mysmiflies/post%20icons/starrynite.gif)
bottom left no-repeat;
}

.micahtotallynotstalkingbaby .postlistusername a:link,
.micahtotallynotstalkingbaby .postlistusername a:visited {
  display: block;
  padding-bottom: 40px;
  margin-bottom: -1em;
  background:url(http://i89.photobucket.com/albums/k234/mysmiflies/micahandstarry.gif)
bottom left no-repeat;
}

.moonfoot .postlistusername a:link,
.moonfoot .postlistusername a:visited {
  display: block;
  padding-bottom: 40px;
  margin-bottom: -1em;
  background:url(http://i89.photobucket.com/albums/k234/mysmiflies/post%20icons/voodoo-1.gif) bottom left no-repeat;
}

.naladin .postlistusername a:link,
.naladin .postlistusername a:visited {
  display: block;
  padding-bottom: 19px;
  margin-bottom: -1em;
  background:url(http://i108.photobucket.com/albums/n27/The_Bird_Club_2006/animals-32.gif) bottom left no-repeat;
}

.masterwabbit .postlistusername a:link,
.masterwabbit .postlistusername a:visited {
  display: block;
  padding-bottom: 19px;
  margin-bottom: -1em;
  background:url(http://i108.photobucket.com/albums/n27/The_Bird_Club_2006/animal0028.gif) bottom left no-repeat;
}

.acker .postlistusername a:link,
.acker .postlistusername a:visited {
  display: block;
  padding-bottom: 50px;
  margin-bottom: -1em;
  background:url(http://i89.photobucket.com/albums/k234/mysmiflies/post%20icons/scared003.gif) bottom left no-repeat;
}

.raven88 .postlistusername a:link,
.raven88 .postlistusername a:visited {
  display: block;
  padding-bottom: 19px;
  margin-bottom: -1em;
  background:url(http://i108.photobucket.com/albums/n27/The_Bird_Club_2006/raven.gif) bottom left no-repeat;
}

.custarddragon .postlistusername a:link,
.custarddragon .postlistusername a:visited {
  display: block;
  padding-bottom: 19px;
  margin-bottom: -1em;
  background:url(http://i108.photobucket.com/albums/n27/The_Bird_Club_2006/animal0047.gif) bottom left no-repeat;
}


.vfortheshadow .postlistusername a:link,
.vfortheshadow .postlistusername a:visited {
  display: block;
  padding-bottom: 35px;
  margin-bottom: -1em;
  background:url(http://i89.photobucket.com/albums/k234/mysmiflies/cosplay_smiley.gif) bottom left no-repeat;
}


.starrysowner .postlistusername a:link,
.starrysowner .postlistusername a:visited {
  display: block;
  padding-bottom:30px;
  margin-bottom: -1em;
  background:url(http://i108.photobucket.com/albums/n27/The_Bird_Club_2006/animal0017.gif) bottom left no-repeat;
}


/* MEMBERSHIP LIST TABLE */
.ak_msg_seememberlist_table, .ak_msg_seememberlist_head_user_td, .ak_msg_seememberlist_head_date_td, .ak_msg_seememberlist_head_im_td, .ak_msg_seememberlist_head_pm_td,.ak_msg_seememberlist_head_email_td {font-size:12px; font-family: hobbit SF;background-color:;padding-top:3px;padding-bottom:3px}
.ak_msg_seememberlist_table {border-width:1px;border-color:#000000}
.ak_msg_seememberlist_showing { font-size:12px; font-family:hobbit SF}


body {
background-attachment: fixed;}

.hidden { display: none; }



/* QUICK REPLY BY LESIGNER GIRL */
#qr {
    width: 650px;
    height: 360px;
    display: block;
    margin: 2em auto -2em auto;
    border: 0;
}



HELP!

---

11/20/2013, 9:23 pm Link to post Email clabarfuil   PM clabarfuil Yahoo Blog
 


Add a reply

Page:  1  2 



You are not logged in (login)