Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2016-08-11
7
Medium Priority
?
86 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

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 2000 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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses
Course of the Month13 days, 21 hours left to enroll

581 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