WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » HTML (Hyper Text Markup Language) » Incorperating an image header into my forum?

View previous topic View next topic Go down  Message [Page 1 of 1]

Josh

Josh
Registered Member
Registered Member
Hello!
I'm looking to put a simple image header at the top of my forum, and preferably having it stay there even when I scroll below it. (So it scrolls with the page) Does anyone know how to do this? I would have about 5 buttons on it, preferably with rollover codes. I imagine this whole thing would be done via template editing or CSS.

Here's an example of what I'm looking for (Note the "Battleon Games!" Header Bar), except this doesn't have the scrolling with the page feature.

http://www.aq.com/

ankillien

ankillien
Administrator
Administrator
You can add this code in the template...

Code:
<div style="position:fixed; top:0px; width:100%; background:#444; padding:5px; overflow:hidden;">
<img src="IMAGE URL HERE" style="float:left;">
<a href="LINK URL">Link Here</a> |
<a href="LINK URL">Link Here</a> |
<a href="LINK URL">Link Here</a>
</div>

Add this code any where in overall_header or index_body

Josh

Josh
Registered Member
Registered Member
Thanks. If I wanted to have 5 centered buttons, would I just replace the link codes with them?

Edit: I tried putting in the code, and it seems to be going behind the banner. Do you know how to fix this?

http://frogzard.omgforum.net/forum.htm

The links also seem to be to the left of the image itself. Would you know how to center the navbar and get rid of the color background as well?

ankillien

ankillien
Administrator
Administrator
To remove the nav bar add this code to your CSS...

Code:
#pun-navlinks {
display:none;
}

TO fix the banner overlapping add z-index:1000; to the style="" attribute of the <div> tag.

Josh

Josh
Registered Member
Registered Member
Hm, neither of the codes seemed to of done anything. Is there any particular place where the code should be on the overall_header_new template page?

ankillien

ankillien
Administrator
Administrator
You can put it anywhere but not inside <head> tags.
Where had you put it before when you said it worked?

Josh

Josh
Registered Member
Registered Member
Huh? I don't think the alterations to the code were ever succesful. I'd like to make the background transperent (So it's just the imagebar) and have buttons hovering (over) it. Would that be possible to do?
Thanks Smile,
-Josh

ankillien

ankillien
Administrator
Administrator
I don't know how exactly you want it to be, but I've tried a new code.

Add this code to your CSS first...

Code:
.webartz_topbar {
padding : 8px;
overflow :hidden;
position : fixed;
width : 100%;
top : 0px;
background : #FFF;
opacity : .7;
z-index : 50;
}
.webartz_links {
float : right;
padding : 5px;
margin-right : 30px;
}
.webartz_links a {
color : #444;
padding : 4px;
font-size : 13px;
font-weight : bold;
background : #DDD;
}
.webartz_links a:hover {
color : #FFF;
background : #444;
}

And now add this code in your homepage message...

Code:
<div class="webartz_topbar">
<img src="IMAGE URL HERE">
<div class="webartz_links">
<a href="LINK URL">Link Here</a> |
<a href="LINK URL">Link Here</a> |
<a href="LINK URL">Link Here</a></div>
</div>

Josh

Josh
Registered Member
Registered Member
Hm, that doesn't seem to be working either... The links are off to the side and the white background is straying to the left. Would you know how to just have an image at the top of every page (And scrolls with the page even when it goes below it) And then have a few rollover images with links hovered above it?

http://frogzard.omgforum.net/

Thanks for all your help! Very Happy
-Josh

ankillien

ankillien
Administrator
Administrator
Josh wrote:Hm, that doesn't seem to be working either... The links are off to the side and the white background is straying to the left.

The links are on right side atm. Do you want them to the center of left?
Where exactly you want them to be?

Josh wrote:Would you know how to just have an image at the top of every page (And scrolls with the page even when it goes below it) And then have a few rollover images with links hovered above it?

My current code has the same effects Wink
Did you try adding image URL in the code and see how it works?
The links already have a hover effect tongue

Josh

Josh
Registered Member
Registered Member
Oops, sorry xD But there appears to be a white background straying to the left - Would that be possible to remove? Could the links and imagebar be centered as well? (Links centered ontop of the image, centered.)

Here's what currently I'm seeing:
Incorperating an image header into my forum? PastedGraphic-8-1

ankillien

ankillien
Administrator
Administrator
hmm...now I get what exactly you are looking for.

Use this HTML...

Code:
<div class="webartz_topbar">
<div class="webartz_links">
<a href="LINK URL">Link Here</a> |
<a href="LINK URL">Link Here</a> |
<a href="LINK URL">Link Here</a></div>
</div>

And add this in CSS...

Code:
.webartz_topbar {
opacity : 1;
z-index : 200;
width : 100%;
height : 40px;
position : fixed;
top : 0px; left : 0px;
background : url(http://i266.photobucket.com/albums/ii247/Kab0000m/Josh/Navbar.png) no-repeat center top;
}
.webartz_links {
float : none;
color : #FFF;
padding-top : 8px;
text-align : center;
}
.webartz_links a {
background : none;
color : #FFF !important;
text-decoration : none;
font-weight : bold;
padding : 3px;
}
.webartz_links a:hover {
background : #EEE;
color : #333 !important;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
}

Hope it helps Very Happy

Josh

Josh
Registered Member
Registered Member
Should I replace these codes with the previous ones, or in addition to?

ankillien

ankillien
Administrator
Administrator
You should replace the codes.
Remove the previous codes and use these new ones.

Josh

Josh
Registered Member
Registered Member
That worked! Thankyou very much! : D
Edit: Would it be possible to have this display on every page, instead of just the forum page?
Edit again: Tried putting it in announcements and it worked. Thanks again! Smile

ankillien

ankillien
Administrator
Administrator
If you add the HTML code to overall_header_new template, it will be visible on all pages.

You can add it right after the <body> tag in the template.

Josh

Josh
Registered Member
Registered Member
Great, thanks for all your help! Smile

ankillien

ankillien
Administrator
Administrator
Glad I could help out Very Happy

Solved | Locked

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » HTML (Hyper Text Markup Language) » Incorperating an image header into my forum?

Permissions in this forum:
You cannot reply to topics in this forum