PDA

View Full Version : CSS rule Help


Stavrom
09-10-2009, 11:00 AM
Hi guys, you have very good forum!
I am new to all web design thing. Could you please help me to understand how can i insert image to a single table using css rules? I know how to insert images using tool bar but i need to have some text under...
Thank you

Stavrom
09-10-2009, 01:35 PM
Can anybody help me please?

coloeagle
09-10-2009, 01:58 PM
Are you wanting text under the image or on top of the image?

Stavrom
09-10-2009, 03:21 PM
Thank you for reply. On top of image

Corrosive
09-10-2009, 04:05 PM
Use a div and set the image as a background in CSS. You can then put HTML text over the top of it.

Stavrom
09-10-2009, 07:53 PM
Thank you. But could you tell how can i do that steps by steps.
Thank you.

Corrosive
09-10-2009, 08:21 PM
Errrm...That's it really. Create a div in html as you would normally;

<div class="image">Your Text Here</div>

and then create a style in your style sheet

.image {background: #f00 url('image.jpg') no-repeat top center scroll;}

Of course you change these class names to suit what you want.

Stavrom
09-10-2009, 09:04 PM
Thank you. I am sory to say but i am new to css. I just can not find tutorials on this ....It is simple for you to say but it is not simple for me to understand it. If it is not dificult for you could you tell me how to do it step by step or give me a link on tutorials for dreamweaver cs4?
Thank you and sory

domedia
09-11-2009, 02:57 AM
Thank you. I am sory to say but i am new to css. I just can not find tutorials on this ....
There are thousands of CSS tutorials online :)
It is simple for you to say but it is not simple for me to understand it. If it is not dificult for you could you tell me how to do it step by step or give me a link on tutorials for dreamweaver cs4?Adobe.com has many of them. If not just use your favorite search engine.

You can also cut and paste the code that was given, or read the manual concerning CSS. You should be able to add all this code from the DW interface, but it requires that you know how to use Dreamweaver 8)

So to sum up, you can:
1. Search for tutorials
2. Copy and paste the code given to you
3. Read the manual and figure out how DW applies CSS.

It's going to take a little of work no matter which one you choose, but at least you won't have this issue the next time you try it 8)

Stavrom
09-11-2009, 03:51 PM
Thank you anyway

Stavrom
09-12-2009, 12:59 PM
Can you help me with spry menu bar....
I have castomized the spry menu bar with the colours i like with no problem. When i hove with the mouse over menu buttons they change colours but when i click and page changed it goes back to colour of down state....for examle
Contact us button is red
when i hove wth the mouse it goes white
when i click and page changed to contact us page button stays red
How can i make it stay white?
Thank you

coloeagle
09-12-2009, 01:24 PM
You will need to add the visited state to your css.
a:visited {color: #fff;}

Stavrom
09-14-2009, 03:29 PM
Thank you i have tryed to add the visited state but it is not happening. May be i am not doing something right...could you please tell me how to do it corect?
Thank you

d a v e
09-14-2009, 04:24 PM
have yo got them in this order:
a:link
a.visited
a:hover
a:active ?

otherwise post a url

Stavrom
09-14-2009, 05:00 PM
I have only added a:visited
Do i need to add all of them
I thought they allready in the sprymenu by default
Thank you i will try now

Stavrom
09-14-2009, 05:15 PM
I have only added a:visited
Do i need to add all of them
I thought they allready in the sprymenu by default
Thank you i will try now
I have tried to put all of them and still problem


#Menu tr td #MenuBar1 li a a:link {
background-image: url(../Images/Menu.png);
}
#Menu tr td #MenuBar1 li a a:visited {
background-image: url(../Images/Menu_hover.png);
}
#Menu tr td #MenuBar1 li a a:hover {
background-image: url(../Images/Menu_hover.png);
}
#Menu tr td #MenuBar1 li a a:active {
background-image: url(../Images/Menu_hover.png);

may be i need to remove default code of sprymenu if yes wich one do i need to remove

I am very new to css code
Thank you

coloeagle
09-14-2009, 11:56 PM
Do you have the page posted? Can we have a url?

