I'm brand new to web dev and css, and I'm looking for a little guidance. I want to have a floating sidebar on the home page and I don't know how to start. Attached is a css file for my site to give a reference.
Can anyone point me in the right direction.
Rusty
body {
background-color: #D0CEB7;
background-image: url(assets/TF_pbg.jpg);
background-repeat: repeat-x;
padding: 0;
margin-top: 180px;
margin-right: 10%;
margin-left: 10%;
}
#logoDiv {
position: absolute;
left: 0px;
top: 0px;
}
#navDiv {
position: absolute;
left: 0px;
top: 122px;
}
#maincell, #secondcell, #sidebar {
line-height: 1.5;
vertical-align: top;
padding-top: 0px;
padding-bottom: 0px;
}
#maincell {
font-size: 14px;
border-right: 2px dotted #859587;
}
#secondcell {
font-size: 14px;
border-right: 2px dotted #859587;
}
#sidebar {
font-size: 12px;
width: 30%;
}td, p, div, ul {
font-family: Georgia, "Times New Roman", Times, serif;
}
h1 {
font-size: 24px;
margin: 0px;
}
h2 {
font-size: 16px;
margin: 36px 0 0 0;
}
#sidebar h2 {
color: #F7F1DF;
margin: 12px 0 6px 0;
}
#sidebar ul {
/*/*/padding: 0 0 0 1em;
margin: 0 0 0 1em;
list-style-type: none;
list-style-image: url(assets/tf_bullet.gif); /* */
}
#sidebar li {
/*/*/margin: 0 0 3px; /* */
}
#sidebar a {
/*/*/padding: 2px 4px;
display: block;
border: 1px solid #D0CEB7;
line-height: normal;
width: 180px; /* */
}
#sidebar a:link, #sidebar a:visited {
color:#666;
}
#sidebar a:hover{
color: #F7F1DF;
background-color: #6F8078;
border: 1px solid #F7F1DF;
text-decoration: none;
}
#footer {
font-size: 10px;
width: 300px;
margin: 36px 0 0 30px;
border-top: 1px solid #808080;
padding-top: 6px;
color: #4D6666;
}
#footer p {
margin: 0 0 6px 0;
}
#uberlink a:link, #uberlink a:visited, #uberlink a:hover {
color: #F7F1DF;
background-color: #6F8078;
border: 1px solid #F7F1DF;
text-decoration: none;
}
Thumb {
position: relative;
top: 55%;
}
Can anyone point me in the right direction.
Rusty
body {
background-color: #D0CEB7;
background-image: url(assets/TF_pbg.jpg);
background-repeat: repeat-x;
padding: 0;
margin-top: 180px;
margin-right: 10%;
margin-left: 10%;
}
#logoDiv {
position: absolute;
left: 0px;
top: 0px;
}
#navDiv {
position: absolute;
left: 0px;
top: 122px;
}
#maincell, #secondcell, #sidebar {
line-height: 1.5;
vertical-align: top;
padding-top: 0px;
padding-bottom: 0px;
}
#maincell {
font-size: 14px;
border-right: 2px dotted #859587;
}
#secondcell {
font-size: 14px;
border-right: 2px dotted #859587;
}
#sidebar {
font-size: 12px;
width: 30%;
}td, p, div, ul {
font-family: Georgia, "Times New Roman", Times, serif;
}
h1 {
font-size: 24px;
margin: 0px;
}
h2 {
font-size: 16px;
margin: 36px 0 0 0;
}
#sidebar h2 {
color: #F7F1DF;
margin: 12px 0 6px 0;
}
#sidebar ul {
/*/*/padding: 0 0 0 1em;
margin: 0 0 0 1em;
list-style-type: none;
list-style-image: url(assets/tf_bullet.gif); /* */
}
#sidebar li {
/*/*/margin: 0 0 3px; /* */
}
#sidebar a {
/*/*/padding: 2px 4px;
display: block;
border: 1px solid #D0CEB7;
line-height: normal;
width: 180px; /* */
}
#sidebar a:link, #sidebar a:visited {
color:#666;
}
#sidebar a:hover{
color: #F7F1DF;
background-color: #6F8078;
border: 1px solid #F7F1DF;
text-decoration: none;
}
#footer {
font-size: 10px;
width: 300px;
margin: 36px 0 0 30px;
border-top: 1px solid #808080;
padding-top: 6px;
color: #4D6666;
}
#footer p {
margin: 0 0 6px 0;
}
#uberlink a:link, #uberlink a:visited, #uberlink a:hover {
color: #F7F1DF;
background-color: #6F8078;
border: 1px solid #F7F1DF;
text-decoration: none;
}
Thumb {
position: relative;
top: 55%;
}