Question 43001 in Html Question posted in
Some basic documentation can be found here.

How to put the heading "MyRide" along with the navigation bar? – Html

I tried several options, im still learning html and css. I was unable to find answer here, so i thougt to add this. Help is much appreciated.

this is my html code

<!DOCTYPE html>
<html>
    <head>
        <title>MyRide|Home</title>
        <link rel="stylesheet" href="../css/new.css"/>
    </head>
    
    <body>
        <div class="cover-image heading">
            <header>
                <img src="../images/headerLogo.png" alt="logo" width="25%" height="10%">MyRide
            </header>
            <nav>
                <ul id="ul1">
                    <li class="navbar"><a href="./home.html" class="li1">Home</a></li>
                    <li class="navbar"><a href="./fleet.html"class="li1">Fleet</a></li>
                    <li class="navbar"><a href="./services.html"class="li1">Services</a></li>
                    <li class="navbar"><a href="./about.html"class="li1">About</a></li>
                    <li class="navbar"><a href="./contact.html"class="li1">Contact Us</a></li>
                </ul>
            </nav>              
        </div>
    </body>
</html>

and this is the css code

*{
    margin:0;
    padding: 0;
}
body{
    font-family: Arial, Helvetica, sans-serif;
    color:darkgray;
    flex: 10;
}

.cover-image{
    background-image: url(../images/headercover.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
    background-color: black;
    
    padding-top: 1%;
    padding-bottom: 1%;
}

.heading{
    color: red;
    font-size: 90px;
}

a.li1{
    text-decoration: none;
    color: gold;
}

header,nav{
    margin: 0;
}

.navbar{
    padding-right: 5px;
    display: inline;
    font-size: 28px;
    margin:0;
}
#ul1{
    list-style: none;
    display: inline-block;
    list-style-type: none;
    align-content: end;
    margin-top: 0;
    padding: 0;
}

this is what i see,
green line is how i want it to be

it seems like the UL is the one makingg the new line after the heading but i couldn’t find a way to remove it.

Tags:

2

Answers


  1. 0

    Probably the easiest way is to use flexbox. Makes positioning really easy. Look into display:flex, align-items: and justify-content:

    *{
    margin:0;
    padding: 0;
}
body{
    font-family: Arial, Helvetica, sans-serif;
    color:darkgray;
    flex: 10;
}

.cover-image{
    background-image: url(../images/headercover.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
    background-color: black;
    
    padding-top: 1%;
    padding-bottom: 1%;
    display:flex;
    justify-content:space-between;
}

.heading{
    color: red;
    font-size: 30px;
}

a.li1{
    text-decoration: none;
    color: gold;
}

header,nav{
    margin: 0;
}

.navbar{
    padding-right: 5px;
    display: inline;
    font-size: 16px;
    margin:0;
}
#ul1{
    list-style: none;
    display: inline-block;
    list-style-type: none;
    align-content: end;
    margin-top: 0;
    padding: 0;
}

header{
display:flex;
align-items:center;
}
    <!DOCTYPE html>
<html>
    <head>
        <title>MyRide|Home</title>
        <link rel="stylesheet" href="../css/new.css"/>
    </head>
    
    <body>
        <div class="cover-image heading">
            <header>
                <img src="http:\placeholder.com/50" alt="logo" width="25%" height="10%">MyRide
            </header>
            <nav>
                <ul id="ul1">
                    <li class="navbar"><a href="./home.html" class="li1">Home</a></li>
                    <li class="navbar"><a href="./fleet.html"class="li1">Fleet</a></li>
                    <li class="navbar"><a href="./services.html"class="li1">Services</a></li>
                    <li class="navbar"><a href="./about.html"class="li1">About</a></li>
                    <li class="navbar"><a href="./contact.html"class="li1">Contact Us</a></li>
                </ul>
            </nav>              
        </div>
    </body>
</html>
    Login or Signup to reply.
  2. 0

    enter image description here

    If you intended something like this, it can be achived with flexbox trinity. Generally, child container placing relationships within parent container is managed by flexbox and grid, quite easily by the way!

    .cover-image {
  background-image: url(../images/headercover.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: center;
  background-color: black;
  padding-top: 1%;
  padding-bottom: 1%;
  /*flexbox trinity*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search