Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2016-08-11
7
Medium Priority
?
82 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
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!

 

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

886 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