i want to make a section on a webpage that shows all the services provided, separated by lines, or image lines if possible. Kind of like the CSS3 multi-column layout, but designed so i can edit what is in each column without messing up the rest of the columns
Great question, despite its seeming simplicity. Arranging elements side by side is one of the most fundamental skills of a web designer.
CSS has come a long way and now offers an array of ways in which this can be accomplished. But first thing first, let’s start with the mark up.
a section on a webpage that shows all the services provided
This to me implied some sort of list, very likely a UL. So we can assume that each item will be contained in it’s own LI and that the item will be a link or A tag.
<ul class="service-menu">
<li><a href="#">Some Service</a></li>
<li><a href="#">Some Service</a></li>
<li><a href="#">Some Service</a></li>
<li><a href="#">Some Service</a></li>
<li><a href="#">Some Service</a></li>
<li><a href="#">Some Service</a></li>
</ul>
We can start by getting rid of the default list style and displaying the A tag a block level element and applying any spacing padding to that element.
.service-menu{ list-style-none; padding:0; margin:0}
.service-menu a{
display:block;
text-decoration:none;
padding:.5em 1em;
text-align:center;
}
.service-menu a:hover{
text-decoration:underline;
}
this will help put a 1em distance between each divider line and makes the divider line of that menu item the height of it’s content PLUS .5em on top and bottom.
we now use border to create a divider line. you probably don’t want to put a line prior to the first element so we want to showing the border using the second element. we can do this by using the adjacent sibling selector “+”.
li + li { border-left: 1px solid red;}
Now you need to decide whether you want the items to simply shrink wrap to the width of their content or to have a standard width. for the latter you simply apply a width: declaration to the LI. I will assume you were aiming for the former, in the this example.
Like I said earlier, you have a myriad of ways to display elements side by side. Here are 3 of my faves:
use FLOAT
.services-menu { overflow:hidden;}
.services-menu li { float:left;}
or DISPLAY:
.services-menu li { display:inline-block;}
(you could use display:inline, but it you won’t be able to give explicit dimensions such as width: and padding will have different effect that on an element with display:block.
or FLEXBOX (please note the use of vendor prefixes, for max cross-browser friendliness)
.service-menu {
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
flex-flow: row wrap;
}
.service-menu li{
-webkit-flex-grow:1;
-moz-flex-grow:1;
flex-grow:1;
}
Flexbox has the added advantage of allowing a bunch of neat tricks such as letting you specify the order INDIVIDUAL items are displayed, the width relative to each item ,stacking, etc.
So those are some BASICS, I hope get you started on your way.
2 Likes
Thank you for all the effort. It didnt really apply to what i was trying to do, but when you mentioned flexboxes, i looked them up and foind out how to do exactly what i wanted. And im sure that at some point this information will come i handy! Thank you!
Hi,
I guess the services also have some description, and IMHO this would be a proper use of a definiton list.
Pity the multi column layout is not fully supported yet. But flex-box could do a similar display if you put each definition pair of items in separate lists. The lists could then be distributed in columns or as in the demo below in rows that line up in columns whatever height the individual lists get when their content change.
I made a demo for this case using multiple lists (still semantically correct) in order to use flex-box:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Flexible Definition List</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
html, body{ box-sizing:border-box}
*, *:before, *:after{ box-sizing:inherit}
.services{
display:flex;
flex-flow:row wrap;
align-content:stretch;
margin-top:10px;
border-right:2px solid silver;
}
.services dl{
display:flex;
flex-flow:column nowrap;
align-content:stretch;
flex:1 1 300px;
margin:0;
border-left:2px solid silver;
padding:10px;
}
.services dt{
display:table;
width:100%;
height:3em;
}
.services a{
display:table-cell;
padding:5px;
background:#ade;
color:inherit;
vertical-align:middle;
text-align:center;
text-decoration:none;
line-height:1;
text-transform:capitalize;
}
.services a:hover{
background:#29f;
color:white;
}
.services dd{
display:table-cell;
margin:0;
border-bottom:2px solid silver;
padding:5px;
height:100%;
}
</style>
</head><body>
<div class="services">
<dl class="service1">
<dt><a href="#nogo">service one</a></dt>
<dd>Service one description.</dd>
</dl>
<dl class="service2">
<dt><a href="#nogo">service two two two two two two two two two two two</a></dt>
<dd>Service two description. Service two description. Service two description.
Service two description. Service two description. Service two description.</dd>
</dl>
<dl class="service3">
<dt><a href="#nogo">service three</a></dt>
<dd>Service three description.</dd>
</dl>
<dl class="service4">
<dt><a href="#nogo">service four</a></dt>
<dd >Service four description.</dd>
</dl>
<dl class="service5">
<dt><a href="#nogo">service five</a></dt>
<dd>Service five description.</dd>
</dl>
<dl class="service6">
<dt><a href="#nogo">service six</a></dt>
<dd>Service six description.</dd>
</dl>
</div>
</body></html>
If you prefered to not use flex-box, an alternative could be to display the lists inline-block.
And in case you want to have all item pairs in one single definition list, you could float all items and still keep them pared together in all list widths by suitable margins. But then all pairs would need to have the same total height to float without snags in all widths.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.