Navigation Position

I’m trying to position my navigation above “Ms. Dolly” but I’m unable to. I’m still a beginner at coding so, it’s probably something so simple and small I’m missing but hoping someone will be kind enough to help.

Main site: http://msdollly.altervista.org/Main/index.html

    <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="http://msdollly.altervista.org/Main/stylesheet.css" />
      <meta charset="utf-8">
      <meta name="generator" content="AlterVista - Editor HTML"/>
      <title></title>
    </head>
    <body>

    <div id="header">
    <div class="title">Ms. Dolly</div>
    <div>

    <div id="container">



    </div>

    <center><ul>
      <li><a class="active" href="#home">Home</a></li>
      <li><a href="#news">Characters</a></li>
      <li><a href="#contact">Worlds</a></li>
      
    </ul></center>

    </body>
    </html>


    body{
    background-image: url("http://i67.tinypic.com/qnmf83.png");
    margin: 0;
    padding: 0;
    }

    #header{
    width: 100%;
    height: 140px;
    background-color: #fff;
    position: absolute;
    left:-1px;
    top:-2px;
    }

    #container{
    background-color: #fff;
    width: 800px;
    height: 800px;
    margin: 0px;
    padding: 5px;
    position: absolute;
    left:425px;
    top: 140px;
    border-style: dashed;
    border-width: 2px;
    border-color: #ffcacb;
    -webkit-box-shadow: 0px 10px 5px -10px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 10px 5px -10px rgba(0,0,0,0.75);
    box-shadow: 0px 10px 5px -10px rgba(0,0,0,0.75);

    }

    .title{
    width: 360px;
    height: 100px;
    position: absolute;
    left:650px;
    top:20px;
    margin: 0px;
    font-family: 'Amatic SC', cursive;
    font-size: 110px;
    color: #ffe3e2;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #fff;
    }

    li {
        float: center;
        
    }

    li a {
        display: block;
        color: #ffcacb;
    font-family: arial;
    font-size: 13px;
    letter-spacing: 2px;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li a:hover:not(.active) {
        background-color: #111;
    }

    .active {
        background-color: #ffe2e2;
    }

Hi, Darling-Odyssey. Welcome to the forum.

HTML and CSS work together. We cannot tell anything about “Ms. Dolly” from the CSS that you posted because there is no HTML for the CSS to style and no content such as “Ms. Dolly”.

Please read our posting guidelines and pay special attention to the areas that talk about describing problems and posting code:
Forum Posting Basics

There are at least three workable ways to provide code to us:

(1) Create a “working page”, one that starts with <doctype HTML> (or whatever doctype you are using) and ends with </html> and contains the least amount of HTML and CSS to demonstrate the problem. To include the code in a post, put three backticks on a line by themselves before the code and three more backticks on a line by themselves after the code to preserve your formatting. Like this:
```
all of your code here
```
Keep in mind that relative paths to images or other resources are unlikely to work on our computers unless those resources are included in your post, so full URLs are usually better. Foreground images should have sizes included in the width="" and height="" attributes.

(2) You could create a CodePen that demonstrates the problem.

(3) You could post a URL to a test web site so we can see the full code and the problem it is causing.

In all cases, be sure to describe the issue clearly and explain what you expect to see versus what is being demonstrated. Annotated screen shots and drawings may help.

Thank you.

Thank you…I think I did it right this time…

That’s much better, but…

(1) Malwarebytes is blocking 78.129.205.38 as a Malicious Website, so I am not going there.

(2) In the interest of completeness, would you please add the doctype and <head> information to the code in your post as requested?

When you copy the code that you posted into a file and open the file in your browser, does it demonstrate the problem?

In the meanwhile, I’ll experiment with the code that you have posted, but no promises. You have not yet described the problem nor how you wish to position “Ms Dolly”.

This is a portion of what I see in my browser after adding some missing close </div> tags.

Just so ya know:

(1) The <center> tag is and has been obsolete for quite some time. It should be deleted from the HTML. block elements can be centered properly with {margin:0 auto}.

(2) {position:absolute} is not generally used for positioning major portions of a web page. It is most commonly used in small doses to position elements relative to a parent container which as {position:relative} assigned. I am deleting all appearances of {position:absolute} from the CSS and attempting to create a normal flow to the layout.

(3) {float:center} does not exist. “center” is not a float value. It is always a good idea to verify the existence or proper spelling of properties and values with which you are unfamiliar. Sometimes, even experience coders forget some values and benefit from a handy reference. You should have bookmarks to several reference sites to make look-ups faster and easier.

I would really like to see a drawing of your design intent… how you wish the page to appear.

1 Like

Make sure not to place any HTML code above this, which should be the first line in your HTML:

<!DOCTYPE html>

I didn’t notice when you updated the code in your post. It’s good that @Ralphm noticed the stray line of code over the doctype and mentioned it. (His reply to you was my “heads up” that you had edited your code.) It could indeed cause a browser to render a page improperly. In the future, please do not assume that people go back and read previous posts. In this case, I had scrolled further down your code and did not notice the addition at the top. A note from you would have helped call my attention to the update sooner.

Give this a look and see if it helps.

I did not follow your HTML very closely and made many changes in the CSS, but I think the end result has the potential of looking close to the pattern that you’ve shown. Because you have not offered a drawing, this has to be considered a best guess, a place to start.

I noticed that the background pattern is actually one large image so I used a paint program and cut a 29px x 32px rectangle out of the image and allowed it to repeat. Doing this reduced the image “weight” from 215K to 4K. That’s quite a savings for mobile users especially.

This is a “working page”. It starts with the doctype and ends with </html> and contains everything required to render the page on your computer.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MsDolly-Darling-Odyssey3</title>
<!--
https://www.sitepoint.com/community/t/navigation-position/218076
Darling-Odyssey
Mar 13,2016 3:34 PM
-->
    <style type="text/css">
html {
    box-sizing:border-box;
}
*, *::before, *::after {
    box-sizing:inherit;
}
body {
    background-image:url("http://i67.tinypic.com/qnmf83.png");  /* gnmf83.png vs images/tablecloth.png = 215K vs 4K */
    background-position:50% 0;
    background-repeat:repeat;
    margin:0;
    padding:0;
}
nav {
    padding:0;
    margin:0 auto;
}
main, footer {
    max-width:900px;
    padding:0;
    margin:0 auto;
}
ul {
    list-style:none;
    background-color:rgba(255,255,255,.8);
    padding:0;
    margin:0;
}
li a {
    display:block;
    color:#f99;  /* #ffcacb; */
    font-family:arial;
    font-size:13px;
    letter-spacing:2px;
    text-align:center;
    padding:14px 16px;
    text-decoration:none;
}
li a:hover:not(.active) {
    background-color:rgba(0,0,0,.5);
}
.active {
    background-color:rgba(255,191,191,.5);  /* #ffe2e2 */
}
main,footer {
    padding:0 2%;
}
.container {
/*    outline:2px dashed #f00;  /* #ffcacb */
    background-color:rgba(255,255,255,.8);  /* TEST bgColor */
    -webkit-box-shadow:0px 10px 5px -10px rgba(0,0,0,0.75);
    -moz-box-shadow:0px 10px 5px -10px rgba(0,0,0,0.75);
    box-shadow:0px 10px 5px -10px rgba(0,0,0,0.75);
    position:relative;  /* raises the box-shadow over the footer */
    padding:.5em;
}
h1 {
    color:#ffd3d2;  /* #ffc3c2 */
    background-color:rgba(255,159,159,0);  /* TEST bgColor */
    font-size: 110px;
    font-family: 'Amatic SC', cursive;
    text-align:center;
    outline:1px dashed magenta;
    margin:0;
}
.container p {
    text-align:left;
}
footer p {
    text-align:center;
    background-color:rgba(255,255,255,0);
    padding:1em;
    margin:0;
}
    </style>
</head>
<body>

<div class="outer">
    <nav>
        <ul>
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#news">Characters</a></li>
            <li><a href="#contact">Worlds</a></li>
        </ul>
    </nav>
    <main>
        <div class="container">
            <h1>Ms. Dolly</h1>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
        </div>
    </main>
    <footer>
        <p>footer</p>
    </footer>
</div>

</body>
</html>

Please let me know if this is on track with your design intent… or not.

PS. Be sure to un-maximize your browser so you can grab the edge of the window and narrow it. You should see that the content will fit a very narrow window.

Yeah, sorry, I should have noted that the code block was malformed, and that the Markdown just needed to be updated. That’s how the code was from the beginning, but it wasn’t visible.

Thanks for explaining about the markup and markdown. (Sounds like retail sales.)

@Darling-Odyssey, sorry for my misunderstanding about the cause of the missing code as stated in post #6. My bad.

1 Like

@Darling-Odyssey,

Here is one more attempt that I believe is closer to your original layout without using absolute positioning or fixed dimensions. This one employs a “sticky footer” to keep the page the full height of the browser window. If you do not want the footer space, just delete it. The full page height still works but the bottom box shadow will be lost below the bottom of the page. Variations abound.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MsDolly-Darling-Odyssey5</title>
<!--
https://www.sitepoint.com/community/t/navigation-position/218076
Darling-Odyssey
Mar 13,2016 3:34 PM
-->
    <style type="text/css">
html {
    box-sizing:border-box;
}
*, *::before, *::after {
    box-sizing:inherit;
}
html,body {
    height:100%;  /* needed for sticky footer */
}
body {
    background-image:url("http://i67.tinypic.com/qnmf83.png");  /* gnmf83.png vs images/tablecloth.png = 215K vs 4K */
    background-position:50% 0;
    background-repeat:repeat;
    margin:0;
    padding:0;
}
.outer {
    display:table;
    width:100%;
    max-width:800px;
    height:100%;  /* needed for sticky footer */
    padding:0;
    margin:0 auto;
}
nav, main, footer {display:table-row;}
nav, footer {height:1px;}  /* needed for sticky footer */
ul {
    list-style:none;
    background-color:rgba(255,255,255,.8);
    padding:0;
    margin:0;
    box-shadow:800px 0px 0px rgba(255,255,255,.8), -800px 0px 0px rgba(255,255,255,.8);
}
li a {
    display:block;
    color:#f99;  /* #ffcacb; */
    font-family:arial;
    font-size:13px;
    letter-spacing:2px;
    text-align:center;
    padding:14px 16px;
    text-decoration:none;
}
li a:hover:not(.active) {
    background-color:rgba(0,0,0,.5);
    box-shadow:800px 0px 0px rgba(0,0,0,.5), -800px 0px 0px rgba(0,0,0,.5);
}
.active {
    background-color:rgba(255,191,191,.5);  /* #ffe2e2 */
    box-shadow:800px 0px 0px rgba(255,191,191,.5), -800px 0px 0px rgba(255,191,191,.5);
}
main {
    background-color:rgba(255,255,255,.8);
    -webkit-box-shadow:0px 10px 5px -10px rgba(0,0,0,0.75);
    -moz-box-shadow:0px 10px 5px -10px rgba(0,0,0,0.75);
    box-shadow:0px 10px 5px -10px rgba(0,0,0,0.75);
    position:relative;  /* raises the box-shadow over the footer */
}
.container {
    padding:5px;
}
h1 {
    color:#ffc3c2;
    background-color:rgba(255,159,159,0);  /* TEST bgColor */
    font-size: 110px;
    font-family: 'Amatic SC', cursive;
    text-align:center;
    margin:0;
    outline:2px dashed #f00;  /* #ffcacb */
}
.container p {
    text-align:left;
}
footer p {
    text-align:center;
    background-color:rgba(255,255,255,.8);
    padding:1em;
    margin:0;
}
    </style>
</head>
<body>

<div class="outer">
    <nav>
        <ul>
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#news">Characters</a></li>
            <li><a href="#contact">Worlds</a></li>
        </ul>
    </nav>
    <main>
        <div class="container">
            <h1>Ms. Dolly</h1>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
            <p>Content goes here.</p>
        </div>
    </main>
    <footer>
        <p>I am a sticky footer.</p>
    </footer>
</div>

</body>
</html>
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.