PDA

View Full Version : How to change my site's layout to fix layout?



darkmirror
02 Jul 2009, 12:29 PM
Hi everyone,

My Css code is this::

@charset "utf-8";
body {
background-color: #3E3E3E;
color: #FFF;
text-align: center;
}
#header {
text-align: center;
margin-bottom: 15px;
border: thin solid #666;
}
#nav {
text-align: center;
list-style-position: outside;
list-style-image: none;
list-style-type: none;
font-size: 12px;
letter-spacing: 3px;
}
#right {
float: left;
width: 60%;
text-align: center;
font-size: 12px;
letter-spacing: 3px;
word-spacing: 3px;
background-color: #FFF;
border-left-width: 50px;
border-left-style: groove;
border-left-color: #ABABAB;
margin-bottom: 10px;
margin-top: 10px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-top-color: #666;
border-right-color: #666;
border-bottom-color: #666;
}
#left {
float: right;
width: 26%;
margin-top: 10px;
border-right-width: 20px;
border-right-style: groove;
background-color: #FFF;
border-right-color: #ABABAB;
border-top-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #666;
border-bottom-color: #666;
border-left-color: #666;
font-size: 11px;
text-align: center;
letter-spacing: 2px;
}
#content {
color: #030303;
}
#footer {
clear: both;
text-align: center;
letter-spacing: 3px;
font-size: 11px;
margin-top: 10px;
border: thin solid #666;
}
#wrapper {
margin-top: auto;
margin-right: 150px;
margin-bottom: auto;
margin-left: 150px;
font-family: sans-serif, arial, verdana;
}
h2 {
font-variant: small-caps;
color: #FFF;
font-weight: lighter;
font-size: 30px;
margin: 0px;
padding: 0px;
letter-spacing: 4px;
}
a {
color: #A0CC38;
text-decoration:none

}
a:hover{
color: #EAFFBA;
text-decoration:none
}
h4 {
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

::-moz-selection{
background: #A0CC38;
color: #FFF;
}

::selection {
background: #A0CC38;
color: #FFF;
}

I want to change that to fix layout.
Here is my website::

http://tppcal.netii.net

When i make the browser smaller my website's layout become mass.
I need help!

Where do i need to change and what do i need to add?
Thanks for reading...