HTML / CSS help me PLEASE

EpicFooF · Apr 14, 2016

hi, I started learn how to use html and css and I need help now.

I want to have small space between them, and I want them to stick to the right side.
How do I do that?!?!

HTML:

<html>
<head>
    <title>epicFooF</title>
    <style type="text/css">
    body {
        background-color: #00cacc;
    }
    .menu li {
        list-style-type: none;
        float: left;
        width: 20%;
        position: relative;
        text-align: right;
        font-family: "Trebuchet MS";
        font-size: 30px;
        box-sizing: border-box;
    }
    .menu li {
        color: white;
    }
    </style>

</head>
<body>
    <div class="container">
         <ul class="menu">
             <li><a href="">Home</li>
             <li><a href="">About</li>
             <li><a href="">Portfolio</li>
             <li><a href="">Pricing</li>
             <li><a href="">Contact</li>
         </ul>
    </div>

Tnx for anyone who will try to help me !

TellTale · Apr 14, 2016

Thank you sir, I needed a laugh. :rofl:

EpicFooF · Apr 14, 2016

CaptainPrickles said:
Thank you sir, I needed a laugh. :rofl:

eh?[DOUBLEPOST=1460659112][/DOUBLEPOST]

epic_FooF said:
eh?

Laugh how many you want. I started today and I dont know much. Please get off

TomConn · Apr 14, 2016

Hmm... I don't know if you're already using the site, or know it but: http://www.w3schools.com/html/html_layout.asp is a great help to stuff like this.

Also - I've heard from one of my friends that you can usually re-use / copy nearly anything into the next line you write.
So it's just a guess but maybe you could take:

Code:

<body>
<div class="container">
<ul class="menu">
.menu li {
float: left;
}

Again: If it dosen't work - I'm not a genius on this, but I recommend you to maybe ask on the website I linked you to

EpicFooF · Apr 14, 2016

BurnMyNames said:
Hmm... I don't know if you're already using the site, or know it but: http://www.w3schools.com/html/html_layout.asp is a great help to stuff like this.

Also - I've heard from one of my friends that you can usually re-use / copy nearly anything into the next line you write.
So it's just a guess but maybe you could take:

Code:

<body> <div class="container"> <ul class="menu"> .menu li { float: left; }

Again: If it dosen't work - I'm not a genius on this, but I recommend you to maybe ask on the website I linked you to

I have already done that but it doesnt work, anyways, tnx and I will go to that website, tnx.

DarkDesigner · Apr 14, 2016

You can either use float: left/right/center; or use margin-left/right/bottom/top: 20px;

morganjp · Apr 14, 2016

Personally I find the best way is to display your list items as inline blocks. Although there a million methods of doing this, and there's no right or wrong way - so choose whatever suits you best and whichever you find the easiest to understand.

HTML:

<html>
<head>
    <title>epicFooF</title>
    <style type="text/css">
    body {
        background-color: #00cacc;
    }
    .menu li {
        display: inline-block; /* Display as inline block */
        list-style-type: none;
        width: 20%;
        height: 50px; /* Set a height for each block */
        margin-right: 30px; /* Spacing to the right in pixels */
        position: relative;
        text-align: right;
        font-family: "Trebuchet MS";
        font-size: 30px;
        box-sizing: border-box;
        color: white;
    }
    </style>

</head>
<body>
    <div class="container">
         <ul class="menu">
             <li><a href="">Home</li>
             <li><a href="">About</li>
             <li><a href="">Portfolio</li>
             <li><a href="">Pricing</li>
             <li><a href="">Contact</li>
         </ul>
    </div>

EpicFooF · Apr 14, 2016

ty guys

Mahan · Apr 18, 2016

You have width set to 20% which is the reason there is such a huge space between them. you should make width to be auto and add padding like padding: 10px 20px; This will put a reasonable space around each text.
and to align to the right just put float: right on the ul

EpicFooF · Apr 18, 2016

Mahan said:
You have width set to 20% which is the reason there is such a huge space between them. you should make width to be auto and add padding like padding: 10px 20px; This will put a reasonable space around each text.
and to align to the right just put float: right on the ul

ty

Mahan · Apr 18, 2016

epic_FooF said:
ty

No problem, send me a PM if you needed any other help.

HTML / CSS help me PLEASE

EpicFooF

Digital Artist

TellTale

Professional in everything

EpicFooF

Digital Artist

TomConn

A slimey guy

EpicFooF

Digital Artist

DarkDesigner

morganjp

Retired Staff Member

EpicFooF

Digital Artist

Mahan

EpicFooF

Digital Artist

Mahan