Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times

    full of questions today

    is it possible to have a nav bar with say.. 6 links and in the middle have a heading? i tried adding hust a <a></a> heading along with the links in the <nav></nav> section on the html but the heading showed up below the links, on a seperate row.

  2.  

  3. #2
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    and now that i have over 100 posts can someone tell me how to add a signature (cant find the option anywhere) so i can formally apologise for the mass of basic questions i have haha

  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,482
    Member #
    425
    Liked
    2783 times
    That's an anchor and you can do something like

    nav a {display: inline;}

    To do what you want. How exactly you do that depends on your code, but that's the general idea. You can also use floats here, but that's tricky.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    see thats the thing, i have it set to inline, the links are inline just not the heading..

    and lol i meant h1...

    floats were my first choice but i was hoping there was a simpler way, probably should have specified that

  6. #5
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,482
    Member #
    425
    Liked
    2783 times
    h1 {display: inline;}

    Any element can be converted to an inline element using CSS. It doesn't matter what the element is. Same with a block-level element (like h1 is).
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  7. #6
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    ill try that but i thought because the h1 was in the nav section it would be inline as in scc its set to inline??

  8. #7
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    awesome that worked, how come i needed to specify the h1 seperately?

  9. #8
    Senior Member DC Web Design's Avatar
    Join Date
    Jan 2014
    Location
    Washington, DC
    Posts
    128
    Member #
    38178
    Liked
    37 times
    Quote Originally Posted by coleio View Post
    ill try that but i thought because the h1 was in the nav section it would be inline as in scc its set to inline??
    Not 100% sure what you're asking, but the h1 tag won't inherit the inline display of parent elements (nav or whatever). Every single browser's default stylesheet will set the h1 (as well has h2, h3, h4, h5, h6) tag as display: block; by default.

    Like TheGAME said though, you can override the browser default with CSS, You have to specify display: inline; in your own styles to override that. Your own styles will always take precedence over the browser default.

    You might want to read up on Specifics on CSS Specificity | CSS-Tricks and Browsers&#39; default CSS stylesheets - Stack Overflow

  10. #9
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    thanks for the links. so much to know, i knew about the default browser settings just wasnt aware that that was one.

    ok so now its inline, three questions,

    1. the nav width is specified to 150px per tab, if i wanted to widen one specific tab how would i do so? its the heading were talking about, i tried specifying width in the h1 part on the css but no.
    2. i tried to change the text size on the heading using text-size: 30px; but it didnt work, i did it in the h1 and the nav section but no change, why is this?
    3. so instead of changing text size i just changed to caps, but because of question one the last word got pushed underneath the first two, i expected that but what i didnt expect is that the other anchors moved down a level. i tried changing the height of the nav but that just extended down below the link, so on that, one..why did the links move down below the first line of the heading? and two, when i changed the height why didnt the links center on the nav tabs as i have it set to center??

    as always guys appreciate the help

  11. #10
    Senior Member DC Web Design's Avatar
    Join Date
    Jan 2014
    Location
    Washington, DC
    Posts
    128
    Member #
    38178
    Liked
    37 times
    Quote Originally Posted by coleio View Post
    1. the nav width is specified to 150px per tab, if i wanted to widen one specific tab how would i do so? its the heading were talking about, i tried specifying width in the h1 part on the css but no.
    Add a class or something to make the specific tab more specific. Then make it a different width. Check out the specificity article I posted above.

    Specifying a width on an inline element will be ignored. Try setting it as inline-block for that.

    Quote Originally Posted by coleio View Post
    2. i tried to change the text size on the heading using text-size: 30px; but it didnt work, i did it in the h1 and the nav section but no change, why is this?
    It's font-size. Not text-size.

    https://developer.mozilla.org/en-US/docs/Web/CSS/font

    There are other properties that begin with text- though: CSS Text

    Quote Originally Posted by coleio View Post
    3. so instead of changing text size i just changed to caps, but because of question one the last word got pushed underneath the first two, i expected that but what i didnt expect is that the other anchors moved down a level. i tried changing the height of the nav but that just extended down below the link, so on that, one..why did the links move down below the first line of the heading? and two, when i changed the height why didnt the links center on the nav tabs as i have it set to center??
    I lost you. Can you upload this somewhere so we can see what you're seeing?


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:42 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com