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
Related
and sorry I can't properly translate my question into easier language, sorry :(
body
{
background: #33ffcc;
min-height: 100%;
margin-top: 3em;
}
#kal
{
font-size: 2em;
color: #fff;
border: 3px solid #fff;
text-align: center;
}
but here:
http://jsfiddle.net/skinnytotoro/s3Xfp/
and notice the box border is changing everytime the screen size change?
and I want to make the border is fixed, like, 20px from left and right of the text
is there how and any way to do so..?
thanks in advance!
sorry grammar errors too. Hope you don't get headache.
Use display: inline-block and set padding to how much space you want: http://jsfiddle.net/s3Xfp/1/
Another alternative way to get this working would be to set a fixed size div with margins to center the div, then manually set the padding.
#kal {
width: 180px;
margin: 0 auto;
padding: 0 20px;
}
http://jsfiddle.net/s3Xfp/6/
My private webpage's main content is not displaying strangely within Firefox. The header and footer bar both display and the main text is placed adjacent to them towards the right. Occasionally, the footer also moves above the main text. I'm guessing this is all one issue involving the positioning of DIVs that I'm somehow missing. [This has been solved]
The height of two DIVs that are equally as tall when displayed in Chrome is also different. This issue also occurs in Safari but in a different way. There is a 1 px gap between the logo and the navbar that isn't present when viewed in Chrome or Firefox. Can anyone think of a way to reset all of the browser defaults to prevent similar things from happening in the future?
The website is currently not online yet and I'm debugging it for final release. (I don't really want to release this in the current condition as it will frustrate anyone who doesn't use a webkit browser.)
Also, as a side note, anyone know how to fix the CSS errors I'm getting in Internet Explorer 9? The gradient in the nav bar is gone, some areas have missing background color, and all picture links have annoying boxes around them.
EDIT: I saw in an online CSS gradient generator what I need to do to make the gradients work in IE9. The background issue apparently stems from the same source.
Also, is anyone in Opera experiencing issues with the latest debug version at http://jsbin.com/ipixay/1? (Credit for this one goes to Sunyatasattva.)
The link to the fiddle (where the code is posted at) is: http://jsfiddle.net/aaQSD/7/ Please forgive me for the amount of CSS that's still there, but I can't tell which causes the Internet Explorer 9 problems.
My best guess is that the Firefox problem lies somewhere in this section of CSS:
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Times;
background: #efefef url(pics/background.png) repeat top center;
}
#container {
overflow:auto;
width: 95%;
min-height: 100%;
min-width: 946px;
margin: 0 auto 10px auto;
}
#content-wrapper {
width: 100%;
float: right;
text-align: left;
margin: 10px 0 0 0;
}
#content-inner {
padding: 0 15px 0 15px;
}
.center-slide {
font: normal 62.5%/1.5 Times;
letter-spacing: 0;
width: 900px;
height: 485px;
position: relative;
padding: 20px 0 0 0;
margin: 0 auto 0 auto;
background-color: #FFFFFF;
border-radius: 8px;
}
.boxes {
margin: 0 auto 0 auto;
width: 900px;
}
.left-box {
float: left;
background-color: #FFFFFF;
border-radius: 8px;
margin: 10px 5px 0 0;
padding: 20px;
width: 500px;
position: relative;
}
.logo {
width: 26%;
text-align: center;
float: left;
font-family: Times;
font-size: 65px;
font-weight: bold;
color: #FFFFFF;
padding: 10px 0 0 0;
background-image: -moz-linear-gradient(0% 22px 90deg, #0B3474, #517ABA);
background-image: -webkit-gradient(linear, 0% 0%, 0% 70%, from(#517ABA), to(#0B3474));
}
header {
width: 100%;
min-width: 863px;
background-color: #000047;
float: left;
padding: 10px;
color: #FFFFFF;
text-align: left;
font-size: 20px;
overflow: hidden;
margin: 0 0 10px 0;
}
nav {
background-color: #6a6a6a;
font: 16px Times;
min-width: 700px;
float: right;
width: 74%;
}
footer {
font-family: Times;
text-align: center;
background-color: #000047;
color: #FFFFFF;
text-align: center;
padding: 10px 0;
width: 100%;
min-width: 863px;
}
Here is the list of things that have been fixed:
Unwanted boxes/borders around picture
Firefox display issue
Glitchy footer
EDIT: I'm currently working on making a fiddle with the minimal code to replicate the issue as suggested in the comments. I hope you can forgive me for my noobish mistake. Thanks, everyone who have responded so far!
EDIT 2: The fiddle is out! I've removed the pandora's box of code that used to be below.
The header and footer are displayed adjacent to the main container
Is there a reason why they are floated? Removing the float: left rule from the header, makes the container stack below it. If they need to be floated for some reason I am not seeing, perhaps you should consider adding a clear?
Logo height different from navbar element heights
This piece baffled me a bit: I think the culprit is browser default line-height property, which, on Chrome, is coincidentally making your elements align.
Your nav elements have a set line-height of 61, plus a vertical padding of 12 on both sides, adding up to 85px. Your logo has no defined line-height and a font-size of 65px plus a padding-top of 10px. In Firefox this is 10px short.
To fix this, just set the line-height to your logo element as well.
Here is a working JSBin of your code:
Working example
Internet explorer problems:
Missing gradient
Missing background
Annoying border
I don't have IE9 at hand right now, so I might look into it later if you need it, but here are my guesses.
As for the missing gradient, your CSS specifies only webkit and mozilla vendor prefixes. You might want to take a look at the -ms– prefix as well, and check which rules really need it and which don't.
I am skipping the missing background part because it's quite vague and I am not testing on IE right now.
As for the border around linked images, you could perhaps add this rule to your CSS:
a img {
border: 0;
outline: 0;
}
EDIT:
Safari annoying one pixel gap
As for the Safari annoying one pixel gap, it apparently comes from the fact that Safari doesn't calculate well your float: left + width: 26% plus float: right + width: 74%. Adding a .1% to the first element width fixes the problem, but it is not the most elegant solution.
The best solution for your problem at hand is to just float both your elements left. You can see an updated fiddle working in Safari:
Working example
I have edited your fiddle for it to work. I essentially just added float: left; to your #container. You can look at my edits for further details. http://jsfiddle.net/aaQSD/8/
I currently have a fieldset which must take 96% of my container. This fieldset must have his elements centered but also aligned, so for example all the labels must end at the same spot and all the inputs must begin at the same spot.
This was fairly easy without the whole center problem with this code (JSFiddle):
.formulaire
{
margin: 1em auto;
border-style: solid;
border-width: 1px;
border-color: #B0B0B0;
padding: 1em;
}
.formulaire label
{
float: left;
width: 25%;
text-align: right;
}
I've tried to put my fieldset inside a div with text-align center, however it simply centers everything and doesn't align anything.
Any help would be greatly appreciated
Thanks !
Yes you can wrap your form fields in a div, set the width to the longest label/field combination and then center that div with margin:0 auto;
Here is the example
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
/* Normal Bubble */
.bubble {
width: auto;
font-size: 0.75em;
margin-bottom: 24px;
}
.bubble blockquote {
margin: 0px;
padding: 0px;
border: 1px solid #c9c2c1;
background-color: #000;
}
.bubble blockquote p {
margin: 10px;
padding: 0px;
font-size: 21px;
}
.bubble cite {
position: relative;
margin: 0px;
padding: 7px 0px 0px 15px;
top: 6px;
background: transparent url(b/tip.gif) no-repeat 20px 0;
font-style: normal;
}
I have this for my comments.. that looks like "speech bubbles" .
I dont want it big from the beginning, i want to have it custom after the text.. I mean if you wrote "hello" then it should be around it with maybe 1-2px margin from the bubble, so if you wrote "Hello my name is and i like to cook!" then it should be bigger..its like this right now:
<div class="bubble">
<blockquote>
<p>the comment text is here</p>
</blockquote>
<cite>Written by me</cite>
</div>
A div, by default, is block level and, therefore, will expand its width to the width of its parent container (rather than its contents).
Two options to consider would be to set the div to
display: inline-block
Or float it.
Do you mean to put it like that?
.bubble blockquote p {
display: inline;
/*(...)*/
}
See http://www.htmldog.com/reference/cssproperties/display/
I'm not sure quite what you are asking either.
Perhaps you are referring to creating a popup (using images) that scales according to the size of the content? To do that you need multiple overlapping images. It it only scales in one direction (vertically or horizontally) you need two images, if it scales in both directions you need to create four images. This technique is sometimes called "sliding doors".