I am learning semantic-ui framework and currently I'm using segments. My code looks like this:
<!DOCTYPE html>
<html>
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
<script
src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<title>Assignments</title>
<style>
.raised.segment{
margin: 1.5%;
width: 30%;
display: inline-block;
float: left;
}
h3 {
display: inline-block;
text-align: center;
}
</style>
</head>
<body>
<div class="ui raised segment">
<h2 class="ui header">
Section 6
</h2>
<div class="ui middle aligned selection list">
<div class="item">
<img class="ui avatar image" src="/images/avatar/small/helen.jpg">
<div class="content">
<h3 class="ui header"> Vasil Pkhakadze </h3>
</div>
</div>
<div class="item">
<img class="ui avatar image" src="/images/avatar/small/christian.jpg">
<div class="content">
<div class="header">George Cercvadze</div>
</div>
</div>
<div class="item">
<img class="ui avatar image" src="/images/avatar/small/christian.jpg">
<div class="content">
<div class="header">George Cercvadze</div>
</div>
</div>
<div class="item">
<img class="ui avatar image" src="/images/avatar/small/christian.jpg">
<div class="content">
<div class="header">George Cercvadze</div>
</div>
</div>
</div>
</div>
<div class="ui raised segment">
<h2 class="ui header">
Section 6
</h2>
<div class="ui middle aligned selection list">
<div class="item">
<img class="ui avatar image" src="/images/avatar/small/helen.jpg">
<div class="content">
<h3 class="ui header"> Vasil Pkhakadze </h3>
</div>
</div>
<div class="item">
<img class="ui avatar image" src="/images/avatar/small/christian.jpg">
<div class="content">
<div class="header">George Cercvadze</div>
</div>
</div>
<div class="item">
<img class="ui avatar image" src="/images/avatar/small/christian.jpg">
<div class="content">
<div class="header">George Cercvadze</div>
</div>
</div>
<div class="item">
<img class="ui avatar image" src="/images/avatar/small/christian.jpg">
<div class="content">
<div class="header">George Cercvadze</div>
</div>
</div>
</div>
</div>
<div class="ui raised segment">
<h2 class="ui header">
Section 6
</h2>
<div class="ui middle aligned selection list">
<div class="item">
<img class="ui avatar image" src="/images/avatar/small/helen.jpg">
<div class="content">
<h3 class="ui header"> Vasil Pkhakadze </h3>
</div>
</div>
<div class="item">
<img class="ui avatar image" src="/images/avatar/small/christian.jpg">
<div class="content">
<div class="header">George Cercvadze</div>
</div>
</div>
<div class="item">
<img class="ui avatar image" src="/images/avatar/small/christian.jpg">
<div class="content">
<div class="header">George Cercvadze</div>
</div>
</div>
<div class="item">
<img class="ui avatar image" src="/images/avatar/small/christian.jpg">
<div class="content">
<div class="header">George Cercvadze</div>
</div>
</div>
</div>
</div>
<div class="ui raised segment">
<h2 class="ui header">
Section 6
</h2>
<div class="ui middle aligned selection list">
<div class="item">
<img class="ui avatar image" src="/images/avatar/small/helen.jpg">
<div class="content">
<h3 class="ui header"> Vasil Pkhakadze </h3>
</div>
</div>
<div class="item">
<img class="ui avatar image" src="/images/avatar/small/christian.jpg">
<div class="content">
<div class="header">George Cercvadze</div>
</div>
</div>
<div class="item">
<img class="ui avatar image" src="/images/avatar/small/christian.jpg">
<div class="content">
<div class="header">George Cercvadze</div>
</div>
</div>
<div class="item">
<img class="ui avatar image" src="/images/avatar/small/christian.jpg">
<div class="content">
<div class="header">George Cercvadze</div>
</div>
</div>
</div>
</div>
</body>
</html>
Everything is fine except the first segment. float:left property ignores its margin and so the first segment is touching the borders. Other segments are fine. Any suggestions ?
Class with .ui.segment:first-child{margin-top: 0;} in semantic.min.css
have margin-top:0; thus making it to touch borders, override it with custom css
add important tag to this rule
CSS
.raised.segment{
margin: 1.5% !important;
width: 30%;
display: inline-block;
float: left;
}
everything should work fine
Link For reference
hope this helps..
Related
I was making a layout to create an image grid using Zurb Foundation 6.4.3 XY Grid's Card Component. All my images are actually 320x180 px in dimension. But when I am running the following Code images are getting stretched.
I am new in CSS3 Flexbox and Foundation XY Grid and not being able to find out what is happening here. I will be grateful if someone help me to find out a solution.
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>
<div class="grid-container">
<div class="grid-x medium-up-3">
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
</div>
</div>
Add align-self to your img (the stretching happens as the align-items property is stretch by default in the flex direction). You can also add align-items: center to your card.
If so needed, you can throw in a width: 100% too for the img (for the image to scale evenly) - see demo below:
.card img {
align-self: center;
}
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css' />
<div class="grid-container">
<div class="grid-x medium-up-3">
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
<div class="cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png" />
</div>
</div>
</div>
</div>
A foundation based solution would be to use:
Use grid-x and align-center for the grid wrapper.
Use the following markup for cell:
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
See demo below:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css">
<div class="grid-container">
<div class="grid-x align-center">
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
<div class="shrink cell">
<div class="card">
<img src="https://i.stack.imgur.com/XE9GX.png`enter code here`">
</div>
</div>
</div>
</div>
I am using a semantic-ui framework. I am trying to make a post-comments like structure. currently my code looks like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<title>Assignments</title>
<style>
.items {
width: 70%;
border: solid;
margin: 100px;
}
</style>
</head>
<body>
<div class="ui items">
<div class="item">
<a class="ui tiny image">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="header">Jenny Hess</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="description">
<p>First Post Ever In My Life</p>
</div>
</div>
</div>
<div class="ui comments">
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Matt</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="text">
How artistic!
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Elliot Fu</a>
<div class="metadata">
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
<p>This has been very useful for my research. Thanks as well!</p>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Joe Henderson</a>
<div class="metadata">
<span class="date">5 days ago</span>
</div>
<div class="text">
Dude, this is awesome. Thanks so much
</div>
</div>
</div>
<form class="ui reply form">
<div class="field">
<textarea rows="3" cols="50"></textarea>
</div>
<div class="ui blue labeled submit icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div>
</div>
<div class="ui items">
<div class="item">
<a class="ui tiny image">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="header">Jenny Hess</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="description">
<p>First Post Ever In My Life</p>
</div>
</div>
</div>
<div class="ui comments">
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Matt</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="text">
How artistic!
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Elliot Fu</a>
<div class="metadata">
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
<p>This has been very useful for my research. Thanks as well!</p>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="img_avatar3.png">
</a>
<div class="content">
<a class="author">Joe Henderson</a>
<div class="metadata">
<span class="date">5 days ago</span>
</div>
<div class="text">
Dude, this is awesome. Thanks so much
</div>
</div>
</div>
<form class="ui reply form">
<div class="field">
<textarea rows="3" cols="50"></textarea>
</div>
<div class="ui blue labeled submit icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div>
</div>
</body>
</html>
As you can see I have made items width 70% and margin auto but it doesn't center. Can someone suggest me why?
Give a specific id to parent of such item and give
text-align: center;
styling to it
Let me know if you require further help
For my project (semantic ui) I want to align 2 blocks. Both blocks should be displayed in the horizontal center of the page. Block 1's width is not important since its a small block. Blocks 2 should be 12 columns wide. How can I do this?
Block 1:
<img class="ui small circular image" src="images/large/stevie.jpg">
<h1>Stevie Wonder</h1>
<p>#stevie</p>
<p>Amsterdam, The Netherlands</p>
<button class="ui button">Edit Profile</button>
Block 2:
<div class="ui top attached tabular menu">
<div class="active item">My Bla's</div>
<div class="item">Favorite Bla's</div>
</div>
<div class="ui bottom attached tab segment">
<div class="ui divided items">
<div class="item">
<div class="image">
<img src="/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">12 Years a Slave</a>
<div class="meta">
<span class="cinema">Union Square 14</span>
</div>
<div class="description">
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
Full code:
<div class="ui main container">
<div class="row">
<div class="column">
<img class="ui small circular image" src="images/large/stevie.jpg">
<h1>Stevie Wonder</h1>
<p>#stevie</p>
<p>Amsterdam, The Netherlands</p>
<button class="ui button">Edit Profile</button>
</div>
</div>
<div class="row">
<div class="column">
<div class="ui top attached tabular menu">
<div class="active item">My Bla's</div>
<div class="item">Favorite Bla's</div>
</div>
<div class="ui bottom attached tab segment">
<div class="ui divided items">
<div class="item">
<div class="image">
<img src="/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">My Neighbor Totoro</a>
<div class="meta">
<span class="cinema">IFC Cinema</span>
</div>
<div class="description">
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
make one common div for block1 and block 2
apply css.
html:
<div class="main">
<div class="block1">---</div>
<div class="block2">---</div>
</div>
css:
.main
{
width:suitable size(block1+block2) in pixel
margin:0 auto;
}
.block1
{
width:block1's width;
float:left;
}
.block2
{
width:block2's width;
float:right;
}
I would like to put each semantic ui item into a segment. Whats the right way to do this in semantic ui / html? Should I put item inside segment, segment inside item, or neither?
Items
Items code:
<div class="ui divided items">
<div class="item">
<div class="image">
<img src="/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">12 Years a Slave</a>
<div class="meta">
<span class="cinema">Union Square 14</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui label">IMAX</div>
<div class="ui label"><i class="globe icon"></i> Additional Languages</div>
</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">My Neighbor Totoro</a>
<div class="meta">
<span class="cinema">IFC Cinema</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui right floated primary button">
Buy tickets
<i class="right chevron icon"></i>
</div>
<div class="ui label">Limited</div>
</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">Watchmen</a>
<div class="meta">
<span class="cinema">IFC</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui right floated primary button">
Buy tickets
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
</div>
Segment:
Segment code:
<div class="ui segment">
</div>
Semantic UI Items and Segments are not designed to work together (i just ran into this same issue) so my workaround was to add the requisite css to my stylesheet applied to a .ui.segment.item element (you could also place this into the scss templates and use scss variables for colors, spacing, etc. instead to compile this into a custom build of semantic-ui for your site).
So then you can apply both .item and .segment styles to those blocks that you want to have both styles (for any variations like piled or compact, you would have to include those variations as custom styles too of course).
I did it this way because the styles for a segment are fairly self contained, but the ones for an item are quite extensive, so they would be harder to reproduce accurately.
The built in code runner doesn't seem to display correctly, so here is a fiddle with the same code working correctly: https://jsfiddle.net/nw8nte4b/
```
.ui.segment.item {
position: relative;
background: #fff;
box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
margin: 1rem 0;
padding: 1em;
border-radius: 0.25rem;
border: 1px solid rgba(34, 36, 38, 0.15);
}
<link href="https://oss.maxcdn.com/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet" />
<div class="ui centered padded grid">
<div class="ten wide column">
<div class="ui items">
<div class="ui item segment">
<div class="image">
<img src="http://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">12 Years a Slave</a>
<div class="meta">
<span class="cinema">Union Square 14</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui label">IMAX</div>
<div class="ui label"><i class="globe icon"></i> Additional Languages</div>
</div>
</div>
</div>
<div class="ui item segment">
<div class="image">
<img src="http://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">My Neighbor Totoro</a>
<div class="meta">
<span class="cinema">IFC Cinema</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui right floated primary button">
Buy tickets
<i class="right chevron icon"></i>
</div>
<div class="ui label">Limited</div>
</div>
</div>
</div>
<div class="ui item segment">
<div class="image">
<img src="http://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">Watchmen</a>
<div class="meta">
<span class="cinema">IFC</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui right floated primary button">
Buy tickets
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
```
I can not solve the problem, please help. I do adaptive site with the bootstrap grid and can not locate four images in one line. images should be near without any interval and spacing.
I have my code:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="one">
<img src="img/one.png" />
</div>
</div>
<div class="col-md-3">
<div class="two">
<img src="img/two.png" />
</div>
</div>
<div class="col-md-3">
<div class="three">
<img src="img/three.png" />
</div>
</div>
<div class="col-md-3">
<div class="four">
<img src="img/four.png" />
</div>
</div>
</div>
</div>
</div>
Images are 295x150 and with intervals in browser
Add the class img-responsive to each <img> tag like so:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="one">
<img class="img-responsive" src="img/one.png" />
</div>
</div>
<div class="col-md-3">
<div class="two">
<img class="img-responsive" src="img/two.png" />
</div>
</div>
<div class="col-md-3">
<div class="three">
<img class="img-responsive" src="img/three.png" />
</div>
</div>
<div class="col-md-3">
<div class="four">
<img class="img-responsive" src="img/four.png" />
</div>
</div>
</div>
</div>
</div>
I have made a fiddle with no margin/ padding like this:
http://jsfiddle.net/Le6oosvo/2/
I used this HTML:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="one">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="two">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="three">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="four">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
</div>
</div>
</div>
And this little bit of CSS:
.main_boxes .col-sm-3 {
padding-left: 0px;
padding-right: 0px;
}
I used .col-sm-3 in stead of .com-md-3 to make the images align on the side of each other longer (when you squeeze it down). I also added bootstrap class to make the images responsive.
Suppose your images are 200px wide and 200px high. You could try something like
<div class="container">
<div class="row">
</div>
<div class="col-md-3">
<image src="image1.jpg"></img>
</div>
<div class="col-md-3">
<image src="image2.jpg"></img>
</div>
<div class="col-md-3">
<image src="image3.jpg"></img>
</div>
<div class="col-md-3">
<image src="image4.jpg"></img>
</div>
</div>
The bootstrap grid is 12 columns wide. Which means the columns have to add up to 12. You can do this by making four divs of three columns each. It would look something like this when done
Image 1 Image 2 Image 3 Image 4
Hope this helps.