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

Welcome to Dream.In.Code
Become an Expert!

Join 307,009 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 2,045 people online right now. Registration is fast and FREE... Join Now!




New to CSS - attempting to make a simple template

 

New to CSS - attempting to make a simple template

bridgeuk

24 Oct, 2009 - 06:34 AM
Post #1

New D.I.C Head
*

Joined: 21 Oct, 2009
Posts: 42

Hi there,

I'm new to CSS and I am attempting to make a simple layout for a website. as it stands my left navigation bar seems to resize but the text doesnt, this just appears outside the box. Overall I would like my layout to fit the browser but at the moment everytime I resize the brower everything seems to jumble all over the place. any help would be greatly appricaited.

CODE

<style type = "text/css">
    em        {background-color: #0099CC;
            color: white }
    h1        {font-family: Verdana, Arial, Helvetica, sans-serif }
    h2        {font-family: Verdana, Arial, Helvetica, sans-serif }
    p        {font-family: Verdana, Arial, Helvetica, sans-serif }
    p        {font-size: 10pt}
    .style1 {color:blue}
    
    span    { color: blue;
            font-size: .6em;
            height: 1em }
    .super    { position: relative;
            top: 1ex }
    .sub    {position: relative;
            bottom: 1ex }
    .shift1 {position: relative;
            left: -1ex }
    .shiftr    {position: relative;
            right: -1ex }
    
    a:hover {text-decoration: underline;
                color: blue; }
                
    body {background-color:#83C8E2;
            background-position: center
            background-repeat: no-repeat;
            background-attachment: fixed }
    
    div {background-color: #FFFFFF;
        margin-bottom: 2em }
        
    .navigation {float: left; margin: 0.2em; padding: 0.2em; text-align: center; width: 15%; }
    }
    
    #links {
        margin: 0px
        padding: 0px
    }
    
    #links li {
        
        line height: 1.1;
        list-style-type: none;
        display: block;
        padding-top: 5px;
        margin-bottom: 2px;
        margin-left: 10px;
        padding-left: 15[x;
        padding-bottom: 5px;
    }
    
    
        div {background-color: #0099CC;
            margin-bottom: 2em }
    
    .header {
            width: 100%;
            position:static;
            text-align:center;
    }
    
    .content {float:right; margin 0.2em; padding: 0.2em; text-align:center; width: 80%;}
    }
        

            
        

</style>


@charset "utf-8";
/* CSS Document */


User is offlineProfile CardPM
+Quote Post


markhazlett9

RE: New To CSS - Attempting To Make A Simple Template

24 Oct, 2009 - 08:00 AM
Post #2

Coding is a lifestyle
Group Icon

Joined: 12 Jul, 2008
Posts: 1,463



Thanked: 48 times
Dream Kudos: 25
My Contributions
What you're attempting to do is what's called a liquid website. The art of making a website look the same no matter how large the browser was enlarged. This is an extremely difficult task, especially in IE. You may want to take a look at this...
http://www.netmag.co.uk/zine/develop-css/c...e-liquid-layout

That should give you some major clues into changing your CSS. You have quite a few changes to make if you want a liquid layout.

Hope this helps

Cheers
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/21/09 07:08AM

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