Footer having error...

Question

Deep Modi 6 Posting Whiz

9 Years Ago

Hello sir,
I am trying to create the FOoter...

My Work (Code):

<html>
<body>
<div id='footerdiv' style="height:400px;background-color:#091d22">
    <div id ="Socialbar" style="height:50px; background-color:#0c3239">
    </div>

    <div id="ftNavBar">
        <div class="ftNav" id="ft_summary">
           <script type="text/javascript" src="http://ji.revolvermaps.com/2/1.js?i=8yc9f8z4elm&amp;s=350&amp;m=8&amp;v=true&amp;r=false&amp;b=000000&amp;n=false&amp;c=ff0000" async="async"></script>

        <div class="ftNav" id="xsoftware"><h1>Software-1</h1>
            <ul>
                <li><a href="">Advance Notepad</a></li>
                <li><a href="">X Content</a></li>
                <li><a href="">y Content</a></li>
                <li><a href="">z Content</a></li>
            </ul> 
        </div>   
        <div class="ftNav" id="ysoftware"><h1>Software-2</h1>
            <ul>
                <li><a href="">Advance Notepad</a></li>
                <li><a href="">X Content</a></li>
                <li><a href="">y Content</a></li>
                <li><a href="">z Content</a></li>
            </ul> 
            <div class="ftNav" id="zsoftware"><h1>Software-3</h1>
            <ul>
                <li><a href="">Advance Notepad</a></li>
                <li><a href="">X Content</a></li>
                <li><a href="">y Content</a></li>
                <li><a href="">z Content</a></li>
            </ul> 
        </div>   
        </div>   
        </div> 

    </div>   


</div>
</body>
</html>

but now what the problem is that I have to insert the Nav bar in proper padding, Example the script is the Earth Views. and rest all are the software content as per title.
I hav to put all those software in DIV Footer ID. but as after globe all goes DOWNWARD.
As You can see in the Below Img.

And it should be like

web-design

5 Contributors
9 Replies
146 Views
1 Week Discussion Span
Latest Post 9 Years Ago Latest Post by Christel_1

diafol

9 Years Ago

Hello sir,

You've just alienated our female members.

pritaeas 2,194 ¯\_(ツ)_/¯

9 Years Ago

Have you tried to use float on your ftNav divs?

Christel_1 15 Newbie Poster

9 Years Ago

use the new html5 elements like this
html code

<!DOCTYPE html>
<html>
<head>
    <title>Sample HTML5 Layout</title>
    <link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
    <header>
        <h1>This is page heading</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>
    <article>
        <h1>This is article heading</h1>
        <p>
            Hello world! Hello world! Hello world!
            Hello world! Hello world! Hello world!
            Hello world! Hello world! Hello world!
        </p>
    </article>
    <aside>
        <figure>
            <img src="images/laptop.png" height="100px" width="100px" />
            <figcaption>Figure caption goes here</figcaption>
        </figure>
        <p>
            Hello world! Hello world! Hello world!
            Hello world! Hello world! Hello world!
        </p>
    </aside>
    <section>
        <h1>This is a section heading</h1>
        <p>
            Hello world! Hello world! Hello world!
            Hello world! Hello world! Hello world!
            Hello world! Hello world! Hello world!
        </p>
    </section>
    <footer>
        <hr />
        Copyright (C) 2013. All rights reserved.
    </footer>
</body>
</html>

css code

article
{
    padding:5px;
    border:dotted 3px #ff006e;
    margin-top:5px;
}

header
{
    padding:0px;
    text-align:center;
}

aside
{
    margin-top:5px;
    background-color:#f0eaea;
    padding:5px;
    text-align:center;
    font-style:italic;
    border:double 3px #b200ff;
}

section
{
    padding:5px;
    border:dashed 3px #0026ff;
    margin-top:5px;
}

footer
{
    padding:5px;
    text-align:center;
    font-weight:bold;
}

nav
{
    text-align:center;
}
ul li
{
    display:inline;
    padding-left:5px;
    padding-right:5px;
    text-align:left;
    font-size:16px;
    font-weight:bold;
}

diafol commented: Glad you weren't alienated! +15

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Deep Modi 6 Posting Whiz · Answer 1 · 2015-01-28T07:54:55+00:00

Deep Modi 6 Posting Whiz

9 Years Ago

ok, Sorry for that.
Hello Sir/Madam :p

Edited 9 Years Ago by Deep Modi

Deep Modi 6 Posting Whiz · Answer 2 · 2015-01-30T08:11:30+00:00

Anyone plz help me, i m stuck here from a week...

Deep Modi 6 Posting Whiz · Answer 3 · 2015-02-02T07:11:30+00:00

I am noob in this, I just google and do all.
Am i correct to use Float="right" on here
Line no:11
<div class="ftNav" id="xsoftware" float="right"><h1>Software-1</h1>
not working...
Plz help me here...

minitauros 151 Junior Poster Featured Poster · Answer 4 · 2015-02-02T08:19:10+00:00

No no, "float" is a style property, you'd have to put it in your CSS ;).

So, instead of float="right", use style="float: right;" or put a float: right; in your stylesheet for the element it needs to be applied to.

minitauros 151 Junior Poster Featured Poster · Answer 5 · 2015-02-02T08:19:56+00:00

You might want to check out some tutorials on using the float CSS rule by the way :p.

Deep Modi 6 Posting Whiz · Answer 6 · 2015-02-03T18:22:22+00:00

hey thanks your code somewhat work but its not showing the proper paddings between them...

:(

EDITED CODE:

<html>
    <body>
    <footer>
    <div id='footerdiv' style="height:400px;background-color:#091d22">
        <div id ="Socialbar" style="height:50px; background-color:#0c3239">
        </div>

        <div id="ftNavBar" style="float: left">
            <div class="ftNav" id="ft_summary">
               <script type="text/javascript" src="http://ji.revolvermaps.com/2/1.js?i=8yc9f8z4elm&amp;s=350&amp;m=8&amp;v=true&amp;r=false&amp;b=000000&amp;n=false&amp;c=ff0000" async="async"></script>
            <div class="shlink" id="shortcut" style="float: right;">
            <div class="ftNav" id="xsoftware"><h1>Software-1</h1>
                <ul>
                    <li><a href="">Advance Notepad</a></li>
                    <li><a href="">X Content</a></li>
                    <li><a href="">y Content</a></li>
                    <li><a href="">z Content</a></li>
                </ul> 
            </div>   
            <div class="ftNav" id="ysoftware"><h1>Software-2</h1>
                <ul>
                    <li><a href="">Advance Notepad</a></li>
                    <li><a href="">X Content</a></li>
                    <li><a href="">y Content</a></li>
                    <li><a href="">z Content</a></li>
                </ul> 
                <div class="ftNav" id="zsoftware"><h1>Software-3</h1>
                <ul>
                    <li><a href="">Advance Notepad</a></li>
                    <li><a href="">X Content</a></li>
                    <li><a href="">y Content</a></li>
                    <li><a href="">z Content</a></li>
                </ul> 
            </div>   
            </div>   
            </div> 
        </div>
        </div>   


    </div>
    </footer>
    </body>
    </html>