Help me with css


#1



It's my own test-project.


This is HTML code:

<!DOCTYPE html>
<html>
<head>
    <title>TestPage</title>
    <link rel='stylesheet' type='text/css' href="style.css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type='text/javascript' src="jscript.js"></script>
</head>
    
<body>
    <div class="fullpage">
       <div class="header">
        <div id="navigation">
            <span class="navitem">
               <a href="index.html">Something1</a>
            </span>
            
            <span class="navitem">
               <a href="#">Something2</a>
            </span>
            
            <span class="navitem">
               <a href="#">Something3</a>
            </span>
            
            <span class="navitem">
               <a href="#">Something4</a>
            </span>
        </div>
    </div>
    
       <div class="main">
        <div class="pagebody">
            <p>Hi</p>
        </div>
    </div>
    </div>
</body>
</html>

This is CSS:

.navitem{
    text-transform: uppercase;
    font-size:20px;
    text-align:center;
    width:160px; 
    display:inline-block;
    padding-top:8px;
    margin-left: 50px;
    margin-right:50px;
    
}

a{
    text-decoration: none;
}
.header{
    width:80%;
    height:50px;
    background-color: black;
    padding-top:10px;
    margin-left:10%;
    position:fixed;
    
}
.navitem a{
    color:white;
}
#navigation{
    text-align:center;
}
body{
    background-color:white;
}
.pagebody{
    
    
}
.main{
    width:80%;
    height:200px;
    margin-left:10%;
    background-color:red;
    margin-top:55px;
}

It should be two lines of equal length, one below the other but it's not. Why?


#2

What does it refer to? In such cases, it is best to not use reference names (like it), but instead class or id name of the elements, so we have a better idea what we have to look for you, unlike you, we don't have an idea of how the end result should look


#3

Result should look like this:


#4

instead of this:


#5

the header is fixed, so the only way to make the width the same is by removing margin from al parents:

body { margin: 0; }

if you wand the element below your header, give it a margin top with the same value of height of you header


#6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.