Why does the search box here not have 15px padding to the right?
This is the CSS:
#element_right {
padding: 120px 15px 0px 0px;
color:#161514;
font-family:helvetica, sans-serif, Arial;
font-size: 13px;
background: #f4f4f4;
width: 270px;
height: 100%;
float: right;
}
I'm using Chrome
This should work (if that's what you're really trying to achieve):
#element_right {
padding: 120px 35px 0px 0px;
color: #161514;
font-family: helvetica, sans-serif, Arial;
font-size: 13px;
background: #F4F4F4;
width: 270px;
height: 100%;
float: right;
}
To reach your effect, setting margin is a more suitable way.
Of course, it would be in conflict with the width as your child element with 280px of width break the entire structure.
I suggest you to remove the width in child element and make width effect at #element_right with a 295px of width the same with boxes below.
So the search box's width and horizontal position would exactly be identical to the boxes below besides the border and box shadow.
EDIT: Delete misleading answer.
Just check with opera, and your 15px padding works, you are just filling it with the search bar
The width of the contents of the search div doesn't leave room for padding, Shrink your input to width:190px
Related
I have a title bar with a content div beneath it, that I would expect to match in width. The content div, however, appears to be offset very slightly to the left, as well as being slightly narrower as evidenced on the right hand side in this image:
The title div also has a little dynamic JS to make it "stick" to the top of the page, thus the "stick" portion of the css is also included.
Title div
#menu {
margin-top: 10px;
padding: 0.5ex;
width: 100%;
background-color: #0B0000;
color: #ffffff;
height: 16px;
}
#menu.stick {
margin-top: 0 !important;
position: sticky;
top: 0;
z-index: 10000;
}
Root background
#bodystyle {
background-color: #efefef;
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding-left: 20px;
padding-right: 20px;
}
Page Content
#pagecontent {
/*width: 100%;*/ <=== This being set does not remedy the problem.
padding-left: 7%; Instead the div expands to the right hand
padding-right: 7%; edge of the page.
padding-top: 3%;
background-color: #ffffff !important;
}
Could the edge of the title possibly be affected by the text padding? I would have thought not, myself. Or, is this expected behaviour? Ideally I would like both sides of both title and content divs to be utterly uniform.
To answer here.
So what you want to do is add box-sizing to all alements:
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
this could go just after your css reset. This way when you set the width of an element, that's the width that it is, as padding is now happening inside that width.
Next for height, you have 2 options, fixed height of that nav or to add padding to it. I would go with fixed height and also add line-height to be same height in order to center text in it.
Thats it.
Is center padding real for css because as I use notepad++ it shows the tag in red coloring. I have tried putting a hyphen in between the words but nothing seems to be working can I get some answers for my problem please and thank you. This is the code that I'm trying to find out why the text is red in notepad++.
head{
width: 700px;
margin: 20px auto;
center padding: 20px;
}
body{
font: normal 80% Arial, Helvetica, sans-serif;
font-size: 15px;
padding: 25px 0 15px 0;
background-color: ;
center padding: 20px;
width: 700px;
margin: 20px auto;
}
No, center padding is not real. If you are trying to center a div or item, you should use margin: 0 auto; or to center text in an item you can use text-align: center;.
No. Center padding is not a possible property in css, much like it would not be possible in real life.
If you are looking to apply the same padding all the way around an element (all four sides) you can simply use
padding:20px;
This will give you 20 pixels of padding top,right,bottom and left.
See more examples here
I'm working on the unbounce landing page platform. Overall, it's really awesome and makes A/B testing pretty easy. It's more or less just drag and drop, but you're able to add css, html, javascript, etc.
Anyway, I'm working on creating a fixed signup area on the bottom of the screen (should boost conversions), but I'm having some troubles. The signup box is created within the wysiwyg dashboard, and from what I see it just builds the CSS for you, as you move sliders, change colors and such.
I'm able to make the entire signup area float right to the bottom, but I can't get the signup box to stay centered. I can use margins and positioning, but not the align: center function.
I've tried doing margin-left: auto; margin-right: auto as well as text-align: center; but it does absolutely nothing!
When changing the size of the screen, it just will not stay centered. But here's the kicker; the text has no problem centering with just width: 100%.. The signup box doesn't seem to respect any wrapper and I'm thinking this might be the problem.
This is all the CSS I'm using to create this fixed section:
#lp-pom-box-214 {
top: auto !important;
display:block;
position:fixed;
margin-left: auto;
margin-right: auto;
bottom:0px;
width: 100%;
align: center;
}
#lp-pom-form-51 {
top: auto !important;
display:block;
width: 100%;
position:fixed;
bottom: 25px;
margin-left: 26%;
}
#lp-pom-text-211 {
top: auto !important;
display:block;
position:fixed;
bottom:75px;
width: 100%;
}
Thanks a TON in advance!! This client is really good to me, so I want to do a good job for them. I'm not a great coder, but I'm very good at marketing so feel free to give me a shout if you need help in that arena :) That's the best way I know how to give back to whoever helps me out (or anyone else in the community for that matter).
Thanks again.
You can't adjust the position of a fixed positioned element in this way.
A fixed position element is positioned relative to the viewport, or the browser window. The viewport doesn't change when the window is scrolled, so a fixed positioned element will do exactly as the name implies and remain fixed in it's assigned position. To position a fixed element you use the properties top, right, bottom, and left
If you want to keep it as a fixed positioned element you can vertically and horizontally center it on the page by setting top and left to 50% so as the left-top corner of the container is centered within the page, you can then use margin-top and margin-left with negative values to compensate for half of the width and height of the element to achieve true center within the center of your container.
Something like this?
if yes check this code
css
.fixed-bottom {
position:fixed;
left:0;
bottom:0;
padding:10px 0;
background:#CCC;
width:100%;
}
.fixed-bottom h1 {
text-align:center;
}
#lp-pom-button-52 {
display: block;
z-index: 61;
width: 175px;
height: 54px;
line-height: 54px;
behavior: url(/PIE.htc);
border-radius: 8px;
background-color: #ff0000;
background: -webkit-linear-gradient(#ff0000,#e60000);
background: -moz-linear-gradient(#ff0000,#e60000);
background: -ms-linear-gradient(#ff0000,#e60000);
background: -o-linear-gradient(#ff0000,#e60000);
background: linear-gradient(#ff0000,#e60000);
box-shadow: inset 0px 1px 0px #ff4c4c,inset 0 -1px 2px #b30000;
text-shadow: 1px 1px #5c0000;
-pie-background: linear-gradient(#ff0000,#e60000);
color: #fff;
border-style: solid;
border-width: 3px;
border-color: #333333;
font-size: 24px;
font-weight: bold;
font-family: arial;
text-align: center;
background-repeat: no-repeat;
float:left;
margin:0 0 0 10px;
}
#lp-pom-form-51 .lp-pom-form-field input[type=text] {
border-style: solid;
border-width: 10px;
border-color: #002c77;
}
a {
color: #ff0000;
text-decoration: none;
}
Take the following example:
This is a textarea, with a background image (the grey bar) and a relative positioned div after the textarea with a top offset to move the text in place.
The Markup:
<textarea cols="40" rows="6" class="some_textarea">Hello</textarea>
<div class="message_text">This is a message</div>
The CSS:
.some_textarea {
background: transparent url(gray_bar.png) repeat-x 50% 100%;
width: 99%;
padding: 5px;
margin: 0;
font-family: Arial,Helvetica,sans-serif;
font-size: 13px;
border: 1px solid #C3C3C3;
}
.message_text {
display: inline;
color: #999;
font-size: 10px;
position: relative;
top: -21px;
padding: 0 6px;
}
The problem is that Firefox is the only browser that doesn't agree with the offset, and results in this very small pixel pushing annoyance:
What is causing this? How can I fix this for consistency? What non-clunky workarounds exist if it can't be fixed?
UPDATE
http://jsfiddle.net/UnsungHero97/maHkr/7/
How about something like this...
http://jsfiddle.net/UnsungHero97/maHkr/2/
What I did was wrap your textarea/message combo in a relatively positioned div and then absolutely positioned the message to the bottom left. You can play round with the exact positioning/margins/paddings to get it looking good across the browsers.
I hope this helps.
Hristo
use jQuery(window).load() instead of jQuery(document).ready()
I have this CSS code:
#tweet-container{
width: 290px;
height: 272px;
border: 1px solid #CCC;
color: #CCC;
font-size: 28px;
text-align: center;
letter-spacing: -2px;
min-height: 10px;
display: table-cell;
vertical-align: middle;
padding: 15px;
}
But firefox doesn't seem to recognize the top and bottom padding. Safari and Chrome both show it normally, and even in Firebug when I add padding-top: it doesn't work. Its like its not a valid statement or something. Is there something I'm missing?
Humm, this is a bit interesting. You've set the width as 272px, but its actually displayed as 270px. You've set the height as 290px, with the 30px total of padding, the real displayed height should be 320px, but its actually 318px.
Had a little play and taking out display: table-cell; seems to sort the issue. Although the padding isn't spread equally for some reaosn, it all appears at the bottom. Putting the text in a p tag, and giving that a 15px top margin has done the job though I think.
did you try adding padding:15px!important; ?