Jump to content

lodott1

Members
  • Posts

    5
  • Joined

  • Last visited

Posts posted by lodott1

  1. Hi guys.

     

    I'm having the strangest problem right now, and I really need you help to figure it out. The footer stays nicely at the bottom of the page, but the content is not maxing out all the way down to the footer. The content of the left floater decides the height. If there is little content, it stays high on the page, and if I fill it up, it causes the whole page to overflow (scroll), not just the left floater. Here's what I wish to achieve:

     

    1. Navbar on top.

    2. Content with no margin to the navbar.

    3. Footer just below the content, no margin.

    4. Show the whole page on the screen without the need to scroll.

    5. No change in the navbar-content-footer connection when zooming.

    6. Keep the footer to the bottom, and keeping content from bleeding into the footer.

     

    Thanks for your time!

     

    HTML

    <!DOCTYPE html><html><head>	<title>NAME</title>    <link href="css/Style3.css" medio="screen" rel="stylesheet" type="text/css"/>    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,300,700&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>        <!-- check if screen is no more than 480: if( screen.width <= 480 ) {    location.href = '/mobile.html';}-->    </style></head><style>    body    {        background-color: blue;        background-repeat: no-repeat;        background-attachment: fixed;        background-position: left;        background-size: cover;    }    li#nameofmine a p{    border-bottom: 1px solid white;    font-weight: 700;}    li#nameofmine:hover > a p{    color: black;    border-bottom: 1px solid black;}</style><body>    <div id="wrap">        <div id="main">    <nav>    <ul>        <li id="nameofmine"><a href="#"><p>NAME</p></a></li>        <li><a href="#"><p>Read</p></a></li>        <li><a href="#"><p>Listen</p></a>            <ul>            <li><a href="#"><p>Videos</p></a></li>            <li><a href="#"><p>Recordings</p></a></li>            </ul></li>        <li><a href="#"><p>Look</p></a></li>        <li><a href="#"><p>Contact</p></a></li>        </ul>    </nav>    <div id="flags">     <a href="index2.html"><div id="flag1"><h4 style="margin-top: 10%;">1</h4></div></a>        <a href="index.html"><div id="flag2"><h4 style="margin-top: 10%;">2</h4></div></a>    </div><div id="leftbar">    <div id="news"><h3>NEWS</h3><p>Website is under construction. More will follow. Soon.</p></div>    </div>            </div></div>    <footer>        <p>© Copyright 2014 NAME. All rights reserved.</p>        </footer>    </body></html>

    CSS

    html {height: 100%}body{    font-family: 'open sans', 'courier';	font-size: 16px;	color: white;    text-align: center;    margin: 0;    font-weight: 100;    height: 100%;}body a{    color: white;    text-decoration: none;}h1{    font-size: 5em;	line-height: 0.2em;	color: white;}h3{    font-size: 18px;    font-weight: 100;    color: white;    text-align: center;    text-decoration: underline;}h2{    font-size: 20px;    font-weight: 100;    color: white;}#wrap{    min-height: 100%;}#main{    overflow: auto;    padding-bottom: 3em;    }#flags{    height: 2em;	width: 6em;    position: absolute;    right: 0%;    top: 0%;    font-size: 16px;}#flag1{    height: 2em;	width: 49%;    float: right;    border-left: 1px solid white;    background-size: cover;    background-position: center;    background-color: red;}#flag2{    height: 2em;	width: 49%;    float: left;    background-size: cover;    background-position: center;    background-color: green;}#flag1:hover{    opacity: 0.5;}#flag2:hover{    opacity: 0.5;}nav ul {    position: relative;    width: 100%;    margin-top: 0;    margin-bottom: 0;    padding: 0;    list-style: none;    color: white;    font-family: 'Open Sans';    font-size: 16;    background-color: rgba(255, 255, 255, 0.3); }nav ul li{    text-align: center;    display: inline-block;    position: relative;}nav ul a{    display: inline-block;    float: none;    padding: 1em 3em;    letter-spacing: 1px;    color: #eaebed;}nav ul li:hover > a{    color: black;}li#nameofmine{    text-align: center;    display: inline-block;  }li#nameofmine a p{    display: inline-block;    float: none;    font-weight: 700;    color: white;}li#nameofmine:hover > a p{    color: black;}*html nav ul li a:hover/* IE6 */{    color: #000;}nav ul li:hover > ul {    display: block;}/* Sub-menu */nav ul ul {    list-style: none;    margin: 0;    padding: 0;    display: none;    position: absolute;    left: 0;    top: 100%;    width: 100%;    z-index: 99;}nav ul ul li {    float: none;    margin: 0;    display: block;}nav ul ul li:last-child {     box-shadow: none;}nav ul ul a {        padding: 0.2em 1em;    height: auto;    line-height: 1;    display: block;    white-space: nowrap;    float: none;    text-transform: none;}*html nav ul ul a { /* IE6 */       height: 10px;    width: 150px;}*:first-child+html nav ul ul a { /* IE7 */        height: 10px;    width: 150px;}nav ul ul a:hover {   }nav ul ul li:first-child a {    }nav ul ul li:first-child a:after{    content: '';    position: absolute;    left: 45%;    top: -10px;    width: 0;    height: 0;    border-left: 6px solid transparent;    border-right: 6px solid transparent;    border-bottom: 10px solid white;}nav ul ul li:first-child a:hover:after {    border-bottom-color: black; }nav ul ul li:last-child a {    }/* Clear floated elements */nav ul:after {    visibility: hidden;    display: block;    font-size: 0;    content: " ";    clear: both;    height: 0;}* html #menu             { zoom: 1; } /* IE6 */*:first-child+html #menu { zoom: 1; } /* IE7 */#leftbar{    float: left;    left: 0;    top: 0;    width: 20%;    height: 100%;}#news{    height: 100%;    width: 98%;    margin-left: 2%;    border-left: 0px;    border-top: 0px;    border-right: 1px;    border-bottom: 0px;    border-color: white;    border-style: solid;    font-weight: 100;    text-align: left;    overflow: auto;}footer{    height: 3em;    width: 100%;    background-color: rgba(255, 255, 255, 0.3);     text-align: center;    clear: both;    position: relative;    margin-top: -4em;}
  2. Solved it myself! Turns out the sinner was my padding in:

    nav ul ul a {        padding: 1em 5em;    height: auto;    line-height: 1;    display: block;    white-space: nowrap;    float: none;    text-transform: none;}

    I switched to padding: 1em 3em;

    Turns out with padding at 5em, it pushed the "recording" to the right.

  3. Hi there w3schools!

     

    My name is Megard and I'm looking forward to hang out here with you, learning code and asking questions :) I'm a complete beginner with HTML and CSS, but it's getting better already, and I guess I'm pretty hooked.

  4. Hi wc3schools forum members! I have a slight issue with my newly created navbar. I can't seem to get the text on the dropdown menu centered. I want the second block in the dropdown menu, "recordings", to have centered text, so that it doesn't just align with the previous block "videos". Any suggestions? Here is my css and html so far: css:

    nav ul {    width: 80%;    margin-left: auto;    margin-right: auto;    margin-top: 0;    padding: 0;    list-style: none;      background-color: #7b7b7b;    background-image: linear-gradient(#a7a7a7, #505050);    border-bottom-left-radius: 10px;    color: white;    font-family: 'Open Sans';    font-size: 14}nav ul li{    float: left;    display: inline-block;    position: relative;}nav ul a{    display: inline-table;    float: left;    padding: 1em 5em;    border-radius: 10px;}nav ul li:hover > a{    background-color: #a0bbcc;} *html nav ul li a:hover/* IE6 */{    color: #fafafa;} nav ul li:hover > ul {    display: block;} /* Sub-menu */nav ul ul {    list-style: none;    margin: 0;    padding: 0;    display: none;    position: absolute;    left: 0;    top: 100%;    width: 100%;    z-index: 99;           background-image: linear-gradient(#bfbf88, #7e7e5a);      -moz-border-radius: 10px;    border-radius: 10px;} nav ul ul li {    float: none;    margin: 0;    display: block; } nav ul ul li:last-child {     box-shadow: none;} nav ul ul a {        padding: 1em 5em;    height: auto;    line-height: 1;    display: block;    white-space: nowrap;    float: none;    text-transform: none;} *html nav ul ul a { /* IE6 */       height: 10px;    width: 150px;} *:first-child+html nav ul ul a { /* IE7 */        height: 10px;    width: 150px;} nav ul ul a:hover {    background-color: #0186ba;    background-image: linear-gradient(#04acec, #0186ba);} nav ul ul li:first-child a /* This controls the first dropdown menu size*/{    border-radius: 5px 5px 0 0;} nav ul ul li:first-child a:after /* This controls the triangle arrow */{    content: '';    position: absolute;    left: 30px;    top: -8px;    width: 0;    height: 0;    border-left: 5px solid transparent;    border-right: 5px solid transparent;    border-bottom: 8px solid #bfbf88;} nav ul ul li:first-child a:hover:after {    border-bottom-color: #04acec; } nav ul ul li:last-child a {    border-radius: 0 0 5px 5px;} /* Clear floated elements */nav ul:after {    visibility: hidden;    display: block;    font-size: 0;    content: " ";    clear: both;    height: 0;}* html #menu             { zoom: 1; } /* IE6 */*:first-child+html #menu { zoom: 1; } /* IE7 */ 

    html:

    <nav>    <ul>        <li><a href="#">HOME</a></li>        <li><a href="#">Read</a></li>        <li><a href="#">Listen</a>            <ul>            <li><a href="#">Videos</a></li>            <li><a href="#">Recordings</a></li>            </ul></li>        <li><a href="#">Contact</a></li>        </ul>    </nav>
×
×
  • Create New...