set up new nav tabs

[durangod]

Hi, just wanted to check to see if this is correct

html

Code: [Select]

<header>
   <h1>Site Name<sup class="sup">&trade;</sup> Web Services</h1>
   <nav>
    <a href="https://example.com" target="_blank">Support Forum</a>   
   </nav>
</header>

css

Code: [Select]

nav {
    display: inline-block;
    position: absolute;
    top: 13.5%;
    left: 90%;
    color: #ffffff;
    background: #090101;
    padding: 0.625em 0.625em 0.625em 0.625em;
    border-radius: 0.5em 0.5em 0em 0em;
}

nav:hover {
    border: 1px solid #ffffff;
    border-bottom: 0px;
}

nav a,
nav a:hover,
nav a:focus {
    text-decoration: none;
    color: #ffffff;
}


durangodaveswebservices dot com/ddws_pages/index.php

[Jason Knight]

NAV tag is not an invitation to just slop anchors into it (not a replacement for lists), no clue why you would ever take it out of flow with absolute positioning... and really a superscript tags is a "sup"?

Much less don't shove new windows down the user's gullet with target="_blank". That's accessibility garbage no matter how many know-nothing idiots will try to defend the practice. There's a reason it was invalid in 4 Strict, and it being back in 5 is dumbass!

[durangod]

i forgot about that sup, i meant to take that out the other day but i been so focused on other things it just missed it, yeah so now its just sup and the class removed.  I fixed the other tags i had classes on them dont know how i forgot about that one. 

removed all the _blank - i just always did that in case the user wanted to keep they page they were on for some reason.  But i agree that maybe i should let them have that choice to open a new window if they want to. 

and adding the list code now.   I felt like i had to use position: absolute because i could not get it in place otherwise but yes i guess that means i have other issues.  So i will do it without using that and then i will find the other issue and fix it... 

and speaking of that, im sure this has something to do with it, the nav tab is fine until i open up the console then the nav moves up on the page with the console open.  So yeah ill redo it...



Thanks

[durangod]

ok i think i got it and without the position absolute, took me about 4 hours lol  I had to keep moving the list around till i had it in the html where i could drop it in place

Question: how do i keep the button from moving (reshaping) on hover?  OK nevermind i realized all i had to do was give it a border to start with and just change the border color, then it wont move.
That new code is included in this code.

html

Code: [Select]

<header>
   <h1>sitename<sup>&trade;</sup> Web Services</h1>
   <nav>
     <ul>
        <li>
         <a href="https://example.com">Support Forum</a>
       </li>
       <li>
       <a href="https://example.com/ddws_pages/contactus/contactus.php">* Contact Us</a>   
      </li>
    </ul>
  </nav>
</header>

css

Code: [Select]

header {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   min-height: 8em;
   padding: 0 1em  0 12em;
   background-color: #730d0d;
   background-image: url(https://example.com/ddws_pages/images/ddwslogo_web_black.png);
   background-size: 9em;
   background-repeat: no-repeat;
   background-position: 0 center;
}

header h1 {
   width: 49%;
   font-size: 2em;
   font-weight: normal;
   color: #ddd;
}

header h1 sup {
   font-size: 1rem;
}


header nav {
    margin-top: 6em;
    background: #730d0d;
}

nav {
    display: block;
    background: #090101;
    color: #ffffff;
    width: 50%;
}

nav ul li {
    float: right;
    height: 2em;
    margin-right: 1em;
    color: #ffffff;
    background: #090101;
    padding: 1em 1em 2em 1em;
    border-radius: 0.5em 0.5em 0em 0em;
    text-align: center;
    list-style: none ;
    border: 1px solid #090101;
    border-bottom: none;
}

nav ul li:hover {
    border: 1px solid #ffffff;
    border-bottom: none;
}

nav ul li a,
nav ul li a:hover,
nav ul li a:focus {
    text-decoration: none;
    color: #ffffff;
}



[Jason Knight]

You're overthinking it, but I think that since you're still learning "newer" stuff like flex, that's why.

The giant left padding reeks of trying to manually position what should be auto centered. To that end I'd add a DIV inside HEADER to act as the centering component.

Since HEADER is not exclusive to BODY and can also be applied inside MAIN, SECTION, and ARTICLE, targeting it by tagname is risky. "body > header" could be appropriate but if you end up having to use a fauxbody such as for modal dialogs, you'll end up having to refactor the selector.

Thus I'd put an id="top" on it. This gives you a styling hook, AND a landing target if you want to put a "back to top" link in (or before) your body > footer.

I'd also toss an ID on the NAV to say which NAV it is, and as a landing for :target driven "hamburger" mobile menus.

Code: [Select]

<header id="top">
<div>
<h1>sitename<sup>&trade;</sup> Web Services</h1>
<nav id="mainMenu">
<ul>
<li>
<a href="https://example.com">
Support Forum
</a>
</li><li>
<a href="https://example.com/ddws_pages/contactus/contactus.php">
Contact Us
</a>
</li>
</ul>
</nav>
</div>
</header>

In the CSS you're playing around with positioning you don't have to. One simple change could have removed a lot of your issues. "align-items:end;"

align-items acts on the cross-axis,in the case of rows that means up and down. If you set it to "end" everything will align to the bottom edge. Then you just pad the H1 taller than the menu to create it being "centered".

You're also targeting the LI for things that really belong on the anchor. The anchor is the targetable / focusable / navigable element. LI is not.

Code: [Select]

#top {
background:
#730D0D
url(images/ddwslogo_web_black.png)
center
no-repeat;
background-size:contain;
}

