i coded a 6 divs beside each other
how can i make one div only to expand to take full width of wrapped div on hover and the other 5 divs get on bottom to the fully expanded div
html:
<div class="row">
<div class="col-md-2" id="discuss_block">
div1.....
</div>
<div class="col-md-2" id="discuss_block">
div2.....
</div>
<div class="col-md-2" id="discuss_block">
div3.....
</div>
<div class="col-md-2" id="discuss_block">
div4.....
</div>
<div class="col-md-2" id="discuss_block">
div5.....
</div>
<div class="col-md-2" id="discuss_block">
div6.....
</div>
</div>
css:
#discuss_block{
background: #FFBC2F;
color: #FFF;
z-index: 30;
top: 0px;
}
#discuss_block:hover{
width:100%;
}
You can use float:left http://jsfiddle.net/sfnxkav5/1/
#discuss_block{
width:50px;
float:left;
background: #FFBC2F;
color: #FFF;
z-index: 30;
top: 0px;
}
Related
I have a list of items that I am presenting in a flexbox table. My actual display has more columns, but in this question, I'll use just 2 - the 'category' and 'item' names. The data is presented in category order. Where items repeat for a category, only the first item for the category should have the category listed, for subsequent ones I want the category cell empty. As this can scroll off the top of the screen, I'd like to make this cell sticky, as I do for the headings.
However, as the cell is a child of the row, not the container of the table, it scrolls up with the row. You can see this in the first table in the example below, the '.first_item' CSS class does not hold the caption in place.
I concluded that the only way to achieve this is to insert a div before the row to present the category and make this sticky - class cat_head in the 2nd table in the example below. This works, however, it knocks the first item down and does not align where I want it to. I therefore set its height to 0px, which brings the item row back into alignment, but then have to put the text within an absolute positioned div within this so that I can set a background colour to stop text for the categories from overlaying each other.
It works really well and is exactly how I'd like it to operate - except that because the height is set to 0px, the absolute div extends below the bottom of the table as it is scrolled off the top of the screen and overwrites what is below it - you can see in the example it overwrites "Text below".
I also have to manually add an 'alt' class name on alternate rows to get background colouring rather than relying on ':nth-child(even)' - but I can live with this.
Has anyone got any suggestions for stopping it falling out of the bottom of the container, or indeed a better way of doing this? Thanks.
.pad {
height: 50px;
background-color: yellow;
}
.fill {
height: 120vh;
background-color: yellow;
}
.container {
background-color:#ffffff;
}
.row {
display: flex;
flex-flow:row wrap;
}
.head {
position: sticky;
top: 0px;
background-color: #e0e0e0;
font-weight: bold;
border-bottom: 1px solid #000000;
height: 24px;
z-index: 3;
}
.cell {
flex: 0 0 100px;
padding: 5px;
}
.first_item {
position: sticky;
top: 25px;
z-index: 2;
}
.table_1 .row:nth-child(even),
.table_2 .alt {
background-color: #f0f0f0;
}
.cat_head {
position: sticky;
top: 25px;
height:0px;
overflow: visible;
z-index: 2;
}
.cat_text {
position: absolute;
width: 80px;
padding: 0;
background-color: rgba(8,156,213,1);
color: #ffffff;
border: 1px solid #000000;
border-radius:5px;
margin:2px 0 0 4px;
text-align:center;
}
<div class="pad"></div>
<div class="container table_1">
<div class="row head">
<div class="cell">Category</div>
<div class="cell">Item</div>
</div>
<div class="row cat">
<div class="cell first_item">Category 1</div>
<div class="cell">Item 1-1</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 1-2</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 1-3</div>
</div>
<div class="row cat">
<div class="cell first_item">Category 2</div>
<div class="cell">Item 2-1</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 2-2</div>
</div>
</div>
<div class="pad">Text below</div>
<div class="container table_2">
<div class="row head">
<div class="cell">Category</div>
<div class="cell">Item</div>
</div>
<div class="cat_head">
<div class="cat_text">Category 1</div>
</div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 1-1</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 1-2</div>
</div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 1-3</div>
</div>
<div class="cat_head">
<div class="cat_text">Category 2</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 2-1</div>
</div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 2-2</div>
</div>
</div>
<div class="fill">Text below</div>
OK. So I went to sleep on it and realised that the sticky positioning when scrolling off the top of the viewport is based on the bottom of its div. Therefore, I need to shift the div below the row it is on - as its 0px high and that's where its 'bottom' should be.
I also need to move the contained absolute div above it rather than below so its bottom aligns to it. I initially put a -24px top margin on the absolute div, but this stopped the sticky positioning on its parent for some reason. I therefore put a -24px top margin on the sticky div, which worked. However, it also dragged the next row up, so I also added a 24px bottom margin which resolved that.
I also added a containing div around each category's rows so that the sticky heading scrolls off screen when the next category gets to the top.
All working fine.
.pad {
height: 50px;
background-color: yellow;
}
.fill {
height: 120vh;
background-color: yellow;
}
.container {
background-color:#ffffff;
}
.row {
display: flex;
flex-flow:row wrap;
}
.head {
position: sticky;
top: 0px;
background-color: #e0e0e0;
font-weight: bold;
border-bottom: 1px solid #000000;
height: 24px;
z-index: 3;
}
.cell {
flex: 0 0 100px;
padding: 5px;
}
.alt {
background-color: #f0f0f0;
}
.cat_head {
position: sticky;
top: 27px;
height:0px;
margin: -24px 0 24px 4px;
overflow: visible;
z-index: 2;
}
.cat_text {
position: absolute;
width: 80px;
padding: 0;
background-color: rgba(8,156,213,1);
color: #ffffff;
border: 1px solid #000000;
border-radius:5px;
text-align:center;
}
<div class="pad"></div>
<div class="container">
<div class="row head">
<div class="cell">Category</div>
<div class="cell">Item</div>
</div>
<div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 1-1</div>
</div>
<div class="cat_head">
<div class="cat_text">Category 1</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 1-2</div>
</div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 1-3</div>
</div>
</div>
<div>
<div class="row">
<div class="cell"></div>
<div class="cell">Item 2-1</div>
</div>
<div class="cat_head">
<div class="cat_text">Category 2</div>
</div>
<div class="row alt">
<div class="cell"></div>
<div class="cell">Item 2-2</div>
</div>
</div>
</div>
<div class="fill">Text below</div>
I currently have two containers. One of the containers has two divs stacking ontop of each other (a img and text). That is fine. But it seems the bottom container is stacking ontop of the 1st container.
<div class="container">
<div id='map'>
<div id='image'>
<img src="/static/usa.png">
</div>
<div id='states'>
<div class="col-md-12">
<center>
<h2>Select Your State</h2>
Select your state from the list below to find information specific to your area.
</center>
</div>
<div class="col-md-2">
state
</div>
<div class="col-md-2">
state
</div>
<div class="col-md-2">
state
</div>
<div class="col-md-2">
state
</div>
<div class="col-md-2">
state
</div>
<div class="col-md-2">
state
</div>
</div>
</div>
</div>
<div class="container">
<center>
<h1>Information on ...</h1>
This site is a beta framework
</center>
</div>
and my css file is
img {
width:100%;
opacity: 0.4;
}
#map { position: relative; }
#image {position: absolute;}
#states {
position: absolute;
}
span {
display: inline-block;
vertical-align: middle;}
a {
color: black;
}
try adding clear:both; to the bottom container
I answered it by instead of trying to stack the images just setting it to a background image static.
body {
background-image: url("/static/usa.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
I have the following problem: I'm working on this site and using a picture as a background of 1 div. Inside this div I have another 2 dives - logo and navigation.
Last /outside of the div with the picture/ is the footer, whos background must be other color, not the picture. I set the css to the div with the picture like this :
#background{
position: absolute;
z-index: -1;
display: block;
}
Here is the html :
<div id="pic">
<img id="background" src="picture.jpg">
<div class="row" id="logo">
</div>
<div class="row" id="example-menu">
</div>
</div>
<div class="row" id="footer">
<div class="medium-3 columns medium-offset-1" id="worktime">РАБОТНО ВРЕМЕ: </br> ПОНЕДЕЛНИК-ПЕТЪК </br> 08:30-19:00ч.</div>
<div class="medium-8 columns"></div>
</div>
But the problem is that the footer also goes over the div with the picture and my design is not like this... I need to keep the whole picture to be seen.
Thanks in advance !
the issue is with the z-index of the div containing the image and the div containing the footer.
the easiest solution is to put the footer after the div with your content. The only time z-index should come into play is if you are trying to put items on top of the image for effect.
<div id="content-wrapper">
<div id="nav">
<span>NAV</span>
</div>
</div>
<div id="footer">
<span>FOOTER</span>
</div>
you can easily add the footer in the container, attach at the bottom as well.
see if this example helps:
https://plnkr.co/edit/GDfzul2qKApw6JGhQSbb?p=preview
Option 1
Instead of using <img>, put the background using CSS
HTML
<div id="pic">
<div class="row" id="logo"></div>
<div class="row" id="example-menu"></div>
</div>
<div class="row" id="footer">
The footer content
</div>
CSS
#pic{
background: url( 'picture.jpg' ) no-repeat;
}
Option 2
Use fixed height for the parent div, #pic in this case:
HTML
<div id="pic">
<img id="background" src="picture.jpg">
<div class="row" id="logo"></div>
<div class="row" id="example-menu"></div>
</div>
<div class="row" id="footer">
The footer content
</div>
CSS
#pic{
position: relative;
height: 100px; /* This should be the height of the background image */
}
#background{
position: absolute;
z-index: -1;
}
Option 3
You may use position:absolute for the .rows instead:
#pic{ position: relative; }
.row{ position: absolute; top: 0; z-index: 99; }
<div id="pic">
<img id="background" src="https://placehold.it/200x100">
<div class="row" id="logo">This is logo</div>
</div>
<div id="footer">
The footer content
</div>
This is probably a pretty basic question, but I have a banner with an image on the left and text on the right. Under the banner is just a block of color. When the page gets smaller, my expectation is that the bits in the banner would stack (maintaining the background color for both) and the block of color (class="blue-line") would fall beneath them.
Here is the mark-up:
<section>
<div class="row header">
<div class="col-sm-6">
<img src="../images/logo.png" height="100px" />
</div>
<div class="col-sm-6 title">
<h2>Some Title Text</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 blue-line"></div>
</div>
</section>
and the css
.header {
background-color: #F2EBCC;
border: 10px solid #F2EBCC;
height: 120px;
}
.row > .title {
text-align: right;
top: 45%;
}
Thanks in advance!
JSFiddle: http://jsfiddle.net/3n6Kd/
try this:
<section>
<div class="row header">
<div class="col-sm-6">
<img src="../images/logo.png" height="100px" />
</div>
<div class="col-sm-6 title">
<h2>Some Title Text</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 blue-line"></div>
</div>
and:
.header {
background-color: #F2EBCC;
height: 120px;
}
.title {
text-align: right;
display: block;
padding: 10px;
}
.blue-line {
margin-top:10px;
height: 15px;
background-color: blue;
}
the text go under the first column not the blue-line, but it seems to appear above the blue-line so try it in your computer because some time jsfiddle.net don't show code correctly.
hope it will help you.
this is the first time, i'm building a totally scalable application with a css layout, when the user resizes the window the fields should shrink and grow accordingly. first i thought, easy, right? but now i'm really scratching my head over the dimensions, cause it seems like the margins are not quite right... i want to have a border-like separator thingy in between all the individual fields...
my code is this:
<div style='background-color:#000000;width:100%;height:100%;'>
<div style='width:100%;height:66%;margin-bottom:1%;'>
<div style='float:left; width:19%;height:100%;margin-right:1%;' class='app_14_concept_block'>keypartners</div>
<div style='float:left; width:19%;height:100%;margin-right:1%;'>
<div style='height:49%;margin-bottom:6%' class='app_14_concept_block'>key activities</div>
<div style='height:49%;' class='app_14_concept_block'>key resources</div>
</div>
<div style='float:left; width:19%; height:100%;margin-right:1%;' class='app_14_concept_block'>value propositions</div>
<div style='float:left; width:19%; height:100%;margin-right:1%;'>
<div style='height:49%;margin-bottom:6%' class='app_14_concept_block'>customer relationship</div>
<div style='height:49%;' class='app_14_concept_block'>channels</div>
</div>
<div style='float:left; width:19%; height:100%;padding-right:1%' class='app_14_concept_block'>customer segments</div>
</div>
<div style='width:100%;height:33%;'>
<div style='float:left; width:49%; height:100%;margin-right:1%;' class='app_14_concept_block'>cost</div>
<div style='float:left; width:50%; height:100%;' class='app_14_concept_block'>revenue</div>
</div>
</div>
the css is this:
.app_14_concept_block{
background-color:#ffffff;
}
.app_14_concept_block:hover{
background-color:#eeeeee;
}
and this is what it looks like at the moment (the blue thingy there is part of my app viewer layout that would open comments) - my main concern is the added empty(black) space on the right, at the end of the rows:
jsfiddle here: http://jsfiddle.net/gbMZy/51/
i also tried setting the "customer segments" width to 20% - sadly to no avail:
screenshot:
jsfiddle: http://jsfiddle.net/gbMZy/52/
Maybe this solution Footer Items Expanding with Viewport Evenly could also work in your case.
Percentage width won't play well together with borders or margins.
A possible workaround is to have wrapper containers with full 20% / 50% width and then elements with border etc. inside them. This should help to avoid flickering and random spacings.
So, in your case this could look something like: http://jsfiddle.net/qC4JV/1/
HTML:
<div class="top">
<div class="cell">
<div class="border right"></div>
<div class="border bottom"></div>
<p>value</p>
</div>
<div class="cell">
<div class="border right"></div>
<div class="border bottom"></div>
<p>value</p>
</div>
<div class="cell">
<div class="border right"></div>
<div class="border bottom"></div>
<p>value</p>
</div>
<div class="cell">
<div class="border right"></div>
<div class="border bottom"></div>
<p>value</p>
</div>
<div class="cell">
<div class="border bottom"></div>
<p>value</p>
</div>
</div>
<div class="bottom">
<div class="cell">
<div class="border right"></div>
<p>value</p>
</div>
<div class="cell">
<p>value</p>
</div>
</div>
CSS:
body, html{
height: 100%;
background: #000;
}
.top{
height: 60%;
}
.bottom{
height: 40%;
}
.cell{
float: left;
height: 100%;
background: #fff;
position: relative;
}
.cell .border.right{
position: absolute;
right: 0;
top: 0;
width: 10px;
height: 100%;
background: #000;
}
.cell .border.bottom{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 10px;
background: #000;
}
.top .cell{
width: 20%;
}
.bottom .cell{
width: 50%;
}
Set the font-size explicitly in the first div and then use 'em' to adjust the row margins.
But I'm unsure whether there will be scalability issues or not ..
When using percentages in this manner, the way browsers round values to obtain discrete pixel values will often result in remainders. if 1% of the total width of the viewport is not an exact number of pixels, the browser will round up or down, resulting in a few pixels too many or too few, hence the jittery divs and unequal margins.
Even Twitter's Bootstrap framework, a very well developed system, suffers from the same issues when using its fluid grid system.
I hate to say it, but if you absolutely have to create a layout like this, and the unreliable element dimensions are not acceptable, using a table may be the way to go.
On the other hand, if you go with white 'borders' instead of black, the margin jitteriness will be less noticeable.
Your HTML is painful to read. You should really separate styles out into CSS instead of writing everything inline like that, it's harder to read/debug and makes it very easy to make a mistake.
Here is a little bit better of a solution: http://jsfiddle.net/gbMZy/51/
Percentage always will be calculated in round values manner on browser and will be justified according to total width of body or parent element wrap area/width. These dimensions will be assign after calculating inner and outer pixels width given to sub elements or padding styles as well as border given on element with specified size of pixels too.
HTML:
<div class="top">
<div class="cell">
<div class="border right">
</div>
<div class="border bottom">
</div>
<p>
Top Block-1
</p>
</div>
<div class="cell">
<div class="border right">
</div>
<div class="border bottom">
</div>
<p>
Top Block-2
</p>
</div>
<div class="cell">
<div class="border right">
</div>
<div class="border bottom">
</div>
<p>
Top Block-1
</p>
</div>
<div class="cell">
<div class="border right">
</div>
<div class="border bottom">
</div>
<p>
Top Block-3
</p>
</div>
<div class="cell">
<div class="border bottom">
</div>
<p>
Top Block-4
</p>
</div>
</div>
<div class="bottom">
<div class="cell">
<div class="border right">
</div>
<p>
Bottom Block-1
</p>
</div>
<div class="cell">
<p>
Bottom Block-2
</p>
</div>
</div>
CSS Styles:
body, html{
height: 100%;
background: #3355A9;
}
.top{
height: 60%;
}
.bottom{
height: 40%;
}
.cell{
float: left;
height: 100%;
background: #ffca77;
position: relative;
text-align:center;
font-weight:bold;
}
.cell p{
padding:10px;
}
.cell .border.right{
position: absolute;
right: 0;
top: 0;
width: 10px;
height: 100%;
background: #3355A9;
}
.cell .border.bottom{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 10px;
background: #3355A9;
}
.top .cell{
width: 20%;
}
.bottom .cell{
width: 50%;
}
Try this solution on codebins: http://codebins.com/codes/home/4ldqpbt
So, you might be found a better solution because it has better user interface and clear vision to display exact result as we want.