OK I have three layers that fit perfectly on top of each other (layer1, layer2 & layer3). Simply all I want to do is have one on top when a different div (layer4, layer5 & layer6) is clicked. I can get this to work with two layers, but when I add three the third layer seems to stick, and I get errors in Dreamweaver. Any help would be appreciated.
<div id="layer1">
</DIV>
<div id="layer2">
</DIV>
<div id="layer3">
</DIV>
<div id="layer4" onClick="document.getElementById('layer1').style.zIndex='10'", "document.getElementById('layer2').style.zIndex='30'",
"document.getElementById('layer3').style.zIndex='20'">
</DIV>
<div id="layer5" onClick="document.getElementById('layer1').style.zIndex='30'", "document.getElementById('layer2').style.zIndex='10'", "document.getElementById('layer3').style.zIndex='20'">
</DIV>
<div id="layer6" onClick="document.getElementById
('layer1').style.zIndex='10'", "document.getElementById
('layer2').style.zIndex='20'", "document.getElementById
('layer3').style.zIndex='30'">
</DIV>
Related
Is this behaviour somehow possible:
The structure:
<div class="col">
text…
<div class="image two-col-width"></div>
</div>
<div class="col">
text…
<div class="image"></div>
<div class="image two-col-width"></div>
</div>
<div class="col">
text…
</div>
the columns are using float
As far as I can see this is not possible with css.
Even with multiple columns this will not work because column-span accept only none or all.
Is there any workaround like a javascript plugin to make this work?
Thanks a lot
It's indeed not possible to do it with floats only because the float columns can't track or calculate the size of the colored divs going cross column. However this is easily achievable with Flexbox.
I have a webpage based on a susy grid, with content like this:
<div class="container">
<div class="column-gallery-item">
<p>Who's down there? Can't see!</p>
</div>
<div class="column-gallery-item">
<p>Lots<br>and lots<br>and lots<br>of content</p>
</div>
<div class="column-gallery-item">
<p>Not much here</p>
</div>
<div class="column-gallery-item">
<p>I want to move up!</p>
</div>
</div>
Each div spans 4 columns of a 12-column grid. The first three divs appear in a single row, the last div moves to the next row - see http://codepen.io/anon/pen/meGJVp .
Now I need the last div to move up, directly below the first one. How can I do so?
If you want the item to stack underneath the first item in the grid then the only way is to nest it in the same column:
<div class="column-gallery-item-stacked">
<div class="nested-column-gallery-item">
<p>Who's down there? Can't see!</p>
</div>
<div class="nested-column-gallery-item">
<p>I want to move up!</p>
</div>
</div>
See here: http://codepen.io/anon/pen/QjVjMK
I have a row divided into 3 columns using col-sm-4. Now i expect this row to be divided horizontally into three parts. But it's divided vertically.
See on Jsfillde
Here's my code
<div class="container">
<div class="row" style="padding:13px 15px;">
<div class="pull-left span4">
<img src="themes/custom/img/logo.png" width="120" alt="logo"/>
</div>
<div class="pull-right span4">
<div class="row">
<div class="col-sm-4">One</div>
<div class="col-sm-4">Two</div>
<div class="col-sm-4">Three</div>
</div>
</div>
</div>
</div>
I have kept a logo on the left side and on the right side there is a row that i want to divide horizontally in 3 parts.
What am i doing wrong?
Your code works just fine. The .col-sm-* classes are applied for width 768px and above. If you want make this three divs always horizontally, you have to use classes .col-xs-4 in your case. Updated jsfiddle
Futher reading - http://getbootstrap.com/css/#grid-options
I was having the same problem and was at my wits end. Then I refreshed the browser and it worked.
I have this exact code, but still the divs are stacking over each other. I've looked up similar questions but in all of them there are obvious reasons for why the divs are not side by side. I just cannot figure out why this should not work
<div class="pure-g-r">
<div class="pure-u-1-2"><h2>hello</h2></div>
<div class="pure-u-1-2"><h2>hello</h2></div>
</div>
Any suggestions?
It seems like pure has removed the "grid-g-r" part, so "grid-g" will do iff I specify the screen resolution.
This works:
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2"><h2>hello</h2>
</div>
<div class="pure-u-1 pure-u-md-1-2"><h2>hello</h2>
</div>
</div>
Basically I'm trying to create a simple webpage template which would contain 3 rows. The first being the header which contains two columns, the second just being the mainbody and then the last being a footer.
Coding wise i'm doing this kind of layout
<div id="wrapper">
<div id="header">
<header>
</header>
<div id="col2>
</div>
</div>
<div="mainbody"></div>
<footer></footer>
Basically the trouble I'm having now is in regards to the first row with the two columns. Basically I have a picture in the first one and a bunch of buttons on the second one. Ideally what I would like is to have the header at 100% width so it fits the screen and the contents of the first column stick to the left and the buttons to the right. With the blank space left inbetween the two. So the contents stick to the sides so to speak.
At the moment I'm using float:left on CSS for the first column, I've been messing around with float/align/position but I can't seem to get anything to work.
So any advice on that I would appreciate it.
I also had another question in regards to the footer, basically I have no idea how to even go about doing it. So just asking if possible and guidance where to look.
So for the footer I was wondering if it would be possible for it, if in between the footer and the browser x-axis there's white space it fits to the screen and the body would strech. Because as of now my body is only at the height of the contents within. So basically general advice on CSS to help implement the style so it fits to the screen.
Header with 2 columns
<div id="header">
<div id="column1" style="float:left;">Image</div>
<div id="column2" style="float:left;">Buttons</div>
</div>
Now add desired margin-left to second column div. It will create space in between 2 columns
<div id="wrapper">
<header>
<div id="column1" style="float:left;">Image</div>
<div id="column2" style="float:left;">Buttons</div>
</header>
<div class="mainbody">
Content
</div>
<footer></footer>
Use this
It is simple structure that can be created as follows (Here is DEMO)
HTML is
<div id="wrapper">
<div id="header">
<header><img src='http://www.topnews.in/files/facebook-yahoo.jpeg' height=200 />
</header>
<div id="col2"><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br>
</div>
</div>
<div="mainbody">mainbody
</div>
<footer></footer>
</div>
And CSS will be
#header{overflow:auto}
header{float:left}
#col2{float:right}
Hope it will help you :)