Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
Like Tree4Likes
  • 1 Post By rakeshshrs
  • 1 Post By Vapr_Arts
  • 1 Post By Cryt1c
  • 1 Post By Vapr_Arts

Thread: Need some help with the footer and general css/html review

  1. #1
    Junior Member
    Join Date
    Dec 2015
    Posts
    2
    Member #
    52720
    Liked
    1 times

    Lightbulb Need some help with the footer and general css/html review

    Hi there

    I am new to this forum and also relatively new to webdesign/-development.
    You have a really great community here and so I joined you to ask for some help and maybe later when I have learned my stuff to give something back to you guys.

    I am trying to create a template for wordpress and so i started out by designing a simple HTML/CSS layout for my personal site where I am going to run a blog and show the stuff that I do. It's a learning by doing project.

    I wanted to ask you if you could give me an advice for my footer.
    The whole structure is inside a container which size is fixed at 960px. I tried to give the footer 100% width however it overflows the container and I have no clue why it is doing this.

    Your help for this case and also general advice about my HTML and CSS code is much appreciated!

    HTML Code:
    <body>
        <div class="container">
    		<nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Design</a></li>
                    <li><a href="#">Video</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                </ul>
                <img src="img/logo.png" alt="dp Logo"/>
            </nav>
    		<section>
                content
    		</section>
    		<footer>
                footer
    		</footer>
    	</div>	
      </body>
    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    
    .container {
    	width: 960px;
    	margin: auto;
    }
    
    nav {
    	position: relative;
    	min-height: 200px;
    	margin: 5px 0;
    }
    
    ul {
    	list-style-type: none;
    	border-bottom: solid;
    	display: block;
    	position: absolute;
    	bottom: 100px;
    }
    
    nav li {
    	float: left;
    }
    
    nav a {
     	margin: 35px;
    	font-family: "Arial";
    	font-size: 2em;
    	text-decoration: none;
    	color: #000;
    }
    
    nav a:hover {
    	color: #fff;
    	background-color: #000;
    }
    
    nav a:active {
    	color: #000000;
    	background-color: #ffffff;
    }
    
    
    nav img {
    	height: 200px;
    	right: 0px;
    	position: absolute;
    	background: transparent;
    }
    
    nav img:hover {
    	-webkit-animation:spin 2s linear;
    	-moz-animation:spin 2s linear;
    	animation:spin 2s linear;
    }
    
    @-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
    @keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }
    
    
    /* Content */
    section {
    	display: block;
    }
    
    /* Footer */
    footer {
    	display: block;
    	border-top: solid;
    	position: fixed;
    	bottom: 0px;
    	width: 100%;
    }

  2.  

  3. #2
    Junior Member
    Join Date
    Dec 2015
    Posts
    11
    Member #
    52700
    Liked
    1 times
    I think it is because you have used fixed position in footer. Could you try width:inherit and check if it works?
    Cryt1c likes this.

  4. #3
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Quote Originally Posted by Cryt1c View Post
    Hi there

    I am new to this forum and also relatively new to webdesign/-development.
    You have a really great community here and so I joined you to ask for some help and maybe later when I have learned my stuff to give something back to you guys.

    I am trying to create a template for wordpress and so i started out by designing a simple HTML/CSS layout for my personal site where I am going to run a blog and show the stuff that I do. It's a learning by doing project.

    I wanted to ask you if you could give me an advice for my footer.
    The whole structure is inside a container which size is fixed at 960px. I tried to give the footer 100% width however it overflows the container and I have no clue why it is doing this.

    Your help for this case and also general advice about my HTML and CSS code is much appreciated!

    HTML Code:
    <body>
        <div class="container">
    <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Design</a></li>
                    <li><a href="#">Video</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                </ul>
                <img src="img/logo.png" alt="dp Logo"/>
            </nav>
    <section>
                content
    </section>
    <footer>
                footer
    </footer>
    </div>
      </body>
    Code:
    * {
    margin: 0;
    padding: 0;
    }
    
    .container {
    width: 960px;
    margin: auto;
    }
    
    nav {
    position: relative;
    min-height: 200px;
    margin: 5px 0;
    }
    
    ul {
    list-style-type: none;
    border-bottom: solid;
    display: block;
    position: absolute;
    bottom: 100px;
    }
    
    nav li {
    float: left;
    }
    
    nav a {
     margin: 35px;
    font-family: "Arial";
    font-size: 2em;
    text-decoration: none;
    color: #000;
    }
    
    nav a:hover {
    color: #fff;
    background-color: #000;
    }
    
    nav a:active {
    color: #000000;
    background-color: #ffffff;
    }
    
    
    nav img {
    height: 200px;
    right: 0px;
    position: absolute;
    background: transparent;
    }
    
    nav img:hover {
    -webkit-animation:spin 2s linear;
    -moz-animation:spin 2s linear;
    animation:spin 2s linear;
    }
    
    @-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
    @keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }
    
    
    /* Content */
    section {
    display: block;
    }
    
    /* Footer */
    footer {
    display: block;
    border-top: solid;
    position: fixed;
    bottom: 0px;
    width: 100%;
    }
    Throw your code up on JSFiddle or CodePen and I will have a look tomorrow. The reason I say on there is because I will not have access to my computer but can still view those from my tablet.


    Sent from my iPhone using Tapatalk
    Cryt1c likes this.

  5. #4
    Junior Member
    Join Date
    Dec 2015
    Posts
    2
    Member #
    52720
    Liked
    1 times
    Thanks @rakeshshrs for your advice, the inherited footer width worked fine!

    Thank you @Vapr_Arts I have posted the code on codepen. Thx for this tipp, i did not know about this site yet.

    CodePen - CodePen
    Last edited by Cryt1c; Dec 24th, 2015 at 03:17 PM.
    rakeshshrs likes this.

  6. #5
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Quote Originally Posted by Cryt1c View Post
    Thanks @rakeshshrs for your advice, the inherited footer width worked fine!

    Thank you @Vapr_Arts I have posted the code on codepen. Thx for this tipp, i did not know about this site yet.

    CodePen - CodePen
    Its your "position:fixed;" thats on your footer. Its putting the footer 0px from the bottom of the screen. If you get rid of that it fits perfectly within your container and once you add content it will be pushed to the bottom.


    Sent from my iPhone using Tapatalk
    Cryt1c likes this.

  7. #6
    Junior Member
    Join Date
    Dec 2015
    Posts
    11
    Member #
    52700
    Liked
    1 times
    I am glad it worked. And thanks for my first like here.

  8. #7
    Junior Member
    Join Date
    Jan 2016
    Posts
    3
    Member #
    52929
    Good post man

  9. #8
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Quote Originally Posted by rainbowgod View Post
    Good post man
    Whats good about it? What did you find helpful/interesting? I noticed this is your second time posting the "good post" type of irrelevant comments.


    Sent from my iPhone using Tapatalk


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:27 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com