Welcome Guest [Log In] [Register]
This board has been archived and is no longer accepting new questions. If you have a support question for your ZetaBoard, please visit us at the new support board. Registration is free and easy.


Visit the NEW ZetaBoards Support forum!

Username:   Password:
Add Reply
Adding something...
Topic Started: Mar 1 2008, 07:46 AM (1,026 Views)
Dunno
Member Avatar
Member
[ *  * ]
Hi all, a few questions here.


  1. How can I add a menu below #logo, but above #submenu_bar ?
    (I'm making a skin for my forum and am trying to keep it consistent with my boards website, which I designed months ago, and I have a menu underneath the logo on the website, so just wondered how I could put a menu underneath #logo on the forums)
  2. How can I change the width of the Google Ads box in the CSS?
    This is just ever so slightly wider than it needs to be, and ideally I'd like to change it, once again for consitency of the width of my website.
  3. How do I change the height of the "h2" / maintitle cell?
    I have made a h2 background image (or maintitle background image) for my ZetaBoard forum, and it is 20px in height. I have tried adding: "height:20px;" "height:5%;" and some other attributes, but there is still a gap underneath the image, I don't really want to make another maintitle, as I say I want to keep it consistent with my website.


Thanks, in advance.

Cheers. :)
Edited by Dunno, Mar 1 2008, 10:35 AM.
Offline Profile Quote Post Goto Top
 
Nicola
Darth Vader's Sewing Instructor
[ *  *  *  *  *  *  * ]
1. <!-- HEADER --> Between these tags<!-- SUBMENU -->
Create a new div and pop your own links in.

2.You cannot target the table and cell containing the Google ads specifically.

3. Decrease the padding:
Code: HTML
 
.category h2,.topic h2,#portal h2 {
padding:5px;
text-align:left;
}
Offline Profile Quote Post Goto Top
 
Dunno
Member Avatar
Member
[ *  * ]
Cheers Nicola. Guess I'll have to make the board slightly wider then. :P
With the DIV I've created for my menu, this is working, although my links are rollover buttons, and I have therefore used CSS to interpret this, although only one of the buttons will show.

Code: HTML
 
<div id="navbar"><div class="highlightit"><a href="index.php" title="Home"><span class="sitenav">home</span></a></div><div class="highlightit"><a href="http://forums.afterlifeuk.co.uk" title="Forums" target="_blank" ><span class="sitenav">forums</span></a></div><div class="highlightit"><a href="news.php" title="News" ><span class="sitenav">news</span></a></div><div class="highlightit"><a href="relinks.php" title="Related Links" ><span class="sitenav">links</span></a></div><div class="highlightit"><a href="site_map.php" title="Site Map" ><span class="sitenav">site map</span></a></div><div class="highlightit"><a href="aboutus.php" title="About Us" ><span class="sitenav">about us</span></a></div><div class="highlightit"><a href="contactus.php" title="Contact Us" ><span class="sitenav">contact us</span></a></div></div>


I've add the CSS to the end of the stylesheet, so that I know it's specifically for my menu.
And the CSS for the buttons is:
Code: HTML
 
.sitenav{
font-family:Tahoma;
font-size:14px;
font-weight:bold;
color:#f8f8ff;
line-height:23px;
font-variant:small-caps;
text-align:center;
}
.sitenav:hover{
font-family:Tahoma;
font-size:14px;
text-align:center;
font-variant:small-caps;
font-weight:bold;
line-height:23px;
color:#111111;
text-align:center;
}
#navbar {
width:730px;
height:27px;
margin:0 13.3%;
border:1px solid #000;
background-color:#000;
clear:both;
background-repeat:no-repeat;
}
.highlightit{
border: 1px solid #7C7C7D;
background-color:#393939;
height:26px;
text-align:center;
margin-left:5px;
width:94px;
}
.highlightit:hover{
border: 1px solid #f8f8ff;
height:26px;
text-align:center;
margin-left:5px;
background-color:#7C7C7D;
width:94px;
}


