• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 426
  • Last Modified:

CSS - horizontal list of anchors - has to be all done inline

I am looking for CSS code to make a list, the list is a set of links to different pages (must open in a new window) that is also horizontal - no bullets either.    I cannot use normal files or a header .
0
linque
Asked:
linque
  • 3
  • 3
  • 2
  • +1
2 Solutions
 
Rikus_TrentCommented:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	.menu{
		list-style-type:none;
	}
	
	.menu li{
		display:inline;
		margin-right:10px;
	}
</style>
</head>
 
<body>
 
<ul class="menu">
	<li><a href="#">asdfsdf</a></li>
    <li><a href="#">asdfsdf</a></li>
    <li><a href="#">asdfsdf</a></li>
    <li><a href="#">asdfsdf</a></li>
    <li><a href="#">asdfsdf</a></li>
</ul>
</body>
</html>

Open in new window

0
 
Rikus_TrentCommented:
Oh you can't use a header sorry didn't see that... you could just put the style inline for each li tag then:

<li style="display:inline;"><a href="#">asdfsdf</a></li>
0
 
scrathcyboyCommented:
CSS code doesn't make the list.  CSS only STYLES the links.

 To make the list, use normal text surrounded by the <A> link tag and the target, like this --

<A href="page1.html" target="_blank"> first link </A>   (then put the next one right after it.

The target=_blank tells it to open a new page.
List all the links in a single line, without <LI> options, just links and text, and they will all come out in a single row.  There is no need for the <UL> <LI> structure in this case.  But a table structure is nice for this layout.
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!

 
eszaqCommented:
Yes, you absolutely can use the same styles you have in your code snippet, but as inline css (inline css overrides anything you have inside page <head> or in CSS file).
Scrathcyboy is corrrect about target="_blank", but I disagree with him about avoiding use of list tags. List of links should still be list of links, even if it is not marked by bullets, for multiple reasons: logical structure of the page, accessibility, etc. Your code will look somewhat similar to below. But I also added "white-space: nowrap;" - it will keep list item from breaking in the middle if it is too long (will move list item to to the next line and keep contents of <a> together)

<ul class="menu" style="list-style-type:none;">
  <li style="display:inline;margin-right:10px;white-space: nowrap;"><a href="#" target="_blank">asdfsdf</a></li>
  <li style="display:inline;margin-right:10px;white-space: nowrap;"><a href="#" target="_blank">asdfsdf</a></li>
  <li style="display:inline;margin-right:10px;white-space: nowrap;"><a href="#" target="_blank">asdfsdf</a></li>
  <li style="display:inline;margin-right:10px;white-space: nowrap;"><a href="#" target="_blank">asdfsdf</a></li>
  <li style="display:inline;margin-right:10px;white-space: nowrap;"><a href="#" target="_blank">asdfsdf</a></li>
</ul>

0
 
scrathcyboyCommented:
what overkill in coding / styling just to put links one after another on one or two lines !!!
0
 
linqueAuthor Commented:
in the end, i could have asked more clearly - because there is some styling i must do and that is why I titled the question using CSS - I need to state the font, font size and font color.   Scrathcyboy, I do want to "just to put links one after another"..  but also, they are appearing in a specific location against a background image so I will need them to be positioned too, i think.  
0
 
eszaqCommented:
If so, then just add all the necessary padding and fonts to the code I provided. One more thing. In order to override styles for links themselves you should place all the font properties inside <a> tag, not <li>, e.g.:
<a href="#" style="font: italic small-caps bold 12px/14px arial; color:#000; text-decoration:none;">

Please note, that I am using shorthand property value for font - better for inline styles as it will keep your code more compact (styles need to be added to each <a> tag). You can read more about CSS shorthand property here:
http://www.dustindiaz.com/css-shorthand/

If I misinterpreted your question, please clarify, what exactly is not working for you. And if my answer was of help, I would appreciate you acnowledging this fact.

Chears

P.S.:
to scratchboy - it is not overkill, it is coding according to the web standards. site is called experts-exchange.com, not ducttape-it-all.com
0
 
eszaqCommented:
have you solved your problem?
0
 
linqueAuthor Commented:
thank you both.  i did need the CSS, but also appreciated a gentle reminder to think first if it's always necessary.
0
 
scrathcyboyCommented:
eszaq:

As a newbie, you should refrain from making childish comments like that.  
Experience brings perspective, as the questioner realizes, but you evidently don't.
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 3
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now