/    Sign up×
Community /Pin to ProfileBookmark

CSS Link Heights and Widths

Copy linkTweet thisAlerts:
Jan 27.2007

I created a DIV to use as a navigation bar on my site. It was nested within another DIV and it was set for 100px height and 100% width. I made the links 100px square, with the text aligned in the center. I also knocked up an inline list to contain the navigation bar links: without padding, margins or list-styles. The page worked successfully until I put in the W3 Doctype string (<!DOCTYPE html PUBLIC “//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd“>). Everything still worked, except that the links had turned back into plain text: I was unable to set custom heights or widths for them.

I have tried every Doctype declaration, but to no avail. Is there a problem with the way I created the links?

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriJan 27.2007 — Set the <a> tags as display:block in the css.

Cheers

Graeme
Copy linkTweet thisAlerts:
@drhowarddrfineJan 27.2007 — The page worked successfully until I put in the W3 Doctype[/QUOTE]Because you changed the rules. The doctype is the very first thing to put on a web page. You don't make the doctype fit your code but you make your code fit the doctype. Without one, you are in 'quirks'. By adding that doctype you came out of quirks and added a different rule set.
Copy linkTweet thisAlerts:
@seraph766authorJan 27.2007 — I put the Doctype first on the page. I tried every one, validated my HTML and CSS, and everything was clean. I also included the META tag that specifies UTF-8.

The display:block attribute won't work because it assigns an individual line to each link, and I want them aligned straight across.
Copy linkTweet thisAlerts:
@CentauriJan 27.2007 — If you want the links displayed beside each other, style the <li>s as display:inline or float them left.

Cheers

Graeme

PS: any chance of posting the code for this that you have so far?
Copy linkTweet thisAlerts:
@seraph766authorJan 27.2007 — I can get the links to display horizontally; what I can't do is force them to retain the size that I give them.

[url=http://www.freewebs.com/seraph766/example.htm]Example[/url]
Copy linkTweet thisAlerts:
@CentauriJan 27.2007 — Well, that example link only had one item, and no sign of the list you said you used. Quick tutorial:

  • 1. Put links in an unordered list.


  • 2. Style the <a> tags as block, give them width & height, define background and font colours, text alignment and decoration etc.


  • 3. Style the <li> tags as inline display, float them left, apply any margins required to space them.


  • 4. Style the <ul> tag (in this case #nav) for no list style, assign a width and, optionally, position with auto margins (as in this case)


  • 5. Optionally style the hover state for rollovers.


    • Quick html with integral css [CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    * {
    border: 0;
    margin: 0;
    padding: 0;
    }
    body {
    color: #FFFFFF;
    background-color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    }
    #nav {
    list-style: none;
    width: 310px;
    margin: 10px auto;
    }
    #nav li {
    display: inline;
    float: left;
    margin-right: 3px;
    }
    #nav a {
    text-decoration: none;
    display: block;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 16px;
    background-color: #00FFFF;
    color: #003333;
    font-weight: bold;
    }
    #nav a:hover {
    background-color: #00FF99;
    color: #6600CC;
    }
    -->
    </style>
    </head>

    <body>
    <ul id="nav">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    </ul>
    </body>
    </html>
    [/CODE]

    Cheers

    Graeme
    Copy linkTweet thisAlerts:
    @seraph766authorJan 27.2007 — Thanks a lot; that's precisely what I needed. I appreciate it. :-)
    ×

    Success!

    Help @seraph766 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.27,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...