Thu, 2014-01-23 09:38
Hello there, I am almost completly new to CSS and want to get some problems solved as quick as possible.
I'm a graphicer, designing a webshop with graphics and so on, we are currently using a platform to host our webshop and it has some easy feauters such as: Upload file/image, Create new page with articles, upload price and much more. Well my point is that this platform gets most of the job done.
However I have created a navigation bar on this platform and now I want a clean hover and marked function for it.
The navbar is located in this section:
Since the navbar already is completed by the platforms feautes this is what I want:
- When I hover the coursor over the navbar I want it to repeat an image ( 2px W 49px H )horisontally.
- When it's clicked and I'm on the page that the button relate to I want another picture
( same size as above )to be repeated for as long as I am on that page.
- I want a background image to be at the same position/the same size no matter how big the screen/window is and so.
*I want it to be cross browser so it looks the same on each browser.
The webshop is built like this:
-Header.
-Navbar.
-Content area.
-Footer.
This is my options when it comes to css:
+ I can upload external CSS
+ The webshop already has some csscodings in a css section:
looks like this:
td.listLine { border-bottom: 1px solid #CACDCF; } .footerlinks a:link, .footerlinks a:active, .footerlinks a:visited { color: #ffffff; text-decoration: none; } .footerlinks a:hover { color: #FF0035; }
<!DOCTYPE html> <html> <head> <style> body { background-image:url('paper.gif'); background-color:#cccccc; } </style> </head>
div#lowerField { border-radius: 12px 12px 12px 12px; margin-bottom: 20px; color: #FFFFFF; padding 26px 20px 10px; } div#contentArea { background-color: #ffffff; } td.topnavcell { padding: 0px; height:29px; }
P.S I consider the one who helps me with this as a god!
Thu, 2014-01-23 19:50
#1
Hi FabianOlsson, Can you link
Hi FabianOlsson,
Can you link to what you have so far?