I have a bootstrap with a navbar at the top. In the navbar, I have five buttons that looks as follows:
The Razor code for one of the buttons looks like this (the other four are about the same):
Sign up<b class="caret"></b>
I'd like to make the buttons all the same width but I can't seem to find the CSS that controls this.
Well first you have to figure out the right CSS selector (Chrome Inspect Element can help here). I suspect these are probably nested in a DIV or UL with a .nav class or whatever. Then you can just set the 'width' property in your style.css (or whatever your stylesheet is named) file, or between style tags in your HTML.
If you can edit the HTML just add a class like "nav-btn" to each button you want to modify.
So, for example, if you added that here's what it would look like...
HTML:
Sign up<b class="caret"></b>
CSS:
.nav-btn {
width: 50px; //or whatever width/units you like that fits everything
}
Alternatively, you can add the CSS within your HTML file with the <style> tag:
<style>
.nav-btn {
width: 50px; //or whatever width/units you like that fits everything
}
</style>
width: 25%;
(These are more characters to meet minimum answer length requirements)
Related
TL;DR : Before you read anything, the desired end-result is illustrated in the image below, otherwise refer to the JSFiddle. Preferably, I would like to only use CSS and not modify the DOM structure.
The icons must be aligned completely to the right (hence the .pull-right), but the icons must be stacked vertically (Sometimes some icons must not appear, so they are .hidden, like the .fa-undo icon in the second row).
(When I say 'the icons' i mean the <i> tags and the <img> tag)
The icons must not make the textarea go down (no margin on top of the textarea).
Hopefully, the WIDTH of the textarea would be dynamic and not statically put to width: 90%; for example. It should take as much width as possible, without interfering with the vertical icon stack.
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
In general, images that are UI elements, and not content, should be CSS backgrounds, not inline images. You then use class names to control the image content.
You should be doing this, or something similar:
td.fr {
background-image:url(/images/fr.gif);
background-repeat:no-repeat;
background-position: top right;
}
The same should go for your buttons. Use <button> and style the background.
Not exactly what you wanted I'm afraid, but this is how I'd achieve that result:
fiddle
<div class="pull-right icons">
<img src="http://www.convertnsftopst.net/images/gb.gif" class="pull-right" />
<i class="fa fa-reply"></i>
</div>
td .icons{
width:20px;
text-align:center;
}
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
I was unable to do it without adding another pull-right container, I fear that doing it with only CSS would end up being an odd hack
Fixed here : http://jsfiddle.net/QTXxp/2/
What was lacking when I asked this question was the clear:right; and the use of <div> (or display: block;)
Here is the CSS (if you're too lazy to open the JSFiddle) with the addition of the boostrap class pull-right on the div.icons
textarea.hover-edit {
width: 90% !important;
}
div.icons {
width: 10% !important;
}
div.icons > div > i.fa {
margin-top: 4px;
margin-right: 4px;
}
div.icons > div.action-icon-right {
float:right;
clear:right;
}
I have the following structure:
<div class="irrelevant"></div>
...
<div class="div1"></div>
...
<div class="irrelevant"></div>
...
<div class="irrelevant"></div>
...
<div class="div2"></div>
I'd like to apply some CSS only to .div1, considering that it's on the same level as (not a children or parent of) .div2.
EDIT: To bring some light in the issue: The first div is actually my website's logo and the second div is a navigation that MAY or MAY NOT exist depending on the page viewed. If the navigation is present, I need to display the logo in a different manner (resize it).
CSS works as a cascade then you can never refer to elements based on what is next to them, just possible refer elements based on what was there before them.
The subjects of a selector are always a subset of the elements matching the last simple selector
For this you may need the help of Jquery:
$(document).ready(function (){
if($('.div2').lenght > 0) {
/*actions for .div1 here*/
}
})
Since the class of both the divs are different, you can apply some specific rules to div1 by using class selector .div1
.div1 {
/* div1 styles */
}
Ah, so you want to apply css to div1 if div2 exists? CSS can't do that. You need JS. jQuery for example:
$('.div2').parent().find('.div1')
you can then apply the css directly or add another class ('div2exists') and add your style in your css-file
Though there's a way doing this in CSS, I personally would not recommend that.
It will only work if we assume we have a fixed number of div elements inside some ".container" div. And this number is 6, 2nd is the logo (also it is 5th counting from the end), 5th is the navigation.
.container {}
.container .logo {}
.container .navigation {}
.container div:nth-child(2):not(:nth-last-child(5)).logo {
width: 100px;
height: 100px;
}
.container div:nth-child(2):nth-last-child(5).logo {
width: 200px;
height: 200px;
}
The first rule is for the logo with navigation
The second rule is for the logo without navigation
Again don't do this, CSS is not designed for that.
You basically want to select a sibling, you will find a detailed post in this link CSS Tricks - Child and Sibling Selectors
.div1 ~ .div2{
Do your stuff here
}
This chunk will only take place if .div1 exists in your markup, is that what you wanted?
Edit:
I've noticed that your desired selector precedes the other one, this code will only work if the desired selector in this case .div1 is after .div2 .. CSS doesn't have that you will have to use jQuery
I am trying to customize a free widget, but I dont have access to edit the html. I am only given access to the css. I want to be able to align the a tags virtually. I have tried the following css, but the tags are right on top of each other/ How do I put space between them?
HTML
<span>[×] [o] </span>
CSS
span a { position:fixed; }
JSFIddle
http://jsfiddle.net/gfvAw/58/
You can always float and clear the anchor tags:
a { float: left; clear: left; }
Here's a jsfiddle to demonstrate: http://jsfiddle.net/gfvAw/60/
a { display: block; }
This will convert the a tags into block elements, meaning they will automatically expand to fit their containers.
However, you should realize that using block elements means the user will be able to click anywhere in the block, rather than just on top of the link text. A solution to that problem would be to use jQuery to insert <br/> tags after each a tag. Or you could replace the entities with <br/> tags, as well.
It's hard to explain what I mean, so see this jsfiddle first: http://jsfiddle.net/Gsggy/
When a user clicks 1, div number 1 shows, same for the others, simple enough.
However, before a user has clicked on a number, there is no div there, because it relies on the # value in the URL
How can I set a default div that is there with a blank url e.g. www.jsfiddle.com but disappears when someone clicks a number and makes it www.jsfiddle.com/#1
The thing is you can't really target an element in a way to tell it "do something while someone else is the target".
There are however some workarounds to this dilemma. One solution would be to always dispay the default content and display the target elements above.
You can use the fact that elements that appear later in the dom are usually rendered above nodes which appear earlier. So you could have for example a negative top margin or an absolute positioned element cover up your default content.
Improving on your html structure:
<div class="default" id="z">0</div>
<div id="a">1</div>
<div id="b">2</div>
<div id="c">3</div>
This css does work:
.default {
display: block;
background: #eff;
}
div + div {
margin-top: -102px;
}
div:target {
background: #eef;
display: block;
position: relative;
}
The downside to this particular approach is that you need to know the exact dimensions of your default content.
See this fiddle: http://jsfiddle.net/Gsggy/4/
use nth-of-type or last-of-type selector and make a default div in last i think it will work in your case
This question already has answers here:
Closed 11 years ago.
Possible Duplicates:
How do I prevent CSS inheritance?
is there a way to exclude a tag from css class
I have CSS like this
.div1 img {
// ...
}
.myimg {
// ...
}
and my HTML code is like this,
<div class="div1">
...
<img src="..." class="myimg"> // image html
...
</div>
The css formatting defined in .div1 img is obviously applied to the image html code. However, I actually don't want it happen. What can I do to not to have '.div1 img' effects on that image html code? I don't want to modify the content of div1 img or related html code because it is used in other places already (and it is a template code that I don't want to mess with).
P.S. I cannot remove or modify <div class="div1"> either because there is other template code around.
Thanks.
You have two options:
You can explicitly override all of the styling defined in .div1 img with what they should be in .myimg
You can write .div1 img:not(.myimg) for the first rule.
You could do:
.div1 img:not(.myimg) {
// ...
}
:not selector explained here
There is a nice little not selector that would work, but unfortunately it doesn't work in all browsers.
One sure way to do that is redefine all your .div1 styles in your child .mying class so it overrides the parent.
here is a little demo in jsfiddle: http://jsfiddle.net/u6MnN/1/
mess around with it and see what's best for you.
you need to neutralize all those stylings you are giving to ".div1 img" for example if you say "width:100px" there you need to say "width:auto" in the other one.
Although if you have lots of rules in the first set it would be very dirty this way and you need to change your layout.
If you have img tags inside a container div with class .div1 they will of course get the styling you define in .div1 img, but if you want lets say 2 images out of 8 in that div to have another style (which i believe is why you made class .myimg), you need to put !important after the defined stylings in .myimg like so:
.div1 img
{
height: 125px;
width: 125px;
}
.myimg
{
height: 150px !important;
width: 150px !important;
}
This is only if you are NOT using CSS 3.0