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.
Related
I'm trying to do something like this using css:
I need it to:
Only have background (with padding) around the text, and
Have a solid line occupying 100% page width thereafter
For example, I'd like to be able to do the following:
<div style="my-custom-style">T E X T</div>
Would appreciate some input
You can use the :after pseudo element to minimise markup.
The point is to position the pseudo element absolutly and keep the div's position to default static position. This way, setting the pseudo element to width:100%; will make it span the whole width of the divs parent (you will although need to set that parent to an other position than the default static position. In the following demo it is the body element) :
DEMO
CSS :
body{
position:relative;
}
div{
background-color:#FF7F27;
display:inline-block;
}
div:after{
position:absolute;
display:block;
content:'';
width:100%;
height:5px;
background-color:inherit;
}
EDIT:
As stated in comments by #Paulie_D, you should be using a text node to display text like <span> <p> <li> <h1> <h2> ... Using this technique, <span> or a title tag should suit you depending on the content you need to display.
As Stated by #KheemaPandey using a manual space between the letters isn't the best considering HTML semantics , maintainability of your code and the "concept" of CSS styling.
You should be using letters-spacing to space your letters.
Considering both points, your code could look like this :
DEMO
HTML :
<span>TEXT</span>
CSS :
body{
position:relative;
}
span{
background-color:#FF7F27;
display:inline-block;
letter-spacing:0.5em;
}
span:after{
position:absolute;
display:block;
content:'';
width:100%;
height:5px;
background-color:inherit;
}
Try following code
DEMO
<div style="my-custom-style"><span>T E X T</span></div>
div{
border-bottom: 3px solid orange;
}
span{
display: inline-block;
padding: 3px 5px;
background: orange
}
Why can't the #navbar be shifted further upwards ? I tried margin-top but it didn't work. Only an extremely large value had some effect, but the positioning is too skewed.
The #container contains all 3 elements.
#container {
position:relative;
margin: 0 auto;
width:790px;
}
#chicklogo {
float:left;
border:1px solid black;
}
#rightext {
float:left;
border:1px solid black;
}
#navbar {
clear:both;
border:1px solid blue;
}
It can't because #navbar has clear:both and is going to fall under the tallest of the floated elements. From your image, you can see that #rightext is taller and #navbar sits flush under it.
If you gave the logo and right text the same height then your nav would sit just under both.
I have created a JS Fiddle to demonstrate a negative margin-top which would mean the navbar would overlap the preceding element, even though it is set to clear: both.
Ideally, you would reduce the height of the #righttext element as it looks like the white-space in that element is causing your layout issue, but the negative margin-top can also work if that isn't possible.
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?
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)
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