Linking CSS StyleSheet, and site coding [Archive] - Lissa Explains it All: Web Design Forums

View Full Version : Linking CSS StyleSheet, and site coding

mustard_seed07

04-06-2006, 04:15 AM

Okay I'm trying to make a layout for a fanlisting of mine. I made this awesome background but there's a few things not working out.

http://www.every-word.net/fan/megan/layout1back.gif

1. That url is a link to my background image. What I need is the words in the nagivation linked and I have no idea how to do it. I tried experimenting with tutorials from different sites but I can't figure it out. I was wondering if someone could code that for me. If you code it each of the links are simply supposed to be what the word is; for example the word is 'about' so the link needs to be 'about.php'.

2. That box below the navigation is supposed to be a div area for the nagivation to go into. But I can't get the div to work correctly. Can some code this div for me. This leads me to number 3.

3. I can't seem to figure out how to link to my style sheet. I've also gone to many tutorials for this but can't figure out what I'm doing wrong. All the other tutorials seem to have many things but those ones don't work for me for some reason.

I know this is asking a lot but I have no idea what I'm doing wrong. I'm totally confused. If anyone codes anything for me I'll gladly link you in a thank you section.

onigiri

04-06-2006, 05:37 AM

Here, I coded the layout for you, the code for index.htm or whatever your main page is is here:

<html>
<head>
<meta name="Author" content="">
<meta name="Generator" content="Paint Shop Pro 9">
<title> </title>

<style type="text/css">
#main {width: 358px;
height: 376px;
background-image: url('layout1back_2x2.gif');
background-repeat: no-repeat;
overflow: scroll;
}
</style>
</head>
<body>


<table border="0" cellpadding="0" cellspacing="0" width="800">

<tr>
<td rowspan="1" colspan="3" width="800" height="24">

<img name="layout1back_1x10" src="layout1back_1x1.gif" width="800" height="24" border="0" usemap="#layout1back_1x1" alt="" />

<map name="layout1back_1x1">
<area shape="rect" coords="440,11,465,21" alt="" href="about.php">
<area shape="rect" coords="473,11,501,21" alt="" href="rules.php">
<area shape="rect" coords="511,11,529,21"alt="" href="join.php">
<area shape="rect" coords="539,11,565,22" alt="" href="codes.php">
<area shape="rect" coords="571,12,596,21" alt=""
href="fans.php">
<area shape="rect" coords="603,12,630,21" alt=""
href="extra.php">
<area shape="rect" coords="638,12,660,21" alt="" href="main.php">
</map></td>
</tr>

<tr>
<td rowspan="1" colspan="1" width="335" height="376">
<img name="layout1back1" src="layout1back_2x1.gif" width="335" height="376" border="0" alt="" /></td>
<td rowspan="1" colspan="1" width="358" height="376">
<div id="main">Main Content</div></td>
<td rowspan="1" colspan="1" width="107" height="376">
<img name="layout1back3" src="layout1back_2x3.gif" width="107" height="376" border="0" alt="" /></td>
</tr>

<tr>
<td rowspan="1" colspan="3" width="800" height="200">
<img name="layout1back4" src="layout1back_3x1.gif" width="800" height="200" border="0" alt="" /></td>
</tr>

</table>


</body>
</html>

I used Paint Shop Pro to slice and map the layout, so you'll need the image slices. They're available here:

http://i7.photobucket.com/albums/y283/Antibaseball/layout1back_1x1.gif
http://i7.photobucket.com/albums/y283/Antibaseball/layout1back_2x1.gif
http://i7.photobucket.com/albums/y283/Antibaseball/layout1back_2x2.gif
http://i7.photobucket.com/albums/y283/Antibaseball/layout1back_2x3.gif
http://i7.photobucket.com/albums/y283/Antibaseball/layout1back_3x1.gif

And as to your third question, just add <link rel="stylesheet" href="style.css" type="text/css" /> after your <head> tag.

mustard_seed07

04-06-2006, 05:55 AM

Thanks so much for doing all of that. I've tried that code that you listed for linking the stylesheet but it didn't work, am I supposed to be saving the stylesheet a certain way?

mustard_seed07

04-06-2006, 05:56 AM

What part needs to go into the header.php and what part into the bottom in the footer.php of the code you gave me?

J to the izzosh

04-06-2006, 06:06 AM

Welp, to be honest, I was too lazy to write a lengthy explanation for how you can do this, so I just did it myself (http://jfweb.fastmail.fm/captured/captured.htm). There is one problem with having the background image as a background image: if someone's browser window is larger than your image then whitespace will show around it.

I'll try to answer your questions in brief:
1) I cut out a piece of your background image with the navigation text in it and made an image map out of it. I placed that map in a <div> element and absolutely positioned the <div> element so that it appears in the exact spot where it should in the layout, just above the text box.

