newbie: need help with this css/html

J

Jeff

Hey

Here is my html/css code. I got 2 problems with it:
A) The <ul> doesn't align It doesn't align to the left, it's placed I guess
it's about 20 - 60 pixels to the right for the left margin. But I want this
<ul> block to align with the left margin - > i don't want this open space
between the left margin and the <ul>

B) The code in menu css is taken from an example on the internet... In the
example it uses these 2 css blocks to change the setting of the link the
mouse is hovering over:
#navigation a:hover
#navigation a:hover
But instead of a hovering effect I want to convert this css block to be show
the current selected item in the ul block. I mean if u could show me how to
embedd this css block in the html code, then I can do the rest... The actual
page will be genereated using php, so in php I use a if-test... if selected
then do this, if not selected to that....

I tryed using this html/css (the css blocks here are just the same css
blocks as mentioned above, but they have been renamed)... what I've done in
this code below isn't working, this item in the list isn't shown with a
different color than the other items...
<li><a class="selL" href="#"><span class="selR">TEST 1</span></a></li>
#selL
{
color: #fff;
background: #781351 url(../left-tab-hover.gif) left top no-repeat;
padding-left: 10px
}

/*#navigation a:hover span*/
#selR
{
background:url(../right-tab-hover.gif) right top no-repeat;
padding-right: 10px
}

Please if u see what I'm doing wrong, then please tell me what I should do
to solve this 2 problems..

*****************************************************************
Here is my files, index.php, menu.css and general.css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST</title>
<link href='css/general.css' rel='stylesheet' type='text/css' />
<link href='css/menu.css' rel='stylesheet' type='text/css' />
</head>

<body>
<table width="100%" border="0">
<tr >
<td align="left" bgcolor="#00FFFF">
<ul id="navigation">
<li><a href="#"><span>TEST 1</span></a></li>
<li><a href="#"><span>TEST 2</span></a></li>
<li><a href="#"><span>TEST 3</span></a></li>
<li><a href="#"><span>TEST 4</span></a></li>
<li><a href="#"><span>TEST 5</span></a></li>
<li><a href="#"><span>TEST 6</span></a></li>
<li><a href="#"><span>TEST 7</span></a></li>
<li><a href="#"><span>TEST 8</span></a></li>
</ul>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0">
<tr>
<td width="200">&nbsp;</td>
<td>&nbsp;</td>
<td width="200">&nbsp;</td>
</tr>
</table>

</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>



</body>
</html>



*********************************************************
menu.css:
#navigation a
{
color: #000;
/*background: #ffa20c url(left-tab.gif) left top no-repeat;*/
background: #eeeecc url(../left-tab.gif) left top no-repeat;
text-decoration: none;
padding-left: 10px
}

#navigation a span
{
background: url(../right-tab.gif) right top no-repeat;
padding-right: 10px
}

#navigation a, #navigation a span
{
display: block;
float: left
}

/* Hide from IE5-Mac \*/
#navigation a, #navigation a span
{
float: none
}
/* End hide */

#navigation a:hover
{
color: #fff;
background: #781351 url(../left-tab-hover.gif) left top no-repeat;
padding-left: 10px
}

#navigation a:hover span
{
background:url(../right-tab-hover.gif) right top no-repeat;
padding-right: 10px
}

#navigation ul
{
list-style: none;
padding: 0;
margin: 0;
}

#navigation li
{
float: left;
margin: 0;

} /* CSS Document */
*******************************************************
general.css:
body {
background-color:#FFFFFF;
}

a:link {
text-decoration:none;
}
 
P

Philip

Jeff said:
Hey

Here is my html/css code. I got 2 problems with it:
A) The <ul> doesn't align It doesn't align to the left, it's placed I guess
it's about 20 - 60 pixels to the right for the left margin. But I want this
<ul> block to align with the left margin - > i don't want this open space
between the left margin and the <ul>
Click to expand...

Hi Jeff,
What purpose does the table serve? How about removing the table from
around the UL and then setting this style:
<style>
ul#navigation { margin-left: 0px; padding-left: 0px; }
B) The code in menu css is taken from an example on the internet... In the
example it uses these 2 css blocks to change the setting of the link the
mouse is hovering over:
#navigation a:hover
#navigation a:hover
But instead of a hovering effect I want to convert this css block to be show
the current selected item in the ul block. I mean if u could show me how to
embedd this css block in the html code, then I can do the rest... The actual
page will be genereated using php, so in php I use a if-test... if selected
then do this, if not selected to that....
Click to expand...

So let me get this straight: the UL is a navigation menu, and if the
user clicks on, say, item #6, she'll be directed to a page with this
same navigation menu on it but item #6 should look different from the
others. Is that correct? Why not have a style like so:
#CurrentlySelectedMenuItem { font-weight: bold; }

Then use PHP to build your UL and give the 6th LI an
id="CurrentlySelectedMenuItem".

Make sense? Did I understand correctly what you want?
 
J

Jeff

This link shows the example with a hovering effect on the link the mouse is
hovering over!
http://home.online.no/~au-holme/pub/66202/index.php

