I'm trying to add a hover effect on nav links but am not able to implement it correctly.
.nav_links{ border-radius: 50%; }
Here is the border-radius result I'm getting.
but I want it like this.
How can I do this?
Any help will be highly appreciated.
Thank you.
Related
I am trying to align my search button with my text input/search bar but cannot seem to get it to work. Any help would be appreciated!
The site can be seen here: http://www.computerpartsforsale.co.uk/Whois/
Thanks in advance!
#search button {
padding: 24px;
}
Add this style.
I use font awesome icons and everything was aligned in the middle as it should in staging. Once the site went live, all the font awesome icons moved up to the top and I can't figure out why. I compared the css being used on chrome developer tools but so far I can't see any difference.
Here's the link to the homepage. http://studyusa.com/en/ You can see that the magnifying glass on the top navigation, all of the social network buttons under the slider, and menu icons next to "Browse Schools by Degree Level" all moved up.
Hope I can get any hints.
-- update
Wow, thanks for all the answers! However I must apologize to everybody because I checked the site today and it looks the way it should without me changing any code. Now I'm curious as to why something like this is possible.
iam not sure about this, hope this is because of various line-heights used.. but try update the class ".fa" below. Hope this will fix your issue..
.fa {
line-height: inherit!important;
}
Try to add this:
.fa {
transform: translate(0, -50%);
top: 50%;
position: relative;
}
Don't alter .fa CSS, this is needed for every icon and will break every other icon you have!
Instead, add this to your css:
.search-trigger {padding:15px;}
I tested that in Chrome and it worked fine.
Try:
.toggle-make a {
display: inline-block;
float: none;
}
I have played with Chrome Inspector and it seems that floating has something to do with it. As far as I can see, you are using display: block; with width but no height.
You need to add this code
.fa-twitter:before{
position: relative;
top: 8px;
}
The problem is at the footer of my website. I was trying to make it look like the footer of the main template but I'm missing something which I can't understand. Please guide.
What I want it to look like:
please help to move the lists to a little back as shown in first picture.
Many Tanks..
You should have applied CSS Reset
You're missing padding:0 to ul in the footer
This will help!
You are missing padding: 0px on the ul's in the footer. Apply it there and you get it done :-)
Try:
.three.columns ul {
padding-left: 0px;
}
i'm creating a new website and im looking to recreate the curved corner of the SAVE 25% banner. http://www.sonycreativesoftware.com/
Does anyone know how i would do this with css or html?
Cheers
Use the image as a background-image, and apply border-radius on the element
div
{
background-image:url('http://placehold.it/350x150');
width:350px;height:150px;
border-radius:5px;
}
http://jsfiddle.net/mdNCm/1/
You can use border-radius.com to generate cross-browser CSS
Yes, by using border-radius.
CSS:
div.rounded{
border-radius: 5px;
border: 1px solid black;
}
HTML:
<div class="rounded">This text is in a rounded border!</div>
This is a css3 feature and not yet fully supported of all browsers. Read further about this tag:
border-radius: 25px;
You can achieve this with
border-radius: 5px;
If you want a cornered border please use this.
Border-radius.com
Which gives you the code.
Note: border-radius don't work with some browsers such as ie
Alternatively you can use some image as background in css.
I am having a very weird problem. I do a css 3 cardflip animation for my portfolio. In Firefox everything works fine, but in chrome for some reason the first card has a wrong direction for the animation. As you can see, the left image shows the wrong animation, stretched wrong, while the right one is perfect. All the cards are created by a script so there can not be a difference in the html markup or the css for that matter.
Any Ideas? What kind of information can I provide to help figure this out?
Cheers Lukas
Update
.card flip
{
text-decoration: none;
text-align: center;
float: left;
position: relative;
display: block;
z-index: 30;
}
Remove perspective and webkit-perspective they causing error