#top > div,
#mainMenu ul {
display:flex;
flex-wrap:wrap;
gap:1rem;
}

#top > div {
justify-content:center;
align-items:end;
max-width:48rem;
margin:0 auto;
padding:0 1rem;
}

h1 {
flex-grow:1;
padding:2rem 0;
font-size:2rem;
font-weight:normal;
color:#DDD;
}

h1 sup {
font-size:1rem;
vertical-align:top;
}

h1 ~ * {
flex-grow:0;
}

#mainMenu ul {
list-style:none;
justify-content:end;
}

#mainMenu ul a {
display:block;
  padding:1rem 1rem 2rem 1rem;
  text-decoration:none;
  color:#FFF;
  background:#000;
border:solid #100;
border-width:0.0625rem 0.0625rem 0;
border-radius:0.5rem 0.5rem 0 0;
}

#mainMenu ul a:focus,
#mainMenu ul a:hover {
border-color:#FFF;
}

Also background-size:contain; is your friend. As are most of the "legacy" condensed properties.

I also shrunk the height because that was too tall a header for its own blasted good. Not sure how that interacts with your background-image, but really I wouldn't go there wasting screen space on junk nobody cares about like some artsy-fartsy background.

[durangod]

Ok thanks for the tips, ill work on that tonight and read about the new stuff.

[durangod]

Ok i had to make 3 changes to the code.   I took display block off of mainmenu ul a   and changed top > div to width 75rem , then added margin left 1em to h1 to get it away from the logo a bit.

I know its really hard to do this without being able to change certain things so i expect code  will never be perfect because your not on the server.  So i thank you for the help and the time.   

Questions: 

On my large comming soon text can i use margin-top: 50% to keep it in the vertical middle of the blank area, is percent ok to use with margin top? 

what does this do

Code: [Select]

h1 ~ * {
flex-grow:0;
}

Here is the before and after change



Now ill work on mobile, it looks horrible... ill have to shrink everything down to fit everything is wrapping seems like...     thanks

[durangod]

ok i got the mobile done, i think....     i decided rather than use the same menu nav for both desktop and mobile i did a new nav for just the media.  On media the desktop nav menu will not show and i replaced it with the media nav menu, and vice versa.

Question: what is the proper max-width for media to cover most devices?

html

Code: [Select]

  <nav id="mobileMenu">
   <a href="https://example.com">Support Forum</a>
   <a href="https://example.com/contactus/contactus.php">Contact Us</a>
  </nav> <!-- #mobileMenu -->

css

Code: [Select]

/*
********** MOBILE MEDIA ONLY ************
*/


@media ( max-width: 29em ) {
   
   
#top {
    background-size: 16%;
}

h1,
h1 sup {
    font-size: 0.9em;
    height: 1em;
    padding: 0;
    margin-top: 3em;
    flex-grow: unset;
}


/* dont show normal desktop menu */
nav#mainMenu {
   display: none;
}

/* show mobile menu */
/* tried flex did not work */

nav#mobileMenu {
    display: block;
}

#mobileMenu {
    height: 2em;
    max-height: 2em;
    width: 97%;
    margin-right: 0.5em;
}

#mobileMenu a,
#mobileMenu a:focus,
#mobileMenu a:hover {
    text-decoration: none;
    color: #ffffff;
    font-size: 0.625em;
    float: right;
    padding: 0.625em;
}

#page_main {
    display: block;
    margin-bottom: 0;
}

div.page_content_left,
div.page_content_right {
    display: block;
    height: auto;
}

div.page_content_left,
div.page_content_right {
    width: 100%;
    max-width: 100%;
}

div.page_content_left {
    margin-bottom: 1em;
}

div.page_content_right {
    margin-bottom: 0;
}

p.csoon {
    font-size: 0.625em;
    margin-top: 0;
}

.csoon i {
    margin-top: 0;
}

span.special_note {
    font-size: 0.525em;
}

input[type="text"] {
    width: 9rem;
}

span.attribute,
span.copyr {
    display: flex;
    font-size: x-small;
    color: #ffffff;
}

span.attribute {
    margin-left: 0;
}

}/* close media */