this link http://home.online.no/~au-holme/pub/66303/index.php embed the
changes I did to the css/html:
<li><a class="selL" href="#"><span class="selR">TEST 1</span></a></li>
#selL
{
color: #fff;
background: #781351 url(../left-tab-hover.gif) left top no-repeat;
padding-left: 10px
}

/*#navigation a:hover span*/
#selR
{
background:url(../right-tab-hover.gif) right top no-repeat;
padding-right: 10px
}


As you my suggestion don't have a hovering effect when the mouse is hovering
over a link. That's fine. BUT I want the "TEST 2" to have a different
background color than the other items... that's why I tryed the css/html
code above.. But this could isn't working....

The green layer you see is just to illustrate the size of the table cell,
you can see that the <ul> block isn't fully aligned to the left... this is
something I'm having problem with also....

Any suggestions to these 2 problems are greatly appreaciated!

Jeff
 
J

Jeff

Then use PHP to build your UL and give the 6th LI an
id="CurrentlySelectedMenuItem".

But I uses 2 css blocks to set the background color of the link, because the
background has rounded corners. Each css block uses it's own .gif file...
(left-tab.gif and right-tab.gif). I don't think I can set these 2 images
using just 1 css block.
 
P

Philip

But I uses 2 css blocks to set the background color of the link, because the
background has rounded corners. Each css block uses it's own .gif file...
(left-tab.gif and right-tab.gif). I don't think I can set these 2 images
using just 1 css block.
Click to expand...

Correct me if I'm wrong, but your question is "How do I put rounded
corners on an element?"

BTW your reply to me was difficult to read because it was not properly
quoted and was top-posted. You're more likely to get help if you make it
easy for others to read what you write.
 
J

Jeff

Yes your suggestion with bold text works, it can show the selected item...

However I also if possible would like to know how to set the backgrund color
of the selected menu item...
 
J

Jeff

Hey, thanks for responding to my thread!

You wrote this in your previous post:
"Correct me if I'm wrong, but your question is "How do I put rounded
corners on an element?" "

That is almost correct, in addition to setting the rounded corners
(represented as 2 .gif files) I also want the background of the element to
have the same color as the .gif files. take a look at this link:
http://home.online.no/~au-holme/pub/66202/index.php (this link is a copy of
what I've done so far, it uses the code I posted in my first post in this
thread ). At that link you see that when you are hovering the mouse over a
item ("TEST 2" for example) the backgrund of the element changes color. But
instead of showing a different color when hovering, I want the selected item
to have a different background color (needs to set background-color +
replace those to .gif files with .gif files with a different color)

The select item is this:
When the user clicks on one of the item the page is directed to the same
page but with some other GET parameters. In my php code I use $_GET to
obtain the selected item value and then I use that value to set the
background color (including using different .gif files) on that specific
list item... - if for example selected value is 4, then it means that it's
on list item #4 I have to set a different background color on, compared to
those other list items....

clear?

Best Regards!

Jeff
 
S

Sid Ismail

On Mon, 19 Jun 2006 22:26:11 +0200, "Jeff"

: Hey, thanks for responding to my thread!


And... he continues to top post....

Sid
 
B

Beauregard T. Shagnasty

Jeff said:
what do you mean with "top post"? <-- this is at the top
Click to expand...

This is at the bottom. <-- start typing here

The best way to post is inline - interleaved - when you are replying to
more than one point.

http://oakroadsystems.com/genl/unice.htm#upside

open the front cover and begin reading there?
the back cover and end up at the front or do you
chapter one or do you start somewhere near
When reading a book, do you start at
 
P

Philip

..

That is almost correct, in addition to setting the rounded corners
(represented as 2 .gif files) I also want the background of the element to
have the same color as the .gif files. take a look at this link:
http://home.online.no/~au-holme/pub/66202/index.php (this link is a copy of
what I've done so far, it uses the code I posted in my first post in this
thread ). At that link you see that when you are hovering the mouse over a
item ("TEST 2" for example) the backgrund of the element changes color. But
instead of showing a different color when hovering, I want the selected item
to have a different background color (needs to set background-color +
replace those to .gif files with .gif files with a different color)

The select item is this:
When the user clicks on one of the item the page is directed to the same
page but with some other GET parameters. In my php code I use $_GET to
obtain the selected item value and then I use that value to set the
background color (including using different .gif files) on that specific
list item... - if for example selected value is 4, then it means that it's
on list item #4 I have to set a different background color on, compared to
those other list items....
Click to expand...

I think my other message about background-color in this thread tells you
what you need to know.


HTH
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I need help fixing my website 2
Working on mobile css menu with plenty of frustration! 2
Need help with code on website (noob) 2
Horizontal menu bar header 2
Interfering CSS 1
Not sure why drop-down is not working. 2
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Buttons lining up 1

Members online

Total: 62 (members: 3, guests: 59)
Robots: 289

Forum statistics

Threads
473,995
Messages
2,570,228
Members
46,818
Latest member
SapanaCarpetStudio

Latest Threads

Top