Dots won't inline and list won't center

Question

I'm trying to create the CREATIVE EVENTS hr looking thing in css on this page: http://www.wix.com/website-template/view/html/689?utm_content=ma_html_fwt_temp_1_4creaeven&utm_medium=template_banner&utm_campaign=ma_fwt&utm_source=freewebsitetemplates&experiment_id=ma_html_fwt_temp_1_4creaeven&utm_term=services

However, I am only getting a result which looks a bit off from it :(

Can anyone help?

Here is my code so far:

<ul id="hr">
    <li id="dot"></li>
    <li class="random_thing">....................<bold>CLIFFEDGE</bold> STUDIOS....................</li>
    <li id="dot"></li>
</ul>

#hr {
list-style-type: none;
float: left;
}

#hr li {
display: inline-block;
}

#dot {
border-radius: 15px;
background-color: black;
height: 15px;
width: 15px;
}

http://jsfiddle.net/2VkNk/

Thanks!

You can't use the same ID more than once in an instance. Try changing it to classes. — johnkavanagh, Dec 04 '13 at 13:31
@NicholasKyriakides : i dont see any downvote...but `suckers`...seriously!!!!??? — NoobEditor, Dec 04 '13 at 13:33
I changed it to class, that solves the ID conflict issue, however i still can't seem to get the dots to be inline with eachother as well as centering the list — rshah, Dec 04 '13 at 13:33
@Mayank haha, just had a strong coffee sorry man:) but yeah there was a downvote. It just pisses me off when they downvote a question that obviously is OK written. — nicholaswmin, Dec 04 '13 at 13:37
@NicholasKyriakides, I've got to agree with Mayank on this one: no need. Although I didn't downvote the question, there are plenty of people who might on the strength of the question. Don't forget that [Stack Overflow is intended as a place to answer general programming questions](http://stackoverflow.com/questions/how-to-ask) rather than help very finite/specific problems. It also [appears to be a duplicate](http://stackoverflow.com/search?q=vertical+align+inline) so there's any number of reasons someone else might have thought it best to down-vote. — johnkavanagh, Dec 04 '13 at 13:42
hey i got punished, someone got pissed by my language and is downvoting all my questions now. just great — nicholaswmin, Dec 04 '13 at 13:50
@NicholasKyriakides Ouch mate. This place can be a little fickle.. Might be worth deleting the comment if you can? Also: going through the review channel (top-right) is a great way to boost your reputation, also a great way of contributing to the site! — johnkavanagh, Dec 04 '13 at 14:03
nah its actually fun, i think its the "sucker". I'm leaving it on. Sorry for hi-jacking the question and thanks im gonna go through the review channel. Buh bye! — nicholaswmin, Dec 04 '13 at 14:05

johnkavanagh · Answer 1 · 2013-12-04T13:49:01.230

1

There's a couple of things you probably need to look at in this example.

Firstly: you can't reuse the same ID on-page, so I've switched the references to classes instead.

Secondly: there are a few different options when it comes to aligning elements horizontally. In your instance using display: inline-block you can simply set vertical-align: middle. Here's some good reading on the subject.

Thirdly: really as more of a final comment/aside: the example you linked to actually appears to be using background images so fair-play to you trying to use a more suitable development method!

You can see my updated Fiddle here.

Code is:

<ul id="hr">
    <li class="dot"></li>
    <li class="random_thing">....................<bold>CLIFFEDGE</bold> STUDIOS....................</li>
    <li class="dot"></li>
</ul>

#hr {
    list-style-type: none;
    float: left;
}

#hr li {
    display: inline-block;
}

.dot {
    border-radius: 15px;
    background-color: black;
    height: 15px;
    width: 15px;
    vertical-align: middle;
}

edited Dec 04 '13 at 13:49

answered Dec 04 '13 at 13:37

johnkavanagh

4,614
2
25
37

This is suiting me pretty well! :D However, I would like to ask how to center the entire list in the middle of the page? – rshah Dec 04 '13 at 13:42
Glad to hear it! Vertically aligning the entire item on the page is a bit of a different question but take a look at my [previous answer here](http://stackoverflow.com/questions/20315493/css-vertically-align-div-while-maintaining-aspect-ratio/20315604#20315604) (and the other answers to that question) to get an idea! – johnkavanagh Dec 04 '13 at 13:44
Im trying to do the same with the width and margins, but its not working :s – rshah Dec 04 '13 at 13:46

score 0 · Answer 2 · answered Dec 04 '13 at 13:42

I changed your example a little bit: works for me:

 <ul id="hr">
<li id="dot"></li>
<li id="smalldots">....................</li>
<li class="random_thing"><b>CLIFFEDGE</b> STUDIOS</li>
<li id="smalldots">....................</li>
<li id="dot"></li>

<style type="text/css">
#hr {
list-style-type: none;
float: left;
font-size: 18px;
}
#hr li {
display: inline-block;
vertical-align: top;
}

#smalldots {
height: 10px;
margin-top: -5px;
}

#dot {
border-radius: 15px;
background-color: black;
height: 15px;
width: 15px;
margin-top: 2px;
}
</style>

Dots won't inline and list won't center

2 Answers2