I have a jquery slider on my page which is centered when the page is wide enough to fit it yet aligns with the left edge of the window and shifts when the window is smaller. Below is my CSS - Am I missing something?
#billboardWrapper {height:600px;width:100%;margin:-170px 0 0 0px; position:relative; overflow:hidden; /*border-width: 0 20px 20px 20px; border-style:solid; border-color: {{settings.billboard_color}}; /* can't use border shorthand. IE9 has a rendering bug, see more notes in the ie8.css file */ }
#billboard {height:600px;width:1000px;position:relative;/*background:#1c1c1c;*/ background-position: 50% 0pt;}
#billboardPrev,
#billboardNext { display:block; text-indent:-9999px; position:absolute; left:40px; top:270px; width:30px; height:30px; cursor:pointer; background: url(arrows.png) no-repeat 0 0; z-index:99;}
#billboardNext {left:auto; right:40px; background-position:0 -92px; }
.slide {height:600px;width:1000px;display:none; }
.slide img {height:600px; width:100%; background-position: 50% 0pt;
.slideLeftLayout .slideTitle,.slideLeftLayout .slideText,.slideLeftLayout .slideLink {left:50px;}
.slideRightLayout .slideTitle,.slideRightLayout .slideText,.slideRightLayout .slideLink {right:50px;text-align:right;}
Perhaps it is centered by chance on the larger screen.
Centering usually works when you have:
width: (any-FIXED-WIDTH-value); - Good spot Bram Vanroy ;)
margin: auto;
which I cannot see...
You should really add your HTML too, and if possible start a jsfiddle and include the link. This way other users can play with it and solve it for you, and we can understand your code better too.
Hope that helps
Related
The site I'm working on has headings that look like this:
http://i.imgur.com/ssvj8J1.png
They need to...
a) be centered on the page
b) be flexible width, to fit the contained text with a few em of padding either side.
c) work on IE9+, and of course all the other modern browsers
d) work on any background (so the images used can't contain white bits to help with overlaying)
I started off chopping it into 3 bits, and using ::before and ::after. This had problems with the backgrounds overlapping.
I then tried a sliding-doors approach, with just 2 images, but obviously had similar problems.
Now I'm on multiple BG images, which I've not used before. Same problem as above, they overlap. The solution seems to be to "clip" the middle one to content-box, but then that limits the padding I can use to strictly 53px, the "width" of each end bit of the banner, making them look too cramped?
Also, what's the best way of centering these? They're h1 tags. Do I need to use positioning/translation/inline-block? Or can I somehow keep them as 100% width block elements (which would be easier/better) and just centralise the backgrounds?
This is what I had before I tried to make them fluid:
h1{
background:url(banner.png) 50% 0 no-repeat;
line-height:52px;
color:#fff;
padding:0 0 6px}
And this is where I'm at now:
h1{
background-image:url(banner-left.png), url(banner-mid.png), url(banner-right.png);
background-position:0%, 50%, 100%;
background-repeat:no-repeat, repeat-x, no-repeat;
background-clip:border-box, content-box, border-box;
line-height:52px;
color:#fff;
display:inline-block;
padding:0 53px 6px}
I'm not happy with this for the reasons mentioned above. I feel I'm missing some obvious/easy tricks?!
Thanks - CSS seems to have moved on a lot since I last did anything significant!
You can use a pseudo elements and avoid the images completely.
Codepen Demo
HTML
<div><h1><span>Short Text</span></h1></div>
<div><h1><span>Much Longer Text</span></h1></div>
CSS
body {
text-align: center;
}
div {
margin: 25px;
}
h1 {
position: relative;
line-height: 1em;
max-width:50%;
display: inline-block;
}
h1 span {
color:gold;
padding: .5em;
background: black;
box-shadow:
0 0 0px 1px gold,
0 0 0px 3px black;
}
h1::before, h1::after {
position: absolute;
content:"";
top:35%;
z-index:-1;
border: solid black;
border-width:25px;
}
h1::before { /* left */
border-left-color:transparent;
left:0;
transform:translateX(-75%)
}
h1::after { /* right */
border-right-color:transparent;
right:0;
transform:translateX(75%)
}
I wanted to make a cool div, so I made this image to get its borders:
The problem is that half of the borders are transparent area, so when I try to fill the empty center of the div with background-color it also paints the outer, transparent area. I'd like the background color not to get past the border.
Here's what I'm talking about:
#charset "utf-8";
/* CSS Document */
#testDiv{
border-image-source:url(https://s9.postimg.org/40j461sf3/Div_Sprite.png);
border-image-slice: 50% 25% 25%;
border-image-repeat:repeat;
border-image-width:auto;
border-image-repeat:round;
background-color: red;
min-height:600px;
width:600px;
}
#body {
height:100%;
width: 100%;
background: #CCC;
position: absolute;
margin: 50px 0 0 0;
}
<div id="testDiv">
</div>
Or see http://jsfiddle.net/6M59T/119/.
How can I solve this? I've thought on putting a slightly smaller div inside this one, but I don't know how to adjust it so it always covers a bit less than its parent. Also, I'd like to keep it as simple as possible. Any ideas?
Maybe i am mistaken, but you can try to play with border-image-outset and margin attribute.
float:left;
margin:50px 20px;
border-image-source:url(http://s9.postimg.org/40j461sf3/Div_Sprite.png);
border-image-slice: 50% 25% 25%;
border-image-repeat:repeat;
border-image-width:auto;
border-image-repeat:round;
background-color: red;
border-image-outset:30px;
http://jsfiddle.net/6M59T/120/
I got a quick question and hope the answer is quick too. How do I make my background to repeat itself throughout the page? I have tried css repeat, it does not work for some reason.
#main_container{
background:url(../images/cb.jpg) top left repeat;
margin:0 auto;
padding:100px 0 150px 0;
z-index:9999;
body{
background-color:#000;
color:#fff;
padding:0 0 0 0;
margin:0 0 0 0;
width:100%;
display:table;
overflow-x:hidden;
position:relative;
}
The problem you see is because your #main-container doesnt fill the full page, you need to extend it for the full height of the page. Why are you using
body { display: table }
in your css? I'd remove that since it could confuse some browsers and shouldn't make any sense...
An easy workaround would be to put the background image in the body tag instead if that is an option for you?
Otherwise you could always add css to your #main-container:
#main_container {
position: absolute;
top: 100px;
bottom: 0;
margin: 0 auto;
}
and keep your body { position: relative; }
You could use background-repeat:
#main_container{
...
'background-repeat:repeat;'
}
It should work on your browser if your not using netscape or smthn like that ^^
If you view this in Firefox, you'll see that the bottom footer stays right with the window as you resize, move, etc. It also starts right at the bottom without a scrollbar. However, in IE8 I can't get it to sit at the bottom at the beginning OR move with the window, and probably a number of other issues. I got the code from this site, and it says it's IE compatible, so I must be doing something wrong. I had to alter the code a bit to fit my situation, but here's the IE specific css:
* {
margin: 0;
}
#container{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px;
}
#footer, .push{
height: 30px;
width: 100%;
background: -moz-linear-gradient(top, #565656, #303030);
background: -webkit-gradient(linear, left top, left bottom, from(#565656), to(#303030));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565656', endColorstr='#303030');
text-align:center;
font-family: loginfont;
font-size:13px;
color: #fff;
padding-top:5px;
clear: both;
}
Can anyone tell me what's going wrong? I'm absolutely clueless at this point. I hate IE...
I'm not sure, but it can be the padding-top:5px; which is causing the problem. Try changing the margin: 0 auto -30px; to margin: 0 auto -35px; and see if that helps.
In your #container add <div class="push"></div> and add position:relative; to #container as negative margin will not work on static positioned elements.
I have some divs which i positioned with
position:absolute;
width:100px;
margin:-20px 420px;
same like this another one also...
the problem is it is looking fine in chrome and firefox ,but in ie7 those divs are being moved away.
how to set it to look perfect in all browsers??thanks
edited:
.button {
display:block;
position:absolute;
width:200px;
height:50px;
background:url(../images/portfolio.gif) no-repeat 0 -49px;
margin:-50px 420px;
}
.button a {
display:block;
position:absolute;
width:100%;
height:100%;
background:url(../images/portfolio.gif) no-repeat 0 0;
text-indent:-9999px;
}
.button a:hover {
background-position: 0 50px;
}
.button1 {
display:block;
position:absolute;
width:200px;
height:50px;
background:url(../images/design-brief.gif) no-repeat 0 -49px;
margin:-20px 420px;
}
.button1 a {
display:block;
position:absolute;
width:100%;
height:100%;
background:url(../images/design-brief.gif) no-repeat 0 0;
text-indent:-9999px;
}
.button1 a:hover {
background-position: 0 50px;
}
these two buttons,button and button1 are inside this div along with some text
.cont
{
position:relative;
width:1400px;
height:500px;
}
I guess you have to set a top:0px and a left:0px. You can not use position:absolute without setting a real position.
Or: You can try position:static or position:relative, I'm not sure what you want to do.
Don't use margin to position your buttons. If you have made it position:absolute; use top: 0px; left: 0px; (obviously setting them to the desired position). As you have set the parent div .cont as position:relative; the buttons will be set within this div as long as they are there in the DOM. So if you were to set them top: 0px; left: 0px; the buttons would sit in the top left hand corner of the div.
Much more reliable than playing with negative margins.
Agree with Matt Asbury... If u r using positions then there is no use of margins. and one more thing, u r using position absolute for buttons. in that case don't use position for its child unless and until u want to position its child as well. If u can provide html then it will be easy to understand the code and help.