Guys i need some help
I added my css to "styles.css" but it clashes with the exising css in the style.css
it clashes with
* { margin:0; padding:0; } html { font-size:16px; /* Fix for Opera */ } body { font:75%/150% Arial, Helvetica, sans-serif; background-color:#fff; color:#333; text-align:center; }
i discovered this by putting the existing css in dreamweaver with the html.
the css i want to add
#headline_bar_container_top{ width:100%; height:35px; /*width: 1024px; margin: 0px auto 0px auto;*/ } .headline_bar_strip_top{ float: left; width: 100%; background: transparent url(/website/home/container_shadow.png) center bottom no-repeat; height:59px; } .headline_bar_top_new, .headline_bar_top_new ul { width: 1024px; margin: 10px auto 0px auto; border: solid 0px #787878; font-family: 'Georgia'; } .headline_bar_top_new ul li{ list-style: none; text-transform: uppercase; font-family: 'Georgia'; font-weight:bold; font-size: 13px; color: #000; /*padding: 0px 5px 0px 10px;*/ padding: 0px 25px 0px 25px; text-align:center; display: inline-block; border-right: #808080 solid 1px; } .headline_bar_top_new ul li a{ margin: 0; float: left; list-style: none; text-decoration:none; text-transform: uppercase; font-family: 'Georgia'; font-size: 12px; color: #000; padding: 0px 10px 0px 10px; text-align:center; display: inline-block; } .headline_bar_top_new ul li a:hover{ margin: 0; float: left; list-style: none; text-transform: uppercase; font-family: 'Georgia'; font-size: 12px; color: #808080; text-decoration:underline; padding: 0px 10px 0px 10px; text-align:center; display: inline-block; }
html
<DIV id="headline_bar_container_top"> <div class="headline_bar_strip_top"> <div class="headline_bar_top_new"> <ul> <li><div id="freeuk_del"><a href="/Shipping-Info">FREE NEXT DAY UK DELIVERY<br><span style="text-decoration:none;font-size:10px;"> ON ALL ORDERS PLACED BEFORE 12:00 PM *</span></a></div></li> <li><div id="europe_300"><a href="/Shipping-Info">FREE DELIVERY TO EUROPE <br><span style="text-decoration:none;font-size:10px;">ON ORDERS OVER £300</span></a></div></li> <li style="border:none;"><div id="sale"><a href="/offers" style="color:#f00;">SALE UP TO 70% OFF <br><span style="text-decoration:none;font-size:10px;">ON SELECTED STYLES - SHOP NOW »</span></a></div></li> </ul> </div> </div> </DIV>
I want it to work on all the pages on the site, I've added the html in a static block, and put that in a widget
Please help!!! I'm new and trying to learn
First of all what do you mean by, "it clashes with the existing css in the style.css"? I'm assuing you know about the fundmentals of CSS overriding? There is also file overriding (called inheritance) in Magento. Is style.css a custom CSS file unique to you or are you cludging in your own customized CSS in style.css. It's best to keep all you custom CSS in your own separate file. Here's a few links that may help you find a solution:
http://magento.stackexchange.com/questions/12150/overwriting-a-css-style
http://theintegrationengineer.com/magento-how-to-modify-a-theme-and-stay-sane/
http://www.coderblog.de/magento-1-9-infinite-theme-inheritance-child-css-not-rendered-last/
I have no idea about css
I'm learning at the same time
Think i need to learn the basics 1st
thanks for the links, ill h ave a look hopfully something can help me understand