Essentially i have a pricing table with the class of .priceblock, and i have a border-bottom on my <li> tags, i simply want it to change color when i hover on the priceblock. The code to me seems correct but nothing changes.
Heres the initial li tag:
ul.pricingtable .priceblock .contents li {
font-family: 'OpenSans';
font-size: 13px;
width: 81.904762%;
height: 35px;
margin:0 auto;
padding: 10px 0;
border-bottom: 1px solid rgba(221,221,221,1);
}
And here hover state css code, this hover class works for he coloring of texts, but i can't change the border color.
.priceblock:hover .contents li {
border-color: rgba(255,117,109,1);
}
Any ideas?
I think you might need to change the hover state from.
.priceblock:hover .contents li {
border-color: rgba(255,117,109,1);
}
To:
.contents li:hover {
border-bottom: 1px solid rgba(255,117,109,1);
}
HTML may be able to read it better.
The css attributes need to be equals.
for example:
If in the first style block you write "ul.pricingtable" then you need to do that in the second block two.
And in the content of block, they need to be same.
for example:
border-bottom: 1px solid rgba(221,221,221,1);
and
border-bottom: 1px solid rgba(255,117,109,1);
You cann'ot use once with "border-bottom" and then with "border-color" only...
Related
So I want to try to do this in html and css but I can't seem to find anything. I only way I can think is by importing the text as an image but that will look bad. P.S Light blue line is for centering as I am designing the site in Photoshop first
<p class="test">
Conact Me
</p>
.test {
border-top-style: solid;
border-bottom-style: solid;
border-bottom-width: 1px;
}
A simple solution is using text-decoration: underline overline;.
p {
text-decoration: overline underline;
}
<p>
CONTACT ME
</p>
You can use border-top in css to create a line above text.
.mytextbox {
border-top: 1px solid #ff0000;
}
border-top property
Example of use
Try using borders to achieve the look you are wanting:
a.my-class {
display: inline-block;
padding: 5px 15px;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
line-height: 1em;
text-decoration: none;
}
Well, you'd want to have the text element within a div, set the bg color property of the div to the color you're going for, and then set margins for the text element to push off the text by ~10px or so (looks like that's about where it's at in your mock up). From there you can set a border to only top, and bottom and style accordingly.
You can put the text inside a block level element and apply a top and bottom border. Advantage of this method against the text-decoration: underline overline; is, that you can simply define the space between text and lines with padding as you need it.
To make the width as long as the text is, just use display: inline-block;.
body {
background: #5cc8f6;
}
div {
display: inline-block;
padding: .5em;
border-top: 1px solid white;
border-bottom: 1px solid white;
color: white;
text-transform: uppercase;
font-family: Verdana;
font-size: 2em;
}
<div>Contact me</div>
I'm attempting to style my navigation menu design to reflect the one on timeanddate.com, as seen in this image:
To create the colors, they're using a simple bottom and left border in CSS.
I'm attempting to add a border to my <li> tags on my website sandbox, http://www.escapetech.com:8080.
I'm using the following CSS:
.anylinkcss li {
list-style-type: none;
}
.participate li {
list-style-type: square;
border-left-color: #fa514d;
}
#navigation_bar {
height: 31px;
list-style: none;
width: 1000px;
margin-top: 15px;
}
#navigation_bar li {
float: left;
padding-right: 35px;
padding-left: 10px;
margin: auto 0px;
vertical-align: middle;
}
#anylinkmenu3, #anylinkmenu4, #anylinkmenu5, #anylinkmenu6, #anylinkmenu7 {
position: absolute;
line-height: 18px;
z-index: 20;
background-color: #000;
text-align:left;
visibility: hidden;
left: 421px;
top:207px;
padding: 7px;
padding-left: 25px;
}
The #anylinkcss3 and further represent styles for the drop downs, while the #navigation_bar styles are for the whole bar. No matter where I add any border styles, none appear, even after I comment out all CSS code and just include a border on these IDs and classes.
My current menu is live at the link I posted above, I would greatly appreciate if someone could take a look and let me know why there may be any issues with borders appearing. This is my first Stack Exchange post so I hope that this was correctly formatted!
Although you set the width and color, you can not leave out the style parameter with borders.
To get the desired effect as you presented in the image - jsFiddle demo
dark background color for the <ul>
a wide border-left on the <li>
a margin-bottom: 2px as bottom border - shows ul background
and a few small tweaks like text-indent etc
Some information regarding borders
CSS borders consist of 3 parameters
border-width
border-style
border-color
You can set one value, which applies to all sides
border-width: 5px;
border-style: solid;
border-color: red;
Or with short hand border: 5px solid red; and also applies to all sides.
You can style each border side individually, as you are doing above.
border-side-width
border-side-style
border-side-color
Example:
border-left-width: 5px;
border-left-style: solid;
border-left-color: white;
Which can be accomplished also with shorthand: border-left: 5px solid white;
For more information and other border opportunities
https://developer.mozilla.org/en-US/docs/Web/CSS/border
https://developer.mozilla.org/en-US/docs/Web/CSS/border-style
ahhh... Brian you beat me to it.
I inserted border-style, and then there is "BORDER"
border: 5px solid white;
Actually the trick in his case is that border is applied to the anchor tags not the lists! Cheers! :) And yes if you apply border-color as a property you should also apply border-style and border-width :)
If you go to http://cascade2.hostei.com/collection.html
And hover over the picture of the chandelier, you will notice the entire group turns from a grey to a blue.
But if you hover over the caption below it, you will notice only the caption turns blue.
How can I change it so when I hover over the caption, it will also turn the border of the picture blue?
Preferably in HTML or CSS.
Ignore the shadow and all of the other errors.
HTML:
<center>
<figure class=cheese>
<a class=cheese href="images/cascadelucecatalog.pdf">
<center><img src="images/cataloguefront.jpg" width="400" height="398" alt=""/>
</center><figcaption>
<h2><p>2013 Cascade Luce Catalog</p></h2></figcaption></a>
</figure></center>
CSS:
.cheese {
background-color: #4D4D4D;
-webkit-box-shadow: 1px 1px 15px #999999;
box-shadow: 1px 1px 15px #999999;
color: #FFF;
}
.cheese p{
color: #FFF;
}
.cheese:hover, .cheese:active, .cheese:focus, .cheese :hover, .cheese :active, .cheese :focus{
text-decoration: none;
background-color: #43A6CB;
}
You need to target the img when .cheese is hovered.
.cheese:hover img {
background-color: #43A6CB;
}
Take the padding off your image. It's obscuring the background. Apply padding to the parent element if needed.
You're setting the background color of the image to white
figure img {
padding: 10px;
background-color: #FFFFFF;
-webkit-box-shadow: 1px 1px 15px #999999;
box-shadow: 1px 1px 15px #999999;
}
Just remove the background-color: #FFFFFF; property and everything should work fine.
It looks quite better white a grey border to see where the image ends in my opinion too.
Try this, targeting the img on hover
.cheese a img:hover {
background: blue;
}
FIDDLE
I have a horizontal nav that looks as follows:
I'm trying to remove the bottom border for the actively selected li item, but for some reason the usual ways of doing this don't seem to be working. I've tried applying margin-bottom: -1px; and it didn't work.
Here's a JSFiddle with my CSS code:
http://jsfiddle.net/s5ynF/8/
Appreciate any help on this.
Simple.
update these CSS selectors to this:
ul.nav {
list-style: none;
margin: 0;
padding: 0;
padding-left: 25px;
border-bottom: 1px solid #E8E8E8;
height:25px;
}
#nav .home {
background-color: #FFF;
border: 1px solid #E8E8E8;
border-bottom: 1px solid #FFF;
margin-bottom: -1px;
}
I removed the overflow:hidden; that's why it wasn't working. I then applied a fixed height to the .nav
You will need to use a different clear fix method as the overflow: hidden is what is stopping it from working.
I added an explicit height and removed overflow: hidden and it worked.
In a page I use a tabstrip with its own stylesheets. This tabstrip writen with divs and anchors.
I add some other divs into tabs but they inherit stylesheet from the outer tabstrip. This new divs has their own css classes.
Here is my question, are there a way to break this inheritance without changing the structure of css ?
Tabs' CSS Styles :
div.tabs {
padding: .5em;
}
div.tabs div.tabs {
padding: 0;
}
div.tabs div.tabs div {
clear: left;
height: 4em;
padding: .5em;
border: 1px solid #003366;
}
New added divs use this classes :
.graphTextItem{ font-family:sans-serif; font-size:12px; border: solid 1px #78ACFF; text-align:center; width:150px; }
.graphImageItem{ border-left: solid 1px #78ACFF; border-right: solid 1px #78ACFF; text-align:center; height:70px; }
You could always try using different elements for each nested level instead of all divs:
<div>
<ul>
<li></li>
</ul>
</div>
In the above example you can style the div, ul and li anyway you want and you can target them individually to apply style rules. Inheritance won't be a problem.
Override each element you need to not inherit in your most specific classes.
e.g. in .graphTextItem, override height and padding.
Not really. Inheritance is part of CSS. If you want a specific value then specify it.
By removing div from this stylesheet solved my problem :
div.tabs div.tabs {
clear: left;
height: 4em;
padding: .5em;
border: 1px solid #003366;
}
But I still wonder whether there is a way ?