1 reply [Last post]
CJSweatt's picture
Hattiesburg, MS
Last seen: 12 years 17 weeks ago
Hattiesburg, MS
Timezone: GMT-6
Joined: 2010-01-21
Posts: 1
Points: 2

I have been battling with a positioning problem that I can't seem to solve on my own.

I'm still learning about the UL navigation, and don't quite understand how to position them exactly where I want them. It seems like there are two objects fighting with one another. See HERE. I'm trying to position the search box on the right-hand side (it's almost there, but now the "go" button will not position beside it)... THEN, I'm trying to get the "Calendar, A to Z index, People Directory, and Home" links to position horizontally in the thicker black bar in the header. I simply cannot figure out how to do this. I have been pulling my hair over this for two days now. Any suggestions on this? I have tried different div's, positioning, etc... Now, I am just about to give up on this.


This is what I have so far:

<div id="header_control"> &lt;!--CONTAINER FOR SEARCH BOX AND NAV LINKS--&gt;
<div id="search_box">&lt;!--BEGIN SEARCH BOX--&gt;
 &lt;form action="https://search.usm.edu/search" method="get"&gt;
          <label for="q">
          &lt;input name="q" type="text" id="q" size="15" value="Search"&gt;
          &lt;input name="search" id="search" src="http://www.usm.edu/coal/new/arts_webgraphics/search_go.png" alt="search" align="middle" type="image"&gt;
            &lt;input type="hidden" name="site" value="default_collection" /&gt;
            &lt;input type="hidden" name="client" value="default_frontend" /&gt;
</div>&lt;!--END SEARCH BOX--&gt;
<div id="header_nav">
<ul class="rollover">
    <li><a href="http://www.usm.edu/calendar/main.php" target="_blank">CALENDAR</a></li>
    <li><a href="http://www.usm.edu/azindex.php" target="_blank">A to Z INDEX</a></li>
    <li><a href="https://www4.usm.edu/onlinedirectory/index.php" target="_blank">PEOPLE DIRECTORY</a></li>
    <li><a href="http://www.usm.edu/" target="_blank">HOME</a></li>
</div>&lt;!--END HEADER NAV--&gt;
</div>&lt;!--END HEADER CONTROL--&gt;

And this is the CSS. I have tried so many things, I don't even know what I had originally.

    background-image:url(<a href="http://www.usm.edu/coal/new/arts_webgraphics/header-usm3.png" rel="nofollow">http://www.usm.edu/coal/new/arts_webgraphics/header-usm3.png</a>);
    width: 400px;
    height: 90px;}
ul.rollover li{
    text-align: left;
    list-style: none;
    margin: 0 0 0 0;
    font-size: 14px;}
ul.rollover a{
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 1px 10px 3px 0px;
    margin: 0 0 0 0;}
ul.rollover a:hover{
    color: #8C1850;
    text-decoration: none;}
        margin: 10px 15px 0 0;}

Stomme poes
Stomme poes's picture
Last seen: 10 years 29 weeks ago
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Footer too

Unless scripts fix it, looking in FF3.5 without Javascript shows the footer? or something covering half the page.
http://stommepoes.nl/thearts.png (temp image, will be removed in the future)
Using Aardvark FF plugin to show the p box.


I'm trying to position the search box on the right-hand side (it's almost there, but now the "go" button will not position beside it)...

Usually what people do is, in CSS, set
vertical-align: middle;
on both the text input and the search button. Not HTML's align=middle, that's from the Geocities era of the last millenium, but CSS.

You have everything wrapped in a label with no label text. So what's the label tag doing?
You can either have a real label, and pull it offscreen, or just not have a label. Two ways around the accessibility of no label (though most people understand now what a search form is) is either a title in the text input (will get read out in many screen readers) or you could use Javascript (for those who have Javascript) dynamically add a value to the text input (value="type your search terms here" or whatever). Onfocus or whatever, the text vanishes until the page is refreshed.

or you could just leave it and remove the label tag.

Form is not valid because you have inline elements (label, inputs) as direct children of the form. Forms may only hold block elements directly. Either wrap the inner parts of the form in a fieldset (this will require a legend tag though) or a div. Div's may be preferred for simple forms like this.

The HTML validator would have caught that one. It's not causing your alignment problem but it's a hair-loss program to try to debug invalid code.

Re the ul's:
if you want that text to be vertically in the middle of the black bar, in your case you can probably cheat and do something simple like

whatever the height of the black bar is
li {
line-height: (the height of the black bar);

or do it on the anchor.

does not work when text needs to wrap.

For accessibility for those who don't have or can't use a mouse:

ul.rollover a:hover, ul.rollover a:focus{
    color: #8C1850;
    text-decoration: none;}

Wherever you have a :hover setting, it's usually good to have :focus there too. That's what those without a mouse rely on to know where they are. Yeah, FF adds a thin dotted outline but :focus is more awesome esp when it imitates what the mousers get.

I'm no expert, but I fake one on teh Internets