CSS Help :) [Archive] - Lissa Explains it All: Web Design Forums

View Full Version : CSS Help :)

obsideus

10-04-2003, 09:48 PM

Hi again :) I need help with my css again.. took a break :)

Ok, here is my 'navigation' that I have now ~ how do I insert this into my css?

www.geocities.com/gaizme/htmltestpage.htm

Here is my code -

<html>
<head>
<body bgcolor="#000000">
</tr>
</table>
</center>
</div>
</td>
<td width="1" bgcolor="#FFFFFF"></td>
<td width="129" valign="top">
<div align="right">
<table border="0" cellpadding="0" cellspacing="0" width="95%" height="95%">
<tr>
<td width="100%" valign="top"><u><b><font color="#FFFFFF" face="Arial" size="4">Navigation</font></b></u>
<font color="#FFFFFF" size="1" face="Arial">
<br>Main
<br><a href="gaybible.html">Bible</a>
<br><a href="gaymarriage.html">Marriage</a>
<br><a href="gayanimals.html">Animals</a>
<br><a href="aboutme.html">About Me</a>
<br><a href="emailme.html">Contact Me</a>
<br><a href="mediaresources.html">Media</a>
<br><a href="http://us.z.webhosting.yahoo.com/gb/sign?member=gaizme">Sign Guestbook</a>
<br><a href="http://us.z.webhosting.yahoo.com/gb/view?member=gaizme">View Guestbook</a></font></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>

</body>
</html>

--

Also, the links are blue and purple, how do I make them White? Thanks!

MaGiCSuN

10-04-2003, 10:10 PM

:) you don't insert links in your css. The content is just in html, in normal html. The colours, styles, text-decorations, borders however could all be in CSS.

to make the links white use this:

<style type="text/css">

</style>

or you can just place the A: parts in your css file or part between the <head> and </head> (if you alrleady got that <style> codes in there)

Love,
Mirna

Lissa

10-04-2003, 10:12 PM

I fixed your code:

<html>
<head>
<title>Your title here</title>
<style type="text/css">

:link
{ text-decoration: none; color:#ffffff}
:visited
{ text-decoration: none; color:#ffffff}
:active
{ text-decoration: none; color:#ffffff}

body {
font-family: arial, serif;
font-size: 10pt;
color: #000000;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
background: #000000;
}

#menu {
position: absolute;
left: 5px;
padding: 0px;
width: 150px;
background: #000000;
}

#content {

margin-left: 200px;
padding: 0px;
margin-right: 15px;
background: #000000;
}

</style>
</head>
<body>

<div id="menu">



<br>Main
<br><a href="gaybible.html">Bible</a>
<br><a href="gaymarriage.html">Marriage</a>
<br><a href="gayanimals.html">Animals</a>
<br><a href="aboutme.html">About Me</a>
<br><a href="emailme.html">Contact Me</a>
<br><a href="mediaresources.html">Media</a>
<br><a href="http://us.z.webhosting.yahoo.com/gb/sign?member=gaizme">Sign Guestbook</a>
<br><a href="http://us.z.webhosting.yahoo.com/gb/view?member=gaizme">View Guestbook</a>


</div>
<div id="content">




</div>

</body>
</html>

You might want to take a look at this:

http://www.lissaexplains.com/css3.shtml

and this:

http://www.lissaexplains.com/tester2.shtml

obsideus

10-04-2003, 10:14 PM

wow it's lissa :o For the past month I was wondering if you even existed ! wow.. thanks :)

Lissa

10-04-2003, 10:23 PM

No problem =)

obsideus

10-04-2003, 10:31 PM

Uh oh, new problem - www.geocities.com/gaizme/htmltestpage.htm

What did I do? I can't get it to the 'right' of the page :(

Here is my code, it's crap I guess ~

