I am trying to horizontically place my links at the bottom of the header, in its own div.
But having problems, ie the numbers of the list are still there and the links are placed vertical and not horizontal, I thought the display: inline; would get rid of them being vertical. -
body {
-
font-family: Verdana, sans-serif;
-
margin: 0;
-
padding: 0;
-
}
-
#container {
-
position: relative;
-
width: 80em;
-
background-color: #E60073;
-
margin-left: auto;
-
margin-right: auto;
-
}
-
#header {
-
height: 8em;
-
padding: 1em;
-
margin: auto;
-
}
-
img {
-
border:0;
-
width:750px;
-
height:110px;
-
margin: auto;
-
clear: both;
-
align: center;
-
-
}
-
-
#main {
-
margin-left: 12em;
-
}
-
-
#links {
-
margin: 0;
-
padding: 0.5em, 3em;
-
color: #FFFFFF;
-
background: #6600CC;
-
}
-
-
ol {
-
padding: 0;
-
color:#FFFFFF;
-
font-family: verdana. sans-serif;
-
font-size:1em;
-
background-color:#6600CC
-
}
-
-
#linksli {
-
display: inline;
-
border-right: 1px, solid, #FFFFFF;
-
margin-right: 0.5em;
-
padding-right: 0.75em;
-
font-weight: bold;
-
}
the html
[html]
<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<link rel="stylesheet" type="text/css" href="new_page_1.css">
</head>
<div id="container">
<div id="header">
<body>
<img src="images/networkartslogo.gif" alt="Logo" /><div id="links">
<div id="linksli">
<ol><div id="ol">
<li>Contacts</li>
<li>Referrals</li>
<li>About</li>
<li>Benefits</li>
<li>Your Say</li>
<li>Site Map</li>
</ol></div>
</div>
</div>
</body>
</html>[/html]
32  2028 
Once again you cannot place division outside of the body tag.......1 sec and i'll fix it.
- Death
Do you mean that all divs are to be placed before the first body tag?
Do you mean that all divs are to be placed before the first body tag?
No after - <body>
-
<div></div>
-
<div></div>
-
</body>
-
Nothing to my knowledge is allowed between the head and body tag.
Thanks, Death
Is this similiar to what you were going for? (To position this you will have to put it in a division, and give it an absolute position).
[HTML] <html>
<head>
<style type="text/css">
body {
margin:0;
padding:0;
}
ul {
float:left;
list-style-type:none;
}
li {
display:inline;
}
a {
float:left;
text-decoration:none;
padding:0.2em 0.6em;
color:#000;
background-color:#fff;
border:1px solid #000;
}
a:hover {
color:#fff;
background-color:#000;
border:1px outset #fff;
}
a:active {
color:#fff;
background-color:#000;
border:1px inset #fff;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Contacts</a></li>
<li><a href="#">Referrals</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Benefits</a></li>
<li><a href="#">Your Say</a></li>
<li><a href="#">Site Map</a></li>
</ul>
</body>
</html>
[/HTML]
Hope it helps, Thanks, Death
thanks I will try it out an let you know.
Yes
they are just like what I want but with different colors, fonts, backgrounds which I can amend, but I would rather do them in an external style sheet and not embedded like this. I'll have a go and probaly will be back, thanks
Yes
they are just like what I want but with different colors, fonts, backgrounds which I can amend, but I would rather do them in an external style sheet and not embedded like this. I'll have a go and probaly will be back, thanks
You can easily put it into an external stylesheet, I just made this way so I wouldn't have to seperate the HTML, and CSS.
Glad it helped, Death
hello again, they work good I placed the code in the external css and it all work good. Still have a problem with the header though.
Thanks for your help, css is so simple yet so hard to learn
I am back again, the code worked fine in an empty page but when I added it to my external style sheet, it has gone wrong again, the links appear at the edge of the header, all jumbled up and without their boxes in firefox but work OK in ie. -
body {
-
font-family: Verdana, sans-serif;
-
margin: 0;
-
padding: 0;
-
}
-
#container {
-
position: relative;
-
width: 65em;
-
background-color: #E60073;
-
margin-left: auto;
-
margin-right: auto; color:#000000; font-size:1em
-
}
-
#header {
-
height: 10em;
-
padding: 1em;
-
align: center;
-
}
-
-
img {
-
border:0;
-
width:750px;
-
height: 110px;
-
}
-
-
ol {
-
float: right;
-
list-style-type:none;
-
background: #6600CC;
-
}
-
li {
-
display:inline;
-
text-size: 0.5em;
-
}
-
a {
-
float: right;
-
text-decoration:none;
-
padding:0.2em, 0.6em;
-
color:#FFFFFF;
-
background-color:#6600CC;
-
border: 1px, solid, #FFFFFF;
-
font-weight: bold;
-
}
-
a:hover {
-
color:#FFFFFF;
-
background-color:#E60073;
-
border:1px outset #FFFFFF;
-
}
-
a:active {
-
color:#FFFFFF;
-
background-color:#E60073;
-
border:1px inset #FFFFFF;
-
}
-
[html]
</head>
<body>
<div id="container">
<div id="header">
<a href="index.html"><img border="0" src="images/netoworkarts.gif"
width="750" height="110"></a>
<ol>
<li><a href="contacts.htm">Contacts</a></li>
<li><a href="referrals.htm">Referrals</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="benefits.htm">Benefits</a></li>
<li><a href="say.htm">Your Say</a></li>
<li><a href="sitemap.htm">Site Map</a></li>
</ol></div>
</body>
</html>[/html]
appreciate anoyones help on this.
I fixed the jumbled up problem but now I still have the problem of no border boxes, but I have them on hover.
Are we just making up our own tags as we go along or are we following the standards? Validate your html and css for your list of errors that need fixing.
I am learning this css and I cannot see any errors. I cannot validate it as I am developing a new website and it is not yet loaded any where. Needless to say I do not like your tone, you had to start somewhere didn't you?
Markus 6,050
Recognized Expert Expert
I am learning this css and I cannot see any errors. I cannot validate it as I am developing a new website and it is not yet loaded any where. Needless to say I do not like your tone, you had to start somewhere didn't you?
http://validator.w3.org/#validate_by_input
Enter your markup there and validate it.
And don't speak down to moderators.
I wasn't following this thread, so I may have come across too strong, but I never understand how people come up with tags and attributes that don't exist. It's the third time in the last couple of days.
There are two validators, one for html and one for css. You don't need to be online with your site to validate. markusnoob gives the link for the html validator. Here is the CSS direct entry validator.
I am back again, the code worked fine in an empty page but when I added it to my external style sheet, it has gone wrong again, the links appear at the edge of the header, all jumbled up and without their boxes in firefox but work OK in ie.
appreciate anoyones help on this.
Really need to see the entire coding -- including the DOCTYPE and Character encoding. Load up the completed document to your server and provide the URL, please.
James Pickering Pages
Didn't any one actually take the time to read his code?!?!?
Here's your border problem, it's in your anchor rule, on this line: - border:1px, solid, #FFFFFF;
You have commas after 1px, and after solid. You only need to put spaces. So change it to this:
Hope it helps, Thanks, Death
Are we just making up our own tags as we go along or are we following the standards? Validate your html and css for your list of errors that need fixing.
What are you talking about it looks fine to me?????
- Death
I can honestly say i'm extremely disapointed in you all.
How many of you actually read his code, there was a simple answer to a problem, and odds are you didn't even read all of his post. How do you expect to help someone if you don't know what's going on?
I'm going to say this once. BEFORE POSTING A REPLY, READ THE ENTIRE THREAD, AND IF CODE OR A LINK IS PROVIDED GO OVER IT!
Sorry if i'm being too cross with you, but it's for your own benefits.
Thanks, Death
The suggestion was made that he validate his markup for his list of errors where he would have found the comma problem and whatever else is there. No one is paying us to sift through anyones markup.
The suggestion was made that he validate his markup for his list of errors where he would have found the comma problem and whatever else is there. No one is paying us to sift through anyones markup.
From what I can see that was his only error, when something is that obvious you shouldn't tell them to run to a validator, you should simply tell them about it, and how to fix it.
Thanks, Death
So why didn't you? You went through a lot of posts without saying anything about it.
So why didn't you? You went through a lot of posts without saying anything about it.
I'de check that again. I couldn't say anything about it because he didn't have the problem up until post #10. As you will see I didn't post again until #17 where I answered his question first thing after logging in. So I did say something about it, I would have sooner, but i'm not usually online during the weekends.
Thanks, Death
It was in the first post.
It was in the first post.
I knew continuing this arguement would lead to an inevitable defeat.
I did notice it, but I didn't say anything because I assumed he would see that I didn't use it in the code I provided. Stupid assumptions :).
I still don't agree with telling people to go a to a validator first, because then there's nothing for us to do. It's so slow in this forum.
Thanks, Death
I am learning this css and I cannot see any errors. I cannot validate it as I am developing a new website and it is not yet loaded any where .........................
But you really should load it up on to a server so that those people trying to help you can run your embryonic page through the W3C HTML & CSS validators in order to evaluate errors and suggest corrective action. You don't have to copy Markup (code) into these messages if you load up your pages to a server.
Inasmuch as you had adopted corrected (valid) Markup at one time here, I can only assume your subsequent problems were related to incorrect header information or additional non-compliant Markup.
James
But you really should load it up on to a server so that those people trying to help you can run your embryonic page through the W3C HTML & CSS validators in order to evaluate errors and suggest corrective action. You don't have to copy Markup (code) into these messages if you load up your pages to a server.
Inasmuch as you had adopted corrected (valid) Markup at one time here, I can only assume your subsequent problems were related to incorrect header information or additional non-compliant Markup.
James
You can run code through a validator without it being on a server. Also his problem has already been answered.
Thanks, Death
You can run code through a validator without it being on a server ..........
Yes, but then those offering help do not have access to a common document.
.......... Also his problem has already been answered ..........
Has it really? I get the impression he still has fundamental problems with his document (page) functioning as intended.
James
He provided what we needed his HTML, and CSS. If we have those we do not need a 'common document'.
His problem was that the border was not appearing. The answer to that problem was that he had invalid CSS (commas where they should not have been). He asked the question, and the answer was provided, wether some one chooses to put there documents on a server or simply provide their code is up to them.
Thanks, Death
I motion that we return to the origonal topic of this thread, and help the poster, instead of all of this arguing.
- Death
.......... his problem was that the border was not appearing ..........
.......... Still have a problem with the header though ..........
And that problem has been resolved?
James
And that problem has been resolved?
James
According to this yes.
Thanks, Death
Please do not double post. This thread is closed.
This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Ansgar Hein |
last post by:
I have been playing around with several different versions for a
horizontal menu, but I haven't been able to build a horizontal
navigation based on the vertical one featured on www.alistapart.com...
|
by: Randall Sell |
last post by:
Hmmm, have now spent a day reading the entire web with no answer yet! so now
resorting again to the experts...
I'm trying to create a horizontal list. This is easy enough doing:
<html>
<head>...
|
by: Charles Blaquière |
last post by:
As part of my explorations in liquid design, I'm exploring ways to use the
overflow: hidden property -- when browser windows become too narrow, I want
(some) images to get cropped rather than have...
|
by: addled |
last post by:
Hi there, after reading posts here for a few months, I've built the
courage to see if someone can see where I"m going wrong in the webpage
I've been working on.
In particular the horizontal nav...
|
by: Bryan |
last post by:
I've been trying to figure out how to do this for the past 2 days and
am finally tossing in the towel. No matter what I do, I just can't
seem to get it to work and haven't been able to find any...
| | |
by: Dan V. |
last post by:
Why is there a large space before the background image (horizontal orange
line under top NAV horizontal CSS list buttons) in Internet Expolorer 6
only?
http://www.officeactivate.com/fish
...
|
by: pixelwiz |
last post by:
Hi,
I am a designer working with an external .NET programmer. We are
trying to figure out the best way to implement at tab style horizontal
menu similar to...
|
by: Verona Busch |
last post by:
Hi everybody,
I am very happy to find this group. I am searching for a solution to
make a horizontal list menu with submenu on hover.
I found a lot of examples for horizontal lists which open...
|
by: EA |
last post by:
http://www.doublesix.plus.com/Examples/
The above link displays a page with an example of the navigation structure I
would like to create. It is a horizontal version of the standard vertical...
|
by: Paul |
last post by:
Code is below. Works in Firefox but not IE. I understand there is a box
issue with IE but I am having problems fixing this.
Many thanks for any help!
#navigation {
float: left;
width: 125px;...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
| | |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...
| |
