So I have a problem with my hiding/showing of DIVs without the use of JavaScript.
So basically, the moment you click on a link within the div that has been selected, the div will close and you won't be taken to that link.
The code is below. I am not using JavaScript for this so please don't give me that as a solution/suggestion. I am using Chrome, however I have tested with other browsers and it is a problem within them as well.
I've just filled it with some test data, but it functions exactly the same as with the live data. Just click on the heading, and try to click on the 'Google' link and you'll understand my problem.
If anyone can fix it, that would be great because I can't seem to do it. :/
<html>
<head>
<style>
.collapse > * + *{
display:none;
}
.collapse > *{
cursor:pointer;
}
.collapse:focus{
outline:none;
}
.collapse:focus > * + *{
display:block;
}
.collapse h1 {
background-color:#BF3131;
}
</style>
</head>
<body>
<div class="collapse" tabindex="1">
<h1 id="test">LOREM IPSUM</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat</p>
<p>Google
</div>
<div class="collapse" tabindex="1">
<h1 id="lol">Test</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat</p>
<p>Google
</div>
</body>
</html>
This was originally from : Show hide divs on click in HTML and CSS without jQuery
Unfortunately CSS3 doesn't support parent selectors. :(
So the only way to do it is to use javascript like the jQuery parent method.
CSS Selectors Level 4 support parent selectors but it wouldn't work on every browsers right now.
You can test it :
http://css4-selectors.com/browser-selector-test/
As you already figured out, this is some kind of timing problem. When you are clicking on the Link your div loses focus and the content collapses before the actual click action is triggered ...
I would use the checkbox hack for that kind of thing. Something like that maybe:
div {
outline: none;
cursor: pointer;
}
input {
display: none;
}
input:checked ~ p {
display: block;
}
label ~ p {
display:none;
}
h1 {
cursor: pointer;
background-color:#BF3131;
}
<div tabindex="1">
<input id="header-1" type="radio" name="headers">
<label for="header-1">
<h1 id="test">LOREM IPSUM</h1>
</label>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat</p>
<p>Google
</div>
<div tabindex="1">
<input id="header-2" type="radio" name="headers">
<label for="header-2">
<h1 id="lol">Test</h1>
</label>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat</p>
<p>Google
</div>
I have a (WordPress) page on which there are a list of different programs. On the left-hand side is a text description of the program and on the right is an image. Back in the day I would have used a table to make this happen:
<table>
<tr>
<td>Text goes here.</td>
<td><img src="myimage.jpg"></td>
<tr>
</table>
Now I am trying to align it w/out tables:
<p style="text-align: left">Text goes here.</p>
<img class="alignright size-medium wp-image-119" src="imageurl.jpg" width="300" height="199" />
<hr>
Problem is that if there isn't enough text, the image begins to take up space in the next program's section. Here is a screenshot:
You can see that the placeholder image is not remaining above the HR and beginning to slide into the next program's segment. How can I prevent this?
You can still use the table display model:
p {
display:table;
width:80%;
margin:auto;
}
p span {
display:table-cell;
vertical-align:top;
}
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
<span><img src="http://lorempixel.com/300/199"/></span></p>
<hr/>
Personally, I would use ul and li to get the job done.
<ul id="program_list">
<li id="program_item" class="item01">
// HTML for program item goes here
</li>
<li id="program_item" class="item02">
// HTML for program item goes here
</li>
</ul>
Then you would use some CSS to set the width of the ul and make sure that each li is the full width, and does not float the next item, with this you could also so a border-bottom: to separate each program.
#program_list {
width: 600px;
}
#program_item {
width: 100%;
overflow: hidden;
float: none;
padding: 10px 0;
border-bottom: 1px solid #666;
}
Assuming you have already cleared your CSS initially; if not, you may have to add more CSS to style correctly.
Whats' the best way to position? Float, Relative, Absolute?
Lets say I want to position something like this:
How do I position something like this and what's the best way to do it?
Float, Relative, Absolute?
If you want a fluid layout, use floats.
Positioning elements relative/absolute causes them to display as inline therefore a height/width is required and they then become non-fluid.
You would have to create a div that acts as a container
Then create three more divs one for the right side and two for the left side.
I have created a jSfiddle file for you to reference. Something quick I created
http://jsfiddle.net/wSp7F/
It all depends on which type of layout you are going for. Responsive, Fluid or Fixed.
HTML
<div id="container">
<div id="rightside">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="leftside">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="leftside">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
CSS
#container {width:500px;position:relative;overflow:Hidden;outline:1px solid red}
.leftside {float:left;width:225px;margin:0 0 5px 0}
#rightside {float:right;width:200px}
.leftside,#rightside {outline:1px solid black;padding:5px}
There isn't a single best way, but here's how I'd do it.
http://jsfiddle.net/Wuj35/
HTML
<div id="wrapper">
<div id="div3">div 3</div>
<div id="div1">div 1</div>
<div id="div2">div 2</div>
</div>
CSS
#wrapper{
width:450px;
}
#div1,
#div2,
#div3{
float:left;
margin:1em;
padding:1em;
border:5px solid #000;
border-radius:8px;
}
#div1,
#div2{
width:150px;
height:75px;
}
#div2{
clear:left;
}
#div3{
float:right;
width:150px;
height:225px;
}
Fiddle illustrating the problem - click the button a few times and the box will shrink, revealing the issue.
This issue appears to only happen in Internet Explorer.
Basically, when an element that contains white-space: pre-wrap is resized slowly, IE doesn't recalculate word wrapping, resulting in text being pushed outside the element. Some recalculating does happen, but not all of it. The more the element is resized, it seems, the more recalculation is actually done.
Zooming the page fixes the issue, but is obviously not a practical solution.
How can I force IE to recalculate word wrapping when the container's size changes?
New (ridiculous) HTML Change Solution (but works!)
Because of the odd first line failure, the solution depended upon generating a non-important first line and then accommodating it. This fiddle demonstrates what appears to be a now "bug free" solution for IE9 (some tweaking to account for my pseudo-element/class use would be needed for earlier IE versions).
The HTML requires an excessive amount of wrapping, such that each section of text is "double wrapped." The demo has three different means of gaining the block level wrap, but all use the same fix.
Essential HTML
<div id="cnt">
<p class="ieFixBlockWrap">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt consectetur tortor, sed vestibulum lectus hendrerit at. Praesent fermentum augue molestie lectus pharetra eget cursus erat cursus.
</span>
</p>
<span class="ieFixBlockWrap">
<span>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent fringilla nisl posuere tortor rutrum lobortis.
</span>
</span>
<div class="ieFixBlockWrap">
<span>In risus libero, faucibus ac congue et, imperdiet ac purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam lobortis ullamcorper. Proin risus sapien, pulvinar in adipiscing non, rutrum hendrerit magna. Praesent interdum pharetra vehicula. Integer molestie mi neque.
</span>
</div>
</div>
CSS
#cnt {
white-space: pre-wrap;
border:1px solid black;
line-height: 1.2em; /* set explicitly, see below */
/* prevent shifted :before from interfering with elements preceeding #cnt */
overflow: hidden;
}
.ieFixBlockWrap:before { /* this becomes the first line, but also an extra line gap */
content:'';
display: inline-block;
width: 100%;
}
.ieFixBlockWrap {
display: block; /* just to demo span as block level */
margin: -1.2em 0; /* offset by line-height to remove gaps from :before*/
}
.ieFixBlockWrap:last-child {
margin-bottom: 0; /* last one does not need the bottom margin adjusted */
}
Original HTML Change Solution (still failed on first line)
Wrapping all the text in a single span inside the div set with pre-wrap seemed to make it behave in this fiddle.
It looks like you can force IE to redraw the container by removing the element and then adding it back (unfortunate you have to resort to this, but oh well). Here's a resize function that will do just that, along with a fiddle to see it in action:
var resize = function(element, changeWidth, changeHeight){
changeWidth = parseInt(changeWidth) || 0;
changeHeight = parseInt(changeHeight) || 0;
element.style.width = (parseInt(element.style.width) + changeWidth) + 'px';
element.style.height = (parseInt(element.style.height) + changeHeight) + 'px';
var parent = element.parentNode;
parent.removeChild(element);
parent.appendChild(element);
};
See the notes in the blue areas on the page below to see what I am trying to achieve.
http://www.a3financial.com/subtitleproblem.php
Here I have 2 p's which are subtitles, illustrated in blue, which I'm wanting to fluidly be as wide as possible within the fixed-width content area, while respecting any float:left image's padding/margin.
From what I understand this is the expected behavior when you don't set any width for the p and do have one set for the float:left.. but for some reason my subtitles' background are going behind the image and not respecting its' margins. Perhaps I'm wrong on my expectation. I know liquid widths with floats are difficult/impossible to achieve. Is there any way to do this?
For clarity, I want the page to look like this. I've added borders for additional clarity.
http://a3financial.com/images/clarity.png
To my knowledge, this is all that is being applied to the float:right:
#content .subtitle {
padding-top: 2px;
float: right;
background-color: #8FD2E3;
letter-spacing: -1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #969696;
}
And here is the code for the float:left:
img.alignleftimg {
float: left;
width: 163px;
/*margin-right: 30px;F*/
padding-right: 30px;
}
HTML (apologies for long latin, text is needed to illustrate flow):
<p class="subtitle">Subtitle 1 - should be as wide as possible, respecting the image's padding/margin.</p>
<img src="images/homepage09.jpg" alt="" width="163" height="163" class="alignleftimg" />
<p>nunc nisl velit, fringilla ut ornare non, iaculis in ipsum. Vivamus volutpat quam et dui vestibulum ultricies. Fusce vitae sapien sed ipsum hendrerit dignissim. Lorem ipsum dolor at tellus. Etiam vitae ligula non ante iaculis. Curabitur elementum diam nec etiam lorem ipsum mauris dapibus arcu, sed bibendum libero elit et sem. Nunc at nunc tortor, ut aliquam augue. Etiam ut sem quis tellus iaculis convallis. Nulla viverra, metus eget accumsan. Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante. Quisque erat. Vestibulum pellentesque, justo mollis pretium suscipit, justo nulla blandit libero, in blandit augue justo quis nisl. Fusce mattis viverra elit. Fusce quis tortor. Aliquam libero. Vivamus nisl nibh, iaculis vitae, viverra sit amet, ullamcorper vitae, turpis. Aliquam erat volutpat. Vestibulum dui sem, pulvinar sed, imperdiet nec, iaculis nec, leo.Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. </p>
<p class="subtitle">Subtitle 2 - should also be as wide as possible, pushing text out of the way in this case, to fill 100% of body width.</p>
<p>Aliquam libero. Vivamus nisl nibh, iaculis vitae, viverra sit amet, ullamcorper vitae, turpis. Aliquam erat volutpat. Vestibulum dui sem, pulvinar sed, imperdiet nec, iaculis nec, leo. Fusce odio. Etiam arcu dui, faucibus eget, placerat vel, sodales eget, orci. Donec ornare neque ac sem. Mauris aliquet.</p>
edit: starting to think i'm using the wrong element for this.. perhaps an h2 would function as i'm intending.. continuing to research.
edit 2: it doesn't appear h2 has any discernible difference from using p.
edit 3: added an image to clarify what i'm after.
final edit: Found what I was looking for and answered the question myself! Adding overflow:auto; to the subtitle class made its' background respect the float's margin and padding! See the accepted answer. Cleaned up the question for those searching in the future, as initially I didn't understand how to use floats correctly. Here's a link to the final product:
http://www.a3financial.com/subtitletest.php
OK, a couple of things first:
float applies to how a block elment is rendered with respect to the text of the main document. Float is not intended to be a way to control the size or positions of the actual elements themselves.
The best way to see this is an example:
<div id="A" style="float:right;background-color:#0f0;height:20px;">
my title
</div>
<div id="B" style="background-color:#00f;height:35px;">
my impressive language skills
</div>
Then this means that div A will float left of the content(text) in the document's main flow (div B is in the main flow). This does not affect the physical size of either div A or div B. You will see that in this example, div B is 100% wide (the backgrounds mark the container's actual size). Div's default behavior is to take up 100% of the available width of its container.
Div A is only as big as it needs to display it's content, so it may seem that its behavior is differnet. This is not really the case though. Because div A floats, it is rendered in its own virtual container outside of the main document. The fake container is set to be the minimum size possible, which is basically 0% wide. So, like any 0% continer, it stretches as much as necessary to accomidate the contents within). In effect, div A is 100% wide in a container that is 0% wide (by default).
You should also note that in this example, div A is not just floating to the right of the content within div B, but it is floating right in regards to ALL content in the main document flow. This is where a div with the "clear:both;" css attribute comes in handy, as this ensures that things that are floating stop floating at a specific point in the document (content that would have floated is pushed down).
Now, when we look at your document in particualr, what your were effectivly trying to do was stack 3 floats with each other... A floating right of B, and B floating left of C. But the containers themselves will just be however big they need to be. This gets very hard to manage, and can be unpredictable on different browsers... and you end up trying to manage everyting's width, height, padding, and margin plus doing all kinds of other still just to keep the containers from overlapping and piling up on top of each other.
The best bet when using floats for positioning, is to ensure that within any one container, you have no more than one thing floating. So in your document's case, something like this:
.subtitle {
padding-top: 2px;
background-color: #8FD2E3;
letter-spacing: -1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #969696;
}
img.alignleftimg {
float: left;
width: 163px;
/*margin-right: 30px;F*/
padding-right: 30px;
}
Note that in this CSS, only the image is setup to float. The subtitle doesn't need to float because you always want it 100% wide relative to whatever container contains it.
Then for HTML:
<img src="images/homepage09.jpg" alt="" width="163" height="163" class="alignleftimg" />
<div class="section">
<p class="subtitle">Subtitle 1</p>
<p>
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
my impressive language skills
</p>
</div>
<div style="clear:both;"></div>
<div class="section">
<p class="subtitle">Subtitle 2</p>
<p>Aliquam libero. and some other stuff</p>
</div>
Note here that we used a div to group the subtitles and the text to which that subtitle applies into one content container (section). The image is set to float left starting at the first section, so all the text will slide out of the way. We use a clear div to make sure that we stop floating at this point, then we start the container for the next subtitle and text.
As with anything in HTML, the less you specify the better off you are. Instead of managing sizes, floats, positions, and all that junk I recommend that you specify as little as is possible in CSS. It's a subtle art, but it pays off.
Now, in the example I give, the content area's container and the image actually overlap. So if you try background styles, or borders, etc. it can get ugly. So, this is when you might want to specify widths and margins to control the containers themselves; but this is easier is you are careful to keep floating down to just one element within any one container.
You could elminiate container overlap in the above by adding in this CSS (in addition to what was already there):
img.alignleftimg + div.section{
margin-left: 170px;
}
This is an unusual css selector called the adjacent sibling selector... basically it says, "Applies to all div elements with a class-name of "section", that is also an immediate sibling to an img element with a class-name of "alignleftimg".... blah! Anyway, I just set the margin to a value a little bigger than the width of the image, and overlap is eliminated ONLY in the very specific case we want.
You might want to look at the HTML 5 section element; but I didn't use it here because it is a semantic element and so cross-browser support requires a bit more than just replacing the div tags with section tags.
Also, I want to point out that this entire discussion is the fault of the W3C. We needed real layout mechanisms that did the job of HTML layout tables way back in 1994... 18 years later, CSS grid is STILL not finalized and is probably another 10 years from being widly supported in shipping browsers.
Turns out this is possible!
By adding overflow: auto; to the subtitle class, it forces it to respect the image's margin and padding! Additionally, adding it to unordered lists has the added benefit of making sure the list stays in-line horizontally until it's complete before word-wrapping around the image.
See my final product here:
http://www.a3financial.com/subtitletest.php
Thanks to the following thread for pointing me in the right direction. I'd given up but happened to stumble upon it looking for a somewhat different issue:
Floated image to left of a ul is ignoring margin/padding
To make HTML elements fluid widely, You must set CSS width to:
width:**percent**%
While percent keyword is number between 0 and 100.
This is a calculation. Calculate the padding and margin to set the correct width percent.
For example:
Setting 3 fluid divs with no Padding or Margin:
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
CSS
.first, .second, .third{
float:left;
width:33%;
}
Hope this helps you.