<html>
<head>
<style type="text/css">
body
{
scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #000000;
}
</style>
<title>Gaizme</title>
<style type="text/css">
a:link {
text-decoration: none; color: #ffffff; }
a:visited {
text-decoration: none; color: #ffffff; }
a:hover {
text-decoration: overline underline; color: #FF00FF; }

.item {
font-weight: bold; }

#menu {
position: absolute;
top: 0px;
left: 0px;
padding: 5px;
width: 200px;
background-color: #000000;
font-family: arial, sans-serif;
font-size: 10pt;
color: #FFFFFF; }

#content {
margin-left: 215px;
margin-right: 0px;
padding: 5px;
background-color: #000000;
font-family: arial, sans-serif;
font-size: 10pt;
color: #FFFFFF; }

body {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;

background: #000000;
background-image: url(divider.gif);
background-repeat: repeat-y;
background-position: 0px 0px;
background-attachment: scroll;

scrollbar-face-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #000000; }

</style></head>
<body>

<div id="menu">
<font color="#FFFFFF" size="1" face="Arial">
<br>Main
<br><a href="gaybible.html">Bible</a>
<br><a href="gaymarriage.html">Marriage</a>
<br><a href="gayanimals.html">Animals</a>
<br><a href="aboutme.html">About Me</a>
<br><a href="emailme.html">Contact Me</a>
<br><a href="mediaresources.html">Media</a>
<br><a href="http://us.z.webhosting.yahoo.com/gb/sign?member=gaizme">Sign Guestbook</a>
<br><a href="http://us.z.webhosting.yahoo.com/gb/view?member=gaizme">View Guestbook</a>
</font>
<div id="line"> </div>

<div id="content">
<div align="right">
<font color="#FFFFFF" size="1" face="Arial">
Welcome to the new Gaizme! I swear, I am almost to the point of pulling my hair out after this :) Thank you for visiting my site, and I hope you continue to find use of the resources that I put up for you! Have a nice week-end!

</body>
</html>

Lissa

10-04-2003, 10:39 PM

Take a look at my code...don't change anything. Put your stuff in between the tags I included up there.

<div id="content">
<div align="right">
<font color="#FFFFFF" size="1" face="Arial">
Welcome to the new Gaizme! I swear, I am almost to the point of pulling my hair out after this :) Thank you for visiting my site, and I hope you continue to find use of the resources that I put up for you! Have a nice week-end!
</div>
</body>
</html>

You missed the /tag in bold.

Start over with the code I posted above, I fixed a few things.

And check out my test page.

obsideus

10-04-2003, 10:40 PM

oops ! im an idiot i don't notice things like that :( thanks again lissa :)

obsideus

10-04-2003, 10:51 PM

Thank you lissa I did :)

obsideus

10-04-2003, 11:35 PM

How do I make the text go in the 'middle' of the page, I.E. it's in the complete center/center-right or something like that?

MaGiCSuN

10-05-2003, 10:14 AM

add to the #content {} part in your css coding this:

text-align: center;

also make sure you close your <font> tag right before </div> with an </font> tag :)

Love,
Mirna

obsideus

10-05-2003, 04:48 PM

How would I get a line like this

http://pure-evilness.com/buffy/index2.php?x=main.htm
around my 'navigation' thingie?

MaGiCSuN

10-05-2003, 05:10 PM

that line is a cell in the table coding. You can get this effect too with a div:

<div style="background-color: #ffffff; width: 1px;"></div>

then you could also set height: 100%; in the code and absolute position it on the place where you want it

Love,
mirna

obsideus

10-05-2003, 05:52 PM

absolute positioning? *confused*

MaGiCSuN

10-05-2003, 06:15 PM

<div style="background-color: #ffffff; width: 1px; position: absolute; top: #px; left: #px;"></div>

but since you have no idea what i am talking about i would say make a table with several cells in it, and then add to one cell this:

bgcolor="#ffffff" width="1"

so you would add this to the <td> tag of that cell you want the line to be

Love,
Mirna

obsideus

10-05-2003, 06:16 PM

lol ~ is absolute positioning in lissa's site? I didn't see it :|

Oh, and on my site
www.geocities.com/gaizme/main.html

How would I go about making it so you can like 'minimize' the links below 'Navigation' and 'Links' ? If you can understand that :)

** you can use the edit button for editing message within 5 minutes **

MaGiCSuN

10-05-2003, 06:18 PM

yeah it is:

http://www.lissaexplains.com/html7.shtml

Love,
Mirna

obsideus

10-05-2003, 06:30 PM

I never noticed the edit button :O

hmm, I'm not exactly good at tables, im not good at anything :( *sigh* how exactly would you know the absolute positioning on your page? By just entering some numbers and previewing it? or ..

what would be wrong with this :)

<div style="background-color: #ffffff; width: 1px; position: absolute; height: 600%; top: 20; left: 150; "></div>

MaGiCSuN

10-05-2003, 06:33 PM

<div style="background-color: #ffffff; width: 1px; position: absolute; height: 600%; top: 20; left: 150; "></div>

should be:

<div style="background-color: #ffffff; width: 1px; position: absolute; height: 100%; top: 20; left: 150; "></div>

100% is the maximum. There is no such thing as 600% with webdesign :) it's always 100% is the maximum. just like with frames, you always have to have 100 together from the sizes of the frames.

there's nothing else wrong with it :) your code is just fine :)

Love,
Mirna

obsideus

10-05-2003, 06:36 PM

www.geocities.com/gaizme/htmltestpage6.htm

That lil tinsy bitty white line is all I get from that

Heres my entire code thingie~
<html>
<head>
<title>Gaizme</title>
<style type="text/css">