This all works perfectly on my site, but only one button shows up on the ZB forum, yet there is something like six of them. :unsure: Help is greatly appreciated.

As for the padding thing on the "h2" identifier, this didn't work, I set the padding to: "padding:0;"
and still it appears like this:
Posted Image
Edited by Dunno, Mar 1 2008, 12:29 PM.
Offline Profile Quote Post Goto Top
 
Nicola
Darth Vader's Sewing Instructor
[ *  *  *  *  *  *  * ]
They're display: block'd, so they're stacking.

Did you want them in a line?

With the H2, I would assume the space is now being taken up by the size of the text.
Offline Profile Quote Post Goto Top
 
Dunno
Member Avatar
Member
[ *  * ]
Nicola
Mar 1 2008, 12:42 PM
They're display: block'd, so they're stacking.

Did you want them in a line?

With the H2, I would assume the space is now being taken up by the size of the text.
Yeah, preferably in one line, I don't know why it's auto-display:blocking them though. Isn't it "display:inline" to have them in one line?

As for the H2, I reduced the size of the text as small as 85%; and more, but to no avail. :ermm:
Offline Profile Quote Post Goto Top
 
Nicola
Darth Vader's Sewing Instructor
[ *  *  *  *  *  *  * ]
Div's automatically stack as they are 'divisions'.

You can get them inline, but because of IE and some other technicalities, you can't have them all the same width, unfortunately. If you set a width and display: block them, they'll fill the area, but they'll stack, which you don't want. Therefore you just want some padded inline elements, and that's all you can really do unless you want to make separate images for them and do an actual image rollover.

I'll throw a 'mockup' of what I mean for you, won't take more than a few minutes.
Offline Profile Quote Post Goto Top
 
Nicola
Darth Vader's Sewing Instructor
[ *  *  *  *  *  *  * ]
Try this:

css
 
#navbar {
width:730px;
padding: 7px 0px;
margin:0 13.3%;
border:1px solid #000;
background-color:#000;
clear:both;
background-repeat:no-repeat;
clear: both;
margin-bottom: 100px;
}
#navbar ul {
list-style-type: none;
margin: 0;
}
#navbar ul li {
display: inline;
margin: 0;
}


#navbar a{
border: 1px solid #7C7C7D;
background-color:#393939;
text-align:center;
width: 100px;
color:#f8f8ff;
font-variant:small-caps;
font-family:Tahoma;
font-size:14px;
font-weight:bold;
padding: 5px 15px ;
}
#navbar a:hover{
border: 1px solid #f8f8ff;
height:26px;
text-align:center;
background-color:#7C7C7D;
width:94px;
}


Code: HTML
 
<div id="navbar">
<ul>
<li><a href="index.php" title="Home">home</a></li>
<li><a href="http://forums.afterlifeuk.co.uk" title="Home">forums</a></li>
<li><a href="news.php" title="Home">news</a></li>
<li><a href="site_map.php" title="Home">sitemap</a></li>
<li><a href="aboutus.php" title="Home">about us</a></li>
<li><a href="contactus.php" title="Home">contact us</a></li>
</ul>
</div>
Offline Profile Quote Post Goto Top
 
Dunno
Member Avatar
Member
[ *  * ]
That sort of worked, but in IE7 (the browser I have on this computer (sadly I'm not on my laptop which has FireFox), it has caused the page to do this:

Posted Image
(Scaled down to fit)

I also forgot to edit my last post to change the width of the bar to 767px, (because of the problem with the Google Ads thing)
Edited by Dunno, Mar 1 2008, 01:06 PM.
Offline Profile Quote Post Goto Top
 
Nicola
Darth Vader's Sewing Instructor
[ *  *  *  *  *  *  * ]
Oh, oops xD

Remove margin-bottom: 100px;. I put it there while I tested to see your stacked links :$
Offline Profile Quote Post Goto Top
 
Dunno
Member Avatar
Member
[ *  * ]
Ok, that worked. Is there any way of putting spacing between them, so the buttons aren't all directly border-to-border with each other?
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Theme & Code Help · Next Topic »
Add Reply