html/css help

EpicFooF · May 13, 2016

Hello guys!
I am building a website for training, so I need some help.

HTML:

<html>
    <head>
        <link href="css/style.css" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Raleway:400,600,300,900' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <header>
            <h1>epicFooF</h1>
            <nav>
                <a href="#">About</a>
                <a href="#">Services</a>
                <a href="#">Portfolio</a>
                <a href="#">Contact</a>
            </nav>
        </header>
    </body>
</html>

Code:

header {
    height: 100px;
    background: #0099FF;
   
}


nav a {
    line-height: 100px;
    font-size: 30px;
    font-family: 'Raleway', sans-serif;
    text-decoration: none;
    float: right;
    color: black;
    padding-left: 30px;
    padding-right: 30px;
    display: inline-block;
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
}

nav a:hover {
    transition: .3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    background: #00C6FF;
    font-size: 33px;
}



header h1 {
    line-height: 100px;
    color: white;
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    margin-left: 50px;
    display: inline-block;
    font-size: 50px;
}



*{
    padding: 0px;
    margin: 0px;
}

nav {
    margin-right: 50px;
}

As you can see in the picture, the nav and the h1 are not in the same line.
So, I want the - header h1 to be on the same line with the nav.

Please help me

Candy · May 13, 2016

Use a <li> to line the nav items

EpicFooF · May 13, 2016

Candyyn said:
Use a <li> to line the nav items

I prefer that <nav>.
It is much easier

Candy · May 13, 2016

no...

HTML:

<nav>
               <li> <a href="#">About</a> </li>
               <li> <a href="#">Services</a> </li>
               <li>  <a href="#">Portfolio</a> </li>
               <li> <a href="#">Contact</a> </li>
</nav>

kila · May 13, 2016

It's a simple Fix, your <h1> and the <nav> are both by default "display: block;" that's why it makes them stack on top of each other. Try this, it should fix.

Code:

header h1 {
    line-height: 100px;
    color: white;
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    margin-left: 50px;
    display: inline-block;
    font-size: 50px;
    float: left; /* Add float:left; to h1 */
}

Code:

nav {
    margin-right: 50px;
    float:right; /* Add float: right; in nav */
}

Here's a fiddle
https://jsfiddle.net/f5w80u1v/

mrpetfreak · May 13, 2016

epicFooF said:
I prefer that <nav>.
It is much easier

He wants you doing it like this:

HTML:

            <nav>
                <li><a href="#">About</a></li>
               <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </nav>

Edit: He was faster xd

EpicFooF · May 13, 2016

killer_x10 said:
It's a simple Fix, your <h1> and the <nav> are both by default "display: block;" that's why it makes them stack on top of each other. Try this, it should fix.

Code:

header h1 { line-height: 100px; color: white; font-family: 'Raleway', sans-serif; font-weight: 900; margin-left: 50px; display: inline-block; font-size: 50px; float: left; /* Add float:left; to h1 */ }

Code:

nav { margin-right: 50px; float:right; /* Add float: right; in nav */ }

Here's a fiddle
https://jsfiddle.net/f5w80u1v/

OMG THANK YOU THANK YOU THANK YOU THANK YOU

mrpetfreak · May 13, 2016

epicFooF said:
OMG THANK YOU THANK YOU THANK YOU THANK YOU

If you ever need to design a website faster I recommend to use Bootstrap

kila · May 13, 2016

epicFooF said:
OMG THANK YOU THANK YOU THANK YOU THANK YOU

No problem, but your HTML code is wrong aswell, do this:

HTML:

<nav>
    <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li> <a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
    </ul>
</nav>

EpicFooF · May 13, 2016

killer_x10 said:
No problem, but your HTML code is wrong aswell, do this:

HTML:

<nav> <ul> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li> <a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav>

What is the different?[DOUBLEPOST=1463156586][/DOUBLEPOST]

mrpetfreak said:
If you ever need to design a website faster I recommend to use Bootstrap

kk

kila · May 13, 2016

mrpetfreak said:
If you ever need to design a website faster I recommend to use Bootstrap

I'm sure that he just started out and I would recommend learning this way first and then learn a Framework, after he has learned this way, it will be much easier to pick up a Framework.

mrpetfreak · May 13, 2016

killer_x10 said:
I'm sure that he just started out and I would recommend learning this way first and then learn a Framework, after he has learned this way, it will be much easier to pick up a Framework.

Yeah it's good/important to know both. But in my opinion it's easier to use Bootstrap...

EpicFooF · May 13, 2016

killer_x10 said:
No problem, but your HTML code is wrong aswell, do this:

HTML:

<nav> <ul> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li> <a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav>

What is the different?

mrpetfreak · May 13, 2016

epicFooF said:
What is the different?

<li> is for ordered lists.

kila · May 13, 2016

mrpetfreak said:
Yeah it's good/important to know both. But in my opinion it's easier to use Bootstrap...

I use Bootstrap as well, it's easier, responsive and cross-browser compatible. But like I said before, learning Vanilla html & css first will greatly help him pickup any Framework in the Future and also if someone doesn't want Bootstrap in their Site, he's basically screwed because he didn't learn the vanilla way.

epicFooF said:
What is the different?

The Difference is that, that's how it's done, every Navbar is done like this and doing this way instead of this:

Candyyn said:

HTML:

<nav>
               <li> <a href="#">About</a> </li>
               <li> <a href="#">Services</a> </li>
               <li>  <a href="#">Portfolio</a> </li>
               <li> <a href="#">Contact</a> </li>
</nav>

your Code is approved by W3. Also don't forget to add this to your Code:

Code:

nav > ul {
    list-style: none;
}

nav > ul > li {
    float: left;
}

EDIT[DOUBLEPOST=1463157281][/DOUBLEPOST]

mrpetfreak said:
<li> is for ordered lists.

<li> is for list item, it is used within Ordered Lists (<ol>) and Unordered Lists (<ul>)
<ol> is for Ordered list
<ul> is for Unordered list

mrpetfreak · May 13, 2016

killer_x10 said:
I use Bootstrap as well, it's easier, responsive and cross-browser compatible. But like I said before, learning Vanilla html & css first will greatly help him pickup any Framework in the Future and also if someone doesn't want Bootstrap in their Site, he's basically screwed because he didn't learn the vanilla way.

The Difference is that, that's how it's done, every Navbar is done like this and doing this way instead of this:

your Code is approved by W3. Also don't forget to add this to your Code:

Code:

nav > ul { list-style: none; } nav > ul > li { float: left; }

EDIT[DOUBLEPOST=1463157281][/DOUBLEPOST]
<li> is for list item, it is used within Ordered Lists (<ol>) and Unordered Lists (<ul>)
<ol> is for Ordered list
<ul> is for Unordered list

Yes and his navbar code doesn't contain the <ul></ul> part haha.

html/css help

EpicFooF

Digital Artist

Candy

Candy | Web Developer

EpicFooF

Digital Artist

Candy

Candy | Web Developer

kila

Front-end & Back-end Web Developer

mrpetfreak

EpicFooF

Digital Artist

mrpetfreak

kila

Front-end & Back-end Web Developer

EpicFooF

Digital Artist

kila

Front-end & Back-end Web Developer

mrpetfreak

EpicFooF

Digital Artist

mrpetfreak

kila

Front-end & Back-end Web Developer

mrpetfreak