Solved

Putting <ul><li> horizontally beside a text in a <div>

Posted on 2016-08-11
7
60 Views
Last Modified: 2016-08-14
Hello;
I have this html codes and its css and would like that put a list of links horizontally beside the text(left of text) like:

List
 <ul>
    <li><a >cntact us</a></li>
    <li><a>about us</a></li>
    <li><a>advertising</a></li>
    <li><a>products</a></li>
  </ul>

Open in new window


each link change its color when mouse hover and appear as underline.
Thanks in advance

You can see demo at this link:
http://jsfiddle.net/thirtydot/VCZgW/

HTML
   <div class="header-date-generallinks">
   <div class="date">
   </div>
   <div class="generallinks">
   This is a cultural website
    </div>
   </div>

Open in new window


CSS
.header-date-generallinks{
    height:40px;
    width: 100%;
    background-color: #bb0700;
	}
  	 .generallinks{
	 float:right;
	 color:#fff;
	font-family:Tahoma;
	font-size:16px;
	direction:rtl;
	padding-right:80px;
	height:40px;
	line-height: 40px;
	text-align: center;
	-moz-box-sizing: border-box; 
       -webkit-box-sizing: 
       border-box; box-sizing: border-box;
	 
	 }

Open in new window

0
Comment
Question by:MOSTAGHASSI
  • 4
  • 3
7 Comments
 
LVL 35

Expert Comment

by:Terry Woods
ID: 41753653
I've spent about 10 minutes looking at this but ultimately realised I'm not really sure what you want. Perhaps you could explain which text the links should go to the left of (eg I would assume it is the text  "This is a cultural website" but that's not in your fiddle) and update your jsfiddle to include the text. If that is what you want, see what happens when you add width:50% to the #nav style.

Also you say "each link change its color when mouse hover and appear as underline.". It's not clear what you mean by that either. Are you asking for css to achieve that?
0
 

Author Comment

by:MOSTAGHASSI
ID: 41754247
Sorry if my explanation was not enough, i want a horizontal menu bar  beside the text  "This is a cultural website" (text color of menu bar #fff and with mouse over the link have underline).
0
 
LVL 35

Expert Comment

by:Terry Woods
ID: 41754433
Did you try adding the style I suggested? Is that the kind of thing you want?
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:MOSTAGHASSI
ID: 41754607
Terry, i thought that the link in http://jsfiddle.net/ has been save but its save dose not work,please test my HTML  and CSS in it and see the result,it needs styling for horizontal menu that be beside the "This is a cultural website" these are the codes:

HTML
   <div class="header-date-generallinks">
   <div class="date">
   </div>
   <div class="generallinks">
   This is a cultural website
    <ul class="nav">
  <li><a href="#">HOME</a></li>
  <li><a href="#">CAPABILITIES</a></li>
  <li><a href="#">ABOUT US</a></li>
  <li><a href="#">RFQ</a></li>
  <li><a href="#">CONTACT US</a></li>
</ul>
 
   </div>
   </div>
 

Open in new window


CSS
.header-date-generallinks{
	height:40px;
    width: 100%;
    background-color: #bb0700;
	}
  	 .generallinks{
	 float:right;
	 color:#fff;
	font-family:Tahoma;
	font-size:16px;
	direction:rtl;
	padding-right:80px;
	height:40px;
	line-height: 40px;
	text-align: center;
	-moz-box-sizing: border-box; 
    -webkit-box-sizing: 
     border-box; box-sizing: border-box;
	 
	 }

   	.nav {
text-align:center;
font-size:9px;
 
}
.nav li {
display:inline;

}
.nav a {
text-decoration:none; 
padding:0 10px; /* variable width */
}

Open in new window

0
 
LVL 35

Expert Comment

by:Terry Woods
ID: 41754773
Are you able to edit the HTML too? Currently your text is inside a div with class generallinks and the nav is in the same div. It would help if the text was at least wrapped in div tags. Fiddle with your given code: https://jsfiddle.net/bxou3fpo/1/ (no solution yet, but this may at least help other experts solve it if they look at it too)
0
 
LVL 35

Accepted Solution

by:
Terry Woods earned 500 total points
ID: 41754779
How about something like this: https://jsfiddle.net/4f7rby20/1/

HTML:
   <div class="header-date-generallinks">
   <div class="date">
   </div>
   <div class="generallinks">
   <div id="mytext">
   This is a cultural website   </div>
    <ul class="nav">
  <li><a href="#">HOME</a></li>
  <li><a href="#">CAPABILITIES</a></li>
  <li><a href="#">ABOUT US</a></li>
  <li><a href="#">RFQ</a></li>
  <li><a href="#">CONTACT US</a></li>
</ul>
 
   </div>
   </div>
 

Open in new window


CSS:
#mytext, .nav {
  width: 50%;
  display: inline-block;
  margin: 0;
  float: none;
}

.generallinks {
  position: relative;
  width: 100%;
}

.nav {
  position: absolute;
  left: 0px;
}

#mytext {
  float: right;
}

.header-date-generallinks{
	height:40px;
    width: 100%;
    background-color: #bb0700;
	}
  	 .generallinks{
	 float:right;
	 color:#fff;
	font-family:Tahoma;
	font-size:16px;
	direction:rtl;
	padding-right:80px;
	height:40px;
	line-height: 40px;
	text-align: center;
	-moz-box-sizing: border-box; 
    -webkit-box-sizing: 
     border-box; box-sizing: border-box;
	 
	 }

   	.nav {
text-align:center;
font-size:9px;
 
}
.nav li {
display:inline;

}
.nav a {
text-decoration:none; 
padding:0 10px; /* variable width */
}

Open in new window

0
 

Author Comment

by:MOSTAGHASSI
ID: 41754863
Yes,this is what i want,but i want that adjust these parameter:

-Padding(the distance from right) of the text.

-Margin of navbar in left of text.

-Color , font size and distance between links of navbar.

-When we hover on navbar then we have underline for links.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question