PDA

View Full Version : helping me with html and css



march2006
Jun 18th, 2009, 02:21 AM
I am new to creating webpage with css before i dont i just use frontpage
but not look nice
here frontpage http://www.chuavienquang.org

now im using adobe dreamweaver cs4

i download one of the template

http://www.chuavienquang.org/test.html but doesnt line up for me
could someone help me
plus how can i link the left column into the middle page?

here is css code

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
margin: 0;
padding: 0;
background: #0F5B96 url(images/img01.gif) repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #A4E4F5;
}

input, textarea {
background: #A4E4F5;
border: 15px solid #FFFFFF;
font: bold 13px Arial, Helvetica, sans-serif;
color: #0F5B96;
}

h1, h2, h3, p, ol, ul {
margin-top: 0;
}

h1, h2, h3 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

h1, h2 {
text-transform: lowercase;
font-weight: normal;
}

h1 {
letter-spacing: -2px;
font-size: 2.4em;
}

h2 {
letter-spacing: -1px;
font-size: 1.8em;
}

p, ol, ul {
margin-bottom: 1.5em;
line-height: 150%;
}

a {
color: #A4E4F5;
}

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

img.left {
float: left;
margin: 4px 20px 0 0;
}

img.right {
float: left;
margin: 4px 0 0 20px;
}

hr {
display: none;
}

/* Header */

#header {
height: 150px;
background: url(images/img02.jpg) no-repeat center top;
text-transform: lowercase;
}

#logo {
float: left;
}

#logo h1, #logo p {
float: left;
margin: 0;
line-height: normal;
}

#logo h1 {
padding: 47px 0 0 20px;
font-size: 3em;
color: #62D6F5;
}

#logo p {
padding: 69px 0 0 7px;
letter-spacing: -1px;
font-size: 1.4em;
color: #199DD2;
}

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

#menu {
float: right;
}

#menu ul {
margin: 0;
padding: 60px 20px 0 0;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
float: left;
width: 120px;
height: 56px;
margin: 0 0 0 2px;
padding: 9px 0 0 0;
background: #1B97CE url(images/img03.gif) no-repeat;
text-decoration: none;
text-align: center;
letter-spacing: -1px;
font-size: 1.1em;
font-weight: bold;
color: #000000;
}

#menu a:hover, #menu .current_page_item a {
background: #26BADF url(images/img04.gif) no-repeat;
}

/* Page */

#page {
width: 980px;
margin: 0 auto;
}

/* Content */

#content {
float: left;
width: 530px;
padding: 0 0 0 25px;
}

.post {
margin-bottom: 15px;
background: #1EB5DD url(images/img05.gif) no-repeat;
color: #0A416B;
}

.post a {
color: #A4E4F5;
}

.post a:hover {
color: #FFFFFF;
}

.post .title {
margin: 0;
padding: 10px 50px 30px 30px;
}

.post .title a {
text-decoration: none;
color: #0A416B;
}

.post .byline {
margin: 0;
padding: 20px 300px;
}

.post .entry {
padding: 20px 30px 10px 30px;
}

.post .links {
margin: 0;
padding: 10px 30px 35px 30px;
background: url(images/img06.gif) repeat-x left bottom;
border-top: 1px solid #2872A6;
}

.post .links a {
padding-left: 10px;
background: url(images/img08.gif) no-repeat left center;
text-decoration: none;
font-weight: bold;
color: #0A416B;
}


.post .links a:hover {
color: #FFFFFF;
}

/* Sidebars */

.sidebar {
float: left;
width: 160px;
}

.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}

.sidebar li {
}

.sidebar li ul {
}

.sidebar li li {
padding: 6px 0 6px 10px;
background: url(images/img08.gif) no-repeat 0 12px;
border-bottom: 1px solid #2872A6;
}

.sidebar li li a {
text-decoration: none;
color: #C9ECF5;
}

.sidebar li li a:hover {
color: #FFFFFF;
}

.sidebar li h2 {
padding-top: 20px;
color: #FFFFFF;
}

/* Left Sidebar */

#leftbar {
}

/* Right Sidebar */

#rightbar {
padding: 0 0 0 25px;
}

/* Footer */

#footer {
clear: both;
padding: 40px 0;
background: #083253;
}

#footer p {
text-align: center;
font-size: smaller;
color: #0F5B96;
}

#footer a {
color: #0F5B96;

march2006
Jun 24th, 2009, 04:50 AM
can someone help me please
thanks

Actinia
Jun 24th, 2009, 05:12 PM
It is not at all clear what you are trying to achieve here. My guess is that you want something like the test.html page. This looks OK to me, apart from the broad empty band near the top. Your index page uses frames. Do you want to use frames? Are they really necessary. You could probably achieve what you want without them.

Could you show us what you are aiming for, possibly as a graphic sketch?

John