How to Align CSS form
Tags: jquery,html,css
Problem :
I can't seem to get this form align in the absolute center of the page with top and bottom margins of 25px. I've changed and added things like margin-left:10%; but it just changes the spacing of the pictures instead of moving the whole document as one.
Here's the JSFiddle: http://jsfiddle.net/eeEFh/3/embedded/result/
Here's where I changed the css:
.box{
width: 175px;
height: 175px;
background: url('http://placekitten.com/250/200');
float: left;
overflow: hidden;
margin-right: 15px;
margin-bottom: 15px;
border: 1px solid #000;
box-shadow: 0px 0px 15px 0px #666,
0px 5px 15px 0px #000;
}
Solution :
I think you are trying to center .container
, not .box
try this:
.container {
font-family: Arial;
position: relative;
margin: auto;
width: 780px;
}
CSS Howto..
IE 5.5, 6, and 7 do not support the :focus css selector http://reference.sitepoint.com/css/pseudoclass-focus Add an id to your password input <input id="password" type="password" class="filterinputpassword clearField"> Add this in your head...
How about that? http://www.quirksmode.org/css/condcom.html Or that if you don't like those statements http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/...
You can use CSS Flexbox. CSS #container-outer { display: flex; } .container-inner { display: flex; flex-direction: column; } HTML <div id="container-outer"> <img src="http://dummyimage.com/600x400/666" height="300" width="200"> <div class="container-inner"> <img src="http://dummyimage.com/600x400/333"...
The Style property never shows on intellisense when using the asp server controls. The intellisense will show for the attributes after you type Style=" The server control inherits System.Web.UI.Control, which...
That's because CSS uses specificity when applying the styles (it cascades) It should work for you if you change it to #content li.trace_item img { background-color: transparent; border: none; padding:...
You could try this: parent.$("#ID").css("border","1px solid red"); or window.parent.$('#ID').css("border","1px solid red"); Note: would only work if they are on the same domain....
$(document).ready(function() { var x = $('#primary').height(); $('#sidebar').css('height', x); }); This jQuery snippet will take the height of #primary and apply it to #sidebar, syncing the height of both elements. http://jsfiddle.net/pUXCE/4/...
.subMenu li a { background: none; } if it is not sticking, you can add the !important flag .subMenu li a { background: none !important; } ...
Something like this? https://jsfiddle.net/9nguoepu/7/ I just added some divs wrapping your labels and form inputs and a little css. <style type="text/css"> * { margin: 0 } .container { margin-left: auto;...
You can use @media to adjust to different screen widths: @media (min-width:1025px){ input{ display:inline-block; } } @media (max-width:1024px){ input{ display:block; } } <label for="name">Name:</label><input type="text" name="name"/> JSFiddle Demo (Resize result...
Maybe you should use viewport sized typography units for the font-size. It can be used when you want to size thing through the viewport's (element container) width or height. Or...
You can select the child by .search-wrapper > ul > li:last-child hr{ you can also use .search-wrapper > ul > li:last-child > hr{ ...
Relevant Demo <ul class="nav nav-pills nav-stacked" style="list-style: none"> <li *ngFor = "#el of dragZoneElems; #idx = index"> <h4 [style.position]="'fixed'" [style.top.px]="idx*10" [dragResponder] = "el">{{el.first}} {{el.last}}</h4> </li> </ul> ...
Here's the JSFiddle for the effect you were going for: https://jsfiddle.net/d1xzc4jf/7/ Here's the relevant jQuery code: $(window).bind('mousewheel DOMMouseScroll', function(event){ if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { console.log('scrolling down');...
In fact you have a wrong selector (which is .mommy:hover ~ .baby), so the animation for the .baby in fact does not run. Only the animation of the parent .daddy...
The other answer is correct. Assuming you table's parent is body: body, html{ margin:0px; padding:0px; width:100%; min-width:600px; } table.center { margin-left: auto; margin-right: auto; text-align: left; } table.topRightTable{ float:right; }...
add a class when you need to remove spaces use it .padding-0{ padding-right:0; padding-left:0; } in html write this class <div class="row"> <div class="col-md-2 padding-0"> //stuff here for this column...
You have closed each list item in the submenu before the ul for the sub-submenu. html should look like this fiddle: <ul> <li>Home</li> <li>Bio</li> <li>Portfolio <ul> <li>Design <ul> <li>Illustartor</li> <li>InDesign</li>...