Jump to content

Crikit

Members
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

 Content Type 

Posts posted by Crikit

    Help with positioning my "content" area.

    in CSS

    Posted

    I recently finished the course on codecademy.com and have gotten pretty far on my home page> I would like to know how to position my content div in between the right and left divs.

     

    [CSS]

    ---------

    * {
    font-family: Verdana;
    }
    div {
    border-radius: 5px;
    }
    body {
    background: url("http://bit.ly/1aYf0V3");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment:fixed;
    }
    #header {
    height: 50px;
    background-color: black;
    margin-bottom: 10px;
    }
    #footer {
    height: 50px;
    background-color: #69D2E7;
    /*Add your CSS here!*/
    clear:both;
    }
    #copyright {
    padding-top:10px;
    text-align:center;
    }
    ul {
    list-style-type:none;
    overflow:hidden;
    margin-left:25%;
    padding-top:10px;
    display:block;
    }
    a:link,a:visited {
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#66CCFF;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active {
    background-color:#000066;
    }
    li {
    float:left;
    }
    .left {
    height: 250px;
    width: 80px;
    background-color: black;
    float: left;
    margin-bottom: 10px;
    border:radius:20px;
    }
    .right {
    height: 250px;
    width: 270px;
    background-color: black;
    float: right;
    margin-bottom: 10px;
    border-radius:20px;
    }
    #footer {
    height: 50px;
    background-color: #69D2E7;
    /*Add your CSS here!*/
    clear:both;
    }
    #content {
    float:left;
    border:2px solid white;
    }
    #copyright {
    padding-top:10px;
    text-align:center;
    }
    #facebookbutton {
    width: 73px;
    height: 73px;
    border: 2px solid black;
    border-radius:15px;
    background-color: #99CCFF;
    margin:auto;
    margin-top:5px;
    }
    #youtube {
    width:73px;
    height:73px;
    border:2px solid black;
    border-radius:15px;
    background-color:#990000;
    margin:auto;
    margin-top:5px;
    }
    #twitter {
    width:73px;
    height:73px;
    border:2px solid black;
    border-radius:15px;
    background-color:white;
    margin:auto;
    margin-top:5px;
    }
    input[type=submit] {
    margin-left:100px;
    border:0;
    background-color: #66CCFF;
    margin-top:30px;
    padding:0;
    width:70px;
    height:30px;
    font-family:Verdana;
    }
    #messagebox {
    display:block;
    width:100%;
    margin-top:20px;
    }
    body {
    background: url("http://bit.ly/1aYf0V3");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment:fixed;
    }
    [/color]

    [color=#008000;]---------[/color]

    [color=#008000;]<!DOCTYPE html>[/color]
    [color=#008000;]<html>[/color]
    [color=#008000;]<head>[/color]
    [color=#008000;]<link type="text/css" rel="stylesheet" href="main.css"/>[/color]
    [color=#008000;]<title>Result</title>[/color]
    [color=#008000;]</head>[/color]
    [color=#008000;]<body>[/color]
    [color=#008000;]<div id="header">[/color]
    [color=#008000;]<ul>[/color]
    [color=#008000;] <li><a href="#home">Home</a></li>[/color]
    [color=#008000;] [/color]<li><a href="#news">News</a></li>
    [color=#008000;] <li><a href="#contact">Contact</a></li>[/color]
    [color=#008000;] <li><a href="#about">About</a></li>[/color]
    [color=#008000;] </ul>[/color]
    [color=#008000;]</div>[/color]
    [color=#008000;]<div class="left">[/color]
    [color=#008000;]<div ID="youtube">[/color]
    [color=#008000;]<img src="yt.png">[/color]
    [color=#008000;]</div>[/color]
    [color=#008000;]<div ID="facebookbutton">[/color]
    [color=#008000;]<img src="like.png">[/color]
    [color=#008000;]</div>[/color]
    [color=#008000;]<div ID="twitter">[/color]
    [color=#008000;]<img src="twitter.png">[/color]
    [color=#008000;]</div>[/color]
    [color=#008000;]</div>[/color]
    [color=#008000;]<div class="right">[/color]
    [color=#008000;]<div>[/color]
    [color=#008000;]<input type="email"[/color]
    [color=#008000;]placeholder="Your email">[/color]
    [color=#008000;]</div>[/color]
    [color=#008000;]<div ID="messagebox">[/color]
    [color=#008000;]<textarea name="Message" ROWS=7 COLS=30 ></textarea>[/color]
    [color=#008000;] <input type="submit">[/color]
    [color=#008000;]</div>[/color]
    [color=#008000;]</div>[/color]
    [color=#008000;]<div id="footer">[/color]
    [color=#008000;]<p ID="copyright">Copyright CrikitPlays 2013 </p>[/color]
    [color=#008000;]</div>[/color]
    [color=#008000;]<div ID="content">[/color]
    [color=#008000;]<h1>Hello World</h1>[/color]
    [color=#008000;]</div>[/color]
    [color=#008000;]</body>[/color]
    [color=#008000;]</html>[/color]

    post-168739-0-21186600-1385687102_thumb.jpg

×
×
  • Create New...