How do I make sure that my fixed header does not overlap the images?

Question

How do I make sure that my fixed header does not overlap the images?

Navigation

#1 by (0 votes)

0

<DOCTYPE HTML>

<HTML>

<HEAD>
<TITLE>TITLE UNICOLOR</TITLE>

<STYLE>
    *{padding:0; margin:0; list-style:none; text-decoration:none; 
color:inherit;}
    HEADER{width:100%; height:8%; border-bottom:1px solid #E0E0E0; border- 
top:1px solid #E0E0E0; position:fixed;}
    HEADER UL{display:table; margin:0 auto;}
    HEADER LI{float:left; padding:30px; font-family:Verdana; font- 
weight:600; font-size:14px;}
    MAIN{width:50%; margin-left:5%; margin-right:5%;}
        img.MAIN_IMAGES{max-width:100%;}
    </STYLE>
</HEAD>

<BODY>
  <HEADER>
    <UL><LI><A href='#'>UPDATES</A></LI><LI><A href='#'>CATEGORIES</A></LI> 
 <LI><A href='#'>STUDIOS</A></LI><LI><A href='#'>MODELS</A></LI></UL>
    </HEADER></A>

    <MAIN>
        <IMG src='1.jpg' class='MAIN_IMAGES'/>
        <IMG src='2.jpg' class='MAIN_IMAGES'/>
        <IMG src='3.jpg' class='MAIN_IMAGES'/>
        <IMG src='4.jpg' class='MAIN_IMAGES'/>
        <IMG src='5.jpg' class='MAIN_IMAGES'/>
        <IMG src='6.jpg' class='MAIN_IMAGES'/>
        <IMG src='7.jpg' class='MAIN_IMAGES'/>
        <IMG src='8.jpg' class='MAIN_IMAGES'/>
        <IMG src='9.jpg' class='MAIN_IMAGES'/>
    </MAIN>

    <ASIDE>

    </ASIDE>
</BODY>

</HTML>

html css web

asked by Danilo 01.05.2018 в 11:52

source

1 answer

Limit the number of decimals Create an executable from a python script?

score 0 · Answer 1

If you want the images to be on the header, you can do something like this:

HEADER{
    width:100%; 
    height:8%; 
    border-bottom:1px solid #E0E0E0; 
    border-top:1px solid #E0E0E0; 
    position:fixed; 
    background-color: #fff; 
    z-index: 1;
}
img.MAIN_IMAGES{
    max-width:100%;
    position: relative;
    z-index: 10;
}

In addition to what you already had, I added the property z-index that allows you to change the "order of the layers" but you must bear in mind that this property must be used in the company of the property < strong> position with the relative, fixed or obsolute values.

Here's more information about z-index