HTML/CSS Cannot get UL to change into block

Question

0.00/5 (No votes)

See more:

HTML

<!DOCTYPE html>

<html>

<head>
    <title>Secret of Beauty</title>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>

</head>

<body>

<header>
    <nav>
        <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Location</a></li>
            </ul>
        </nav>


        <h1>Secret of Beauty</h1>

    </header>

<div class="row">
    <div class="col">Cool</div>
    <div class="col">Cool</div>
    <div class="col">Cool</div>
</div>

<footer>&#169;Secret Of Beauty</footer>


</body>
</html>

INDEX FILE

CSS

body {
background-image:url("../images/header-preview.jpg");
max-width: 100%;
max-height:100%;
margin:0;
}

header {
    background:;
}

header h1 {
    margin:0;
}

nav ul{
    margin:0;
}

nav ul li {
    display: inline-block;
    list-style-type: none;
}

CSS file

Have them both Saved in separate files such as main.css in a css folder html.index no folder just outside of the main.css folder and images folder with one image within there next to the html.index folder MY MAIN CONCERN THOUGH

How do I get my UL files do display in a block as in horizontally if anyone notices what I did wrong please let me know have been fiddling with this for 4 hours now and its super frustrating THANK YOU!!!

Posted 4-Mar-15 13:05pm

Member 11495876

Updated 4-Mar-15 16:27pm

George Jonsson

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 4-Mar-15 19:37pm

UL is already a block element. What's the problem?
—SA

Member 11495876 4-Mar-15 20:42pm

When I open up the index leading to a site, it does not put it into block code nor does it remove the bulletin points I believe there is a problem in the code some where but I am not positive if thats not it, it must be a problem with the way I saved the file but idk

Peter Leow 4-Mar-15 22:14pm

You code looks fine. Try this. Remove the link tag, copy the CSS code to your HTML file in the <style></style> section. Test it and what do you get?

Member 11495876 4-Mar-15 23:04pm

So copy nav ul li {
display: inline-block;
list-style-type: none;

Into the HTML file?

and instead of the {} use <style></style>? Im sorry I am very new to this but I am learning as I go. Also replacing the entire <link rel="stylesheet" type="text/css" href="css/main.css"/> code?\

Or do you mean in my files where html.index and .css are inside of the folders?

Peter Leow 5-Mar-15 0:25am

<head>
<title>Secret of Beauty</title>
<style>
paste the css code here
</style>
</head>

refer: http://www.w3schools.com/css/css_howto.asp

Member 11495876 5-Mar-15 2:45am

<!DOCTYPE html>

<html>

<head>
<title>Secret of Beauty</title>

<style>
nav ul li{
display: inline-block;
list-style-type: none;}
</style>

</head>

also messed with the style a bit nothings working :(

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)