Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help! Footer Issues

    I need help with the footer for a basic code. I can't seem to figure out how to make the vertical mini-line below and centering the links on the bottom of the footer. I just can't seem to get it right. Thank you so much for reading through this and helping me out. Thank you!

    This is what I have got thus far:
    [CODE]
    <!DOCTYPE HTML>
    <html>

    <head>
    <title>Verkefni 6 - Uppsetning vefsíđu</title>
    <link href="verkefni6.css" rel="stylesheet" />
    </head>
    <body>
    <div id="container">

    <header>
    <h1>Halldór Laxness</h1>
    </header>

    <section>
    <img class="right" src="laxness.jpg" width="90"/>
    <p>Halldór (Kiljan) Laxness (fćddur Halldór Guđjónsson 23. apríl 1902, dáinn 8. febrúar 1998) var íslenskur rithöfundur og skáld, jafnan talinn einn helsti íslenski rithöfundurinn á 20. öld.</p>
    <p>Halldór var sonur Sigríđar Halldórsdóttur (fćdd 1872) og Guđjóns Helgasonar (fćddur 1870). Fyrstu ćviárin bjó hann í Reykjavík en flutti ađ Laxnesi í Mosfellssveit áriđ 1905. Hann tók fljótt ađ lesa bćkur og skrifa sögur, og ţegar hann var 14 ára gamall fékk hann sína fyrstu grein birta í Morgunblađinu undir nafninu H.G. Ekki löngu síđar birti hann grein í sama blađi undir sínu eigin nafni og var sú grein um gamla klukku.</p>
    <p><img class="left" src="laxness2.jpg" width="120"/> Á ferli sínum skrifađi Halldór 51 bók, margar blađagreinar, samdi ljóđ, leikrit og fleira. Halldór hlaut Nóbelsverđlaun í bókmenntum áriđ 1955. Hann var tvíkvćntur og eignađist fjögur börn. Frá árinu 1945 átti Halldór fast heimili á Gljúfrasteini í Mosfellssveit. Ađ frumkvćđi Davíđs Oddsonar, forsćtisráđherra keypti ríkissjóđur Gljúfrastein af Auđi Laxness, ekkju Halldórs, og opnađi ţar safn til minningar um skáldiđ haustiđ 2004. Auđur gaf safninu innbú ţeirra hjóna.</p>

    </section>

    <footer>
    <p class="left"><a href="http://www.gljufrasteinn.is">Gljúfrasteinn - Hús skáldsins</a></p>
    <p class="right"><a href="http://www.mbl.is/serefni/laxness">Sérefni Morgunblađsins um Halldór Laxness</a></p>
    </footer>

    </div>

    </body>
    </html>
    [CODE]

    [CODE]
    body
    {
    background-color: GoldenRod;
    }

    h1
    {
    font-family: Courier New;
    font-style:italic;
    color: saddlebrown;
    font-size: 45px;
    text-align: center;
    }


    #container
    {
    position: relative;
    width:800px;
    border: solid;
    margin: auto;
    height: 650px;
    padding: 10px;
    background-color: white;
    border-color: Saddlebrown;
    box-shadow: chocolate 10px 5px 5px;
    border-radius: 20px;
    }

    header
    {
    width:600px;
    margin: auto;
    border-bottom: SaddleBrown solid;
    }

    section
    {
    margin: 50px;
    }

    footer
    {
    width:600px
    height: 100px;
    margin: center;
    clear: both;
    border-top: SaddleBrown solid;
    }


    .left
    {
    float: left;
    margin: 5px;
    }

    .right
    {
    float: right;
    margin: 5px;
    }


    p
    {
    font-family: Courier New;
    color: saddlebrown;
    font-size: 16px;
    text-align: justify;
    }

    a
    {
    color: saddlebrown;
    }

    img
    {
    margin: 5px 5px 5px 5px;
    }
    [CODE]


    In the attachments there is a Print Screen shot of what the coding is supposed to look like. I really appreciate the help. Thank you very much!
    Attached Thumbnails Attached Thumbnails Help! Footer Issues-verkefni6_utlit.jpg  

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jezebel,
    Look at it this way -
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    	<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    		/* HTML5 tags */
    		header, section, footer,
    		aside, nav, article, figure {display: block;}
    #container {
    	width: 800px;
    	margin: 0 auto;
    	padding: 400px 0 0;;
    	background: #999;
    }
    footer {
    	width: 700px;
    	margin: 0 auto;
    	overflow: auto;
    	border-top: 2px solid #fff;
    }
    	footer a {
    		padding: 10px 0;
    		display: block;
    		text-align: center;
    		color: #fff;
    		font-size: 0.8em;
    	}
    		footer a.left {
    			width: 348px;
    			margin: 2px 0 0;
    			float: left;
    			border-right: 2px solid #fff;
    		}
    		footer a.right {overflow: auto;}
    
    </style>
    </head>
    <body>
        <div id="container">		
    		<footer>
    			<a href="http://www.gljufrasteinn.is" class="left">Gljúfrasteinn - Hús skáldsins</a>
    			<a href="http://www.mbl.is/serefni/laxness" class="right">Sérefni Morgunblađsins um Halldór Laxness</a>
    		</footer>
        <!--end container--></div>
    </body>
    </html>
    Based on this 2-column demo
    and this bit of HTML5 implementation
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •