How can I separate and make a menu with these links in CSS without using unordered lists

Question

How can I separate and make a menu with these links in css? I do not want to use ul.li

Note: I can't change the html file.

html:

<body>
    <div id="navigacion">
        <div class="topNaviagationLink"><a href="index.html">Home</a></div>
        <div class="topNaviagationLink"><a href="index.html">About</a></div>
        <div class="topNaviagationLink"><a href="index.html">History</a></div>
        <div class="topNaviagationLink"><a href="index.html">Services</a></div>
        <div class="topNaviagationLink"><a href="index.html">Contact</a></div>
    </div>

@AlexPrinceton he can't even change the HTML, so looks like he's stuck. — King King, May 13 '14 at 14:24
@AlexPrinceton he said he can't change the HTML. (for whatever reason) — Déjà vu, May 13 '14 at 14:25
well this code and how it will implement if he can not change the html — AlexPrinceton, May 13 '14 at 14:25
if you can't change the HTML intiallly, you can still use script to add elements **dynamically**. — King King, May 13 '14 at 14:26
this is a project from my school and i am stuck here with the css .But the html code is this i dont know what to do ideas .. ?? i have search everywhere and they are using the list ul. i know that way of solving this but i cant make changes to this html file... ideas ? — user3632898, May 13 '14 at 14:30
body { background: brown; } a { color: white; } p:first-line{ background-color: magenta; text-decoration: underline; } p { line-height: 30px; } span { letter-spacing: 5px; } #navigacija { padding-left: 20px; width: 800px; margin: 20px auto; } .topNaviagationLink { display: inline-block; background: maroon; float: right; margin-bottom: 20px; } .topNaviagationLink a { line-height: 40px; padding-left: 50px; padding-right: 50px; text-decoration: none; } — user3632898, May 13 '14 at 14:54

score 0 · Answer 1 · answered May 13 '14 at 14:26

0

Just add

 #navigacion div {display:inline-block;padding:5px;background:#fafafa}

answered May 13 '14 at 14:26

alou

1,432
13
16

why the downvote? is there anything more you can do with css, as the OP specifically mentioned? – alou May 13 '14 at 14:37

score 0 · Accepted Answer · answered May 13 '14 at 14:42

your answer are here: just change my styles.

http://codepen.io/leandroruel/pen/oyjhK

HTML:

 <div id="navigacion">
        <div class="topNaviagationLink"><a href="index.html">Home</a></div>
        <div class="topNaviagationLink"><a href="index.html">About</a></div>
        <div class="topNaviagationLink"><a href="index.html">History</a></div>
        <div class="topNaviagationLink"><a href="index.html">Services</a></div>
        <div class="topNaviagationLink"><a href="index.html">Contact</a></div>
 </div>

CSS:

body {
  padding: 0;
  margin: 0;
}

#navigacion {
  width: 100%;
  height: 50px;
  background-color: #eee;
}

#navigacion .topNaviagationLink {
  padding: 0;
  display: inline-block;
}

#navigacion .topNaviagationLink a {
  font-family: arial;
  color: #333;
  text-decoration: none;
  line-height: 50px;
  vertical-align: middle;
  padding: 0 20px;
}

#navigacion .topNaviagationLink a:hover {
  color: red;
}

score -1 · Answer 3 · edited May 23 '17 at 12:21

-1

Assuming that you're looking to change the divs to ul/li but you don't have the ability to edit the HTML... (for whatever reason...)... you can change the elements with jQuery which has been answered here - how to change an element type using jquery

edited May 23 '17 at 12:21

Community

1
1

answered May 13 '14 at 14:28

robbclarke

749
3
9

score -1 · Answer 4 · answered May 13 '14 at 14:37

Assuming you want a horizontal menu, with evenly spaced menu items, you can change the display to be set like a table. The fiddle below is a full width horizontal menu with evenly spaced targets for each .topNaviagationLink container. If you don't want the menu items to be evenly spaced, remove the width: 1%; from .topNaviagationLink.

CSS

#navigacion { 
    display: table; 
}
.topNaviagationLink {
    display: table-cell;
    width: 1%;
}
.topNaviagationLink > a {
    display: block;
    padding: 5px 10px;
    text-align: center;
}

JSFiddle

How can I separate and make a menu with these links in CSS without using unordered lists

4 Answers4