cancel
Showing results for 
Search instead for 
Did you mean: 

so i am trying to add tabs under my menu, but im having css problems

so i am trying to add tabs under my menu, but im having css problems

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 &raquo;</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

2 REPLIES

Re: so i am trying to add tabs under my menu, but im having css problems

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/

 

Re: so i am trying to add tabs under my menu, but im having css problems

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