:link
{ text-decoration: none; color:#ffffff}
:visited
{ text-decoration: none; color:#ffffff}
:active
{ text-decoration: none; color:#ffffff}
:hover {
text-decoration: overline underline; color: #FF00FF; }

body {
font-family: arial, serif;
font-size: 10pt;
color: #000000;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
background: #000000;
}

#menu {
position: absolute;
left: 5px;
padding: 0px;
width: 150px;
background: #000000;
}

#content {

margin-left: 200px;
padding: 0px;
margin-right: 15px;
background: #000000;
}

</style>
</head>
<body>

<div id="menu">
<div style="background-color: #ffffff; width: 1px; position: absolute; height: 100%; top: 20; left: 150; "></div>

<font color="#00FF00" size="2" face="Arial">
<br>Navigation
</font>
<font color="#FFFFFF" size="1" face="Arial">
<br><a href="main.html">Main</a>
<br><a href="bible.html">Bible</a>
<br><a href="sermon.html">Sermon</a>
<br><a href="marriage.html">Marriage</a>
<br><a href="animals.html">Animals</a>
<br><a href="media.html">Media</a>
<br>Poetry
<br><a href="about.html">About Me</a>
<br><a href="contact.html">Contact Me</a>
<br><a href="http://us.z.webhosting.yahoo.com/gb/sign?member=gaizme">Sign Guestbook</a>
<br><a href="http://us.z.webhosting.yahoo.com/gb/view?member=gaizme">View Guestbook</a>
<br>
<font color="#00FF00" size="2" face="Arial">
<br>Links
</font>
<font color="#FFFFFF" size="1" face="Arial">
<br><a href="http://mogenic.com/index.asp">Mogenic</a>
<br><a href="http://www.xy.com/">XY</a>
<br><a href="http://www.bidstrup.com/cooldat.htm">Teen Support</a>
<br><a href="http://www.whosoever.org/index.shtml">Whosoever</a>
<br><a href="http://www.religioustolerance.org/hom_bmar.htm>Religious Tolerance</a>
<br><a href="http://www.hrc.org/publications/exgay_ministries/change.asp">Mission Impossible</a>
<br><a href="http://www.gayteens.org/714/modules.php?op=modload&name=News&file=article&sid=532&mode=thread&order=0&thold=0">Ex-Gay</a>
<br>
<font color="00FF00" size="2" face="Arial">
<br>Poems and Other Things
<br>

</div>

<div id="content">


<CENTER><ILAYER id="ad1" visibility="hidden" height=60></ILAYER>
<NOLAYER>
<IFRAME SRC="http://www.queerexchange.com/work.php?ID=gaizme" width=468 height=60 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling="no"></IFRAME>
</NOLAYER>
</CENTER>
<layer src="http://www.queerexchange.com/work.php?ID=gaizme" visibility=hidden id="a1" width=468 onload="moveToAbsolute(ad1.pageX,ad1.pageY); a1.clip.height=60;visibility='show';"></layer>

<font color="#00FF00" size="4" face="Arial">
<div align="center">
<p>Under Construction
</font>
<font color="#FFFFFF" size="2" face="Arial">
<div style=" position:absolute;left:258;top:255;width:500;heigh t:150;">
<div align="center">

</div>

</div>

</body>
</html>

MaGiCSuN

10-05-2003, 06:42 PM

in red is what i have added, in bold is what you have to change:

<html>
<head>
<title>Gaizme</title>
<style type="text/css">

A:link
{ text-decoration: none; color:#ffffff}
A:visited
{ text-decoration: none; color:#ffffff}
A:active
{ text-decoration: none; color:#ffffff}
A:hover {
text-decoration: overline underline; color: #FF00FF; }

body {
font-family: arial, serif;
font-size: 10pt;
color: #000000;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
background-color: #000000;
}

#menu {
position: absolute;
left: 5px;
padding: 0px;
width: 150px;
background-color: #000000;
}

#content {

margin-left: 200px;
padding: 0px;
margin-right: 15px;
background-color: #000000;
}

</style>
</head>
<body>

<div id="menu">
<div style="background-color: #ffffff; width: 1px; position: absolute; height: 100%; top: 20; left: 150; "></div>

<font color="#00FF00" size="2" face="Arial">
<br>Navigation
</font>
<font color="#FFFFFF" size="1" face="Arial">
<br><a href="main.html">Main</a>
<br><a href="bible.html">Bible</a>
<br><a href="sermon.html">Sermon</a>
<br><a href="marriage.html">Marriage</a>
<br><a href="animals.html">Animals</a>
<br><a href="media.html">Media</a>
<br>Poetry
<br><a href="about.html">About Me</a>
<br><a href="contact.html">Contact Me</a>
<br><a href="http://us.z.webhosting.yahoo.com/gb/sign?member=gaizme">Sign Guestbook</a>
<br><a href="http://us.z.webhosting.yahoo.com/gb/view?member=gaizme">View Guestbook</a></font>
<br>
<font color="#00FF00" size="2" face="Arial">
<br>Links
</font>
<font color="#FFFFFF" size="1" face="Arial">
<br><a href="http://mogenic.com/index.asp">Mogenic</a>
<br><a href="http://www.xy.com/">XY</a>
<br><a href="http://www.bidstrup.com/cooldat.htm">Teen Support</a>
<br><a href="http://www.whosoever.org/index.shtml">Whosoever</a>
<br><a href="http://www.religioustolerance.org/hom_bmar.htm>Religious Tolerance</a>
<br><a href="http://www.hrc.org/publications/exgay_ministries/change.asp">Mission Impossible</a>
<br><a href="http://www.gayteens.org/714/modules.php?op=modload&name=News&file=article&sid=532&mode=thread&order=0&thold=0">Ex-Gay</a></font>
<br>
<font color="00FF00" size="2" face="Arial">
<br>Poems and Other Things
<br></font>

</div>

<div id="content">



<CENTER><ILAYER id="ad1" visibility="hidden" height=60></ILAYER>
<NOLAYER>
<IFRAME SRC="http://www.queerexchange.com/work.php?ID=gaizme" width=468 height=60 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling="no"></IFRAME>
</NOLAYER>
</CENTER>
<layer src="http://www.queerexchange.com/work.php?ID=gaizme" visibility=hidden id="a1" width=468 onload="moveToAbsolute(ad1.pageX,ad1.pageY); a1.clip. height=60;visibility='sho
w';"></layer>

<font color="#00FF00" size="4" face="Arial">
<div align="center">
<p>Under Construction
</font>
<font color="#FFFFFF" size="2" face="Arial">
<div style=" position:absolute;left:25
8;top:255;width:500;heigh
t:150;">
<div align="center">

</div>


</div>

</body>
</html>

the last bold part is a part i don't understand. You also forgot one </div> (right after <div align="center">) but still it has no 'function' in the layout itself.. or it does but then i don't understand the function lol

love,
Mirna

obsideus

10-05-2003, 06:45 PM

heh~ well I was deleting stuff and such so I had old stuff stuck over~

gonna test it~

~Tested it, but the line is still like reeeeally small :p why would that be? ~

MaGiCSuN

10-05-2003, 06:56 PM

small in width or height?

obsideus

10-05-2003, 06:56 PM

height
~she shoudl set up a chat room would be like much easier, especially when two people are online at the same time :p

~~It's only about | long *shrug*

MaGiCSuN

10-05-2003, 07:02 PM

try adding this to it:

& n b s p ;<br>
& n b s p ;<br>
& n b s p ;<br>
& n b s p ;<br>
& n b s p ;<br>
& n b s p ;<br>
& n b s p ;<br>

so between the <div> and </div> and then also take out the spaces, because its the code for a space and if i type it as it's normal code i get a space too on this forum. So that's why :)

edit: i wouldn't know any other way to make this, besides tables and divs, so if anybody knows any please reply lol :)

Love,
Mirna

obsideus

10-05-2003, 07:05 PM

What does
& n b s p ;<br>
& n b s p ;<br>
& n b s p ;<br>
& n b s p ;<br>
& n b s p ;<br>
& n b s p ;<br>
& n b s p ;<br>

do?

~Ok, it works if I like 'spam' it with <br> :p And I'll settle for an ugly looking code if it works teehee~

~~Now how would I get it to go across horizontally?

MaGiCSuN

10-05-2003, 07:25 PM

& n b s p; is a code for space, so basically it does nothing 'viewable' but it just makes some content in the div so that it will become longer in height :) it's just some 'invisible' content.
-----

that's easy

same code but a little differnet 'content' in it:\

<div style="background-color: #ffffff; width: 100%; position: absolute; height: 1px; top: 20; left: 150;">& n b sp;& n b sp;& n b sp;& n b sp;& n b sp;& n b sp;</div>

try that, and offcourse take out the spacings between the letters from & n b sp;

Love,
Mirna

obsideus

10-05-2003, 07:31 PM

www.geocities.com/gaizme/htmltestpage.htm

~It's like a small white block now :(

~~Figured out something much neater~ I used a pixel value instead of 100% and such :p

~~~I still need to know how to cross it off horizontally on the bottom :)

MaGiCSuN

10-05-2003, 07:36 PM

that page has still all the old coding on it :) so i don't see anything new on it i'm afraid...

Love,
Mirna

obsideus

10-05-2003, 07:55 PM

~just need to figure out how to close it off horizontally now