I have a set of css bullets that come along with the Orbit javascript slider by Zurb Foundation. The bullets have a float:left that is necessary so that they line up horizontally when new slides are introduced. Removing the float stacks them vertically....
I need to position the bullets "to the pixel" vertically on my page sadly, and I've had trouble with various browsers, having to use browser-specific css. I turned to jqueryUI to position my bullets based on the Div above it, but there are a couple issues.
The bullets need to be positioned in the center below the slider...and the slider fluidly resizes with the page. JqueryUI can position the bullets on page load, but on resize the positioning gets screwed up due to the float on the bullets...
Just wondering if anybody can think of a solution off the top of their head...I've been stumped for a while lol. Thanks for any help in advance!
I created a basic jsfiddle with 2 divs that should demonstrate the situation. http://jsfiddle.net/KRTYd/2/
<div id="slider">
<img src="http://www.hdwallpaperspot.com/wp-content/uploads/2013/02/nature-background-wallpaper.jpg" style="width:100%;"></img>
</div>
<div id="bullets"></div>
Specifically the html is this:
<ul data-orbit>
<li>
<img src="../img/demos/demo1.jpg" />
<div class="orbit-caption">...</div>
</li>
<li>
<img src="../img/demos/demo2.jpg" />
<div class="orbit-caption">...</div>
</li>
<li>
<img src="../img/demos/demo3.jpg" />
<div class="orbit-caption">...</div>
</li>
</ul>
and the bullet css looks like this:
.orbit-bullets {
overflow: hidden;
position: absolute;
}
.orbit-bullets li {
display: block;
width: 18px;
height: 18px;
background: #ffffff;
float: left;
margin-right: 6px;
border: solid 3px #666666;
-webkit-border-radius: 1000px;
border-radius: 1000px; }
And due to multiple slides indicated in the html, multiple css bullets are generated by javascript.
.orbit_bullets{
text-align:center;
list-style:none;
width:100%;
display:block;
}
.orbit_bullets li {
width: 18px;
height: 18px;
background: #ffffff;
display:inline-block;
margin-right: 6px;
border: solid 3px #666666;
-webkit-border-radius: 1000px;
border-radius: 1000px;
}
Looks familiar to me, i think i already answered this question.
Anyway, #bullet {margin:auto;} instead flotting will do it.
http://jsfiddle.net/yAgdT/
But i do not believe that will do it for the slider once you have many img to slide.
#bullets should become parents of bullets
http://jsfiddle.net/yAgdT/1/
These are supposition, since we have no idea what's gonna be sliding and what you wanna do with the bullets :) .
maybe something more usefull, on the way to become a slider maybe : http://jsfiddle.net/yAgdT/2/
Else, here's a slider i played with where i produce bullets with box-shadow. it runs without javascript. http://dabblet.com/gist/4323453 it's not an anser, but html structure might interest you . if you wish to relay on CSS selectors.
I have two divs both have position relative on them. The inner div has left and top position. They work fine in all browsers except in IE7 it appears the left position needs to be about 100px less. I'm wondering if I can fix this without having to have a IE specific stylesheet.
Here is the code
<div style="position:relative;">
<div class="edit-photo-div">
<a href="#">
<span class="edit-photo-icon">Edit</span>
</a>
</div>
</div>
and my css:
> .edit-photo-div {
background-image: url("/images/editphoto.png");
background-position: 9px 6px;
height: 28px;
left: 143px;
position: relative;
top: -27px;
width: 35px;
margin-bottom:-29px;
overflow:hidden;
}
.edit-photo-icon{
padding-left:35px;
position:relative;
top:6px;
color:#7c7c7c;
font-weight:bold;
}
jsFiddle link
I've run into issues before older versions of IE when I put "position: relative" into span elements. Try taking that out and see if it makes a difference. Also for ".edit-photo-div" try making that absolutely positioned. You already set the "top" and "left" so it should stay in the same place.
I am trying to apply a background-image into a div, it works but i am not able to put it correctly:
I have a space between the top of my div and the top of my background image, it has been reduce a lot by adding a background-position: 0; but it still have a space of many pixels.
I appy a background-repeat: x; (which is apparently the default state), but i have an important space between my images.
How could i solved these issues ?
Here is the html code using bootstrap:
<div class="row-fluid" id="header">
<div id="bar" class="row-fluid">
<div class="span12">
</div>
</div>
</div>
Here is the CSS code:
#bar > .span12{
position: relative;
border-top: 3px solid black;
border-bottom: 3px solid black;
margin-bottom: 10%;
height: 8%;
background-image:url('../img/ban.png');
background-repeat:repeat-x;
background-position:0;
}
Here is the result i get:
Thanks !
Did you tried with background-position:0 !important;? Maybe the property it's getting overwritten.
This image was kind of corrupted, i tried with another one just because i didn't see any solution and it worked, maybe transparant background, i don't know but it came from the image...
I have two questions, hope its not a problem putting them in one post.
Question1
I have a border I want to stretch across the full screen but cant get it to work. I have tried width: 150%, which is okay for the right side, but leaves the left as before. I then added margin:- 100% but that naturally caused issues with items with the div. My code is below. Also im guessing the code I tried would be considered a hack? I am trying not to get into that habit.
#border{
border-top: thick double #000;
border-bottom: thick double #000;
padding: 1% 0 1% 0;
margin-top: 3%;
margin-bottom: 3%;
}
#wrapper{
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
#content{
margin-top: -3%;
}
<div id="wrapper">
<div id="content">
<div id="border">
<!--some small images-->
</div>
</div>
</div>
Question2 I am trying to add a jagged edge with a shadow to the top of a div, I have created the image of the jagged edge and tried using the css3 shadow effect but with no success can someone please advise?
Your #border is inside your #wrapper with max-width:1200px so it's normal it will stop at the 1200-mark. Change the HTML to
<div id="border">
<div id="wrapper">
<div id="content">
<!--some small images-->
</div>
</div>
</div>
and work from there.
Search Google for CSS3 box-shadow for your second problem, lots of examples there!
how could i vertically center a <div> within a <div> ?
my code so far:
<div style="height:322px;overflow:auto;">
<div style="border: Solid 1px #999999;padding:5px;">
</div>
</div>
i have tried "top:50%;" and "vertical-align:middle;" without success
EDIT: okay so it's been discussed a lot. and i've maybe started another mini flame war. but for argument sake, how would i do it with a table then? i've used css for everything else so far so it's not like i'm not trying to employ "good practices".
EDIT: the inner div does not have a fixed height
In short, you're stuffed. More on this in a recent question I asked Can you do this HTML layout without using tables? Basically the CSS fanatics need to get a grip and realize there's simply some things you can't do (or can't do well) without tables.
This anti-table hysteria is nothing short of ridiculous.
Table cells handle vertical centering really well and are backwards compatible as far as you could possibly care about. They also handle side-by-side content way better than floats, relative/absolute positioning or any of the other CSS type methods.
Joel coined (or at least popularized) the term "architect astronauts" in Don't Let Architecture Astronauts Scare You. Well, in that same vein I think the term "CSS Astronaut" (or "CSS Space Cadet") is equally appropriate.
CSS is an incredibly useful tool but it also has some pretty serious limitations. My favourite ishow numbered lists may only appear as "3." but not "3)" or "(3)" (at least prior to CSS3 generated content--or is it CSS2.1? Either way it's not widely supported). What an oversight.
But bigger than that is vertical centering and side-by-side layout. These two areas are still a huge problem for pure CSS. Another poster decided the relative positioning combined with negative margin heights was the way to go. How is that any better than:
<html>
<head>
<title>Layout</title>
<style type="text/css">
#outer { height: 200px; border: 1px solid black; width: 600px; background-color: #DDD; }
#inner { width: 150px; border: 1px solid red; background: yellow; margin: auto; line-height: 100%; }
</style>
</head>
<body>
<table>
<tr>
<td id="outer">
<div id="inner">Inner</div>
</td>
</tr>
</table>
</body>
</html>
which will work everywhere, everytime.
Here is an article on vertical centering in CSS. To achieve a similar thing they use three nested divs with relative+absolute+relative positioning just to get vertical centering. I'm sorry but whoever wrote that--and anyone who thinks that's a good diea--has simply lost the plot.
A counterargument is given in Tables vs CSS: CSS Trolls begone. The proof really is in the pudding. The vast majority of the top 20 (Alexa) sites still use tables for layout. With good reason.
So decide for yourself: do you want your site to work and spend less time getting it to work? Or do you want to be a CSS Astronaut?
It's non-trivial, there can be caveats, and it's not something CSS handles well at this point.
It is however quite widely discussed and googleable. This is a good example.
Whatever you do, please don't fallback to tables.
Edit: this is ridiculous, the following works perfectly well in a strict doc without resorting to table markup:
<style type="text/css">
.outer {height: 322px; overflow: hidden; position: relative;}
*|html .outer {display: table; position: static;}
.middle {position: absolute; top: 50%;}
*|html .middle {display: table-cell; vertical-align: middle; position: static;}
.inner {position: relative; top: -50%; overflow: auto;}
*|html .inner {position: static; max-height: 322px;}
</style>
<!--[if IE]>
<style>
.inner {height: expression(Math.min(this.scrollHeight,322)+'px'); width: 100%;} /* for explorer only */
</style>
<![endif]-->
<div class="outer">
<div class="middle">
<div class="inner">
Any text any height
</div>
</div>
</div>
I like this solution best. It is for IE8+, and is easy to understand.
<style>
/* Can be any width and height */
.block {
height:500px;
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can be any width or height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
</style>
<div class="block"><div class="centered">Centered Content</div></div>
top: 50%; should work. you need to put margin-top to negative half of the height or it will start in the middle. Therefore, you need the height of the inner div. You also probably need position:relative;
Something like this for you inner div.
position:relative;
top: 50%;
height:80px;
margin-top: -40px; /*set to a negative number 1/2 of your height*/
Not very neat working with negative sizes (what does it even mean?) but maybe the easiest way.
<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div style=" #position: relative; #top: -50%">
vertically centered
</div>
</div>
</div>
more information
Two techniques of many
Browser compatibility of the following has been tested in IE only. Modern browsers should handle these no problem.
#1 - Absolute and auto margin
Compatibility: IE 8 +
The combination of top, right, bottom, left and margin: auto centers the div vertically and horizontally.
The width and height are needed, but can be percentages
Can also be applied to an inner div with the parent set position: relative
Note: A max-width and max-height instead of a percentage height is possible IE 9 +. IE 8 requires a height.
html,
body {
height: 100%;
}
.outer {
background: #ff8f00;
height: 50%;
width: 50%;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div class="outer"></div>
#2 - Flexbox
Compatibility: IE 11. See here for other browser support.
Using Flexbox and flexible vw and vh lengths
body {
margin: 0;
}
.outer {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.inner {
width: 50vw;
height: 50vh;
background: #ff8f00;
}
<div class="outer">
<div class="inner">
</div>
</div>
Do you absolutely need to do this with css? The above link looks pretty good, but you could get a result using javasctipt/jquery - determine the height of the innter div and adjust the margin.padding accordingly. Something similar to: (jquery)
var gap = ( $('the-outer-div').height() - $('the-inner-div').height() ) /2;
$('the-inner-div').css( "margin-top" , gap );
A table isn't necessary if you're willing to use the flexbox display model.
E.g.
<div style="height: 322px; width: 200px; display: flex; background: gray;">
<div style="border: Solid 1px #999999; padding:5px; margin: auto;">
This text would be both vertically AND horizontally centered, if it's inner height and width were less than the parent's height and width.
</div>
</div>
If you just want vertical centering use the rule "margin: auto 0;" in the child div.
p.s. You'll have to prefix your use of flexbox if you want cross-browser compatibility (e.g. "display: -webkit-flexbox;")
The display: flex property works especially well for centering, both vertically and horizontally. For vertical centering, add the properties display: flex and justify-content: center to the container.
Try line-height