<?
#header {
    background:#ffffff url(IntranetButton.jpg) no-repeat center;
    background:#ffffff url(<a href="http://intranet/home"><img src=IntranetButton.jpg /></a>) no-repeat center;
    height: 134px; /*Height of header*/
    border-top: 1px solid #330000; /*top border of main content*/
}
?> <?
******>

<div id="wrapper">
    <div id="header">

    <ul id="tabnav">
        <li><a href="A.html">A</a></li>
        <li><a href="B.html">B</a></li>
        <li><a href="C.html">C</a></li>
    </ul>
    </div>

    <div id="navstrip">
        <div align="center">
<h1>Knowledge Base</h1>
</div>
</div>

    <div id="content">
Please select from the navigation menu.
    </div>
    </div>

</body>
?> <?
<div id="header">
       <a href="http://intranet/home"><img src=IntranetButton.jpg /></a>
    <ul id="tabnav">
        <li><a href="A.html">A</a></li>
        <li><a href="B.html">B</a></li>
        <li><a href="C.html">C</a></li>
    </ul>
    </div>
?> <?
******* type="text/css">

body { margin: 0; padding: 0; background-color: #D8D19B;} /*Background colour*/

#wrapper {
    margin: 20px auto;
    border-left: 1px solid #330000; /*border of main content*/
    border-right: 1px solid #330000; /*border of main content*/
    border-bottom: 1px solid #330000; /*border of main content*/
    width: 782px; /*width of contents section*/
    height: 600px;
}

#header img {margin-top:20px;margin-left:auto;margin-right:auto;margin-bottom:20px;display:block;}

#header {
    background:#ffffff no-repeat center;
    height: 134px; /*Height of header*/
    border-top: 1px solid #330000; /*top border of main content*/
}


#content { 
    background-color: #FFFFFF; 
    padding: 30px; /*Padding around text in main content*/
}

#navstrip {
    text-decoration: none;
    display:block;
    font-color: #FFFFFF;
    height:30px; /*height of coloured strip under menu bar*/
    text-align:centre;
    padding: 20px;
    font-family:verdana,tahoma,arial;
    font-size:12px;
    background-color: #183A9B; /*coloured strip under menu bar*/
}

ul#tabnav {
    padding: 0px;
    margin: 111px 0px 0px 0px; /*Where the navigation buttons on menu bar sit*/
    list-style:none;
}

ul#tabnav li {
    padding: 0px;
    margin: 0px 0px 0px 2px; /*How close together the menu buttons sit*/
    float:left;
    width: 28px; /*Width of menu buttons - note, image is the same size as this setting*/
}
ul#tabnav li a, ul#tabnav li a:visited {
    text-decoration: none;
    display:block;
    background-image:url(tabs.jpg);
    background-repeat:no-repeat;
    text-align:center;
    color: #FFFFFF;
    font-family:verdana,tahoma,arial;
    font-size:12px;
    padding-top:3px;
    height: 20px;
}
ul#tabnav li a:hover, ul#tabnav li a.selected {
    background-position: -88px 0px;
    color: #183A9B; /*Colour of text when hovering over*/
}

h1 {
    font: bold 20px/31px Verdana, Arial, Helvetica, sans-serif; /*Font size of text in header*/
    text-align: centre;
    width: 782px;
    color: #FFFFFF;
    margin:0;
    padding:0;
    }


</style>
?> <?
<div id="navstrip">
        <div align="center">
<h1>Knowledge Base</h1>
</div>
</div>
?> <?
<div id="navstrip">
<h1>Knowledge Base</h1>
</div>
</div>
?> Basic CSS Help - TranceAddict Forums - Chill Out Room
return to tranceaddict TranceAddict Forums Archive > Main Forums > Chill Out Room

Pages: [1] 2 
Basic CSS Help
View this Thread in Original format
DJ Mikey Mike
Anyone care to help me out with a little bit of CSS? My knowledge of it is very at best.

Basically, I want a button (an image) to appear in the header of every page and for that button to be a hyperlink to something else. Ie:



So, to do that, I've but the following code in my CSS file which I thought would have worked, but for some reason it's not doing:

PHP:



Why isn't it working? What should it be?

Cheers.
Ivand
you cant add a link on CSS.

you will need to add that button manually to every html website

basically, the second line you pasted is useless
Lira
Mike, CSS can't help you with that, as Ivand said. What you need is a dynamic language, such as PHP to add the same bit of HTML code in different pages.

PHP is, by far, the easiest language to learn (though you may want to take a look at ASP as well). If you need any help, go to www.w3schools.com and take a look at their tutorials, that's where I learnt the basics :)
Ivand
well, unless that button or where it links to is going to change frequently he should just paste it in every html document.

Also, it doesnt work because CSS is not for content, but for presentation.. CSS shouldnt have any content on it, just rules to define how that content should look like.
DJ Mikey Mike
:(

Okay thanks guys, I was half expecting that answer anyway.
Lira
quote:
Originally posted by DJ Mikey Mike
:(

Okay thanks guys, I was half expecting that answer anyway.

It's not hard to do what you want on PHP, mate, give it a try. As a matter of fact, you barely need to know any PHP to do that.

Can you use it, or isn't that an option? I can teach you how to do it as soon as I get back home.
DJ Mikey Mike
For some reason I can't get the button to sit in the header when I try and put it in the html page.


Below is the html for my index page:


PHP:


And this is how it looks (the red button is where I want my button to appear):




What do I need to put in the html file to get that button to sit where I've indicated I want it on the picture. I can also paste the code from my CSS file if necessary.

Thanks guys.
Ivand
PHP:



and css

#header img {margin-top:20px;margin-left:auto;margin-right:auto;margin-bottom:20px;display:block;}


I think that should work, if it doesnt pls screenshot to see what went wrong
DJ Mikey Mike
Thanks Ivand, very close. It pushes the "knowledge base" bit up.






Code for the CSS file: (Have I put your line of code for the CSS file in the correct place?)



PHP:





Thanks for this.
Ivand
im leaving to the office now, but ill post something in around 20-30minutes.

brbrbbrbrb

Ivand
what browser are you using?

add also this line to remove the border around the images

#header a {border:none;}


define a width for the #header div

width:782px;

and for the navstrip replace this

PHP:


for

PHP:


and add a text-align:center; property in the #navstrip css, that div you were using is redundant
DJ Mikey Mike
For this I'll be using Internet Explorer.

I've added everything you said with the exception of this bit:

#header a {border:none;}


Where exactly do I need to add that? When I add i amongst the other header bits it doesn't seem to do anything.

After all the changes it now looks like this:





The A-Z buttons seem to have gone.


Not to confuse matters further but I have a feeling the last screenshot I took might have been when i'd opened it up with Firefox. Rookie mistake, sorry.
CLICK TO RETURN TO TOP OF PAGE
Pages: [1] 2 
Privacy Statement