School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Welcome to Dream.In.Code
Become an Expert!

Join 300,398 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,607 people online right now. Registration is fast and FREE... Join Now!




split colour background

 

split colour background

S3lkies

1 Jul, 2009 - 05:09 PM
Post #1

D.I.C Head
**

Joined: 9 Jan, 2009
Posts: 168



Thanked: 2 times
My Contributions
well this is my LONG code for my website I am currently making
CODE
@charset "utf-8";
/* CSS Document */

* {margin:0;
padding:0;
}

body {
    background:#FF0000;
    font-family:"Trebuchet MS", Arial,Helvetica, sans-serif;
    font-size:13px;
    color:#99ADD3;
}

h1,h2,h3 {
        color:#345BA8;
}

h1 {font-size:152%;
}

h2 {
    font-size: 129%;
}

h3 {
    font-size: 100%;
    font-weight: bold;
}

p, blockquote, ul, ol {
    line-height: 180%;
}

blockquote, ul, ol {
    margin-left: 3em;
}

a {
    color: Black;
}

a:hover {
    text-decoration: none;
}

.boxed {
    margin: 10px;
    border: 3px solid #000000;
}

.boxed .title {
    padding: 5px 10px;
    background: #F7F7F7;
}

.boxed .content {
    padding: 10px;
    background:#FFFFFF;
}

/* Page */

#page {
    width: 740px;
    margin: 0 auto;
    background: url(images/img01.jpg) repeat-y left top;
}

#content {
    float: right;
    width: 533px;
    
}

#sidebar {
    float: left;
    width: 207px;
    background:#FFFFFF;
    border:3 pix solid #000000;
    

}


/* Logo */

#logo {
    width: 533px;
    height: 150px;
    background: url(images/KPLOGO.jpg) no-repeat left top;
}

#logo h1 {
    padding: 80px 0 0 19px;
    letter-spacing: -1px;
    font-size: 197%;
    font-weight: normal;
}

#logo h2 {
    padding: 0px 0 0 20px;
    font-size: 85%;
}

#logo a {
    text-decoration: none;
    color: #FFFFFF;
}

/* Menu */

#menu {
    padding: 20px 0;
}

/* News */

#news {
}

#news .title {
    padding: 15px;
}

#news .content {
    padding: 0 15px;
    font-size: 85%;
}

#news ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

#news li {
    margin-bottom: 15px;
}

/* Footer */

#footer {
    padding: 5px 0;
    background: #3F6EB6;
    text-align: center;
    font-size: 77%;
    color: #FFFFFF;
}

#footer a {
    color: #FFFFFF;
}


But I would like to know how I can make a back ground half and half - I want it to be half blue (top half) and black (bottom half) how could I get around doing this?

Thanks in advance [=.

and also a small (About 3 pix ) white line in between the two colours - Its the business's colours.

Thanks again anime1.gif

User is offlineProfile CardPM
+Quote Post


hadi_php

RE: Split Colour Background

1 Jul, 2009 - 07:19 PM
Post #2

D.I.C Regular
***

Joined: 23 Aug, 2008
Posts: 259



Thanked: 5 times
My Contributions
change this image size height 1024 or as long u want...

http://i40.tinypic.com/167o9pf.jpg

then use this is css

CODE
body
    {    background-image:url("half.jpg");
        background-repeat:repeat-x;
    
    }


it will look like http://i43.tinypic.com/2lkr1bd.jpg

This post has been edited by hadi_php: 1 Jul, 2009 - 07:22 PM
User is offlineProfile CardPM
+Quote Post

S3lkies

RE: Split Colour Background

1 Jul, 2009 - 07:41 PM
Post #3

D.I.C Head
**

Joined: 9 Jan, 2009
Posts: 168



Thanked: 2 times
My Contributions
wow thanks very much anime1.gif.!!!
User is offlineProfile CardPM
+Quote Post

hadi_php

RE: Split Colour Background

1 Jul, 2009 - 08:07 PM
Post #4

D.I.C Regular
***

Joined: 23 Aug, 2008
Posts: 259



Thanked: 5 times
My Contributions
you are most welcome.........
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/7/09 10:11PM

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month