Solved

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

Posted on 2016-08-11
7
68 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

759 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