Stavrom
09-15-2009, 02:48 AM
I do not have a website yet to url for you...
I have Dreamweaver CS4
Lets say i have table and i insert a standard horizontal spry menu. Under default settings there is no "a:visited" am i right? i asume you have to add it yourself. I have searched through net for tutorials and i could not find any.....Could anyone please tell me step by step how would i do that?


Change the background color of a menu item

The CSS attached to the <a> tag contains the information for a menu itemís background color. There are also several relevant background color class values attached to the <a> tag that pertain to different menu states.

http://www.dreamweaverclub.com/forum/images/dingbat.png To change the background color of a menu item, use the following table to locate the appropriate CSS rule, and then change the default value: Color to change
CSS rule for vertical or horizontal menu bar
Relevant properties and default values
Default background
ul.MenuBarVertical a, ul.MenuBarHorizontal a
background-color: #EEE;
Background color when mouse pointer moves over it
ul.MenuBarVertical a:hover, ul.MenuBarHorizontal a:hover
background-color: #33C;
Background color when in focus
ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus
background-color: #33C;
Menu Bar item color when mouse pointer moves over it
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemHover
background-color: #33C;
Submenu item color when mouse pointer moves over it
ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-color: #33C;




Menu button is white
When mouse moves over it it goes blue
When mouse moves over it and you click it and move mouse away it goes back to white but i would like it to stay blue.

Could anyone help me with that please?
Thank you
Roman

DWcourse
09-15-2009, 03:08 AM
you'll want to add a ul.MenuBarVertical a:visited style rule and it has to be below the ul.MenuBarVertical a style rule.

coloeagle
09-15-2009, 03:12 AM
Try adding the visited link info just above the hover info.

This also doesn't look right to me. Unfamiliar with everything spry does I could be wrong. There is an extra "a" ineach of the following. Try removing it (the red a), then check your page.

#Menu tr td #MenuBar1 li a a:link {
background-image: url(../Images/Menu.png);
}
#Menu tr td #MenuBar1 li a a:visited {
background-image: url(../Images/Menu_hover.png);
}
#Menu tr td #MenuBar1 li a a:hover {
background-image: url(../Images/Menu_hover.png);
}
#Menu tr td #MenuBar1 li a a:active {
background-image: url(../Images/Menu_hover.png);

DWcourse
09-15-2009, 03:21 AM
This also doesn't look right to me. Unfamiliar with everything spry does I could be wrong. There is an extra "a" ineach of the following. Try removing it (the red a), then check your page.


Good eye. No way the extra a can make sense and that doesn't look anything like Dreamwever's spry code.

Stavrom
09-15-2009, 01:23 PM
Thank you. I have tried adding "ul.MenuBarVertical a:visited" just below
"ul.MenuBarVertical a"
I have made sample pages with one link in each. I am just learning.
I will try to explain how i did add new rule...
Dreamweaver CS4
1)I clicked on to spry menu bar
2)I opened CSS Styles tab
3) I clicked on to "ul.MenuBarHorizontal a"
4) I clicked " New CSS Rule icon http://www.dreamweaverclub.com/forum/../img/css_create_new rule_icon.gif"
5) Selegtor type has 4 choicies
i go with "Compound (based on your selection) is it right???
6) Selector name
i type there "ul.MenuBarHorizontal a:visited" then i press ok
7)then in category view i choose "backround tab" and select a backround colour "blue"
8)then i select "block" in block category
9) then i press OK
And what do you think i get:confused: obviously not what i want:-D
What am i doing wrong????

This is copy of code.


