Ok, I'm quite new to CSS3. I have this code:
<div class="Mat-Shadow-Box-Text">
<div class="Mat-Shadow-Box-TextBleu2">
MyText
</div>
</div>
That works great. But then I want to change Mat-Shadow-Box-TextBleu2 for Mat-Shadow-Box-Text2. Same CSS class copy/pasted with 0 change (wanted to test before changing anything).
.Mat-Shadow-Box-Text
{
margin: 0px 0;
border-radius: 20px;
box-shadow: 10px 10px 20px #888;
behavior: url(ie-css3.htc);
}
.Mat-Shadow-Box-TextBleu2
{
border-radius: 20px;
border-width: 3px;
border-style: solid;
border-color: #888;
padding-left: 18px;
padding-bottom: 15px;
padding-top: 15px;
}
.Mat-Shadow-Box-Text2
{
border-radius: 20px;
border-width: 3px;
border-style: solid;
border-color: #888;
padding-left: 18px;
padding-bottom: 15px;
padding-top: 15px;
}
Now my 100$ question is: Why when I change the class name in my tag, it doesn't work? (the border doesn't appear on the web page). Also, I tried just renaming .Mat-Shadow-Box-TextBleu2 by .Mat-Shadow-Box-Text2 (in both CSS class and DIV code) and it doesn't work either!
So, to summarize, my original code works fine, but I can't rename nor change to another class in my second DIV tag. Note that I don't have this problem with my first DIV class. I can rename .Mat-Shadow-Box-Text or point to a different class and it works just fine.
Cheers!
When in dev its always a good practice after changing Back-End Code, CSS, or HTML to always Ctrl+F5 to refresh your browser to force it to get everything again from the server. That seems to be what you have happening here. Its especially noticeable with CSS changes.
Related
I would like to make this shape for the title.
What HTML and CSS should I use to make this shape?
For creating a shape like you asked for, you can use any html tag (in my case I used h1 tag).
I've given my tag a class .title, you can give any. To this class I've only assigned basic and required properties to achieve what you asked for, you can give any set of properties as you desire together with these.
Below I'm attaching a snippet please go through.
.title {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
border-width: 0 0 1px 5px;
border-style: solid;
border-bottom-color: #ababab;
border-left-color: #000;
}
<h1 class="title">This is my title</h1>
You can achieve this using border property (border-left & border-bottom), like:
.title {
border-left: 5px solid #444;
border-bottom: 1px solid #444;
padding-left: 15px;
line-height: 1.4;
}
<h1 class="title">This is a title</h1>
Hope this helps!
I need a little help with my problem. I get following effect with this code:
#navLink{
font-family: oduda_bold;
font-size: 17px;
color: #fff;
text-decoration: none;
}
#navLink:focus{
border-radius: 10px;
border-style: solid;
border-width: 0px;
background-color: #ef5e99;
}
WRONG HIGHLIGHT
and I would like to have it highlighted like this:
NICE HIGHLIGHT
Is that possible to highlight link with larger (than its textvalue) area ?
Yes. Add padding and then fiddle around with the border radius until it meets your expectations:
#navLink:focus{
padding: 10px /*here*/
border-radius: 30px;
}
You need to use padding and set your link into an inline-block.
#navLink{
display:inline-block;
padding: 10px;
}
I have a textbox and when I enter the term "laptop" its not visible properly. The problem is in IE9, not with Chrome.
HTML
<input id="small_search_string_sub" name="search_string" type="text" class="newsearch_sub rounded " placeholder="Search..." maxlength="500">
Here is the CSS:-
.newsearch_sub {
padding: 3px 10px 3px 10px;
background-color: #FFF;
width: 220px;
height: 25px;
margin-top: 10px;
vertical-align: top;
}
It seems like you have no reset for the input default style, also the input has not format for the text on it, also the padding might be pushing down the text to far.
I tried this, and it seems to work well on IE9 for me, but the fact that I see another class (rounded) on the line of code that you send, makes me wonder if there is not something missing here, can you put a link to the code, even as a stand alone page, this way I can debug on ie9 on the proper code, and maybe give you a solution if this one does not work for you.
.newsearch_sub {
padding: 3px 10px 3px 10px;
background-color: #FFF;
width: 220px;
height: 25px;
margin-top: 10px;
vertical-align: top;
font:12px/24px Arial,Helvetica
}
It seems I must have read every article and guide to using border-image that there is on the web, and have tried just about every suggestion possible, yet it still isn't displaying! It's destined for a ul of class "navbox", and the full CSS for that element is below.
ul.navbar {
float: right;
list-style-type: none;
background-color: #F8F8F8;
border-style: solid;
border-width: 4px;
border-color: #231F20;
color: #1F1F1F;
margin: 25px 5px 5px 5px;
height: 50px;
position: absolute;
left: 450px;
right: 20px;
vertical-align:middle;
border-image-source: url(C:\Users\imamadmad\Documents\Web Stuff\Locomotion Coffee\border.png);
border-image-outset:4px;
border-image-width:4px;
border-image-slice:8;
border-image-repeat:repeat;
}
I feel I have tried every possible combination of the border-image property, and even used both a .png and a .jpg version of the file, yet nothing displays. I've even removed the other border styling completely, but replaced it when that didn't make the border-image appear as I still needed some sort of border! I'm not sure if it would have anything to do with the fact that I'm calling the entire document and all files associated with it through my computer rather than through the web, as I need to make a mock-up on my own computer before I can put it online. However, everything else, including other images, are displaying just fine. It is neither displaying in Chrome nor IE, and Firefox just doesn't want to show any CSS at all, so that's unhelpful. I have tried adding the -webkit- etc. tags to the properties, but they made no difference either and besides, it shouldn't need it for the latest version of Chrome, which I'm running.
Please, can anyone help me! While it's not vital to the design, it would really just make it that much easier on the eyes.
Works fine. Check your image url
FIDDLE DEMO
ul {
float: right;
list-style-type: none;
background-color: #F8F8F8;
border-style: solid;
border-width: 4px;
border-color: #231F20;
color: #1F1F1F;
margin: 25px 5px 5px 5px;
height: 50px;
position: absolute;
left: 450px;
right: 20px;
vertical-align:middle;
border-image-source: url(http://i46.tinypic.com/10gljba.jpg);
border-image-outset:2px;
border-image-width:4px;
border-image-slice:8;
border-image-repeat:repeat;
}
Hope this is what you are looking for
Edit : FIDDLE Updated
I'm looking at the buttons used on twitter's home page, specifically the big orange 'signup' button. I see it is defined like this:
<p id="signup-btn">
<a id="signup_submit" href="/signup">
<span>Sign Up</span>
</a>
</p>
are they just using css to give the orange button appearance (which may just be a jpg), and also using css to specify the roll-over appearance (another jpg), and finally a third state for mouse-click (another jpg) to give the impression of a real clickable button?
If that's how it works, what should I look for to do the same thing? In my case I just want to make a button I guess, like:
<div class='mybutton'>Hello!</div>
.mybutton {
bgcolor: red;
bgcolor-mouseover: yellow;
bgcolor-mousedown: green;
}
yeah something like that would be great,
Thanks
Look at their CSS:
background: #FA2 url(http://s.twimg.com/a/1275412898/images/fronts/bg-btn-signup.png) repeat-x 0px 0px;
border: 1px solid #FA2;
border-bottom-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-top-right-radius: 5px 5px;
color: #333;
display: block;
font: normal normal bold 18px/normal Arial, sans-serif;
padding: 8px 10px;
text-align: center;
text-decoration: none;
text-shadow: #FE6 0px 1px 0px;
Haven't looked at it specifically, but that is entirely possible with CSS; they probably have a named style using the #signup-btn designation in CSS. To find out, you can use IE or FireFox with FireBug to examine the CSS and see exactly what they do for the button style. I would highly recommend that.
HTH.
I'd use a BUTTON element and CSS sprites. That way, you can style it however you like, and don't have to screw around with click() events in JS. Just use it wherever you'd use a regular button in a form.
EDIT: Coronatus, you should probably read this: Rediscovering the Button Element. They're remarkably easy to make visually consistent across browsers using a little CSS.