So I have a 36px tall div with a form (#refine_search) in it. The form only contains a 35px tall button (#refine_search_button). All is well until I add a span after the form with a font-size over 17px. At that point the button will be displayed 2 or 3 pixels down from the top of the div.
You can see it in action here:
http://nolasatellitegovernment.tulane.edu/search.php
CSS:
#bluenav {
width:1124px;
height:36px;
position:relative;
background:url(/g/internal_page_blue_nav_bg.jpg) repeat-x #afdeff;
}
#refine_search {
display:inline;
padding:0 0 0 110px;
margin:0;
}
#refine_search_button {
width:92px;
height:35px;
background:url(/g/refine_search_button.jpg) no-repeat;
border:0;
padding:0;
margin:0;
}
#refine_search_button:hover {
background:url(/g/refine_search_button_over.jpg) no-repeat;
}
.big_heading {
font-size:22px;
font-weight:bold;
}
And the code looks like
<div id="bluenav"><form action="refine_search.php" id="refine_search"><input type="submit" id="refine_search_button" name="submit" value="" /></form><span style="padding:0 10px 0 20px; font-size:22px">
</div>
Does anyone know why 18px text would displace the preceding button in a 35px tall container?
Add vertical-align: top to #refine_search_button.
The default vertical-align value is baseline, and adding the span with different font-size adjusts where the baseline is.
If you would also like to vertically center the "Index Results" text, add line-height: 36px to the containing span.
#refine_search {
display:block;
float: left;
padding:0 0 0 110px;
margin:0;
}
Just add a line-height:36px to your #refine_search_button id and that should fix the problem.
Because you use display:inline they are dependent on each other, like images and text on the same line. Instead try using display:block; float:left; on both elements, then they will always float to the top :)
It might even work with display:inline-block;
IMO its better do generel better coding than using line-height etc to fix a dynamic problem (ie. you change font-size and so on)
Related
I have a problem with bootstrap css.
In the fiddle just type something to the input then input jumps up some pixels... WHY?
<div class="test"><input type="text" value="ABC"></div>
.test { height:86px; overflow:hidden; border:solid #000 3px; }
.test input { height:74px; margin:8px 0 0 6px; font-size:74px; }
So I want to use margin-top or somthing else to positioning lower the input inside the outter div
screenshot
<div class="test"><input type="text" value="ABC"></div>
.test { height:86px; overflow:hidden; border:solid #000 3px; }
.test input { height:74px; margin-top:20px; font-size:74px; }
New fiddle
It's not clear but it render better with this :
Css :
.test { height:86px; overflow:hidden; border:solid #000 3px; }
.test input { height:86px; margin:0; font-size:74px; padding-bottom: 10px;}
Fiddle : https://jsfiddle.net/ja8mymtr/1/
That is a bit weird but you can fix it by using absolute position like this
.test {
height:86px;
overflow:hidden;
border:solid #000 3px;
position: relative
}
.test input {
height:74px;
margin:8px 0 0 6px;
font-size:74px;
position: absolute;
bottom:0
}
<div class="test">
<input type="text" value="ABC">
</div>
... input jumps up some pixels... WHY?
After a lot of messing around I have finally zeroed in on the issue, phew.
You have set the overflow property of the container div to hidden. But, the inner content of that div, has more height than the parent (counting the margin in, and the font size of the input).
Due to which when a user types something in the input element, the browser tries to center the element by scrolling to it, its just that we aren't able to see it.
And hence we see the "jump".
DEMO with the scroll bar shown, for further demonstration of what is happening.
So I want to use margin-top to positioning lower the
input inside the outer div, while avoiding the jump
You can reduce the font-size and line-height to something which can make the input element fit snugly in the container while retaining the margins. Something like this.
I want to center a fieldset in my page but I don't know how.
I used this css code :
fieldset
{
margin:auto;
display: inline-block;
text-align:center;
}
but it only center the content of the fieldset
I also used a <p style="text-align:center;"> <fieldset> ...</fieldset></p>
but it wont work.
so how can I center it ?
Edit :
The CSS code I'm using now :
fieldset
{
text-align:left;
display: inline-block;
vertical-align:middle;
}
div
{
text-align:center;
vertical-align:middle;
}
You will have to add text-align:center to the parent element (maybe wrap it in a div and play with it if it's by itself.) to actually center the element and not the content. See if that works.
Remove the display attribute. It needs to be a block element (which it is by default) for margin: auto to work. Or do you need it for something?
The solution is to position the element absolutely, offsetting the div by 50% from the left and the top part of the window and move the div to the left and to the top with half its width and height with a negative margin, to have it perfectly centered.
and this is the CSS code:
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
This worked for me
#fieldset{
border-color:blue;
border-radius:10px;
margin:-100px 0 0 -150px;
position:absolute;
left:50%;
top:50%;
}
But I do not the line margin:-100px 0 0 -150px;
I am new to Css. I don't know whether this question had answer or not. Actually i have a page
<body>
<div id="confirm">
<img src="images/help.png" alt="Help Icon">
<div id="message">
Are you sure you want to deletesadcasdsaduasudashdhasdoiasnidosanidoasyduiasnduasnoidnasidonasiodashydioasndoiasndioasdhioasydoiasndioashydasiodsaoidasd
</div>
<button>Ok</button>
</div>
</body>
I am setting his style. Here is my css
#confirm {
background-color: #ddd;
display:block;
width:400px;
min-height:120px;
position:absolute;
border:1px solid #ccc;
border-radius: 15px;
-moz-border-radius: 15px; /*FireFox*/
-webkit-border-radius: 15px; /*Opera, safari*/
behavior: url(css/border-radius.htc); /*IE*/
}
#confirm img {
border:1px solid #ccc;
margin:20px 20px 0 20px;
float:left;
width:64px;
}
#message {
width: 280px;
border:1px solid #ccc;
float: left;
white-space: normal;
margin:20px 0 0 0;
overflow: hidden;
}
#confirm button {
position: relative;
width:68px;
margin:20px 180px 0 0;
float:right;
}
Right now when i run my code it produses output like this
Now i want that no matter how large the text of the "message div" is. The "confirm div" automatically adjust their size and as well as positions all the elements inside it.
Like right now i have set "confirm div" "min-height = 120". As you see the text is cropping. The text should not be cropped, The size of message div should increase automatically depending on the size of text. As message div size increase, the confirm div also increase in height, confirm div adjust the image and button in it. Finally all the elements should be inside the confirm Div. Or you can say that the message and image should always be remain in the center of the div.
How can i do it?
Thanks
Thanks
your message text has no white space and has a verrrry long word in it, you need to all that word to be broken to auto size the div
Add
word-wrap: break-word;
to the CSS for #messsage
JSFiddle
Update
Ok that proved difficult but does this work for you JSFiddle2, I've added another div and put the image in that one, its positioned absolute not float so can centre the image. Also had to add another div thats floated as the image was to force the message to be in the right place.
word-wrap: break-word; will serve the purpose.
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
DEMO
UPDATE
LIKE THIS middled from top?
I have a sign in button as shown below and when I try to click that the menu opens in which I am having an ASP.Net login control which is shown below my slider and not above it.So I would like to position it on top of my slider.And between my slider and sign in button I have menu bar.
So how do I do that?
I have followed this question on SO but did not succeed
This is my CSS:
#container {
width:780px;
margin:0 auto;
position: relative;
}
#topnavsignin {
padding:10px 0px 12px;
font-size:11px;
line-height:23px;
text-align:right;
margin-top:-60px;
margin-left:120px;
}
#topnavsignin a.signin {
background:#88bbd4;
padding:4px 6px 6px;
text-decoration:none;
font-weight:bold;
color:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
*background:transparent url('../images/signin-nav-bg-ie.png') no-repeat 0 0;
*padding:4px 12px 6px;
margin-left:420px;
}
#signin_menu {
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
display:none;
background-color:#ddeef6;
position:absolute;
width:350px;
z-index:100;
border:1px transparent;
text-align:left;
top: 24.5px;
right: 171px;
margin-top:-55px;
margin-right: 0px;
*margin-right: -1px;
color:#789;
font-size:11px;
padding: 5px;
}
This is how I'm showing it:
<div id="container">
<fieldset id="signin_menu">
//Asp.Net Login Control
</fieldset>
</div>
//Here goes my Navigation menu
This is my slider part
<div id="slider_wrap">
<div id="wowslider-container1">
</div>
</div>
To position one Div over the other you use the z-index on the css, together with position: absolute or relative or fixed
Some examples:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
http://www.w3schools.com/css/css_positioning.asp
On the container that you like to be front set a bigger z-index than the containers that you like to be on back.
Note that: the z-index works only for position: absolute, relative, or fixed, and the divs that you like to control have this attributes. The example that you mention try to fix order of divs with out having one of this attributes (or with out using the z-index), so in example can not use z-index and its a tricky how to place one in front of other with out the z-index enabled.
As I see you do not have set index in one of them.
On the container that you like to be front set a bigger z-index than the containers that you like to be on back.
Note that: the z-index works only with position: absolute/relative/fixed; on the same element. The example that you mention try to fix order of divs without having one of this properties (or without using z-index); it is not possible to place one element in front of other without defining z-index together with position.
I have icons. Problem is they do not vertically align to the middle like everything else (text, input). My html structure is something like this:
<div class="i_contain_things">
<div class="i_float_left"><checkbox/></div>some text
<div class="i_float_right">
<span class="sprite icn1">my sprite</span>
<span class="sprite icn2">my sprite</span>
</div>
</div>
.i_contain_things
{
clear:both;
margin-bottom:10px;
vertical-align:middle;
}
.i_float_left
{
padding:0 3px 0 3px;
float:left;
display:inline-block;
}
.i_float_right
{
padding:0 3px 0 3px;
float:right;
display:inline-block;
vertical-align:middle;
}
.sprite
{
display:inline-block;
background: url(../img/icn_sprite_1.png);
width: 16px;
height: 16px;
vertical-align: middle;
}
.icn1{background-position:0,0}
.icn2{background-position:0,16px}
my sprite is always aligned to the bottom, while the checkbox and text are in the middle.
This is not going to work, a span is an inline element so as soon as you remove the text, it will collapse; height and width won´t do anything.
I´m not sure what you want to achieve exactly, but it seems to me that you need to put your sprite as a background to one of the elements you already have (like .i_contain_things), and not put it in a separate element.
If you do need to put it in a separate element, you need to make sure it´s a block level element (for example a div or a span that's set to display:block). That element needs to be positioned where you want it.
You need to specify the background-position property. Like so:
sprite { background: url(../img/icn_sprite_1.png) 50% 50% no-repeat;
Where the first number is axis-x and the second number is axis-y You can use percentages, pixels, or keywords (right, top, center) to declare the position of the background image.
http://www.w3schools.com/css/css_background.asp