Dragnmoon
Hey hoping I can get some Help in cleaning up some code on my page, I am not a Code guru most of the information I got from Arsheesh on his page "Here":http://www.obsidianportal.com/campaign/age-of-legends/wikis/html-templates-for-age-of-legends.
Here is the page I am working on "Pathfinder Society San Antonio":http://www.obsidianportal.com/campaigns/pathfinder-society-san-antonio
The Code works great on the Home Page, but when I add it to the Wiki Page "I get this":http://www.obsidianportal.com/campaign/pathfinder-society-san-antonio/wikis/main-page which ii all messed up on the placement. I tried adjusting the top placement but it won't go any higher.
Here is the Code I am working with, if any can give me some advice it would be appreciated, I am think I should be placing the page content some where in the code to correct this, but I am uncertain (remember not a code guru ;) . I have been placing the Text originally after the Code.
What I am adding is Navigation Menu Template to go above Default, Custom Background, and a Side Navigation Bar.
Comments
The sidebar looks like it should work fine, and I see nothing wrong with it in the page.
body {
background-image:url('http://cdn.obsidianportal.com/assets/142346/Seamless_pattern_2.png');
}
The tab might require a little work, but it might be _something_ like:
li .home{
background-image:url('http://cdn.obsidianportal.com/assets/142545/Home.png');
border-style:none;
font-size:0px;
width:121px;
height:74px;
}
Then do a new one for each of .adventure-log, .characters, .map, etc.
To be honest, I'm not sure if an image-based tab bar will work with this or not. Experiment!
Going to search about and see if I can find some advice on these forums on how I can get my Home page look using Custom CSS instead of what I am currently doing.
If anyone has a link for that, it would be greatly appreciated!
What I am looking for is CSS code for my Background Image
CSS code from my Navigation Menu using the images I have and align it with the Campaign Banner
Side Menu CSS code using the images I have,
When I try to add the background image i Get a Internal Server Error (500)
body{
background-image: url(http://cdn.obsidianportal.com/assets/142346/Seamless_pattern_2.png);
background-position:fixed;top:0px;left:0px;z-index:-100;
background-repeat: repeat;
background-attachment:fixed;
}
body{
background-image: url(http://cdn.obsidianportal.com/assets/142346/Seamless_pattern_2.png);
background-attachment:fixed;
}
The others should be the defaults for background images.
Now to figure out how to get my Nave Bar and Side Menu to work in CSS.
Thanks guys
Just trying to help out.
li .home{list-style-image:url('http://cdn.obsidianportal.com/assets/142545/Home.png;');
}
etc.
Background image/display image/etc probably aren't supported by list elements. I'm doubtful this will work out all that great, either:/
Cheers,
-Arsheesh
Anyone having any luck with nav bar or side bar images in CSS?
killervp
"A God...Rebuilt":http://www.obsidianportal.com/campaigns/a-god-rebuilt
"Duskreign's First Ever COTM":http://www.obsidianportal.com/campaigns/wyrmshadow/wiki_pages/112011
"OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/
PS- Arsheesh, we cannot wait until you come back with a new, phenomenal wiki!!
Just trying to help out.
div .tab-container {
background-image:url('image-url-here');
width:726px;
height:74px;
}
.tabnav{
display:inline-block;
width:auto;
margin:1px auto 34px auto;
border-style:none;
background:none;
}
.tabnav a:link,.tabnav a:visited,.tabnav a:active,.tabnav a:hover{
background:none;
border-style:none;
color:Maroon;
font-size:13pt;
margin:0px 0px 0px 0px;
padding:0px 7px 0px 7px;
}
.tabnav a:hover{
color:Red;
}
.tabnav a.active:link,.tabnav a.active:visited,.tabnav a.active:active,.tabnav a.active:hover{
background:none;
border-style:none;
color:Red;
font-weight:bold;
margin:0px 0px 0px 0px;
padding:0px 7px 0px 7px;
}
li .adventure-log {
display:none;
}
etc.
You might need to play with a few other settings in order to make it work out nicely, and you'll probably want to change the font styling a bit to make it work better for you.
li .home a {display: block; background-image: url(bla bla bla); width: 100px; height: 30px; font-size: 0px;}
Block or inline block, not sure which one would be favourable in this situation without playing around with it. Adjust code to suit your background image URL width and height.
Though I have a couple of questions.
"As you can see":http://www.obsidianportal.com/campaigns/pathfinder-society-san-antonio there is a slight space now between the Nav bar image and the Banner, is there a way to ouch the image up?
Which part of the code can I adjust the Font type?
Which part of the code can I adjust the Font Size?
Which part of the code can I adjust the Space between the Nav bar links so I can more evenly space them out?
Thanks a lot guys you have been extremely helpful
Top: -10px;
Position: relative;
The top value won't do anything until you set the position :)
FONTS:
Set your fonts in ul.tabnav to do them all at once, or in li.home, li.adventure-log, li.wiki, etc etc to set them separately.
Also, Langy, you're a mad genius. It never would have occurred to me to use the existing nav menu now that we have external CSS control, but it is so obvious and such a fantastically efficient use of the tools! I'm SO excited to bust out the CSS and convert my own alt nav. Won't have time to until probably Wednesday, though, and aaaaaagh the excitement is killing me here.
And once again guys thanks! I know a few people were looking for this.
Something like __li.home {margin: 0 20px;}__ will space the home link out 20 px on its left and right, though it'll leave it alone top/bottom-wise.
When defining margin...
Margin: 1px; = top, bottom, left and right are all 1
Margin: 1px 2px; = top and bottom are 1, left and right are 2
Margin: 1px 2px 3px; = top is 1, left and right are 2, bottom is 3
Margin: 1px 2px 3px 4px; = top is 1, right is 2, bottom is 3, left is 4
"It is looking Good":http://www.obsidianportal.com/campaigns/pathfinder-society-san-antonio