CSS positioning link in a column - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Position

Description

CSS positioning link in a column

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
body {<!--from  w  w w . ja  v a2 s. co m-->
   font-family:Arial,Helvetica,sans-serif;
   font-size:large;
   width:auto;
   margin-left:auto;
   margin-right:auto;
   background-color:Chartreuse;
   color:yellow;
}

div#allcontent {
   width:1025px;
   height:769px;
   margin-left:auto;
   margin-right:auto;
   background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png');
   background-repeat:no-repeat;
}

a {
   text-decoration:none;
}

div#menu {
   float:left;
}

div#header {
   padding-top:51px;
   padding-left:51px;
   text-align:left;
}

div#footer {
   clear:both;
   bottom:0;
   height:51px;
   text-align:center;
   font-size:86%;
   color:blue;
}

div#copy {
   font-size:51%;
}

div#phone {
   font-size:86%;
   margin-left:41px;
   float:left;
}

div#email {
   margin-right:41px;
   font-size:86%;
   float:right;
}

a.footlink:link {
   color:pink;
}

a.footlink:visited {
   color:OrangeRed;
}

a.footlink:hover {
   color:grey;
}

a:link {
   color:BlueViolet;
}

a:hover {
   color:Chartreuse;
}

a:visited {
   color:yellow;
}
</style> 
 </head> 
 <body> 
  <div id="allcontent"> 
   <div id="header"> 
    <img src="https://www.java2s.com/style/demo/Opera.png" alt="xxxxxxxxx"> 
    <br < div> 
    <div id="menu"> 
     <a href="home" alt="Go to home page">Lore</a> 
     <br> 
     <br> 
     <a href="weddings" alt="Go to home page">Lorem ip</a> 
     <br> 
     <br> 
     <a href="portraits" alt="Go to home page">Lorem ips</a> 
     <br> 
     <br> 
     <a href="blog" alt="Go to home page">Lore</a> 
     <br> 
     <br> 
     <a href="contact" alt="Contact Us">Lorem i</a> 
    </div> 
   </div> 
   <div id="footer"> 
    <div id="phone">
      Lorem ipsum dol 
    </div> 
    <div id="email">
      Lorem ipsum dolor sit amet, cons 
    </div> 
    <br> 
    <div id="copy">
      Lorem ipsum dolor sit am 
     <br>Lorem ipsum dolor sit am 
     <a class="footlink" href="http://xxxxxxxxxxx.co.uk" target="_blank">Lorem i</a> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials