The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Making columns and filling in background
Zulaika
post May 28 2012, 05:44 PM
Post #1


Novice
**

Group: Members
Posts: 22
Joined: 8-June 11
Member No.: 14,725
How can I make split the content division into two columns? and how can I fill in the background with an image above the navigation bar?

index.html:
CODE

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="container">    
    
    <div id="header">
        <p><span id="header-title">Header</span></p>
        <p><span id="header-description">Description</span></p>
    </div>
    
    <div id="navigation">
        <div class="menu">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </div>
    </div>

    <div id="border-padding">

        <div id="content">

            <div id="post">
                <span id="post-title">Test Post</span>
                <p>Hello World!</p>
            </div>
            
        </div>
    
        <div id="sidebar">

            <p><span id="sidebar-title">Sidebar Title</span></p>
            <p>This is a sample content and <a href="#">link</a>.</p>
        
        </div>

    </div>    
    
        <div id="footer">
            <p>All right reserved.</p>
        </div>

</div>

</body>
</html>


style.css
CODE
a:link {
    color:#ff0000;
}
a:visited {
    color:#ff0000;
}
a:hover {
    color:#dd0000;
}
a:active {
    color:#dd0000;
}

body {
    font-family:arial,sans-serif;
    background-image:url('images/bg.jpg');
    background-repeat:no-repeat;

}

#container {
    background: #fff;
    border: solid #000 1px;
    border-radius: 5px;
    margin-left: 25%;
    margin-right: 25%;
}


#border-padding {
    padding-left: 5px;
    padding-right: 5px;
}

#header {
    text-align: center;
}
    
#header-title {
    font-size: 26px;
    font-weight: bold;
}

#header-desciption {
}

#navigation {
    background: #ff0000;
    display: block;
    float: left;
    margin: 0 auto 1em;
    width: 100%;
    border-top: solid #000 1px;
        border-bottom: solid #000 1px;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);


}
#navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
#navigation li {
    float: left;
    position: relative;
}
#navigation a {
    display: block;
    line-height: 2em;
    padding: 0 1em;
    text-decoration: none;
    color:#fff;
    border-right: solid #000 1px;
}
#navigation li:hover > a {
    background: #dd0000;
}
#navigation ul ul a:hover {
    background: #dd0000;
}
#navigation ul li:hover > ul {
    display: block;
}
#navigation li:active > a {
    background: #dd0000;
}

#content {

}

#post {

}

#post-title {
    font-weight: bold;
    font-size: 20;
}

#indent {
    padding-left:15px;
}

#sidebar {

}

#sidebar-title {
    font-weight: bold;
    font-size: 20;
}


#footer {
    text-align: center;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post May 29 2012, 04:52 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 3,547
Joined: 23-August 06
From: Europe
Member No.: 9
Have a look here: http://css-discuss.incutio.com/wiki/Two_Column_Layouts .


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th May 2013 - 05:51 AM
Invision Power Board © 2013  IPS, Inc.
Licensed to: HTMLHelp.com, LLC