I was told that I needed css help

**grd** · 04-26-2005 04:32 PM

I asked for javascript help and the person who helped me told me to come here and ask the nice people in the css forum how to improve my website.

my site: www.floralcreations.tk
he told me to get rid of the frames and tables, but I'm only 13 years old and with out tables I would have to idea what to do, can you help?

the navigation bar is meant to be at the top, the black line thing is meant to be on the bottom, I deleted all my buttons when I got the javascript bar thingy.

**tims15** · 04-26-2005 04:42 PM

If you go to www.w3schools.com there are great tutorials on CSS and loads of other stuff (HTML etc)

**grd** · 04-27-2005 12:04 AM

I'm sorry but I don't have time to read tuts, I don't really have time to make this site and I don't have time to encounter problems. I was told to come here, but I don't know what I need to do, I'm guessing I need css positioning or css table I don't know.. can you please help me.

**IconoclastDX** · 04-27-2005 01:11 AM

It looks to me that there is navigation bar on top and I dont see a "black line thing" not on the bottom or anywhere else. Im new but I responded becasue I was just in your predicament a few days ago. I had a site (built with tables) that wasnt quite working right and I thought that I was going to have rebuild it with css from the ground up. But since I didnt have the time for that all I did was rip out my flunky tabled navigation bar (left the rest of my tabled site structure cuz it worked) and put in a css bar using unorder lists. It was so easy I nearly re-did the rest of my site in css (but I didnt). Check out Listamatic's horizontal navigation for a plethora of practially cut and paste navigation.

**grd** · 04-27-2005 06:05 AM

I'm guessing I need to make css tables so I place the javasvript navigation bar in it..
IconoclastDX you made it sound so easy but I don't understand it, what do I do with it?

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

so I pleed to you to do it for me, I have some much to do and this would take a massive load off my sholders. I would do more pleeding, but I have a huge tst folio to do, a chemistry assigment, a play for english and a historical report to do for modern history.

I'll give you heapz of credit and links to your projects etc.

**Charles** · 04-27-2005 06:38 AM

Slow down.

This stuff is really easy but you do have to devote some time to getting it. It sounds like you need to not do this untill you have everything else in your life sorted out. Perhaps once the semester is over.

**NogDog** · 04-27-2005 07:56 AM

Your lucky day: I was bored, so played around with your page. I got rid of all the table stuff, the extra html, doctype, and header tags, and came up with this reasonable facsimile.

If you decide to use it, we can discuss later how to pay me.

PS: Unless the frames and pop-up stuff is being forced on you by your web host, get rid of them. They're unneeded and annoying, respectively.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-au">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>floral creations</title>

<style type="text/css">
<!-- 
body {
  background-color: white;
  color: black;
  font: medium arial, helvetica, sans-serif;
  margin: 0;
  padding: 1em;
}
div#container {
  width: 519px;
  margin: 0 auto;
  padding: 0;
}
ul#topnav {
  margin: 0;
  padding: 0;
  font-weight: bold;
  list-style: none;
}
#topnav li {
  display: inline;
  padding: 0 1em 0 0;
}
#topnav a {
  color: black;
  text-decoration: none;
}
#topnav a:hover, #topnav a:active { text-decoration: underline; }
#bar {
  font-size: 1px;
  height: 5px;
  line-height: 5px;
  margin: 5px 0;
  background-color: #cc0;
  border: solid black 1px;
}
ul#navigation {list-style:none; margin:1ex; padding:0;} 
ul#navigation li {margin:0}
#navigation a {color:#000; display:block; font-size:110%; font-weight:normal; text-decoration:none;}
ul#navigation a:hover, ul#navigation a:active {background-color: #ccc;}
#flower {
  border: none;
  margin: 0;
  float: left;
}
div#nav {
  height: 344px;
  width: 158px;
  margin: 0 0 0 auto;
  background-color: #999;
  padding: 0;
  font-size: 110%;
  border: solid black 1px;
}
#nav h2 {
  margin: 0;
  padding: 5px;
  border-bottom: solid 1px black;
  font-size: 110%;
}
-->
</style>

</head>

<body>

<div id=container>
  <ul id=topnav>
    <li><a href="put/link/here">home</a></li>
    <li><a href="put/link/here">forum</a></li>
    <li><a href="put/link/here">contact us</a></li>
    <li><a href="put/link/here">link to us</a></li>
    <li><a href="put/link/here">about us</a></li>
  </ul>
  <p id=bar></p>
  <img id=flower src="http://www.freewebs.com/floral-creations/flower.png"
  width="354" height="346">
  <div id=nav>
    <h2>navigation</h2>
    <ul id="navigation">
      <li><a href="artwork.html">artwork</a></li>
      <li><a href="order.html">order</a></li>
      <li><a href="concepts.html">concepts</a></li>
      <li><a href="tutorial.html">tutorial</a></li>
    </ul>
  </div>
  <img src="http://www.freewebs.com/floral-creations/floralcreations.png"
  width="519" height="84" style="margin-top: 2px;"></td>
</div>

</body>

</html>

**IconoclastDX** · 04-27-2005 03:56 PM

Originally Posted by NogDog

Your lucky day: I was bored, so played around with your page.

WELL! SInce you're sooo bored, let me offer my unbordem services. You can work on my delema.

**grd** · 04-28-2005 01:36 AM

NogDog I luv you, oh well back to assigments

**grd** · 04-28-2005 08:38 AM

is there a way to chang the colours.
I want to change the navigation bat to Hex={8A,91,9B}
And the Top Green Bar to Hex={B9,D7,1C}
How could I do that

**Fang** · 04-28-2005 08:55 AM

Change these:

Code:

#bar {
  font-size: 1px;
  height: 5px;
  line-height: 5px;
  margin: 5px 0;
  background-color: #B9D71C;
  border: solid black 1px;
}

div#nav {
  height: 344px;
  width: 158px;
  margin: 0 0 0 auto;
  background-color: #8A919B;
  padding: 0;
  font-size: 110%;
  border: solid black 1px;
}

and to make it look the same in IE and FF change:

Code:

#topnav a {
  color: black;
  text-decoration: none;
  border-bottom:2px solid white;
}
#topnav a:hover, #topnav a:active { border-bottom:2px solid black;}
#navigation a {color:#000; display:block; font-size:110%; font-weight:normal; text-decoration:none; width:100%;}

**grd** · 04-28-2005 09:53 AM

thanks so much

**Ness_du_Frat** · 04-29-2005 03:15 AM

BTW, nothing about css or so, I just poped up in the topic like that, to say that I like your website a lot. It's simple, very nice, and now, with the css and all, it's really fine !!!
Learn css. Take the time, and learn it. Your life will change. Mine has

Thread: I was told that I needed css help

Thread Tools

Display

I was told that I needed css help

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions