I'm trying to make different boxes that are placed in the same line using CSS.
However, without any style rule (at least that I've noticed) making it do so, the second box is lower than the first. Why is that? How can I fix it?
If you have any question, feel free to ask, I'll do my best to answer.
Thank you in advance.
Code snippet below.
JSFiddle
.index-links {
width: 90%;
position: relative;
left: 5%;
padding: 1%;
}
.index-link {
display: table-cell;
height: 150px;
width: 150px;
border: 2px solid black;
margin: 1%;
padding: 0.5%;
text-align: center;
vertical-align: middle;
position: relative;
cursor: pointer;
float: left;
}
.index-link > .index-link-perms::before {
content: " | "
}
<div class="index-links">
<br>
<div class="index-link" data-color="black" data-x-index="1" data-y-index="1">Link 1<span class="index-link-perms">Access: Everyone</span>
</div>
<br>
<div class="index-link" data-color="pink" data-x-index="2" data-y-index="1">Link 2<span class="index-link-perms">Access: SM</span>
</div>
</div>
Remove the br tag between the divs.
<div class="index-links">
<br>
<div class="index-link" data-color="black" data-x-index="1" data-y-index="1">Link 1<span class="index-link-perms">Access: Everyone</span>
</div>
<div class="index-link" data-color="pink" data-x-index="2" data-y-index="1">Link 2<span class="index-link-perms">Access: SM</span>
</div>
</div>
change the CSS as below
.index-links {
display:flex;
width: 90%;
position: relative;
left: 5%;
padding: 1%;
}
Related
I have a vertical line running down the middle of my page, but it only goes as far as the first section. What I want it to do is run all the way down to the very end of the page when you scroll all the way down. I'm not sure how to achieve this.
Right now my CSS for my line is this:
.line{
position: absolute;
top: 100px;
margin: auto;
width: 50%;
height: 100%;
border-right: 1px dotted black;
}
I don't want to have a set height, because as I start adding more projects to the site, I would like the line to grow with the page without having to change the height every time.
Here's a codepen: https://codepen.io/Furr/pen/gJLapb
This website is my inspiration, I would like it to be something like this: https://www.rezo-zero.com/projects/
Thanks in advance.
I think you may actually want 3 divs like this. ( the line is a div)
.vl {
border-left: 1px dotted black;
height: 500px;
}
#parent {
display: flex;
}
#right {
width: 300px;
margin-left: 5px;
}
#left {
flex: 1;
}
<div id="parent">
<div id="left">Left Side</div>
<div class="vl"></div>
<div id="right">Right Side</div>
</div>
another reason to have 3 divs is that you can "break up" the line with clickable content just like in your example
One of feasible way is to use pseudo element to make the vertical line so that it will expand according to the container. Here is an simple example.
.timeline-container {
position: relative;
width: 500px;
margin: 0 auto;
}
.timeline-container:after {
content: " ";
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background-color: #000;
}
.timeline-container .event {
width: 50%;
}
.timeline-container .event.left {
text-align: right;
}
.timeline-container .event.right {
margin-left: 50%;
}
.timeline-container .event-content {
margin: 10px;
}
<div class="timeline-container">
<div class="event left">
<div class="event-content">2019-05-14<br>Testing Events</div>
</div>
<div class="event right">
<div class="event-content">2019-05-10<br>Another Events</div>
</div>
<div class="event left">
<div class="event-content">2019-04-25<br>Great Exhibition</div>
</div>
<div class="event right">
<div class="event-content">2019-03-27<br>School Festival</div>
</div>
</div>
You can look at the source code for the website you wanted to emulate by typing CTRL + SHIFT + I in Chrome after opening it.
I need some help with my website. I am struggling to achieve that three pictures are shown as "display:inline", which means next to each other and not under each other.
I can't find my mistake and would welcome and hints.
.trikot {
max-width: 1050px;
height: 200px;
border: 2px solid rgba(255, 255, 255, 0.9);
border-radius: 10px;
margin-left: 10px;
margin-top: 10px;
display: inline;
}
.trikotset {
margin-top: 15px;
margin-left: 10px;
height: 150px;
}
#buy_button {
background-color: #9c1737;
width: 100px;
display: block;
margin-left: 35px;
}
<section class="trikot">
<div id="trikot1">
<img class="trikotset" src="img/trikot.jpg">
<button id='buy_button' type='button'>Jetzt Kaufen</button>
</div>
<div id="trikot2">
<img class="trikotset" src="img/hose.jpg">
<button id='buy_button' type='button'><a href=>Jetzt Kaufen</button>
</div>
<div id="trikot3">
<img class="trikotset" src="img/traningsanzug.jpg">
<button id='buy_button' type='button'><a href=>Jetzt Kaufen</button>
</div>
</section>
You would find floats much more reliable for this type of situation because I don't see you need vertical positioning.
EDIT : remember to include clearfix! Floated elements are similar to absolute, they are taken from the document flow.
The images are inside the containers #trikot1, #trikot2, #trikot3. You need to define display: inline-block; for those containers:
#trikot1, #trikot2, #trikot3 {
display: inline-block;
}
http://i.imgur.com/Veauoig.png
I am currently trying to work out how to make the 'From £' text to keep in the same position as the buttons above. The page is responsive so I have been unable to keep the text in one position.
The CSS I have used so far -
element.style {position: absolute; width: 97%;}
I put each of the 'From £' parts in their own class. Not sure if there is an easier way?
<div class="price2">From £300</div>
Any help would be great. Thanks!
Add a container for the element for the price and button so that they remain in context with each other.
http://jsfiddle.net/05orkj1a/
.prices{
width: 100%;
}
.price-column{
display: table-cell;
width: 33%;
text-align: center;
margin: 0 auto;
padding: 0 5px;
}
<div class="prices">
<div class="price-column">
<button>Bass</button>
<div class="price2">From £65</div>
</div>
<div class="price-column">
<button>Mid</button>
<div class="price2">From £300</div>
</div>
<div class="price-column">
<button>Treble</button>
<div class="price2">From £715</div>
</div>
</div>
You could also Float the columns left to cause them to collapse vertically as the screen shrinks with the same html. Just change the margin or padding depending on how far apart you want them spaced
http://jsfiddle.net/z6agt11e/
.prices{
width: 100%;
overflow: hidden;
}
.price-column{
display: block;
float: left;
text-align: center;
padding: 5px 5px;
}
You can also add an outer container and then create a inner container for each button-price set.
Here is the HTML code:
<div class="outter">
<div class="block">
<div class="button">button1</div>
<div class="price2">From £65</div>
</div>
<div class="block">
<div class="button">button2</div>
<div class="price2">From £300</div>
</div>
<div class="block">
<div class="button">button3</div>
<div class="price2">From £715</div>
</div>
</div>
Here the CSS:
.outter{
width:100%;
}
.block{
width:33%;
background-color: yellow;
float:left;
text-align: center;
}
And here a jsfiddle:
http://jsfiddle.net/SoniaGM/ej4mdwx9/1/
Hope it helps.
You can use the CSS3 ::after pseudo-selector.
Give at button class:
position: relative;
Then you have to write something lime this:
.button-class::after {
content: 'From £300';
background: transparent;
height: 1%;
width: 3%;
position: absolute;
top: 20px;
left: 0px;
}
Obviously, you have to change height: 1%; width: 3%; and top: 20px; left: 0px;with whatever you want!
i have a legend for a graph that sometimes is scrollable and sometimes isn't.
Unfortunately when the scrollbar shows up, it pushes all of the elements over to the left a bit. So they don't line up with a total (outside the scrollable area)
Example: http://jsfiddle.net/3sKVR/
A simple answer would be to just set a fixed width, but unfortunately, it has to be responsive.
Also, i can't use custom scrollbars to maintain consistency with the rest of the site and also bring down page-load times.
Any help would be greatly appreciated (with internet points!)
Cut down version of code:
HTML:
<div id="legend_cont">
<div id="legend_list">
<div id="legend">
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#ffb100"></div>
</div>
<div class="legend_cell">Merch G</div>
<div class="legend_cell legend_value">$1423.24</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#ed5929"></div>
</div>
<div class="legend_cell">Merch L</div>
<div class="legend_cell legend_value">$1351.07</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#3f9c35"></div>
</div>
<div class="legend_cell">Merch N</div>
<div class="legend_cell legend_value">$1194.90</div>
</div>
<div class="legend_row">
<div class="legend_cell">
<div class="legend_colour" style="background-color:#009bbb"></div>
</div>
<div class="legend_cell">Merch T</div>
<div class="legend_cell legend_value">$1188.14</div>
</div>
</div>
</div>
<div id="legend_total">Total:<span id="legend_total_value">$0.00</span>
</div>
</div>
CSS:
#legend_cont {
height: 100%;
border-left: 2px solid #ADADAD;
width: 40%;
float: right;
}
#legend_list {
height: 169px;
overflow: auto;
margin: 20px 4% 20px 7%;
}
#legend {
display: table;
width: 90%;
}
.legend_row {
display: table-row;
}
.legend_cell {
display: table-cell;
padding: 5px;
vertical-align: middle;
}
.legend_colour {
width: 10px;
height: 20px;
background-color: #c1c1c1;
border-radius: 3px;
}
.legend_value {
text-align: right;
}
#legend_total {
height: 50px;
line-height: 50px;
width: 88%;
border-top: 1px solid;
margin-left: 8%;
}
#legend_total_value {
float: right;
padding-right: 5px;
}
1) Make sure there is always a scroll bar
CSS
#legend_cont {
overflow-y: scroll;
}
2) Use js to grab the variable width of the scrollbar (example here)
3) Set the padding-right in #legend_total_value equal to that variable in jquery.
JS
$('#legend_total_value').css('padding-right', wScroll);
Try applying padding-right to compensate for the size of scrollbar when it's not there and position the total accordingly.
#legend_list {
height: 169px;
overflow: auto;
margin: 20px 4% 20px 7%;
padding-right:15px;
}
Demo
I've searched the many similar questions like this, but none of the solutions are working. It should also be noted that I am using twitter bootstrap. I want a bunch of divs to span the entire length of the parent div at the bottom of it. I have tried putting them inside a div that text-align:center and then using float-left inside the gridPics class, and using display: inline-block, text-align :left and nothing seems to do it. The two in the example below are in the exact same spot, and I want them side by side. Here is what I have:
HTML:
<div class="row-fluid">
<div class="span8 offset2 articleContent">
<!-- These are the divs to span across, when it works there would be more than two -->
<div class="gridPics"></div>
<div class="gridPics"></div>
<!-- They will also go over this image -->
<img id="sidePic" src="img/about/aboutHeader_Mid1.png" alt="about">
</div>
<div class="span2"></div>
</div>
CSS:
.gridPics{
position: absolute;
z-index: 1;
width: 10%;
height: 20%;
background: #0000b3;
bottom: 0;
float: left;
}
.articleContent{
position: relative;
box-shadow: 0 0 5px 5px #888;
}
#sidePic{
position: relative;
z-index: -1;
}
Here is where I am doing this, the blue divs would be pics (akin to thumbnails) that can be clicked. I want them to go all the way across:
/ScreenShot2013-01-09at85450PM_zps550e8e4a.png[/IMG]
Here's a fiddle:
http://jsfiddle.net/pureux/Er9eG/
You need a container for your gridPics and have it be absolute positioned (instead of the gridPics) at the bottom. Then float the gridPics inside of the container.
.picContainer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
min-height: 50px;
}
.gridPics {
width: 50px;
height: 50px;
float: left;
display: block;
margin-right: 4px;
margin-top: 4px;
}
Is this what you're trying to do:DEMO
HTML
<div class="row-fluid">
<div class="span8 offset2 articleContent">
<div class="gridPics"></div>
<div class="gridPics"></div>
<div class="clear"></div>
<img id="sidePic" src="img/about/aboutHeader_Mid1.png" alt="about">
</div>
<div class="span2"></div>
</div>
CSS
.gridPics{
width: 10%;
height: 20px;
background: #0000b3;
float: left;
border:solid #FFF 1px;
}
.articleContent{
box-shadow: 0 0 5px 5px #888;
}
#sidePic{
z-index: -1;
}