I'm building a carousel/slideshow-type widget that rotates between 3 quotes. Let's say the markup looks like this:
<div class="carousel">
<blockquote>...</blockquote>
<blockquote>...</blockquote>
<blockquote>...</blockquote>
</div>
I want the three quotes to overlap in place, and I'll then transition their opacity property to create fade in/out transitions. My CSS looks something like this:
.carousel{
position: relative;
}
.carousel blockquote{
position: absolute;
top: 0px;
left: 0px;
}
Now if I leave it at this, the .carousel div will default to a height of 0px, and will not push the rest of the page's content down.
So I need to specify a height, but the problem is each quote can be of different length, and as a result each blockquote can have a different heights.
So my question is this: how can I make sure that the .carousel div stretches to fit the blockquote with the biggest height?
I'd prefer a pure-CSS solution, but if it doesn't exist, an elegant JS or jQuery solution works for me as well.
Here's my own answer, using a simple jQuery loop to find out which blockquote is the tallest:
var tallest = 0;
$('blockquote').each(function (i, e){
var h = $(e).height();
tallest = h > tallest ? h : tallest;
});
$('.carousel').height(tallest);
It turns out it is possible without JavaScript! All props to Hugo Giraudel for finding the solution:
http://codepen.io/HugoGiraudel/pen/d6006e5bb32f13d50d1ab07d6cadbc8f?editors=010
The trick is floating all blockquotes and giving them a width of 100%. Hugo was then able to use margin-left: -100%; instead of position: absolute and top: 0px to overlap them, which doesn't disrupt the normal flow of the layout.
Note that the JS code in there is only used to animate each blockquote's opacity (which could also be done in CSS, but that's another problem), not to set the layout.
I guess what you could eventually do is trying to center every blockquote vertically so that whatever their size is, and even if they overflow the container height, they remain centered anyway ?
Using that method maybe : http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Classic problem and unsolvable without javascript.
If you want to do it without javascript I guess you could use a dirty hack like this: (if you know the width at least...)
<style>
.carousel{
position: relative;
border: solid 1px #000;
}
.carousel blockquote{
float: left;
width: 300px;
}
.carousel blockquote.next{
float: left;
margin-left: -340px;
width: 300px;
}
</style>
<div class="carousel">
<blockquote>...</blockquote>
<blockquote class="next">...<br>second</blockquote>
<blockquote class="next">...<br>...<br>third</blockquote>
</div>
Related
I want to place a div fixed on the left and near I want to place other div.
Imagine a twitter webpage, I want to fixed the left panel (where you write yout tweets) and near I want to place the panel where you read tweets.
Now I have the following code:
<div id="container">
<div id=fixed-menu>
</div>
<div id="content">
</div>
</div>
#fixed-menu {
position:fixed;
background: #fff;
padding: 10px;
top:60px;
left: 10px;
width:300px;
max-width: 300px;
}
#content {
background: #fff;
padding-top: 10px;
}
In this way, the div with id="content" appear on left so, the fixed-menu doesn't appear, because it is under content div.
If I use margin-left in #content the error is solved, but I don't want use that, any other solution?
Thanks.
One of the first things to note is that by putting a position Fixed on div#fixed-menu breaks it out of the normal document flow. What this means is that the other block/inline level elements do not know about it. Also by making it fixed, you make it fixed relative to the window. If you want it "fixed" within the container and not to a certain point on the screen I would go with position:absolute and then a position:relative on it's parent container.
Either way, the problem you're experiencing where div#content doesn't respect the position of the fixed element, is due to the fact that the fixed element is no longer part of the normal document flow. Adding a z-index to div#fixed-menu should bring it above the content. However, you will see overlapping and will have to account of the offset of div#content with either margin on div#content or padding on the parent container.
If you look at this fiddle: http://jsfiddle.net/f38aj/
css:
#container {
position: relative;
height: 700px;
padding: 0 0 0 320px;
}
#fixed-menu {
position: fixed;
background: red;
padding: 10px;
top:8px;
left: 8px;
width: 300px;
max-width: 300px;
}
#content {
background: blue;
padding-top: 10px;
}
If you notice we create padding in the container, where we end up overlaying the div#container object.
we have a fixed container on the left while the right side content will scroll with the page. If you can come up with a non fixed solution it might be better, as there are phone browsers like older versions of iOS that will take anything that is position fixed and replace it with position absolute.
A side note, working with fixed/absolute positioning is useful especially in some crazy cases, but it does require a little more due diligence on your/your teams parts to maintain. If you start getting into z-indexes you might want to look at a library like less or sass just to create global css variables, which will make it easier to manage what can turn into an almost unmanageable experience.
hope that helps.
Actually this is a problem I encountered during the developing of blogger.
I want to write a navbar on my own, but the width of parent elements limit the style width:100%, even if I set the float properties to it.
Please see the image above. Only nav's HTML/JS/CSS are configurable. So how can I configure the CSS Style of class nav to archive this goal?
Or, If you have relevent experience in developing blogger, please tell me.
Thanks a lot!
use position absolute for your nav. Look at this FIDDLE
html :
<div class="first">0</div>
<div>
1
<div class="nav">NAV</div>
</div>
<div>2</div>
css :
div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }
EDIT
Your nav is in a position:relative; well you can append your nav to your body with that jquery (HERE THE FIDDLE UPDATED):
$(".nav").appendTo("body");
To achieve that kind of 'layering' you probably need to use absolute positioning, especially if your options are limited. This has the obvious caveat of taking it out of the page's flow, so you'll need to ensure your page is never too short for it to be visible. It won't affect other elements around it either.
So, something like:
nav {
left: 0;
position: absolute;
top: 400px;
width: 100%;
}
Hopefully one of its parents has a position: relative; so the nav knows where to use as an origin point when positioning absolutely, otherwise it'll use the top left of the browser pane.
You may also need a z-index value if you want your nav to appear behind the content.
Not sure if this is what you are searching for, but you can try giving your naviation position: absolute; and width: 100%;. This will get the navigation element out of the flow of the document.
Update - I've decided against the JavaScript solution. The only way to make sure it always works is to put it in setInterval() going every few seconds. Don't want to do that. I know this CSS is possible, I've seen it work. I'll re-open the bounty for more like 150 if it ends.
I have a modal popup made up of two sections: left and right. Within both sections are a label above and the content below. The label is fixed at a certain number of pixels, but the bottom area needs to be able to fill the remaining space, so I'm using display:table on the left and right sides and display: table-cell on the inner sections to achieve the "fill remaining space" effect. It works great in Chrome and Safari.
Here's the CSS:
#tagBoxLeft,#tagBoxRight {
display: table;
height: 100%;
width: 50%;
position: absolute;
right: 0;
opacity: 0;
}
#tagBoxLeft { left: 0 }
#tagBoxDescription {
display: table-row;
-webkit-border-top-left-radius: 20px;
width: 100%;
word-break: break-all;
word-wrap: break-word;
-webkit-box-shadow: 0 1px 0 #FFF;
-moz-box-shadow: 0 1px 0 #FFF;
box-shadow: 0 1px 0 #FFF;
}
.nano {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
display: table-cell;
}
#taglabel {
display: table-row;
z-index: 10000;
border-top: 1px solid #FFF;
width: 100%;
height: 39px;
}
And it just makes a bunch of divs into a table so they can have heights that are relative to each other. Also notice that the left and right sides are relative to the browser window, so that's why I can't just use percentages.
However, in Firefox and Opera, the #tagBoxLeft and #tagBoxRight sides sections refuse to accept height:100%; while they have display:table;. So it won't force the bottom sections up responsively.I know Firefox & Opera support this normally (see http://jsfiddle.net/Qxswa/). But why does all my content overflow in Firefox and Opera?
Here's a screenshot of the issue:
Is there a reason why you can't simply use JavaScript to calculate the correct height and apply it inline? It's not as nice and simple, but it would be trivial for what you are describing.
var boxHeight = $('#tagBox').height();
var leftLabelHeight = $('#tagBoxDescription').height();
$('#tagBoxPopular').css('height', boxHeight - leftLabelHeight + 'px');
var rightLabelHeight = $('#taglabel').height();
$('#tagBoxStream').css('height', boxHeight - rightLabelHeight + 'px');
Here's an alternative to using display:table and friends, which uses the oft-neglected ability of absolutely positioned elements to have both their top and bottom (and left and right) values set. It essentially 'sticks' the top and bottom edge, giving you a height relative to a container, but without explicitly setting a height.
UDPATED: As Jackson mentioned, the CSS-only version of this code doesn't provide an auto-height, fixed panel in the column. A simple bit of JS will fix that - you'd just need to set a sensible default height for users without JS. The JS only needs to run when you load the modal, not at intervals.
Here's the updated fiddle: http://jsfiddle.net/cxY7D/5
and here's the simplified HTML:
<div id="modal">
<div class="left">
<div class="description">
<h1>#tag_name</h1>
<dl>
<dt>Tags</dt> <dd>27</dd>
</dl>
</div>
<div class="contents">
<div class="header">
<h2>Featured</h2>
</div>
<ol>
<li>Something Something</li>
<li>...</li>
</ol>
</div>
</div>
<div class="right">
<div class="contents">
<div class="header">
<h2>Recent</h2>
</div>
<ol>
<li>Something Something</li>
<li>...</li>
</ol>
</div>
</div>
</div>
and CSS:
body {
background:#444;
}
#modal {
background:#FFF;
position: absolute;
top: 4em;
bottom: 4em;
left: 6em;
right: 6em;
}
#modal .left,
#modal .right {
position:absolute;
top: 0;
bottom: 0;
}
#modal .left {
background:#ACF9E4;
left: 0;
right:50%;
}
#modal .right {
background:#FCFFCD;
right: 0;
left:50%;
}
#modal .contents {
position:absolute;
top: 0;
bottom: 0;
width: 100%;
overflow-y:auto;
}
#modal .description {
height: 8em;
}
#modal .description + .contents {
top: 10em;
}
#modal .header,
#modal .description,
.contents li {
border-bottom:1px solid #CCC;
padding: 1em;
}
#modal .description dt {
float: left;
padding-right: 1em;
}
It's a really useful and robust technique. A lot of people get the shudders when you mention 'absolute positions', but used like this, it's really liberating!
The JS (assuming jQuery)
$(function(){
$('#modal').on('display', function(){
//Calculate the height of the top left panel, and provide the remaining space to the bottom left
var leftColumn = $(this).find('.left'),
descriptionHeight = leftColumn.find('.description').height('auto').outerHeight(); //Set the height to auto, then read it
leftColumn.find('.contents').css('top', descriptionHeight)//Apply the height to the scrolling contents pane
});
$('#modal').trigger('display');
});
The JS resets the top-left pane to auto-height, then reads the height and applies it as the top co-ordinate of the bottom-left panel. It's applied as a custom event, so you can trigger it as part of your modal display code.
Here's an answer I gave, using a similar technique, and more explanations of the hows and whys: The Impossible Layout?. Check the A list apart article for more discussion, and some simple fixes that make it work in IE6 (if you care about that).
I open your site on firefox and the hashtag links i see with chrome are gone. Are you doing some fix-attempts right now? If you put the links back in for the ff version I can help you debug this.
UPDATE:
What I see is a highly overcomplicated mix of display:table's and display:table-cells's with absolute and static positionings combined with percentual heights and many other highly cross-browser volatile mixes.
Doing lots of patching and fixing I was able to get this:
There's obviously many errors still present but at least you get some scrollbars.
Basically, the problem is that you're relying upon percentual heights and shady table-displays that are seemingly not very evenly rendered by different browsers.
We have two options here:
1.- Keep your original css/html approach and troubleshoot the JS scrollbar.
2.- Go for a much much much simpler css/html variant
Cheers
G
You may want to look at how you're using <section>. It is not the same as a <div>.
W3C - Using HTML5 section elements , and header elements.
<header> appears the same. They're both flow elements, and not designed as content containers, but as semantic structuring elements for content containers.
I used Firebug and changed both <header> and <section> to display:block on a hunch. Things started to shape up; however I could not get the scroll effect to fire after those changes. I then changed <header> in safari to display:inline. Sure enough - both my browser windows looked like this:
You need to have the #tagboxleft and #tagboxright's overflow hidden. This can be done by setting #tagbox to overflow:hidden, however that will hide part of the close button. so you need another div wrapped around the left and right but not the x with overflow:hidden.
Like so:
<div id="tagbox">
<div id="tagboxX"></div>
<div id="tagboxleftright" style="overflow:hidden"> <!-- This is the wrapper div around tagbox left & right. Of course, move overflow:hidden to the style sheet -->
<div id="tagboxLeft"></div>
<div id="tagboxRight"></div>
</div>
</div>
This worked in Firefox and it should work in Internet Explorer.
Edit 2: It seems clear that no one seems to be able to understand what I'm asking, so I'll try to illustrate it;
The area in the center has the id #navigation. This has the following CSS properties,
width: 960px;
margin: auto;
background: #e4bd04;
The reason it has a width of 960px, is because I would like the links in my navigational bar to remain within a 960px limit. I'd also like them centered, so I apply margin: auto. However, this means that my background only flows for 960px. I'd like the background to flow for the entire window width (100% of page), so that users with larger screens don't end a huge chunk of white space at the top.
In order to prevent this, I nest #navigation into another id, #navouter, to which I apply width: 100%; and background: #e4bd04;, so that the background now appears to extend for the entire width of the window.
Is there any way to do this without using two elements as I've done?
I've undestood, you don't want to have 2 div to center another div with fixed width, isn't it ?
I don't think that you'll love it, but this is a solution :
.nav {
width:960px;
position:absolute;
left:50%;
margin-left:-480px; // width / 2
}
<body>
<div class="nav">Test content</div>
</body>
Result for 300px div : http://jsfiddle.net/7GTCc/1/
Or another, really ugly (lol) :
.nav {width:960px;}
<center>
<div class="nav">Test content</div>
</center>
Edit regarding your illustration
"Is there any way to do this without using two elements as I've done?"
No :-)
But if you only want the background to be 100%, don't specify a background (color or url) to your #navigation.
Last try to answer, test this :
#navigation {
min-width:960px;
text-align:center;
}
Demo here : http://jsfiddle.net/7GTCc/3/
you could use min-width property , dont know what exactly you are looking for
<div style="min-width:960px; width:100%"></div?
Yes, this is easy to do without additional markup. Use the ::before pseudo-element for the expanding part of the navigation.
Demo: http://jsfiddle.net/ThinkingStiff/eAf7w/
HTML:
<div id="nav">navigation</div>
CSS:
#nav {
background: #6D7B8D;
height: 40px;
margin: 0 auto;
width: 400px;
}
#nav::before {
background-color: lightblue;
content: '\00a0';
display: block;
height: 40px;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
}
my question is more or less self-explanatory, I am trying to find a standard dynamic way to centralize an element in the y-axis, much like the:
margin: auto;
For the x-axis. Any ideas?
I am talking about the following piece of code, empty page, align one image in the center.
<div id="main" style="display: block;">
<img style="margin: auto; display: block;"
src="http://www.example.com/img.jpg" />
</div>
Any help will be appreciated! :)
Just give up and use tables on this one, with vertical-align: middle. You can get away with just a single-row, single-cell table without feeling too guilty (I sleep like a baby about it). It's not the most semantic thing in the world, but what would you rather maintain, a tiny one celled table, or figuring out the exact height and doing absolute positioning with negative margins?
If you know the height of the element that you're trying to center, you can do this:
img {
display: block;
height: 500px;
position: absolute;
top: 50%;
margin-top: -250px; /* 50% of your actual height */
}
I know only one way for that:
#mydiv {
position: fixed;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
}
This is for x and y axis - but width/height and margins have to be changed for every element. I hate it :-)
Additionally you get problems if the element is larger than the browser-window.
The best known method is to use absolute positioning. You set the top amount to 50% and then set a margin top of minus half of the element.
#main {
position: relative;
}
#main img {
position: absolute;
top: 50%;
margin-top: -(half your image height)px;
}
Here is a variation using vertical-align
http://jsfiddle.net/audetwebdesign/r46aS/
It has a down side in that you need to specify a value for line-height that will also define the height of the containing element that acts like the viewport (outlined in blue).
Note: You may be able to get around the window height issue by setting a height to the body or html element (100%) but you would need to try it out (see 3rd reference).
However, the good thing is that you don't have to do some math based on the dimensions of the image.
Here are some references related to vertical alignment:
http://css-tricks.com/what-is-vertical-align
http://blog.themeforest.net/tutorials/vertical-centering-with-css
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
and sometimes I have to remember the basics so I reread:
http://www.w3.org/TR/CSS21/visudet.html
This may not solve OP's problem, but may be useful in other contexts.
Using #menu img { vertical-align: middle; } in my style sheet works great for the latest versions of FireFox, Opera, Safari and Chrome, but not in IE9. I have to manually add style="vertical-align: middle" to every line of img code. For example:
<li><a href="../us-hosts.php">
<img src="../images/us-button.png" width="30" height="30"
alt="US Hosts" style="vertical-align: middle;"/> US Hosts</a>
</li>
Try this css:
margin-top:auto;
margin-bottom:auto;
display:block;