Once again I hit upon my favourite HTML/CSS conundrum and am tearing my hair out all over. So this time I thought I put my conundrum to the experts on SO. Here goes...
Imagine you want to present a slide show in a browser. The spec is dead simple:
slide content should be shrink-wrapped by a slide frame.
the slide frame should be centered within the browser viewport in both x and y.
the slide frame must not expand beyond the viewport of the browser.
if the slide content extends beyond the slide frame (which at this point would have expanded to completely fill the viewport), the slide frame should show scroll bars.
One implication of (4) is that the viewport will never require scroll bars.
Basically, I am looking to implement { margin: auto auto; } on my slide. The closest I get in HTML/CSS to illustrate my goal is this:
<style>
html, body {
margin: 0;
overflow: hidden;
padding: 0;
height: 100%;
width: 100%;
}
#f0 {
bottom: 2em;
left: 2em;
position: absolute;
right: 2em;
top: 2em;
}
#d0 {
height: 100%;
}
#c0 {
height: 100%;
position: relative;
width: 50%;
}
#d1 {
height: 100%;
position: absolute;
right: 0;
}
#c1 {
height: 100%;
overflow: auto;
position: relative;
left: 50%;
}
#d2 {
background: yellow;
}
</style>
<body>
<div id="f0">
<div id="d0">
<div id="c0">
<div id="d1">
<div id="c1">
<table height="100%" cellpadding=0 cellspacing=0>
<tr><td id="td" align="Left">
<div id="d2">
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum... Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
Lorem ipsum...
</div>
</td></tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
You may also find this code here: http://jsfiddle.net/qmEYU/9/
The code uses pretty much every positioning trick I know. The result shows a centered slide that will dynamically resize as the viewport changes. If the viewport collapses on the slide, the slide will show a scrollbar.
Alas, this cannot be the answer. As cute as it looks, the problems are legions:
To position the scollbar (which actually constrains the TABLE and NOT the #d2) next to the (yellow) slide, I needed to use table.width=auto. To center the now narrow table, I needed to fall back on the 50% trick. The problem with this trick is that, implicitly, it reduces the available total width to the centered element to no more than 50% of the viewport.
I cannot draw a border around the slide. The reason is that this "slide" is a mirage: the slide content (#d2) is inside a TD that is centered inside the TABLE. The TD cannot be constrained; only the TABLE can be. If I draw a border around #d2, then as #d2 expands the TD will make way and the bottom border spills into the overflow. If I draw a border around #c1, the scrollbar owner, then if the slide content collapses the border will no longer appear around the slide but around the TABLE (open space).
I need to position some buttons underneath the slide which I always want to be on show, irrespective of slide content. Because I cannot identify any element as THE SLIDE, I cannot identify a space either where to position the buttons...
I wrote a solution in JS. It would work reasonably well had the W3C adopted IE's idea of dynamic CSS or if I could respond to a mutation on #d2. Since neither solution is available across browsers, I need to manually "prod" my script - not nice.
I thought I post here to see whether anyone has another idea on how to do this in CSS?
Thanks for looking.
You can horizontally center with display:table;margin:0 auto; except you'll need the 50% workaround for IE.
Can you please make a jsfiddle of this?
And you have googled how to horizontally and vertically center, I take it?
EDIT: Is this what you are looking for? http://medero.org/centered-table.html
It has to be fixed for IE obviously. But I want to know if that's what you need.
Related
I basically have a container with inside two blocks: one block will have a dynamic width (based on the text within it) and the other one should be the same width of the dynamic width. If the second block has a major width since the text inside, it have to break the text in order to keep the same width of the first block.
<container>
<fixed_dynamic>
Lorem ipsum dolor sit amet
</fixed_dynamic>
<samedynamic>
few words
</samedynamic>
</container>
I could achieve something doing in this manner: https://jsfiddle.net/prxus5vm
The problem is that if I try to write something in the second width that make the div stretch, it will not break the words: https://jsfiddle.net/prxus5vm/1/. It should break the words and keep the width of the first block.
Any solution? I'm searching for a CSS solution, want to avoid to use javascript if possible.
If you are trying to use the table-layout properties to shrink down a parent as much as possible,you are missing a small width being set.
Once you have this done, the first element can be a block of text or an image. Finally white-space:nowrap comes handy to avoid text to wrap and set the width you are looking for.
div {
display: inline-table;/*NEEDED inline for demo it is still using the table-layout */
width: 1%; /*NEDEED or 0 , see it alike a min-width */
margin:5px /* not needed here */
}
div * {
padding: 0.25em ; /* not needed here */
margin: 0; /* not needed here */
}
div h1 {
background: green; /* not needed here */
white-space: nowrap; /* NEDEED */
font-size:1.1rem /* not needed here */
}
p {
background: yellow; /* not needed here */
}
<div>
<h1>
Lorem ipsum dolor sit amet
</h1>
<p>
more words than fixed dynamic block
</p>
</div>
<div>
<h1>
A shorter text
</h1>
<p>
more words than fixed from dynamic block
</p>
<p>
and a few more words
</p>
</div>
<h1>BUT, there is a disclaimer !</h1>
<div>
<h1>
short
</h1>
<p>
here are words that are themselves longer than the reference ....
</p>
</div>
I added width: fit-content; to fixed width container, now the width will be equal to content width, and added script that take the width of the first container and assign it to your dynamic container
var fixed_width = $("fixed_dynamic").css("width");
$("samedynamic").css("width", fixed_width);
console.log(fixed_width)
container {
display: table;
}
fixed_dynamic {
display: block;
width: fit-content;
background: green;
}
samedynamic {
display: block;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<container>
<fixed_dynamic>
Lorem ipsum dolor sit amet
</fixed_dynamic>
<samedynamic>
more words than fixed dynamic block
</samedynamic>
</container>
What I am trying to do is have a div element at a specific Y location, but floating to the left or the right (so that the other text on the page will flow around it). I can't seem to find the right combination of attributes..
position:relative;float:right works but the div is at the top of the containing element
position:relative;top:1in;float:right moves the div down, but the area that the text flows around is still at the top of the area, not the +1in area
position:absolute disables the float entirely
Here is a simple example:
<div style='position:relative;top:1in;float:right;border:0.1in solid;'>
<p>This is on the right</p>
</div>
<p>This is the text that should flow around the textbox. Make as long as needed...</p>
What I really want is regions but no browsers really support this yet.
Any ideas? Thanks..
If you want to offset a float from the top, with text flowing around it, you have to insert another zero-width float above it to achieve the offset. Like this: http://jsfiddle.net/YKYmj/7/
#floater {
float: right;
clear: right;
border: 1px solid gray;
background-color: #ccc;
margin: 10px;
width: 100px;
height: 100px;
}
.wrapper:before {
content: '';
float:right;
height:1in;
}
<div class="wrapper">
<div id="floater">In offset, floated box</div>
<p>Lorem ipsum dolor sit amet, consectetur ...
</div>
I have a the following:
<div class="container">
<div class="sectionA">
</div>
<div class="sectionB">
</div>
</div>
Section A has a red background, Section B has a blue background.
Section A has lots of text in it, making it quite tall, section B does not have much text in it.
How can I make it so that Section A and B are the same height as the parent?
Yes, you can give the childs the same heights as the parent. This will work:
<html>
<head>
</head>
<body>
<div class="container">
<div class="sectionA">Lorem ipsum dolor sit amet.
</div>
<div class="sectionB">Lorem ipsum dolor sit amet.
</div>
</div>
</body>
</html>
The CSS:
.container{height:200px;width:500px;overflow:hidden}
.sectionA{position:relative;float:left;width:250px;background:blue;height:100%}
.sectionB{position:relative;float:left;width:250px;background:red;height:100%}
If you dont mind about using jquery,
$('.sectionB').css('height', $('.sectionA').outerHeight() );
sectionB css height is set by the sectionA outerHeight.
Take a look to this jsbin.
Hope this helps!
If you want to do this in dynamically, I think you need to use jquery/javascript to handle otherwise you can use height property. Use the suitable highest value for both sections.
Faux-Column Effect Using <div> and CSS
One way of doing this involves adding an extra element as follows:
<div class="container">
<div class="backdrop"></div>
<div class="sectionA">
<p>Text of A... can be on a red background.</p>
<p>Lorem ipsum dolor... and long text block.</p>
</div>
<div class="sectionB">
<p>Text of B... can be on a blue background.</p>
</div>
</div>
I am going to add an extra element <div class="backdrop">, which you could replace with an pseudo-element if so desired.
The appropriate CSS is as follows:
.container {
overflow: hidden;
color: white;
background-color: red;
position: relative;
}
.sectionA {
float: left;
width: 48%;
padding: 1%;
}
.sectionB {
float: left;
width: 48%;
padding: 1%;
position: relative;
z-index: 2;
}
.backdrop {
position: absolute;
background-color: blue;
width: 50%;
height: 3000px;
top: 0;
left: 50%;
z-index: 1;
}
The parent .container element is given the background-color for the left-hand side column (red), with overflow: hidden and position: relative.
The two child/column elements are placed using float: left, and given a relative width of 48% and padding of 1% (you can adjust these measurements as needed).
Finally, .backdrop is positioned absolutely and placed to the right hand side of the parent container. I set it to have a tall height to make sure that it stretches beyond any expected height of any of the two columns, and declare the background-color: blue.
Use z-index to move the floated .sectionB to be painted above .backdrop. Note that you need set position .sectionB relatively so that the z-index value takes effect.
Since .container uses overflow:hidden, the tall backdrop element is clipped so you can the effect that you want.
Using a background-image could also work. You could create a background image with the left hand side red and the right hand side blue, and tile it vertically with position top and center, just making the width is wide enough to accommodate any expected page width.
The main advantage of using div.backdropis that you can alter the color scheme using CSS properties alone without changing the background image.
Fiddle demo: http://jsfiddle.net/audetwebdesign/yejss/
I have some text that I want simultaneously centered on the page and the text within the paragraph to be adjusted to the left? A little help?
this is what I've been trying
<p align="center"><div align="left>text<br>more text</p></div>
obviously not working this just shifts everything left
What the troubling part (although IE is always different) is that in order for an item to be centered the horizontal margins need to be set to auto (allowing the browser to actually center the content). So, with that being said:
p.centered {
margin: 0px auto;
width: 300px;
border: 1px solid #f0f;
}
<p class="centered">This is your paragraph</p>
The width is your call (and I've added a border for clarity) but just set the side margin to auto and the content will be left-aligned (unless otherwise specified by text-align).
align="center" and align="left" are deprecated. Use CSS instead.
Here's one way to do it (assuming you want 2 nested elements, or see Brad's method for centering a single element): http://jsfiddle.net/EzNJQ/1/
<div id="outer">
<p id="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
#outer{
width: 300px;
margin: 0 auto; /* centers */
}
#inner {
text-align: left;
}
More examples: http://www.w3.org/Style/Examples/007/center.en.html
In general I know how to use css but not advanced css
So I need some help in order to start. Unfortunately I can't find any good and decent guide for tables without css and the part I want to do is very tricky. So here is what I want and what I've done so far.
The height is not fixed by the way so I want it flexible because the main text might be very long or very small
Here is what I've done so far
http://jsfiddle.net/VmnDj/1/
This doesn't seem to work properly though because the minimum height is where the main text is and it never includes the whole picture. Some part of the picture is out of the container. Please can you contribute on this and explain me why do you have to take each step? My purpose is to learn from this and not just the solution. If you need something more please let me know.
Thank you very much in advance
Try this:
JSFIDDLE: http://jsfiddle.net/86FMw/
Notice that there is no fixed height and the box will grow when the main text is longer.
HTML
<div class="cartitem">
<div class="left">
<img src="http://images.pictureshunt.com/pics/p/pear-5428.jpg" width="60" height="60" alt=""/>
</div>
<div class="toptext">
top text top text top text
</div>
<p>
text text text text<br/>
text text text text text text text text text text text text <br/>
text text text text text text text text <br/>
</p>
<div class="buttonbar">
<button>click me</button>
</div>
</div>
CSS
.cartitem {
position: relative;
padding-left: 80px;
border: 1px solid #333;
}
.left {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 80px;
}
.toptext {
background: silver;
}
.buttonbar {
text-align: right;
}
That layout looks like it would formerly be used in frames.
Try this for the top right DIV:
set the code for Text2 to something like this:
p.tab {
margin-top: -2em;
margin-left: /* spacer_distance in em/px */;
}
I made 3 columns of text to mimic a table on some of my pages since the text displayed wasn't very wide in the first place.
Keep in mind we now deal with mobile device users. So only having 2 columns in that DIV should work. But, be wary spreading more text across that space without using min-width statements to the entire viewport.