Solved

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

Posted on 2008-10-17
10
419 Views
Last Modified: 2012-05-05
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
Comment
Question by:linque
  • 3
  • 3
  • 2
  • +1
10 Comments
 
LVL 5

Expert Comment

by:Rikus_Trent
ID: 22745957

<!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
 
LVL 5

Expert Comment

by:Rikus_Trent
ID: 22745967
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
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22746170
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
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!

 
LVL 8

Expert Comment

by:eszaq
ID: 22747210
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
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 150 total points
ID: 22749093
what overkill in coding / styling just to put links one after another on one or two lines !!!
0
 

Author Comment

by:linque
ID: 22749135
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
 
LVL 8

Expert Comment

by:eszaq
ID: 22749853
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
 
LVL 8

Accepted Solution

by:
eszaq earned 350 total points
ID: 22759651
have you solved your problem?
0
 

Author Closing Comment

by:linque
ID: 31507336
thank you both.  i did need the CSS, but also appreciated a gentle reminder to think first if it's always necessary.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22761909
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

Technology Partners: 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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

749 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