Thread: Creating CSS

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2013
    Posts
    1
    Rep Power
    0

    Creating CSS


    I am trying to make this image. I have already made the html but I am stuck in doing the css for it since I am a beginner. This is the image link:
    bit.ly/1ii5yAw
    <html>
    <head>
    <title>CSS task 2</title>
    <link href="createstyles.css" rel="stylesheet">
    </head>

    <body>

    <div class="header">
    <p>Content courtesy of</p>
    <h1>News from Malta</h1>
    <p>28 November 2007</p>
    </div>

    <!-- This is the panel containing GOOGLE adverts -->
    <div class="adspanel">
    <h1>Ads by GOOGLE</h1>
    <h2>Hotels in Malta</h2>
    <div class="ad">
    Book your hotel in Malta online.
    No reservation costs. Great rates!
    </div>

    <h2>Online Payment Malta</h2>
    <div class="ad">
    Fastest way to get your bills
    in shape! Log on to MyVodafone
    </div>

    <h2>Malta Online Book Shop</h2>
    <div class="ad">
    Thousands of Book Titles
    Brand New & Used Books
    </div>

    <h2>Living In Malta</h2>
    <div class="ad">
    property, info, photos and more!
    colourful, effortless online search
    </div>
    </div>

    <!-- This is the menu panel -->
    <div class="menupanel">
    <ul>
    <li>Current Affairs</li>
    <li>Politics</li>
    <li>Court</li>
    <li>Local News</li>
    <li>Malta & EU</li>
    <li>Opinion</li>
    <li>From the Media</li>
    <li>Business & Finance</li>
    </ul>
    </div>


    <!-- This is the news panel -->
    <div class="newspanel">
    <div class="newsitem">
    <div class="date">16 January 2012 12:450CET</div>
    <h1>Costa Concordia in “touristic navigation” at time of accident</h1>
    <div class="story">

    <p>The Costa Concordia cruise liner that ran aground with 4,234 people on board was effecting a ‘tourist manoeuvre’ at the time of the accident that left 5 people dead and around 15 still missing.
    Investigators are focusing on why the ship navigated so close to the dangerous reefs and rocks that jut off Giglio’s eastern coast, amid suspicions the captain may have ventured too close while carrying out a manoeuvre to entertain tourists on the island.</p>

    <p>The Captain did concede he was manoeuvring the ship in “touristic navigation” — implying a route that was a deviation from the norm and designed to entertain the tourists.</p>

    <p>“We were navigating approximately 300 meters from the rocks,” he told Mediaset television. “There should not have been such a rock. On the nautical chart it indicated that there was water deep below.”</p>

    <p>Costa captains have occasionally steered the ship near port and sounded the siren in a special salute. Such a nautical “fly-by” was staged last August, prompting the town’s mayor to send a note of thanks to the commander for the treat it provided tourists who flock to the island, local news portal GiglioNews.it reported.</p>

    </div>
    </div>
    </div>

    </body>


    I have also started doing some css but as I told you I am stuck with doing it for example I don't know how to create those headings on the right one after the other and the paragraphs beneath them.
    body {
    background-color: #FFFFCC;
    }

    h1 {
    color: #800000;
    }

    h2 {
    top:0px;
    right:0px;
    bottom:0px;
    position: absolute;
    font-size:11px;
    font-weight: bold;
    font-family: Arial;

    }

    div.menupanel {
    color: #800000;
    list-style: none;
    }

    div.menupanel ul {
    list-style-type: none;
    }
    div.menupanel li {
    border-bottom: 2px dashed red;
    }

    div.adspanel h1 {
    text-align: right;
    position: absolute;
    top: 0px;
    right: 0px;
    margin-top: 0px;
    margin-right: 2px;
    }
    Can someone help me in doing it? Thanks
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    253
    Rep Power
    87
    Hi there mgau0047,

    and a warm welcome to these forums.

    Check out the attachment to see a coding example.

    coothead
    Attached Files

IMN logo majestic logo threadwatch logo seochat tools logo