How to make input fields (text) end where the divs end? Now they go pass the grey box. See jsfiddle.
http://jsfiddle.net/FNZD6/
input[type="text"].normal100{
display:block;
font-size: 1.6em;
width:100%;
margin:0px;
padding: 0px;
}
I'm not quite sure why this happens, but here is a fix.
*{
box-sizing: border-box;
}
You'll need to prefix that too. I always set the box-sizing on everything but you can set it on specific elements if you wish.
Demo
The input field is slightly bigger than the divs in your example because of the left and right borders. Easiest way to fix that is to explicitly set those to 0:
input[type="text"].normal100{
display:block;
font-size: 1.6em;
width:100%;
margin:0;
padding:0;
border-left:0;
border-right:0;
}
You'll probably want to add a border to your div.
Related
I would like to center the text in a button, however, it seems to sit too far down, at least in Chrome. Any tricks? I've tried setting line-height.
http://jsfiddle.net/BCKYp/
<button>go</button>
button{
background:yellow;
height:23px;
width:28px;
padding:0;
margin:0;
border:solid black 1px;
line-height:23px;
}
When using line-height, you need to set it equal to the font-size.
Also add vertical-align: top
button {
background:yellow;
height:23px;
width:28px;
padding:0;
margin:0;
border:solid black 1px;
line-height:13px;
font-size: 13px;
vertical-align: top;
}
http://jsfiddle.net/BCKYp/8/
Setting line-height equal to element's height is working properly if your text written in uppercase. Line-height is expected to be used as a property for styling paragraphs and using it for centering element in a div or a button you'll have to adjust it's value for every specific case.
In your case you can either adjust the line-height visually or use padding-top and padding-bottom for sizing the element.
I used padding-bottom and it works fine.
http://jsfiddle.net/BCKYp/22/
This is a case by case question, personally I would remove the height and line-height and set top and bottom padding. It also looks slightly skewed due to the nature of the character 'g' taking up more space below.
My preference would be:
button{
background:yellow;
width:28px;
padding:5px 0;
margin:0;
border:solid black 1px;
}
Here's an updated fiddle, you can adjust the padding to suit your needs. I've also added another button to show with more centred characters. Y.
I would just set a smaller line-height, but really I would use a reset css file to make sure this will have similar effects on all browsers.
line-height: 21px;
As the above will look different on the other browsers but will fix the problem for Chrome. Its an ugly solution in otherwords.
Add one more property in your css class. Add following property to your class
text-align: center;
It doesn't appear centered because g and o only extend halfway up the baseline.
http://jsfiddle.net/ExplosionPIlls/BCKYp/1/
However, you can reduce the line-height (to 11px for example) to give the illusion of moving the lower-cased letters upwards:
http://jsfiddle.net/ExplosionPIlls/BCKYp/4/
try this
don't give width and height,
http://jsfiddle.net/BCKYp/12/
button{
background:yellow;
padding:2px;
margin:0;
border:solid black 1px;
}
I'm trying to create this box, but it's a little over my head. I can't get the spacing after the white header text to display correctly.
The live version is here, and the current CSS is below. A standard < p > inside the div ignores the bottom padding on hblock and I can't help but think I'm going about this the wrong way. Is there a simpler way to create this element or something I'm missing in the code?
Many thanks.
#lheaderblock{display:block;
padding:0px 10px 0px 10px;
background-image:url('http://atlas.czg.net/atlas/wp-content/uploads/2012/12/caption_header_blue.gif');
height:160px;
width:90%;
border:1px solid #000000;
background-repeat:no-repeat;
overflow: hidden;}
hblock{position:absolute;
color:#FFFFFF;
font-size:14pt;
padding:10px 0px 20px 15px;}
I don't know what <hblock> is. When browsers don't know either, they will render them as inline element. You need to give it display: block and remove position: absolute. Tweak the padding and you'll be fine.
I am new to responsive design, I want to make responsive menus, images, blocks and every thing in the website templates.
I ready that all width should be in percentage, I make this example
http://jsfiddle.net/hQBR6/
How can I make the form with it's input respond to different screen size without going below the ul??
Problem is, that you are mixing margin set in PX and widths set in %. When screen is resized below certain dimensions, there isn't enough space left for elements with margin that big and input falls below.
You should set your margins in % - if you are working on repsonsive design.
Here is how I modified your code to make it work:
ul#menu{
border:1px solid black;
display: inline-block;
float:left;
max-width:50%;
margin-left:5%; /* changed to percentage */
margin-top:36px; /* should be percentage as well*/
list-style-type:none;
}
ul#menu li{
display: inline-block;
float:left;
margin-right:36px; /* should be percentage as well*/
width: auto;
}
#header form {
display: inline-block;
margin-right:1%; /* changed to percentage */
float:right;
width:10%;
}
#header form input{
margin-top:28px;
background-color: #e0e0e0;
border-radius:4px;
border:none;
height: 26px;
color:#a6a6a6;
}
note: I played only with left/right margins and real dimensions are up to you.
Hope this helps
For your quick start please go through below link you will find nice examples to start responsive design.
http://twitter.github.com/bootstrap/
Can anyone tell me what I need to do in order to get the following page to center the contents correctly?
I've been trying to work with something else I used earlier in the day from here:
#divWrapper {margin:0 auto; text-align:center;}
#div {text-align:left;}
But this isn't working for me. One of the pages I need help with is here:
REDACTED
Thank you for any help, I'm just trying to get this fixed before I can head off to bed :\
#main-inner {
position: relative;
width: 960px;
border-top: 3px solid #DADADA;
margin: 20px auto 0;
overflow:auto;
zoom:1;
}
try this one. replace the existing with this. it should center the content.
It needs a width! to work correctly.
Give your #divWrapper a width. By default the width will expand as far as the containing element, so to create the appearance of it being centered, its width needs to be less than its containing element.
You can only center elements with margin:0 auto when you provide a fixed width from which the margins can position themselves from automatically. So add a fixed with to your wrapper and it should work.
You might also need to specify text-align:center; if you want the actual div contents centered.
Try this #divWrapper {margin:0 auto; text-align:center;width:960px}
#div {text-align:left;width:500px}
Edit:
There are typing mistakes in your CSS.
Check this updated CSS for margin-inner & margin-inner-right. It will fix your problem
#main-inner {
float:left;
position:relative;
width:100%;
border-top:3px solid #dadada;
margin-top:20px;
margin-right:auto;
margin-left:auto;
}
#main-inner-right {
position:relative;
width:640px;
text-align:left;
margin-top:20px;
margin-right:auto;
margin-left:auto;
}
How can I make my website look more like the second image presented below? (Notice the left margin in the second image, versus no margin in the first one.)
http://fotografcim-2.hosting.parking.ru/ (This is a demo site.)
No margin:
Margin:
div#outer {
background-color:#FFFFFF;
border:1px solid #D0D4C9;
margin:0 auto 5px;
padding:0;
width:80%;
}
The above one is your style
I remove the auto in the margin:
Put margin as you want
margin:0 5px;
Use FF Firebug addon for better understanding
Refer these
http://www.webreference.com/authoring/style/sheets/layout/advanced/
http://www.yourhtmlsource.com/examples/positioning2.html
I would surround that all in a wrapper and set the width of that wrapper to the current width of the internal div.