On my home page, there are 5 services offered. I wanted to place each service in a box in a row horizontally.
Originally I was going to use div’s, but then it occurred to me that this was semantically a list.
Can I place the 5 services in an unordered list and style each li as a box?
To avoid confusion, can you supply a link to the web page.
There is no website.
Here is a visual…
That does nothing.to help other members help you.
As has been recommended to you countless times, put up a dev test site or post a codepen / fiddle or something tangible please.
And include some information describing their behavior and the environment in which they reside. Are they expected to be responsive or are they clickable links, for example? Knowing how much content will go in them and of what type helps to estimate their size requirements. ETC.
Hardly such a difficult question that I need to build a website.
Let me rephrase things…
Would it be okay to style an unordered list to make it look like the row of boxes in the exampel in post #4?
(And can it be done in CSS?)
That seems like a better approach than using a series of div’s.
I’d say yes.
Of what you have tried, show us your best effort so far and it will be most helpful.
Without knowing what you have tried which would have taken less than five minutes to creat a free account in a free web hosting which I have mentioned before or as @Mittineague Suggested a Codepen or Fiddle.
The image does not help, the script is essential and @ronpat’s suggestions.
Have you tried
li {display: inline-block;}
Here is what I have so far…
<section id="services">
<header>
<h1>Our Services:</h1>
</header>
<ul>
<li>Responsive<br/>Design</li>
<li>Mobile<br/></li>
<li>SEO</li>
<li>Programming</li>
<li>Business<br/>Development</li>
</ul>
</section>
html, body, address, blockquote, div,
form, fieldset, caption,
h1, h2, h3, h4, h5, h6,
hr, ul, li, ol, ul, dl, dt, dd, br,
table, tr, td, th, p, img{
margin: 0;
padding: 0;
}
header, nav, footer, section, article, aside{
display: block;
}
#services li{
display: inline-block;
width: 125px;
height: 125px;
border: 1px solid #000;
}
This is what I get…
Not sure if it is acceptable to use an unordered list for presentation purposes
There is a gap in between my li’s (I want this to look like a single row in a table with collapsing borders.)
Is it a bad idea to use a fixed width and height?
Not sure why my boxes don’t line up vertically?
Wohoo! Code Samples!
Now I have this:
floating lis
Using display:table
Vertical Align Top
http://codepen.io/cpradio/pen/yNwXKz
because you are declaring the boxes to be inline-block but not setting vertical-align:top
(default text alignment is baseline. Notice the baselines are aligned?)
almost always; depends on content (oops, I’m repeating myself)
Why not set the UL to display:table and the LIs to display:table-cell (like you described)?
That’s a judgement call at this stage.
Well, since there are 5 services, I guess I want 5 identical boxes, so that is about my only option, right?
(My only fear is that with RWD, a fixed box could cause issues if I have the text scale…)
I am not familiar with display: table.
Either way, why do I have a gap now?
He answered that… (and I showed the fix in my post – up above)
Because inline objects have space between them (like words in a sentence). There are techniques to eliminate that space such not allowing space between the close li tag and the next open li tag
</li><li>.
That usually means writing them on one line.
If you insist on separate lines, then you can do this:
<li>....
</li><li>....
</li><li>....
</li>
You can also use comment marks to eliminate the space:
<li>....</li><!--
--><li>....</li><!--
--><li>....</li>
old school fundamental HTML, but they work nicely.
There are CSS methods, too.
Not if the dimensions of the boxes were declared using ems.
Both your float and display: table have double inside borders. I need collapsed borders.
Why would I want to use float vs. display: table?
Maybe it depends on how you slept the night before… Who knows?
Floats do not incur the space between elements that inline elements have. The border can be eliminated using a negative margin thereby making one overlap the one beside it, or by using selected border-drawing styles. Both methods can be a bit tricky, IMO. Ultimately, it is the Coder’s preference.
I prefer to use display:table / display:table-cell where reasonable to do so.
@cpradio may have other preferences.
{border-collapse:collapse}
I changed my li’s padding to em’s, but the width and height now need to be different number, so you never know if you have a true square…
I also tried increasing the font from 1em to 1.2em and that really messed up my original width and height.
Isn’t there a more uniform/calculated way to do this?
(The borders look funky in this screenshot, but are fine on my computer.)
The screen shot looks fine when it is expanded to full scale.
Oh, I see that now.
