Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2007
    Posts
    77
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help with basic layout..

    Here is my simple header HTML

    My issues are, my unordered list sits of centre, it seems to have a margin still and if I made logo 400px I can't make my list 800px and have both sit inline in the container of 1200px.

    Why?


    Code:
    <div class="header">
        <div class="inner-container">
            <div class="airline-logo">Airline Name</div>
            <ul>
                <li>Aicraft</li>
                <li>Routes</li>
                <li>Marketing</li>
                <li>Operations</li>
            </ul>
        </div>
    </div>
    here is my CSS

    Code:
    .header{
        width: 100%;
        height:100px;
        background-color: rgb(54, 171, 203);
        position:fixed;
        left:0px;
        top:0px;
        box-shadow: 0px 1px 8px 5px #3b3b3b;
    }
    
    .header .inner-container{
        width: 1200px;
        margin: 0px auto;
    }
    
    .header ul{
        display: inline-block;
        position: relative;
        list-style: none;
        text-align: right;
        width: 800px;
        padding: 0px;
        margin: 0px;
        
    }
    
    .header li{
        display: inline-block;
        padding: 0px;
        margin: 0px;
        line-height: 100px;    
    }
    .airline-logo{
        width: 400px;
        display:inline-block;
        color: white;
        line-height: 100px;
        font-weight: 900;
        font-size: 38px;
        padding: 0px;
        margin: 0px;  
        
    }

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,955
    Thanks
    36
    Thanked 1,064 Times in 1,060 Posts
    You should know by now that using position means you have to use it again and again. I don't know why you need to remove the space around your top div, but I left the position in and showed you what you need to do to over come it. Put everything else in the 'main' did (mine).

    Using flex box is the fastest way to center things. Go read up on it. Also check out CSS Grid, it's made to code the web page. Better and easier than DIVs.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
    html {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
    *,*::before,*::after {
      box-sizing: inherit;
    }
    .header {
      width: 100%;
      height: 100px;
      background-color: rgb(54, 171, 203);
      padding-left: 358px;
      position: fixed;
      left: 0px;
      top: 0px;
      box-shadow: 0px 1px 8px 5px #3b3b3b;
    }
    h1 {
      width: 400px;
      display: inline-block;
      color: white;
      line-height: 100px;
      font-weight: 900;
      font-size: 38px;
      padding: 0px;
      margin: 0px;
    }
    .nav {
      position: relative;
      top: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .nav ul {
      list-style: none;
    }
    .nav li {
      display: inline-block;
      margin: 0 20px;
    }
    .main{
      position: relative;
      top: 100px;
    }
    </style>
    </head>
    
    <body>
    <div class="header"><h1>Airline Name</h1></div>
    
    <div class="nav">
        <ul>
            <li>Aircraft</li>
            <li>Routes</li>
            <li>Marketing</li>
            <li>Operations</li>
        </ul>
    </div>
    
    <div class="main">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident rerum enim doloribus aperiam voluptatibus, ullam nostrum sapiente natus quam nisi laboriosam sit mollitia quos culpa libero itaque dicta? Nisi perferendis neque obcaecati laudantium necessitatibus deleniti.
    </div>
    </body>
    </html>
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •