I've been furiously googling my issue and I can't seem to resolve the problem.
I have created and iFrame that scrolls through 8 images with a left and right direction button. When I text-align: center; the DIV that holds the images, the right arrow (#leaf2) dissapears.
Here is my HTML,
<html>
<body>
<div id="leaf1"><button onClick="image_onclick('prev');"><img src="images/leaf.gif/></button</div>
<div id="image_box"></div>
<div id="leaf2"><button onClick="image_onclick('next');"><img src="images/leaf2.gif"/></button></div>
</body>
</html>
Here is my CSS,
body, p, image{
margin: 0;
padding: 0;
}
button{
background-color: #ffffff;
border: 0;
}
#image_box{
text-align: center;
}
#image_box img{
border: 1px solid black;
}
#leaf1{
position: absolute;
margin: 155px 0 0 8px;
}
#leaf2{
position: absolute;
margin: 160px 0 0 850px;
}
I'm not sure if this was an error in copying but you have
</button</div>
instead of
</button></div>
Also, if you're trying to center the images within your image_box, you'll need to set your left and right margins to auto. So:
image_box img{
margin: 0 auto; /* or margin-left:auto; margin-right:auto; */
border: 1px solid black;
}
There are a couple of syntax issues here:
<img src="images/leaf.gif/></button</div>
Does the page render differently when you close the src attribute and the <button> element?
<img src="images/leaf.gif"/></button></div>
Also note that, according to the code you posted, you are applying text-align: center to an empty div.
Related
I would like to achieve a look using bootstrap like this:
If you see the lines that say Top Hit, Artists and Genres I was hoping that I could put it on the top line of a panel like this:
I would like to put the text like "Top Hit" on the top of the panel.
Thanks, couldn't figure this out and hope you guys might know :-)
You will have to make use of negative margin to achieve this.
Say you have the HTML as:
<div>
<h1>Artists</h1>
</div>
Then you need CSS as:
div{
height:100px;
width:100px;
border:2px solid black;
margin-top:10px;
text-align: center;
}
h1{
width:50px;
margin-top:-10px;
margin-left:auto;
margin-right: auto;
background:white;
}
Explanation:
Inside the div, align the text in the center. Give negative value of margin-top of h1 to place on the top of border-line of div. Now give some width and margin-left and margin-right as auto, this will center the heading.
See the fiddle: "http://jsfiddle.net/kboutd9q/1/"
See the screenshot as:
You can try like this-
*{margin:0;padding:0;}
div {
border: 2px solid #ccc;
height: 200px;
margin: 10px auto;
position: relative;
width: 300px;
}
h3 {
background: #fff none repeat scroll 0 0;
height: auto;
left: 20px;
padding: 3px 5px;
position: absolute;
top: -15px;
}
<div>
<h3>Test</h3>
</div>
I've added addthis share buttons to a page here and I can't get equal margins/distribution across the div width, so there's a gap on the right hand side which takes into account the fluid width.
I've tried proportional margins/paddings at different percentages, but can't seem to make it responsive.
Here's the CSS and the rest is viewable in an inspector:
.bg.social {
border: 1px solid #FCFCFD;
padding: 15px 0;
background: #E4E4E4;
text-align: center;
width: 94%;
margin: 0 0 2em;
height: 32px;
}
.bg.social a {
margin: 0 4%;
padding: 0;
float: none;
}
.addthis_toolbox {
margin: 0 2%;
}
Update: Got it to work with the following, the same as Bartdude's answer:
.bg.social a {
padding: 0 3%;
display: inline-block;
}
.bg.social {
border: 1px solid #FCFCFD;
padding: 15px 0;
background: #E4E4E4;
text-align: center;
width: 95%;
margin: 0 0 2em;
}
Basically, what you want is to be able to use text-align:center on your button links. Problem is you can't do that, as you floated them for them to appear side-by-side.
I would then suggest to change the display of those anchors to display:inline-block (be carefull though it's not supported by older IE versions... I don't find it important myself but maybe your target audience is using it), so that you can both make use of the text-align:center of the parent and still have a margin around each anchor.
Alternatively, I would suggest only putting a right or left margin, and use CSS pseudo classes :last-child or :first-child so that the first or last element don't have that margin. This shouldn't actually make no visible difference, but your CSS would be a bit more clean and modern...
Try setting margin to
.addthis_toolbox {
margin: 0 10%; // from 2 to 10%
}
.addthis_toolbox {
margin: 0 5%;
}
I cleared all the margins and divs in parent and child divs. Then :
.bg.social a { width:20% }// divided to 5 equal part
and dicreased the margin of .addthis_toolbox.addthis_32x32_style span {
.addthis_toolbox.addthis_32x32_style span {margin-left: 20px;}
everything is ok.
Try it, add to your css:
div.foraddthis {
text-align: center;
width: 100%;
}
.addthis_toolbox {
display: -webkit-inline-box;
display: -moz-inline-box;
display: inline-flex;
}
.addthis_default_style .at300b {
float: none;
}
And HTML:
<div class="foraddthis">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style"> <a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_pinterest_share"></a>
<a class="addthis_button_tumblr"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-529d1f4f354abd32"></script>
</div>
<!-- AddThis Button END -->
Demo: http://jsfiddle.net/vPw7u/
I have a little problem in centering elements inside a div. Although the css works fine for Google Chrome, it fails for Internet Explorer.
Say I have a div with id="contactus" and I want everything inside the div to be centred, whether it be a header, para or images. More specifically, I want a header to be centred, which is followed by an underline spanning over the 80% of the width in the div, with centre alignment. Consider this:
<div id="contactus">
<h2>CONTACTS</h2>
</div>
#contactus {
margin-top: 20px;
height: 308px; /*2px for the border on both sides*/
width: 248px; /*2px for the border on both sides*/
background-color: #F0F0F0;
border: 1px solid #A9A9A9;
}
#contactus h2 {
margin:0 auto 0 auto;
text-align: center;
font-family:arial,sans-serif;
padding-top: 10px;
/*this is for the underline after the heading*/
width:80%;
border-bottom:1px solid gray;
}
The header and the underline remain left aligned in IE, but centre aligned in Chrome. How can I rectify that ?
Note: I am using a separate css stylesheet for IE, so the answer may be specific to IE only.
it might be because of doctype Check that you have a valid doctype
try
<!DOCTYPE html>
change like this
#contactus {
text-align:center;
margin-top: 20px;
height: 308px; /*2px for the border on both sides*/
width: 248px; /*2px for the border on both sides*/
background-color: #F0F0F0;
border: 1px solid #A9A9A9;
}
<div id="contactus" align="center">
<h2>CONTACTS</h2>
</div>
I'm trying to center a heading (with variable width) and have the underline running from the left hand edge of the page to the end of the text. Unless I'm missing something, there doesn't seem to be an easy way of doing this! The closest I've come to what I want is:
<style type="text/css">
#wrapper1 {
margin-right: 50%;
border-bottom: 4px solid red;
}
#wrapper2 {
text-align: center;
position: relative;
left: 50%;
}
h1 {
display: inline-block;
margin: 0 auto;
border-bottom: 4px solid red;
}
</style>
<div id="wrapper1"><div id="wrapper2"><h1>Centered.</h1></div></div>
This way, the text is centered with a border acting as an underline, and the border on wrapper1 extends from the left hand edge to the center. BUT, because the heading is within the wrapper, and the border on the wrapper is outside of the content, the wrapper border is below the heading border.
Any suggestions gratefully received - this is driving me mad!
In your #wrapper2:
bottom: -4px;
Will make it move 4 pixels downwards to overlap the other line.
(Tested in Safari, works)
Try removing both the padding-bottom and margin-bottom on both wrappers (set to 0), then add it back in on the inner one only until it looks right.
OK, I had a go, and this works for me. I had to put position relative on both wrappers, which then allows you to push the inner wrapper down a couple of pixels from it's original location.
<html>
<head><title>test</title></head>
<body>
<style type="text/css">
#wrapper1 {
margin-right: 50%;
margin-bottom:0;
padding-bottom:0;
border-bottom: 4px solid red;
position:relative;
}
#wrapper2 {
text-align: center;
position: relative;
left: 50%;
margin-bottom:0;
padding-bottom:0;
position:relative;
top:4px; /*The width of the border doing the underlining*/
}
h1 {
display: inline-block;
margin: 0 auto;
border-bottom: 4px solid red;
}
</style>
<div id="wrapper1"><div id="wrapper2"><h1>Centered.</h1></div></div>
</body>
</html>
Ok, so we know that setting padding to an object causes its width to change even if it is set explicitly. While one can argue the logic behind this, it causes some problems with some elements.
For most cases, you just add a child element and add padding to that one instead of the one set to 100%, but for form inputs, that's not a possible step.
Take a look at this:
body {
font-size: 14px;
margin: 0px;
padding: 0px;
}
DIV.formfield {
clear: both;
margin: 0px;
padding: 10px;
}
DIV.formlabel {
margin-top: 20px;
padding: 5px;
font-weight: bold;
text-align: left;
}
DIV.formvalue {
background-color: #eee;
border: 1px solid red;
padding: 10px;
margin: 0px;
}
DIV.formvalue.correct {
border: 1px solid green;
}
textarea.textarea {
width: 100%;
min-height: 80px;
}
input.input {
width: 100%;
padding: 5px;
}
input.input2 {
width: 100%;
}
input.input3 {
width: 100%;
padding: 5px;
margin: -5px;
}
input.input4 {
width: 100%;
padding: 10px;
margin: -10px;
}
input.input5 {
width: 100%;
padding: 10px;
box-sizing: border-box;
}
<div class='formfield' id='field_text'>
<div class='formlabel'>No padding</div>
<div class='formvalue'>
<textarea class='textarea' cols='80' rows='10' name='text'>No padding here</textarea>
</div>
<div class='formlabel'>Also no padding</div>
<div class='formvalue'>
<input type='text' class='input2' name='apa' value='Or here...' />
</div>
<div class='formlabel'>5px padding, which extends the parent element, d'oh!</div>
<div class='formvalue'>
<input type='text' class='input' name='apa' value='I dont want to extend outside the square!' />
</div>
<div class='formlabel'>5px padding and -5px margin, this does the trick, almost...</div>
<div class='formvalue'>
<input type='text' class='input3' name='apa' value='I dont want to extend outside the square!' />
</div>
<div class='formlabel'>10px padding and -10px margin, things are falling apart on the right side</div>
<div class='formvalue'>
<input type='text' class='input4' name='apa' value='I dont want to extend outside the square!' />
</div>
<div class='formlabel'><img src="/bilder/icons/badges/ok.png" width="16" height="16" border="0"> 10px padding and box-sizing: border-box</div>
<div class='formvalue correct'>
<input type='text' class='input5' name='apa' value='I dont want to extend outside the square!' />
</div>
</div>
The second input has its padding set to 5px which I very much prefer to the default setting. But unfortunately that makes the input grow 10px in all directions, including adding 10px to the 100% width.
Problem here is that I can't add a child element inside the input so I can't fix it. So the question is:
Is there any way to add padding inside the input while still keeping the width 100%? It need to be 100% since the forms will render in different width parents so I don't know beforehand the width of the parent.
Using CSS3 you can use the property box-sizing to alter how the browser calculate the width of the input.
input.input {
width: 100%;
box-sizing: border-box;
}
You can read more about it here: http://css-tricks.com/box-sizing/
I don't know how cross browser compatible it is (it works in firefox and safari), but you could try this solution:
DIV.formvalue {
padding: 15px;
}
input.input {
margin: -5px;
}
(Only posted the values that I changed)
One option is to wrap the INPUT in a DIV which has the padding.
CSS:
div.formvalue {
background-color: #eee;
border: 1px solid red;
padding: 10px;
margin: 0px;
}
div.paddedInput {
padding: 5px;
border: 1px solid black;
background-color: white;
}
div.paddedInput input {
border: 0px;
width: 100%;
}
HTML:
<div class="formvalue">
<div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>
The oft-forgotten calc can come to the rescue here:
input {
width: calc(100% - 1em);
padding: 0.5em;
}
Since we know the padding will add to the width of the element, we simply subtract the padding from the overall width. It's supported by all major browsers, is responsive, and doesn't require messy wrapper divs.
I've been having some issues with something similar to this. I have tds with inputs of 100% and a small padding. What I did was compensate for the padding on the td as follows:
.form td {
padding-right:8px;
}
.form input, .form textarea {
border: 1px solid black;
padding:3px;
width:100%;
}
padding of 8px to include the border and padding of the input/textarea.
Hope this helps!
Perhaps take the border+background off the input, and instead enclose it in a div with border+background and width:100%, and set a margin on the input?
One solution I have found works is to absolutely position the input with a relatively positioned parent tag.
<p class="full-width-input">
<input type="text" class="text />
</p>
The apply the style:
p.full-width-input {
position: relative;
height: 35px;
}
p.full-width-input input.text {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 5px;
}
The only thing to be aware of is that the paragraph tag needs a height setting as its absolutely positioned children will not expand its height. This avoids the need to set width: 100% by locking it to the left and right sides of the parent element.
Try using percentages for your padding:
.input {
// remove border completely
border: none;
// don't forget to use the browser prefixes
box-shadow: 0 0 0 1px silver;
// Use PERCENTAGES for at least the horizontal padding
padding: 5%;
// 100% - (2 * 5%)
width: 90%;
}
If you're worried about users on old browsers who can't see the box-shadow, just give the input a subtle background colour as backup. If you're using pixels for this sort of thing, then the chances are you're using them elsewhere, which could present a few extra-challenges, let me know if you encounter them.
Only thing I know to prevent this is assign values like that 100%-10. But it has some compatibility issues tho.