I almost succeeded making aligned html and css but between writing "today" and "yesterday" the content is not aligned. I want it to look like a table. Now it writes "Today" and just packs the content so that the next row doesn't look adjusted.
.ui.left.floated {
min-width: 80px;
}
<!DOCTYPE html>
<html dir="ltr" lang="en-IN" class="js">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
<body>
<div id="wrapper"> <div class="ui top attached tabular menu">
<a class="item active" data-tab="first">All</a>
<a class="item" data-tab="second">Company</a>
<a class="item" data-tab="third">Private</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="first">
<div class="ui divided items">
<div style="margin-top:10px!important" class="item">
<div class="ui left floated">
Today
<br>3:28
</div>
<div class="image">
<a href="/vi/5773759738806272.html">
<img src="http://lh3.googleusercontent.com/rVL0kUVl6aHzOiyiz5fWq0YZcwALQdrqn2Vf0DWW0R5OvClZgYj5S4_VoQUajZC54gxlQxgP6NZUr3f9pALqzw3EyQ=s150" title="Get Opencart Development Services from TRS Software Solutions" alt="Get Opencart Development Services from TRS Software Solutions">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5773759738806272.html">
Get Opencart Development Services from TRS Software Solutions </a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>TRS Software Solutions is leading ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Lakeland</div>
<div class="ui label">Florida</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
<div class="item">
<div class="ui left floated">
Yesterday
<br>3:44
</div>
<div class="image">
<a href="/vi/5329266862456832.html">
<img src="http://lh3.googleusercontent.com/QQ0YVYpyC5LGhKzpXGlkh-hzQuoYnkDTk4IHtyRKoREVStKOUBrsSH7IdtIZr1F-bXJb38gPRCRtNZuDDROpIOSbO6w=s150" title="Learn jQuery and JavaScript by creating an apple style thumb Slider" alt="Learn jQuery and JavaScript by creating an apple style thumb Slider">
</a>
</div>
<div class="content">
<a class="header" href="/vi/5329266862456832.html">
Learn jQuery and JavaScript by creating an apple style thumb Slider </a>
<div class="meta">
<span class="price"></span>
</div>
<div class="description">
<p>Originally started as a programming ...</p>
</div>
<div class="extra">
<div class="ui label">
Services
</div>
<div class="ui label">
For sale
</div>
<div class="ui label">Other city</div>
<div class="ui label">Massachusetts</div>
<div class="ui right floated primary button">
Buy now
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
<div class="item">
<div class="ui left floated">
12 July.
<br>0:42
</div>
I tried making a row with cells with semantic-ui but that made things worse. Can you help me?
I want it to look like this (mockup)
Will it work if I make rows and cells?
.ui.left.floated {
min-width: 80px;
}
I am sorry is this what you are after? this will make sure that all the images are aligned? make it 100px as if the date is say.. 31 September (longer wording)
Below is the grid system I use for these sorts of things.
/*________ GRID ________*/
.grid {
margin: 0 auto;
overflow: hidden;
margin-left: -30px;
}
.grid > div {
float: left;
min-height: 1px;
padding-left: 30px;
}
.grid:after {
content: "";
display: table;
clear: both;
}
.grid .third {
width: 33.33%;
}
.grid .halve {
width: 50%;
}
and so on. then when you get down to smaller sizes eg mobiles.
#media (max-width: 740px) {
.grid .third {
width: 100%;
}
}
Related
Need to align four different height (beetween 160-180px) svg images with text under them.
Images should be placed in line at sight and I don't know how to make strict align short text under them in one line like on screenshot.
Thanks!
UPD: Sorry for inconvinient information, thought that this question is quite typical for those who know css good.
Here is my html and css. Also I'm using bootstrap rows.
<div class="did-you-know">
<div class="row items">
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-wa.svg"/>
</div>
<div class="title text-poppins">
<p>We’re from WA</p>
<p>{like you!}</p>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-packaging.svg"/>
</div>
<div class="title text-poppins">
<p>We use minimal packaging</p>
<p>{great for the planet}</p></div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-quality.svg"/>
</div>
<div class="title text-poppins">
<p>We only choose quality</p>
<p>{better for your health}</p></div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-community.svg"/>
</div>
<div class="title text-poppins">
<p>We love giving back</p>
<p>{great for our community}</p></div>
</div>
</div>
</div>
.did-you-know {
padding: 20px;
text-align: center;
}
.did-you-know .items .icon {
padding: 50px;
}
.did-you-know .items .title {
font-size: 20px;
}
here is a solution:
Replace images by your images.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 25%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Snow" style="width:100%">
<p style='text-align: center;'>test1</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Forest" style="width:100%">
<p style='text-align: center;'>test2</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
<p style='text-align: center;'>test3</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
<p style='text-align: center;'>test3</p>
</div>
</div>
</body>
</html>
To change the color like this:
I don't seem to find how to do it anywhere.
If you want to apply the same color style to all of your cards you can do something like this:
.ui.card,
.ui.cards>.card {
background-color: #D9499A;
}
The card is divided into 3 div elements: .image, .content, and .extra.content. If you want to change the colors individually do something like:
.ui.card>.content,
.ui.cards>.card>.content {
background-color: #D9499A;
}
.ui.card>.content.extra,
.ui.cards>.card>.content.extra {
background-color: #D9499A;
}
Check this example Fiddle out:
HTML
<div class="ui card kristy">
<div class="image">
<img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
</div>
<div class="content">
<a class="header">Kristy</a>
<div class="meta">
<span class="date">Joined in 2013</span>
</div>
<div class="description">
Kristy is an art director living in New York.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i> 22 Friends
</a>
</div>
</div>
<div class="ui card matthew">
<div class="image">
<img src="https://semantic-ui.com/images/avatar2/large/matthew.png">
</div>
<div class="content">
<a class="header">Matthew</a>
<div class="meta">
<span class="date">Joined in 2015</span>
</div>
<div class="description">
Matthew is an in interior designer living in New York.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i> 47 Friends
</a>
</div>
</div>
<div class="ui card molly">
<div class="image">
<img src="https://semantic-ui.com/images/avatar2/large/molly.png">
</div>
<div class="content">
<a class="header">Molly</a>
<div class="meta">
<span class="date">Joined in 2010</span>
</div>
<div class="description">
Molly is a personal assistant living in Paris.
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i> 12 Friends
</a>
</div>
</div>
CSS
.ui.card {
display: inline-block;
margin: 10px;
}
.ui.card,
.ui.cards>.card {
background-color: #5C5D5F;
color: white;
}
.ui.card.matthew {
background-color: #2B4B64;
}
.ui.card.kristy {
background-color: #253E54;
}
.ui.card>.content>a.header,
.ui.cards>.card>.content>a.header,
.ui.card .meta,
.ui.cards>.card .meta,
.ui.card>.content>.description,
.ui.cards>.card>.content>.description,
.ui.card>.extra a:not(.ui),
.ui.cards>.card>.extra a:not(.ui) {
color: white;
}
You can give an id for the object and then set the color with CSS, eg:
#header-blue{
background-color: #1A3E6E;
}
It only takes in consideration the height of the first tab and for the rest of the tabs it automatically sticks the content to the bottom.
<div class="ui grid railContainer">
<div class="four wide column ">
<div class="ui vertical fluid tabular menu sticky railMenu">
<a class="item active" data-tab="first">
TAB 1
</a>
<a class="item" data-tab="second">
TAB 2
</a>
<a class="item" data-tab="third">
TAB 3
</a>
</div>
</div>
<div class="twelve wide stretched column" id="railContent">
<div class="ui basic tab active" data-tab="first">
<p>BEGIN tab 1</p>
<div class="height"></div>
<p>END</p>
</div>
<div class="ui basic tab" data-tab="second">
<p>BEGIN tab 2</p>
<div class="height first"></div>
<p>it only sticks for the first height</p>
<div class="height"></div>
<p>END</p>
</div>
<div class="ui basic tab" data-tab="third">
<p>BEGIN tab 3</p>
<div class="height"></div>
<br>
<div class="height"></div>
<br>
<div class="height"></div>
<p>END</p>
</div>
Here i called the tab
$('.menu .item')
.tab()
;
Here i initialize ui sticky
$('.ui.sticky')
.sticky({
context: '#railContent',
observeChanges: true,
})
.sticky('refresh')
;
Here is a jsfiddle:
https://jsfiddle.net/efpyhqq9/15/
I was having the same issue, based on your try I came with a solution, refresh the sticky every time a tab end the loading and become fully visible.
$('.ui.sticky').sticky({
context: '.railContent',
});
$('.menu .item').tab({
onVisible() {
$('.ui.sticky').sticky('refresh');
}
});
I've forked your fiddle with this solution.
https://jsfiddle.net/arthurvasconcelos/pmyg0yL0/
Thanks for the idea.
Since your tab contents don't have the same height, you need to refresh your rail every time your tab content is loaded. Below is a sample code that works for your situation.
$('.menu .item').tab({
onLoad: function(){
$('.ui.sticky').sticky('refresh');
}
});
$('.ui.sticky')
.sticky({
context: '.railContent',
}).sticky('refresh');
.height {
background-color: lightblue;
height: 1000px;
}
.height.first {
background-color: skyblue;
height: 1000px;
}
.footer {
background-color: gray;
height: 600px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js"></script>
<div class="ui grid railContainer">
<div class="four wide column ">
<div class="ui vertical fluid tabular menu sticky railMenu">
<a class="item active" data-tab="first">
TAB 1
</a>
<a class="item" data-tab="second">
TAB 2
</a>
<a class="item" data-tab="third">
TAB 3
</a>
</div>
</div>
<div class="twelve wide stretched column railContent">
<div class="ui basic tab active" data-tab="first">
<p>BEGIN</p>
<p>works only for first tab</p>
<div class="height first"></div>
<p>END</p>
</div>
<div class="ui basic tab" data-tab="second">
<p>BEGIN</p>
<p><i class="green check icon"></i>now it works for this one</p>
<div class="height first"></div>
<p>it only sticks for the first height</p>
<div class="height"></div>
<p>END</p>
</div>
<div class="ui basic tab" data-tab="third">
<p>BEGIN</p>
<p><i class="green check icon"></i>same for this one</p>
<div class="height"></div>
<br>
<div class="height"></div>
<br>
<div class="height"></div>
<p>END</p>
</div>
</div>
<div class="footer"></div>
</div>
Note: This is also true to visibility where a refresh is needed every time the DOM height is changed dynamically.
Would you help me please make appear pictures in one column? It needs to be full width with no space between those images.
Thanks in advance.
What I want it to look like
What I have
Code:
img,
.image {
display: block;
height: 350px;
margin: 0;
width: 50%;
}
<section class="main">
<div class="container">
<div class="full-width">
<div class="vibe_editor clearfix">
<div class="v_module v_column col-md-12 fullwidth v_first">
<style>
<div class="v_module v_text_block about_us">
<p>
<a href="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas.jpg?189db0">
<img class="alignnone size-big wp-image-3125" width="768" height="282" alt="o-nas1" src="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas-768x282.jpg?189db0">
</a>
<a href="http://www.kurzon.cz/wp-content/uploads/2015/10/2048x1536-orange-red-solid-color-background.jpg?189db0">
</p>
</div>
</div>
<div class="v_module v_column col-md-12 fullwidth v_first">
</div>
</div>
</div>
</section>
href="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas.jpg?189db0"> <img class="alignnone size-big wp-image-3125" width="768" height="282" alt="o-nas1" src="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas-768x282.jpg?189db0"> </a> <a href="http://www.kurzon.cz/wp-content/uploads/2015/10/2048x1536-orange-red-solid-color-background.jpg?189db0"> </p> </div> </div> <div class="v_module v_column col-md-12 fullwidth v_first"> </div> </div> </div> </section>
The p tag has padding by default remove it?
Also remove unwanted <style> tag
I have a bootstrap panel where the height is automatically generated from a jquery script.
So, I would like to have the footer with a background for the entire section.
How can I achieve this goal ?
I don't want to fix the height for this section, is it possible to make something like :"height for the rest of your space in the panel".
Here the fiddle:
http://www.bootply.com/XBCffrO0My
Table layout approach
Idea is to have the element behave like a table and the child item as its row which would occupy the entire space.
Updated Bootply
#crud1 {
display: table;
width: 100%;
}
.panel-footer {
display: table-row;
height: 100%;
}
.panel-footer .row {
display: table-cell;
padding-top: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4">
<div id="crud1" class="panel panel-primary" style="height: 248px;">
<div class="panel-heading clearfix">
<div class="pull-left">
ChartLine 1
</div>
<div class="pull-right">
<span class="label label-success">priusa2</span>
</div>
<div class="pull-right" style="padding-right: 7px;">
<span class="label label-success status"></span>
</div>
<p></p>
</div>
<!-- panel-heading closed -->
<div class="panel-body">
<div class="container-fluidrm">
No-picture
</div>
</div>
<!-- panel-body closed -->
<div class="panel-footer">
<div class="row" style="height: 100%;">
<div class="col-md-9">
<p>Description:</p>
</div>
<div class="col-md-1">
<a class="show-popup" href="#" id="poplink" data-showpopup="ChartLine 1"><span id="logos" class="material-icons"></span></a>
</div>
<div class="col-md-1" style="margin-left:7px;">
<span id="logos" class="glyphicon glyphicon-star"></span>
</div>
</div>
</div>
<!-- panel-footer closed -->
</div>
</div>
Flexible box approach
Give the child item flex: 1 to expand with the parent element.
Updated Bootply
#crud1 {
display: flex; /* Activate flexbox module layout */
flex-direction: column; /* Align items horizontally */
}
.panel-footer {
flex: 1; /* Expand with the parent */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4">
<div id="crud1" class="panel panel-primary" style="height: 248px;">
<div class="panel-heading clearfix">
<div class="pull-left">
ChartLine 1
</div>
<div class="pull-right">
<span class="label label-success">priusa2</span>
</div>
<div class="pull-right" style="padding-right: 7px;">
<span class="label label-success status"></span>
</div>
<p></p>
</div>
<!-- panel-heading closed -->
<div class="panel-body">
<div class="container-fluidrm">
No-picture
</div>
</div>
<!-- panel-body closed -->
<div class="panel-footer">
<div class="row" style="height: 100%;">
<div class="col-md-9">
<p>Description:</p>
</div>
<div class="col-md-1">
<a class="show-popup" href="#" id="poplink" data-showpopup="ChartLine 1"><span id="logos" class="material-icons"></span></a>
</div>
<div class="col-md-1" style="margin-left:7px;">
<span id="logos" class="glyphicon glyphicon-star"></span>
</div>
</div>
</div>
<!-- panel-footer closed -->
</div>
</div>