2) I sized a <div> element so that it fits inside the brown border inside your text box. I then usbed absolute positioning to place it inside that border. I set the element's overflow to auto so that if its content extends past its borders, a scrollbar will appear to allow it to be shown. You will not be able to target your links into this element, but you can easily create a new page with approriate content for each php file.

3) Just take a look at the <link> element in my example for how to link to an external style sheet.

The markup which I used is valid XHTML 1.0 Strict (http://validator.w3.org/check?uri=http%3A%2F%2Fjfweb.fastmail.fm%2Fcapture d%2Fcaptured.htm). I encourage you to try and keep it this way to develop standards-compliant coding practices. You can use the W3C HTML Validator (http://validator.w3.org) to verify your pages' compatibility. I also suggest asking any questions that you have about what I've done. Though, it was fairly easy for me to do, it won't benefit you very much if you dont understand what something does. On that note, you can find a fairly indepth CSS tutorial here (http://www.westciv.com/style_master/academy/css_tutorial).

On a side note, you really didn't need to post this in both the HTML Help and this forum. It just makes for clutter and cunfusion in replying to you. But I hope this helps.

Edit: It seems that I was a little late in posting. I'll get you next time, Gadget!

mustard_seed07

04-06-2006, 06:08 AM

This didn't work correctly for me. I wanted it so that the background didn't scroll.

Is there a way that we make the image the background image. I know I made the background image a little bigger than it needs to be but I did that one purpose. Is there a way that we can just put a div where the box in without splicing the image? And maping the navigation without splicing? I'm sorry for being a pain because I really do appreciate you taking your time to do that for me.

-Brandi

mustard_seed07

04-06-2006, 06:24 AM

Opps. Ignore the last message. I see that you got it to work. I somewhat know css but I'm not good with the stylesheets. What did you insert into the style sheet for that?

Is there a certain way your supposed to save the stylesheet in notepad because it's still not working for me.

J to the izzosh

04-06-2006, 06:25 AM

But... my background doesn't scroll. And I did set the image as the background image... Just can't get no satisfaction... :chicken:

Edit: I suppose you can disregard the above, as well.

You can see the style sheet here: jfweb.fastmail.fm/captured/captured.css.

mustard_seed07

04-06-2006, 06:47 AM

Thanks so much. I got everything to work except for the linking the stylesheet. So until I get that figured out I'm going to just put it in the header. I don't know what I'm doing wrong there though.

But thanks so much for doing that for me. I really appreciate it!

J to the izzosh

04-06-2006, 07:02 AM

No problem.

And linking an external stylesheet is very easy.

Just put this in your HTML file's header:
<link rel="stylesheet" type="text/css" href="stylesheet.css" />

Then, put a file named "stylesheet.css" in the same folder as your HTML file. <style> tags should not go in this file, just the CSS itself. You can name the CSS file whatever you want, just be sure to adjust the href attribute of the <link> element accordingly.

mustard_seed07

04-06-2006, 07:10 AM

Maybe I'm crazy but I can't get it to let me put the code in to change the scrollbar.

J to the izzosh

04-06-2006, 07:12 AM

Maybe you are. I can't really say, though, without being able to see how you're writing your code. ;)

mustard_seed07

04-06-2006, 07:18 AM

body {
margin:0;
background-image: url(http://www.every-word.net/fan/megan/layout1back.gif);
background-position:top left;
background-repeat:no-repeat;
scrollbar-face-color:008000;
scrollbar-shadow-color:FF8080;
scrollbar-highlight-color:FF8080;
scrollbar-3dlight-color:008000;
scrollbar-darkshadow-color:008000;
scrollbar-track-color:008000;
scrollbar-arrow-color:FFFFFF;

}

img,area,map {
border:none;
}

#navigation {
position:absolute;
top:0;
left:336px;
width:356px;
height:24px;
}

#content {
position:absolute;
top:27px;
left:339px;
width:340px;
height:360px;
margin:0;
padding:5px;
overflow:auto;
border:none;
}

p {
margin:0;
text-align:justify;
font-size:10pt;
font-color:#B0845B;
font-family: verdana;
line-height:17px;
}

J to the izzosh

04-06-2006, 07:24 AM

Loos like you just forgot the hash symbol (#) in front of your hex codes. Keep in mind that the custom scrollbar colours will only display in IE.

mustard_seed07

04-06-2006, 07:31 AM

Thanks so much for all your help! I really appreciate it!

J to the izzosh

04-06-2006, 07:53 AM

No problem. Best of luck with finishing your design.