Not quite sure how to get around this issue, have forms nicely marked up in a CSS sheet
#forms {
width:40%;
margin: 10px auto;
padding: 10px 30px;
background: rgba(144,144,143,0.6);
border: 1px solid #e1e1e1;
box-shadow: 0px 0px 8px #85857f;
}
My problem is the smaller forms, two input text box, are looking way too large for the content, anyone know of a method to give different widths to forms that don't involve hard coding inline CSS in the html?
Am quite baffled by this one.
Related
I have an angular project where I'm using Angular Material and material table.
It seems that all the text in my table has the 10px margin top and bottom applied due to a class named something like: .ng-tns-c5-1 or .ng-tns-c6-1 etc.
I can't find a way to change those margins without inspecting element, finding that class and then using CSS to change that margin.
But after some changes to other elements on the app, the .ng-tns-c6-1 (for example) is changed to something like: .ng-tns-c4-0 and then I have to change that. The problem is I've done this 5-6 times now and it's a complete pain.
Because of that the table has a lot of useless white space and just overall makes things look bad.
What is that class and what can I do to make sure the margin remains at the 2-3px I'm setting?
This is the type of thing I have in my CSS:
.ng-tns-c5-1 {
margin-top: 2px !important;
margin-bottom: 2px !important;
}
.ng-tns-c5-0 {
margin-top: 2px !important;
margin-bottom: 2px !important;
}
.ng-tns-c6-1 {
margin-top: 2px !important;
margin-bottom: 2px !important;
}
.ng-tns-c4-0 {
margin-top: 2px !important;
margin-bottom: 2px !important;
}
You can use the following to select all the current and future elements.
[id*='ng-tns-c'] {
}
http://jsfiddle.net/cdecqyfs/
I'm trying to eliminate that apparently notorious gap between the navbar and the div below it.
I can't find the source of the margin through Chrome's developer tools (it just points me to the <body> tag), but I'm reasonably certain it's my div causing the issue, because when I delete the <header>...<header> contents entirely, there's still a 20px gap between the top and the body. HOWEVER, that gap size directly correlates with the value of #navbar-bottom-margin in Bootstrap's LESS files, so I'm sure BS is at play here.
I've tried display:inline-block, I've tried margin:0 !important on nearly every element on the page, numerous suggestions from the other times that this has been asked, and I'm slowly going insane over what should be such a simple issue to fix.
Please help!
Add .masthead-text h1 { margin-top: 0; } seems to be able to fix it. Use padding instead if it needs some spacings around.
Updated Demo: http://jsfiddle.net/cdecqyfs/5/
I would also suggest to replace the below code with simple padding values too.
.masthead-text{
position: relative;
top: 140px;
}
Then it won't be necessary to reset the top margin on the h1.
Updated Demo 2: http://jsfiddle.net/cdecqyfs/7/
It might be a bit of a hacky workaround, but you can set the margin-bottom of the navbar to a negative value (in this case -20px), moving the content up and eliminating the gap.
http://jsfiddle.net/9LLo35kt/1/
/* The .masthead css doesn't need to be modified */
.masthead {
background: url('http://i.imgur.com/LAtiqI6.jpg') no-repeat;
height: 400px;
}
.masthead-text{
position: relative;
top: 140px;
padding: 0 15%;
color: #eee;
}
.masthead-text h1{
font-size: 5em;
text-shadow: -2px -2px 0px rgba(0,0,0,0.2);
}
.masthead-text h2{
font-size: 2em;
text-shadow: -1px -1px 0px rgba(0,0,0,0.2);
}
/* The important stuff: change this value from 0px to -20px */
.navbar { margin-bottom:-20px !important; }
I am trying to create a button with 3 layers of border around it with the middle layer showing the background of the containing div. Examples are worth a thousand words so here you go
http://jsfiddle.net/e5Sxt/2/
html
<div id="content">
<p>Generic Content</p>
<button class="button">Search</button>
</div>
css
#content{
width: 500px;
height: 500px;
background-color: black;
padding: 50px;
color: white;
}
button{
margin-top: 50px;
padding: 20px;
text-align: center;
background-color: #333;
box-shadow: 0 0 0 5px #666, 0 0 0 10px red, 0 0 0 15px #bbb;
border: none;
cursor: pointer;
}
The red box-shadow is where the black of the containing div should come through. If the box-shadow is set to transparent for this layer, the box-shadow under it shows through instead.
I have tried utilizing outlines, borders, and box-shadows to no avail so far. As of right now, I think I will have to wrap the button in another div with the outer border and a padding to show the background, but wanted to see if anyone could do this without adding another html element.
Thanks!
The answer depends on what browsers you need to support (and whether you'd be happy with a fall-back solution for older browsers).
There is a CSS feature called border-image, which, frankly, can do pretty much anything you could think of for a border. You could achieve this effect very easily using this style.
With border-image, you could simply specify a small image with your two colours and transparent middle section. Job done.
Learn more about border image here: http://css-tricks.com/understanding-border-image/
However... there is a big down-side: browser support. border-image is a relatively new addition to the CSS spec. Firefox and Chrome users should be okay, but IE users miss out -- this feature didn't even make it into IE10.
Full browser support details can be found here: http://caniuse.com/#search=border-image
If poor browser support for border-image is enough to kill that idea for you, then another viable answer would be to use :before or :after CSS selectors to create an pseudo-element sitting behind the main element. This would have a transparent background and be sized slightly larger than the main element and with it's own border. This will give the appearance of the triple border you're looking for.
Of course, you can only use this solution if you aren't already using :before and :after for something else.
Hope that gives you some ideas.
I think the only way to do this is by using a wrapper unfortunately. I'm not sure if it is possible to get the transparency through the button background.
Although, if you know the background color, you can use that in the border obviously, but of course this won't work for background gradients.
Here is a proposed jsFiddle showing knowing the color, and another using a wrapper:
http://jsfiddle.net/eD6xy/
HTML:
<div class="box one-div">(1 div, know color)</div>
<div class="two-div">
<div class="box">(2 divs, pure transparent)</div>
</div>
CSS:
/*
With one div, works fine with a constant color (#abc)
But with gradient, probably won't match up correctly
*/
.one-div {
margin: 15px 10px;
border: 5px solid blue;
box-shadow: 0 0 0 5px #abc,
0 0 0 10px red;
}
.two-div {
margin-top: 30px;
padding: 5px;
border: 5px solid red;
}
.two-div > .box {
border: 5px solid blue;
}
Guys I have been trying lots of different options from cutting up to building in html/css. nothing seems to really work :(
How would you guys go about doing this ?
Link:- http://www.flickr.com/photos/gavinwynne/6902590869/
The simplest way is to use a thick border and a inset box shadow. Browser support is somewhat limited, though. It basically comes down to IE9+ and modern browsers (ref).
demo
body {
min-height: 300px;
border: 24px solid #666;
box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
-webkit-box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
-moz-box-shadow:inset 0px 0px 30px rgba(0,0,0,.5);
padding: 35px;
}
One of the most common ways about doing it would be to cut the image in 3 pieces as shown in the below picture:
Where piece 1 would be shown first, then make piece 2 height equal to 1px and repeat it on the y axis through CSS and then put piece 3 at the bottom in order to "close" the container
Your html could be in the form of:
<div class="div_top"></div>
<div class="div_middle"> your content here </div>
<div class="div_bottom"></div>
Update
Css would be something similar to this :
.div_top {
background-image:url('top_bg.jpg');
background-repeat:no-repeat;
width:800px;
}
.div_middle {
background-image:url('middle_bg.jpg');
background-repeat:repeat-y;
width:800px;
}
.div_bottom {
background-image:url('bottom_bg.jpg');
background-repeat:no-repeat;
width:800px;
}
You'd probably want to set a fixed height for your top and bottom divs, since they have no content and wont actually expand to show the background image.
I'm using this free Web Template - EliteCircle and have just incorporated it into a master page. The master page wraps the html in:
<form id="form1" runat="server">
//master page html
</form>
The template almost comes out fine except the entire page is surrounded by a think white border (default CSS behavior for form?) and the footer background is half white on the very bottom.
I wouldn't expect the form with id=form1 to change anything in the layout. There is nothing in the [CSS][2] with that id.
When I remove the form tags from the master page (just to check) the layout is perfect, no problems.
Any ideas?
(Using Visual Web Developer 2008 Express)
Thanks,
Greg
The CSS: http://www.styleshout.com/templates/preview/EliteCircle12/images/EliteCircle.css
Have you seen the
/* form elements */
form {
margin: 15px;
padding: 15px 5px;
border: 1px solid #EFEFEF;
background: #F8F8F8;
}
declaration in your CSS file? That might just explain the thick white border and other stuff you mention :)
Either change that declaration to form.myForm (and change all forms that need it), or re-cascade the form1 id or interior tags on your page to override those settings.
I agree with Konerak, but a word of advice, don't set properties to html elements in a generic way, instead, use classes...
Your css:
/* form elements */
form {
margin: 15px;
padding: 15px 5px;
border: 1px solid #EFEFEF;
background: #F8F8F8;
}
The sugestted:
form.standard {
margin: 15px;
padding: 15px 5px;
border: 1px solid #EFEFEF;
background: #F8F8F8;
}
If you set the css to the form element, all forms in your page will receive does properties, but if you set does properties to a class, only form's with that class will receive then...
Btw: DocType may also interfere with the desired result...