@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/************************************************** *****************************
LAYOUT INFORMATION: describes box model, positioning, z-order
************************************************** *****************************/
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
background-color: #999;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
background-color: #CCC;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
background-color: #CCC;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 8.2em;
background-color: #FFF;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
background-color: #FFF;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
background-color: #FFF;
}
/************************************************** *****************************
DESIGN INFORMATION: describes color scheme, borders, fonts
************************************************** *****************************/
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
background-color: #FFF;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #FFF;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
}
ul.MenuBarVertical a:visited {
background-color: #33C;
display: block;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #33C;
color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
}
/************************************************** *****************************
SUBMENU INDICATION: styles if there is a submenu under a given menu item
************************************************** *****************************/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #900;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #C3C;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #969;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #99C;
}
/************************************************** *****************************
BROWSER HACKS: the hacks below should not be changed unless you are an expert
************************************************** *****************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
background-color: #C0C;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background-color: #99C;
}
}

DWcourse
09-15-2009, 01:31 PM
sorry, since you have a horizontal menu that obviously should have been ul.MenuBarHorizontal a:visited

Stavrom
09-15-2009, 02:20 PM
Sorry i have noticed it after and tried with horizontal and no luck.
When i open page it is in a visite state.
When you move mouse over it it is in the hover state
When you click and move mouse away pages changes and goes back to visited state but i would like it to stay in hover state . Does it make any sense???

DWcourse
09-15-2009, 02:42 PM
Visited state is for pages that you've visited. Hover state is for hovering. You can't just randomly choose what you want the background to be unless you want to customize every link on every page.

Stavrom
09-15-2009, 03:12 PM
Thank you. I think we do not understand each other obviously because of my english...
i will give you a link to web for example of what i want (nearly)
http://www.slugandlettuce.co.uk/
The "Home" menu button is of colour #542116 and the rest of buttons are #B8D3D8
and then if you click the "Find a bar" menu button it goes to #542116 and "Home" menu button goes to #B8D3D8
and so on.
How coul i do that???
Thank you

coloeagle
09-16-2009, 02:30 AM
Looking at your code you don't have a color set for the visited state.
Currently;
ul.MenuBarVertical a:visited {
background-color: #33C;
display: block;
}Add the color;

ul.MenuBarVertical a:visited {
background-color: #33C;
color:#fff;
display: block;
}

Stavrom
09-16-2009, 02:49 AM
Thank you. I think we do not understand each other obviously because of my english...
i will give you a link to web for example of what i want (nearly)
http://www.slugandlettuce.co.uk/
The "Home" menu button is of colour #542116 and the rest of buttons are #B8D3D8
and then if you click the "Find a bar" menu button it goes to #542116 and "Home" menu button goes to #B8D3D8
and so on.
How coul i do that???
Thank you

Thank you i have tried to add colour and it changes the text colour. I would like my buttons to behave the way they behave in website i gave link to.
Thank you

coloeagle
09-16-2009, 02:54 AM
OK, I think what you are after is a current page style. Set to high-lite the page you are currently viewing. Correct?

DWcourse
09-16-2009, 03:27 AM
I thought I posted this link earlier but I don't see it here: http://www.communitymx.com/content/article.cfm?cid=F1394

Stavrom
09-16-2009, 12:17 PM
OK, I think what you are after is a current page style. Set to high-lite the page you are currently viewing. Correct?
Yes right!!! That is what i am after.And becaurse i am very new to css i would step by step ...
I found some answer on net but how would i do that???

""""item would need a unique ID, so you could target it with your CSS, e.g.,

<a href="...." id="button1"
...
<a href="...." id="button2"

with this CSS -

a#button2 { your specific rules }

on the page. """

Do you understand what i mean.....

Thank you

coloeagle
09-16-2009, 02:33 PM
How are you inserting your menu into the pages?
On each page,
Dynamically,
Includes,
Template

Stavrom
09-16-2009, 04:16 PM
How are you inserting your menu into the pages?
On each page,
Dynamically,
Includes,
Template
On each page

coloeagle
09-17-2009, 02:22 PM
Since the menu is installed on each page. You can do this with css.
You will need to create a style for the current page in your style sheet.
li.current {
color:#???;
background-color:#???;
}Then add this class to the menu in the correct li spot for each page.
<li class="current"><a href="currentpage.html">Current Page</a></li>

domedia
09-17-2009, 05:25 PM
Stavrom, can you explain what you think :visited means?

As has been explained, this only applied to links going to pages that has already been visited.

MaggieMcConn
09-17-2009, 07:37 PM
Hi! I did all these but my text has a weird white bg and I can't get rid of it...

Can you help me?

here is the url: it's the note on the left side bar

http://www.indiana.edu/~animal/test/newsevents.html