It's hard to explain what I mean, so see this jsfiddle first: http://jsfiddle.net/Gsggy/
When a user clicks 1, div number 1 shows, same for the others, simple enough.
However, before a user has clicked on a number, there is no div there, because it relies on the # value in the URL
How can I set a default div that is there with a blank url e.g. www.jsfiddle.com but disappears when someone clicks a number and makes it www.jsfiddle.com/#1
The thing is you can't really target an element in a way to tell it "do something while someone else is the target".
There are however some workarounds to this dilemma. One solution would be to always dispay the default content and display the target elements above.
You can use the fact that elements that appear later in the dom are usually rendered above nodes which appear earlier. So you could have for example a negative top margin or an absolute positioned element cover up your default content.
Improving on your html structure:
<div class="default" id="z">0</div>
<div id="a">1</div>
<div id="b">2</div>
<div id="c">3</div>
This css does work:
.default {
display: block;
background: #eff;
}
div + div {
margin-top: -102px;
}
div:target {
background: #eef;
display: block;
position: relative;
}
The downside to this particular approach is that you need to know the exact dimensions of your default content.
See this fiddle: http://jsfiddle.net/Gsggy/4/
use nth-of-type or last-of-type selector and make a default div in last i think it will work in your case
Related
HTML:
<div id="autocomplete" hidden></div>
<input type = "button" id = "search" value = "Search">
The autocomplete div holds various input tags generated by jQuery. When the input tags are created, they shift the button down the screen in order to fit the autocomplete content. What I want to do is to have the autocomplete div overlay on top of the the button rather than shifting the button down.
I have tried using z-index, but it seems to only work if autocomplete is placed after the button in HTML, the using negative margin to shift autocomplete back up. I don't like this solution since it messes up when viewed from other screen sizes.
Is there another way?
I think you have to use absolute positioning to keep the button over the inserting elements.
You can do something like this:
$('#autocomplete').append($('<div>').text('WOW1'))
$('#autocomplete').append($('<div>').text('WOW2'))
$('#autocomplete').append($('<div>').text('WOW3'))
$('#autocomplete').append($('<div>').text('WOW4'))
#container {
position: relative;
}
#search {
position: absolute;
top: 0;
}
#autocomplete {
padding-top: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="autocomplete" ></div>
<input type = "button" id = "search" value = "Search">
</div>
EDIT:
Here is a link to see how CSS position works:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Also I recommend you to check this stack overflow answer about relative vs absolute positioning it has a very natural response (Position Relative vs Absolute?)
This tells the browser that whatever is going to be positioned should
be removed from the normal flow of the document and will be placed in
an exact location on the page. It won't affect how the elements before
it or after it in the HTML are positioned on the Web page however it
will be subject to it's parents' positioning unless you override it.
This is the general method to have the items inside the autocomplete div not affect the flow of the other elements on the page (your button in this case).
#autocomplete {
position: relative;
}
#autocomplete > * {
position: absolute;
}
A few comments to improve this code:
Don't use IDs (#) on your css. Better stick to class names.
Don't use the wildcard (*) - preferably add the items that will exist inside the autocomplete, which are not shown on the question. And better, wrap them all in another element so you don't have to absolute position all of them individually
I have a table (bootstrap themed, generated from Django admin).
In one of the columns I have a div, which contains three elements, and anchor and two spans - each span to display bootstrap glyphicon.
<div class="my-fixed-width under-review data-sent-false">
C4U0UACXX-8 6nb
<span class="glyphicon glyphicon-asterisk" style="color:blue"></span>
<span class="glyphicon glyphicon-pause" style="color:darkgray"></span>
</div>
I would like to have the icons moved to the right (ideally lined up between table elements in the same column).
My problem is that when I add float:right to the spans, it moves them right, but also down and expands the div height.
After the float:right is added :
How can I keep the icons at the same vertical position as before, while moving the elements right? (I have tried position:absolute, and clear:both).
This question has been here a while, but I found a good answer so I want to share.
According to this answer I found elsewhere on StackOverflow, the elements that you want to have floated right need to be given first in your html structure.
<div class="my-fixed-width under-review data-sent-false">
<span class="glyphicon glyphicon-asterisk" style="color:blue"></span>
<span class="glyphicon glyphicon-pause" style="color:darkgray"></span>
C4U0UACXX-8 6nb
</div>
This bug was giving me all sorts of trouble on my own website, but once I found this out I realized that it's actually quite simple to understand the fix. When you put a float:right element after everything else, then it will float to the right just like you asked it to. But if there's not enough room to the right (or if some quirk of browser rendering makes it think there's not enough room) then that element gets pushed down as well, so the browser is satisfied that it will fit. But if you put the float:right element first, then it goes right where it's supposed to before the browser lays out any other elements. Then the ones without float:right get put in according to their usual layout, including adjusting auto-widths or auto-margins to accommodate floated elements.
It didn't happen when I was testing this, but this configuration might still cause both of them to be on top of each other even if they're not initially pushed down from their original position, but if that happens try adding the display:inline-block like this:
span.glyphicon{
float:right;
display:inline-block;
}
See this JSFiddle on an example of it working with the spans placed before the anchor.
Maybe you should post all the code, because float right should not do that. See that codepen : http://codepen.io/mbrillaud/pen/myKjPO
.my-fixed-width{
width:200px;
background-color: orange;
}
.icon{
float: right;
}
If you want to use position: absolute, do not forget to set the parent to position: relative, like this: http://codepen.io/mbrillaud/pen/jEKpqx
.my-fixed-width{
position: relative;
width:200px;
background-color: orange;
}
.icon{
position: absolute;
right: 0;
top: 0;
}
if it goes down when you don't want it to then simply add a
"Margin-top: -(###)px;"
to the CSS
I want to have a setup like this:
<div id="block">
<div class="btn">2</div>
<div class="btn">1235e</div>
<div class="btn">really long one</div>
</div>
jsfiddle: http://jsfiddle.net/cutcopypaste/3uu5Q/
Where the btns and block div get their width based on the content. Just like it appears in the fiddle, except that the width of the btns are based on their text rather than their container
I cannot use a table because I need to be able to apply styling to get vastly different appearance, so I need the html markup to stay basically the same. If it's absolutely necessary I could apply some js.
I tried a couple different ways of displaying, but not sure how to acheive this. I don't wish to hard-code any widths as the content will be changing, and I need it to work in older versions of IE (though I can use libraries like IE9.js).
Here's an example of how the #block will be sized to be as wide as its longest button:
#block {
float: left;
}
.btn {
float: left;
clear: both;
}
The floated elements will expand only to their content's width. It's assuming you want each button on its own line.
If you want the buttons to flow together, remove the clear:both from the .btn rule. However if you do want them all on one line you'll have to be aware of float drop. This will happen if the widths of all your buttons added together is greater than the available width. In this case, the rightmost button will drop down below the other buttons.
Update: based on OP's comment, here's the CSS for a table cell style where #block and all .btn elements expand to the widest button's width:
#block {
display: inline-block;
}
.btn {
display: block;
}
Along with an example.
Where the btns and block div get their width based on the content.
I'm not 100% sure whether I get you right, but using display:inline elements like spans instead of <div>s should solve your problem.
make them float or inline, that way they won't act like blocks (wont be 100% width).
ie I have a div, below is a hidden div, which is wider than the div above. I want to specify the div inside to have elements with greater widths than the div above. these elements right hand side is aligned to the right hand side of the div above, but since it is wider, want the left hand side to break out. The div below is on a diff layer than the div above as it only appears on clicking on trigger element of div above.
Basically its a drop down list, with some random elements are wider than the image element above which, when clicked drops this list. but i want the list underneath to expand to the left breaking out of the parent div, without specifying exact positions. Therefore, the elements are all children of the parent div and right aligned to it, just like parent.
Hmmm, hope you can follow. Really appreciate any help. Thanks in advance.
Negative Margins seems to be the best answer. If anyone knows of cross browser issues, please post here. Perhaps I will but shalln't be testing for them for a week or two.
You should probably just use a select tag (for accessibility's sake) even though it won't look as fancy. But if you're set on it, try something like this (and add your javascript code to hide/show the list):
#wrapper {
width: 500px;
}
#select {
border: 1px solid black;
width: 180px;
float: right;
}
#options {
float: right;
clear: right;
text-align: right;
}
and
<div id="wrapper">
<div id="select">pick one...</div>
<div id="options">
<div class="option">I'm short</div>
<div class="option">I'm a very very very very very long option</div>
</div>
</div>
If you end up using this, change the options div to a ul tag and the option divs to li tags, or something semantically closer to what you're building. I just used divs to cut down on the amount of css in my example.
I've used the last example on this page for equal height columns.
http://www.ejeliot.com/blog/61
The problem is, when you click an internal anchor link, the content is shifted up, and the overflow is making the top part of the page disappear.
For example, click this link
http://www.noosanativeplants.com.au/~new/articles/botany-words/
Then click a letter to jump to that section. You will notice what I am describing.
Is there a way to combat this, or is this a short coming of the technique? Do you recommend I use the background image technique for faux equal height columns? I'd rather not use this, as one page has a different background, and would require a bit of reworking to do the background for this page.
Thanks
I really recommend you to use the fail-safe faux columns method. If you are not a layout expert (no offence, seriously), stay away from the padding/margin/overflow magic and the one true layout technique. The latter is elegant but it can cause unwanted side-effects if you are to do heavy JS/DOM manipulations and all (see the problems listing).
As slink said you have two overflow: hidden rules in your css:
#main-container {
overflow:hidden;
}
And
#content {
overflow:hidden;
}
If you disable/remove these you will able to use your scrollbars again. Unfortunately the padding / negative margin "hack" will be visible. I recommend you to completely remove this solution and use faux columns. Faux columns background can be added to your #main-content or even the #content div (not just like the example in the ALA article that sets the background image to the body tag).
Good luck!
Update: Sorry, let me correct myself: to use faux columns in your case it is better to set the current background to the html element and the faux background to body element.
Assuming your equal height columns are the left menu and right content in that example, you could just use a margin-left property on the right-column and set the background colour of the container to the desired left-column colour. This would assume your right content always has a greater height than the left, but there are other ways round this.
#container {
width: 960px;
background-color: #000;
}
#menu {
float:left;
width: 240px;
}
#content {
float:right:
margin-left: 240px;
background-color: #fff;
}
<div id="container">
<div id="menu">
<ul>
<li>Home</li>
</ul>
</div>
<div id="content">
stuff goes here
</div>
</div>
The problem is caused by two overflow: hidden; rules defined on elements #content and #main-contaniner.