Nav links is not visible

after i made the banner background take full space of the banner area the navigation links i made are underneath the image … and i don’t know how to show it above the image again …
here’s the HTML code of the image and the nav links

<header class="row container-wide header" role="banner">
         <div class="header__logo">
             <img  src='assets/images/banner-img--running men.png' style='position:absolute; top:0px; left:0px; width:100%; max-height:70%; border:0;' >
         </div>
         <nav class="header__nav" role="navigation">
             <ul>
             	<li class="header__nav-home"><a href="#">Home</a></li>
             	<li class="header__nav-shop"><a href="#">Shop</a></li>
             	<li class="header__nav-about"><a href="#">About</a></li>
             	<li class="header__nav-contact current"><a href="#">Contact</a></li>
             </ul>
         </nav>
     </header>

and here’s the CSS code ( and iam almost sure there’s something wrong with it )

.header__nav
{
	float: right;
	width: 150px;
    position: fixed;
    float: right;

}

.header__nav ul
{
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

.header__nav li
{
	display: inline-block;
	margin: 0;
}

.header__nav a
{
	display: block;
	margin-right: .2em;
	padding: 0.6em 1em 0.4em;
	border-radius: .3em;
	color: #fff
	background: none;
	font-size: 0.8125em;
	font-weight: bold;
	text-decoration: none;
}

.header__nav-home a { margin-right: 0; }

.current a
{
	color: #fff;
	background: #56b880;
}
.header__nav-shop a { margin-right: 0; }

.home a
{
	color: #fff;
	background: #56b880;
}
.header__nav-about a { margin-right: 0; }

.current a
{
	color: #fff;
	background: #56b880;
}
.header__nav-contact { margin-right: 0; }

.current a
{
	color: #fff;
	background: #56b880;
}

.header__nav a:focus { background: #000; }
.header__nav a:hover { background: #3bb2d0; }
.header__nav a:active { background: #af0000; }

sorry for taking long

I’ve formatted it for you.

For reference:

1 Like

thanks alot … idk how that happened but when i opened the page it was fixed by itself … can you please tell me how to style all the links like the ( Home ) one and how to fix the flowing right cuz i wrote ( float: right; ) but it doesn’t work they’re just stuck there …

here’s the screenshot of the banner part of the page …

that would be really appreciated

Just a question because I’m curious.

I have never seen both float and position used together like you have them and I don’t understand why you have float twice.

.header__nav
{
	float: right;
	width: 150px;
    position: fixed;
    float: right;
}

It feels wrong to me - as in unpredictable behavior - so I would like to know your reasoning behind this.

TIA

1 Like

I have not been following your earlier thread/s but I do understand that you are a newbie. I also understand that you have difficulty following instructions and explaining your wishes, so if my requests below are too difficult to follow or too much trouble, then I will drop out and not trouble you any more. Fair enough?

Would you please use your favorite graphics program and draw a simulated screenshot showing where you want the links to appear, how you want them to look, and how you want them to behave as the viewport widths change. If you have a link to your site, please include that, too, if possible.

Thank you.

3 Likes

If position is absolute or fixed then float is ignored as per the specs. The float is redundant and should be removed but will do no harm or have no effect either way.

2 Likes

oh no sorry … it was just a mistake … didn’t mean to do that twice … but i wrote float and fixed when i was trying to make them show up when they were underneath the image … i didn’t know what to do at all so i tried everything i know … then i forgot to fix that when it got fixed … and yeah … iam very newbie

i don’t know anything about graphics or designing yet ( but i will soon )
but i think this photo will do …
i want to move them to be in those 4 white spaces … and to look like the contact link … and iam pretty sure there’s some mistakes in the css code ( which up there in the form )

iam really sorry but i really am a newbie … so there’s alot i don’t know

2 Likes

Hi,

While waiting for a fuller explanation how you can fix the hidden nav, you can experiment with the code: (Remove the width and fixed position and add the other properties.)

.header__nav {
/*    float: right; */
/*    width: 150px; */
/*    position: fixed; */
    position: relative;
    z-index:1;
    float: right;
    margin-top:1%;
    margin-right:1%;
}

I don’t know how the rest of the code you have that affects placing and sizes of the nav or banner. Try my tip above anyway.

yeah that amost worked … they moved to the right but not like i wanted …
i think the mistakes iam doing are because of the tutorial iam following …
its a tutorial in this site ( sitepoint ) … the guy who made it just keeps writting stuff without explaining why he’s writting that …

i really don’t understand why he wrote any of those stuff in the css file …
i don’t know what’s the “a” or the “ul” or the “li” after the “.header__nav” means … sorry iam a newbie

here’s the css file :

.header
{
	padding: 1.25em 1em;
	/* 20px/16px - 16px/16px */
}

.header__logo
{
	float: left;
	padding-top: 2em;
}

.header__nav
{
	/*float: right;
	/*width: 150px;
    /*position: fixed; */
    position: relative;
    z-index:1;
    float: right;
    margin-top:1%;
    margin-left:1%;
}

.header__nav ul
{
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
	
}

.header__nav li
{
	display: inline-block;
	margin: 0;
}

.header__nav a
{
	display: block;
	margin-right: .2em;
	padding: 0.6em 1em 0.4em;
	border-radius: .3em;
	color: #fff
	background: none;
	font-size: 0.8125em;
	font-weight: bold;
	text-decoration: none;
}

.header__nav-home a { margin-right: 0; }

.current a
{
	color: #fff;
	background: #56b880;
}
.header__nav-shop a { margin-right: 0; }

.home a
{
	color: #fff;
	background: #56b880;
}
.header__nav-about a { margin-right: 2; }

.current a
{
	color: #fff;
	background: #56b880;
}
.header__nav-contact { margin-right: 0; }

.current a
{
	color: #fff;
	background: #56b880;
}

.header__nav a:focus { background: #000; }
.header__nav a:hover { background: #3bb2d0; }
.header__nav a:active { background: #af0000; }

@koku300: when you post code on the forums, you need to format it so it will display correctly.

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

like this ?

i just didn’t want to hightlight special texts in the code … iam asking about them all …

No. I’d already fixed that code block for you (and I’ve fixed it again).

You need to put the backticks above the first line of your code, and below the last line of your code, to mark it as one code block. It’s particularly important to do this with HTML, because otherwise the forum will try to display the content of the HTML, not the code. It also means that if you have a very long section of code, it is shown at a manageable length with scroll bars.

2 Likes

What is the name and who is the author of the tutorial that you are following and what page are you on?

Please post all of your CSS as one file and all of your HTML as one file. I do not understand the CSS that you just posted in segments.

To post code put it between three backticks on a line by themselves before and after the selection of code as @Technobear described:

```
all of the
css or html here
```

or highlight all of the CSS or HTML code that you have posted and click the </> button in the editor’s menu. That will accomplish the same thing.

1 Like

It’s not a real page … it’s just for practice … ( no data base )
and it doesn’t matter who the author iam just leaving it empty so when i finish the whole page i do think of those …
and here’s the link of the turorial …

i followed the tutorial almost exactly in everything … but there’s somethings i didnt’t do right like he did …
so there’s 4 css style sheets … ( 2 of them he’ve used according to where iam … the layout and the modules pages )

here’s the HTML page …

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="html-text; charset=UTF-8">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- css links -->
    <link rel="stylesheet" type="text/css" href="assets/css/base.css">
    <link rel="stylesheet" type="text/css" href="assets/css/layout.css">
    <link rel="stylesheet" type="text/css" href="assets/css/modules.css">
    <link rel="stylesheet" type="text/css" href="assets/css/normalize.css">
	<title>Sports</title>
<body>

<!-- banner-row -->
<div class="row row--banner">
     <header class="row container-wide header" role="banner">
         <div class="header__logo">
             <img  src='assets/images/banner-img--running men.png' style='position:absolute; top:0px; left:0px; width:100%; max-height:70%; border:0;' >
         </div>
         <nav class="header__nav" role="navigation">
             <ul>
             	<li class="header__nav-home"><a href="#">Home</a></li>
             	<li class="header__nav-shop"><a href="#">Shop</a></li>
             	<li class="header__nav-about"><a href="#">About</a></li>
             	<li class="header__nav-contact"><a href="#">Contact</a></li>
             </ul>
         </nav>
     </header>
     <section class="row container-medium banner-contact">
         <h1 class="banner-content__heading">

         </h1>
     	

     </section>
     

<!-- features -->
<div class="row row--white row--padding-wide">
     features
     <div class="row container-medium">
     	container-medium
     	<div class="row">
     		<div class="col-narrow--right">
     			col-narrow--right
     		</div>
     		<div class="col-wide">
     			col-wide
     		</div>
     	</div>
     </div>
     	<div class="row">
     		<div class="col-narrow">
     			col-narrow
     		</div>
     		<div class="col-wide--right">
     			col-wide--right
     		</div>
     	</div>
     </div>
     <div class="row">
     		<div class="col-narrow--right">
     			col-narrow--right
     		</div>
     		<div class="col-wide">
     			col-wide
     		</div>
     	</div>
     </div>
</div>
<!-- photos-info -->
<div class="row">

     <div class="col-medium">
     	col-medium
     </div>
     <div class="col-medium">
     	col-medium
     </div>
</div>
<!-- testimonials -->
<div class="row row--white row--padding-wide">
     testimonials
     <section class="row container-narrow">
     	container-narrow
     </section>
</div>
<!-- facts -->
<div class="row row--grey row--padding-wide">
     facts
     <section class="row container-narrow">
     	container-narrow
     </section>
     <div class="row container-medium">
        <div class="col-narrow">
     	    col-narrow
     	</div>
     	<div class="col-narrow">
     	    col-narrow
     	</div>  
     	<div class="col-narrow">
     	    col-narrow
     	</div> 
     	<div class="col-narrow">
     	    col-narrow
     	</div>     	     	    	     	  
     </div>
</div>
<!-- press -->	
<div class="row row--blue row--padding-medium">
     press
     <section class="row container-wide">
     	container-wide
     </section>
</div>

<!-- footer -->
<div class="row row--dark-grey row--padding-wide">
     footer
     <footer class="row container-wide">
     	container-wide
     	<div class="col-wide">
     		col-wide
     	</div>
     	<div class="col-narrow--right">
     		col-narrow--right
     	</div>
     	<div>
     		
     	</div>
     </footer>
</div>



</body>
</html>

and here’s the layout.css page :

/* ----------------------------------
layout
---------------------------------- */

/* row */
.row {
	clear: both;
	overflow: hidden;
}
/* row-colors */
.row--white { background-color: #fff; }
.row--grey { background-color: #f8f8f8; }
.row--blue{ background-color: #3bb2d0; }

.row--dark-grey
{
 color: #fff;
 background-color: #282e37; 
}

/* row-padding */
.row--padding-medium 
{
	padding-top: 2.1875em;
	padding-bottom: 2.1875em;
}
.row--padding-wide
{
	padding-top: 2.1875em;
	padding-bottom: 2.1875em;
}
/* containers */
.container-narrow,
.container-medium,
.container-wide
{
	margin: 0 auto;
	padding-left: 1.5em;
	padding-right: 1.5em;
}

.container-narrow
{
	max-width: 34em;
}
.container-medium
{
	max-width: 52em;
}
.container-wide
{
	max-width: 58em;
}
.container-narrow,
.container-medium,
.container-wide
{
	padding-left: 2em;
	padding-right: 2em;
}
/* columns */
.col-narrow,
.col-narrow--right { margin-bottom: 1.5em;}


/* ----------------------------------
wide
---------------------------------- */

@media (min-width: 38em)
{
	.row--padding-medium 
   {
	    padding-top: 3.8889em;
	    padding-bottom: 3.8889em;
   } 
    .row--padding-wide
   {
	    padding-top: 5.5556em;
	    padding-bottom: 5.5556em;
   }

   .col-narrow,
   .col-medium,
   .col-wide { float: right; }
   .col-narrow--right,

   .col-wide,
   .col-wide--right { width: : 61%; }

   .col-medium { width: 50% }

   .col-narrow,
   .col-narrow--right { 
   	width: 25%;
    margin-bottom: 0;
     }

and here’s the modules.css page :

/* ----------------------------------
banner
---------------------------------- */


.row--banner
{
	background-color: #626e6d;
	background-image: url(fss.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

@media (min-width: 38em)
{
	.row--banner{ background-image: url(assets/images/banner-img--running men.png);  }
}
/* ----------------------------------
header
---------------------------------- */

.header
{
	padding: 1.25em 1em;
	/* 20px/16px - 16px/16px */
}

.header__logo
{
	float: left;
	padding-top: 2em;
}

.header__nav
{
	/*float: right;
	/*width: 150px;
    /*position: fixed; */
    position: relative;
    z-index:1;
    float: right;
    margin-top:1%;
    margin-left:1%;


}

.header__nav ul
{
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
	
}

.header__nav li
{
	display: inline-block;
	margin: 0;
}

.header__nav a
{
	display: block;
	margin-right: .2em;
	padding: 0.6em 1em 0.4em;
	border-radius: .3em;
	color: #fff
	background: none;
	font-size: 0.8125em;
	font-weight: bold;
	text-decoration: none;
}

.header__nav-home a { margin-right: 0; }

.current a
{
	color: #fff;
	background: #56b880;
}
.header__nav-shop a { margin-right: 0; }

.home a
{
	color: #fff;
	background: #56b880;
}
.header__nav-about a { margin-right: 2; }

.current a
{
	color: #fff;
	background: #56b880;
}
.header__nav-contact { margin-right: 0; }

.current a
{
	color: #fff;
	background: #56b880;
}

.header__nav a:focus { background: #000; }
.header__nav a:hover { background: #3bb2d0; }
.header__nav a:active { background: #af0000; }
/* ----------------------------------
banner-content
---------------------------------- */

/* ----------------------------------
features
---------------------------------- */

/* ----------------------------------
testimonials
---------------------------------- */
1 Like

Then highlight all lines of code you have pasted and use the code button, and all of it will be surrounded with the backticks and shown as posted code. Mind that not use the code button in lines that is already shown as code.

The “newbe” way would be to first press enter for a new line, then use the </> button and paste the code where the “type or paste code here” show. You can then write more code if you like as long as you don’t go outside the three-backtick lines before and after.

The “experienced” way is to learn how to mark the code with backticks. (Sorry @TechnoBear, but I’m still using the code button).

EDIT) I have some trouble typing so I see my post is already overrun by more posts. I post it anyway if it can help anyone else reading this.

alright can we please stop talking about the highlight thing ?! …
next time i will use the code button

1 Like

koku300, the “highlight thing” and the code button go together. The code button does not work without highlighting the code. Can you type the backticks? Does your keyboard have a backtick key in the upper left corner? If it does, then you do not need to highlight any code or click the code button, just use the backticks before and after the code you wish to post.

1 Like

Then you will have a hard time until you learn the basics.

The css “a” and “ul” and “li” are selecting the html elements with the tags <a> <ul> and <li>. The .header_nav is a class (dot=class, #=id) given to a tag (class=class, id=id). That’s the way css can target the html for styling.

1 Like

The author of the tutorial is Russ Weakley. In my opinion, this is not a good tutorial for a total newbie. Russ is teaching a unique coding methodology rather than focussing on basic HTML and CSS. I think you should have picked something easier/simpler to teach you the language of HTML and CSS first.

You cannot succeed until you understand what “a” and the “ul” and the “li” after the “.header__nav” means. You are right. He expects you to know more than you do.

If you do not wish to consider a new course, then please tell which lesson you are at now with the menu.

1 Like