I have a web page that is constructed in the pre historic frames format. It looks fine.
I want to convert this to CSS as I understand that frames are obselete. I have tried and am struggling,
My current page is www.c5d.co.uk .
My attempt at doing the same with a stylesheet is www.c5d.co.uk/mytestdocument.htm with the stylesheet at www.c5d.co.uk/myteststyle
My three questions
What do I need to do the keep the links static?
How do I get rid of the white bits between the address and the main body of the page
Why does the page try and put in a footer when there is no reference to it in the CSS or HTML ?
I appreciate that the address is overly large but can resolve that one myself
Thanks for any help
Antony
ralphm
November 30, 2012, 8:38am
2
You could try something like this:
#main {
margin-left: 250px;
}
#nav {
position: fixed;
}
#nav ul {
padding-left: 20px;
}
#maincontainer {
position: relative;
}
but it might be better to have the menu at the top.
Thanks for the suggestion.
I shall give it a try
Kind regards
Antony
I have tried as you say to do this with drop down boxes, but am having difficulty with the colour of the boxes.
At present the naigation box matches the background colour of the page and the sub menus are black with white text.
I’d like to adjust this so that the navigation box has a colour and the drop downs are either transparent or have the same colour as the page background.
I just can’t seem to crack it.
The web page is www.c5d.co.uk/test.php and the stylesheet is below. It probably contains unnecessary stuff following my numerous attemts to do this
Thanks Antony
/* LAYOUT */
body {
background: #708090; font color: black; font-weight:bolder;font-style:italic;font-size: 15px; font-family:New Century Schoolbook", Times, serif;
}
a {
color: #000000;
text-decoration: underline;
}
a:hover {
color: #ffffff; /* Colour of Links when hovering */
text-decoration: underline;
}
/* NAVIGATION MENUS */
#pagemenucontainer { /* controls poition of top right hand boxes */
height: 36px;
float: right;
padding: 0;
margin-top: 12px;
#background: #ffffff;
}
#pagemenu, #pagemenu ul { /* controls top right hand boxes */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#pagemenu {
}
#pagemenu ul {
float: left;
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0px;
}
#pagemenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#pagemenu ul li {
list-style: none;
margin: 0px;
padding: 0px;
}
#pagemenu li a, #pagemenu li a:link { /* controls top right hand boxes */
color: #ffffff
display: block;
margin: 0 0 0 6px;
padding: 8px 16px ;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
border: 0px solid
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#pagemenu li a:hover, #pagemenu li a:active {
color: #ffffff
display: block;
margin: 0 0 0 6px;
padding: 8px 16px ;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
border: 0px solid
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#pagemenu li.current_page_item a {
background: #FFFFFF;
color: #289DB8;
text-decoration: none;
border: 2px solid #E2F5FB;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#pagemenu li:hover, #pagemenu li.sfhover {
position: static;
}
#navcontainer {
height: 45px;
display: block;
background: #242627
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#navcontainer .current-cat a {
color: #ffffff
background:#ffffff
}
/* CONTENT */
#content {
width: 700px;
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
color: #000000;
}
pre { overflow: auto;
width: 460px;
}
.post {
margin-bottom: 15px;
padding-bottom: 15px;
#border-bottom: 1px solid #AFC9D4;
}
.post_thumbnail {
padding: 6px;
background: #FFFFFF;
border: 1px solid #DBE3E8;
margin: 0 10px 10px 0;
}
.post p {
margin-bottom: 10px;
}
.title {
margin: 0 0 8px 0;
padding: 0px;
line-height: 24px;
font-size: 24px;
font-family: Arial, Helvetica, Sans-serif;
color: #ffff00;
font-weight: bold;
display: none;
}
.title a {
text-decoration: none;
color: #4A4848;
}
.title a:hover {
color: #289DB8;
}
.pagetitle {
margin-bottom: 20px;
line-height: 22px;
font-family: Arial, Verdana;
text-decoration: underline;
color: #ffff00;
}
.readmorecontent {
text-align: right;
}
a.readmore {
padding: 4px 15px;
background: #708090;
color: #000000;
text-decoration: none;
font-size: 12px;
}
a.readmore:hover {
background-color: #708090;
color: #fff;
}
.postdate {
font-size: 13px;
font-family: Arial, Helvetica, Sans-serif;
font-style: italic;
color: #3E3C3C;
}
.postmeta {
font-size: 11px;
padding: 2px 4px;
font-family: Arial, Verdana;
color: #3E3C3C;
}
.postdate img, .postmeta img {
border: none;
vertical-align: middle;
margin:2px;
}
.entry {
text-align: justify;
line-height: 20px;
padding-top: 8px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 14px;
}
.navigation {
padding: 10px 0;
}
blockquote {
overflow: hidden;
padding-left: 9px;
font-style: italic;
color: #666;
border-left: 3px solid #CADAE7;
}
.post img {
max-width: 680px;
}
img.wp-smiley {
max-height: 12px;
margin: 0;
padding: 0;
border: none;
}
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
/* wp-pagenavi */
.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:active {
font-size: 15px !important;
padding: 4px 8px !important;
color: #232323 !important;
background:none !important;
border: 0 !important;
}
.wp-pagenavi a:hover {
border: 0 !important;
color: #fff !important;
background:#7B7B7B !important;
border: 0 !important;
}
.wp-pagenavi span.pages {
font-size: 15px !important;
padding: 4px 8px !important;
color: #232323 !important;
background: none !important;
border: 0 !important;
}
.wp-pagenavi span.current {
font-size: 15px !important;
padding: 4px 8px !important;
font-weight: bold;
color: #fff !important;
background:#8AD5ED!important;
border: 0 !important;
}
.wp-pagenavi span.extend {
font-size: 15px !important;
padding: 4px 8px !important;
background:transparent !important;
color: #232323 !important;
background: none !important;
border: 0 !important;
}
/* FOOTER */
#footer {
padding: 10px 0;
text-align: center;
color: #FFFFFF;
font-size: 13px;
background: #97CBED;
}
#footer a {
color: #FFFEFE;
}
#footer a:hover {
text-decoration: none;
color: #FFFEFE;
}
#credits {
color: #5A5858;
font-size: 11px;
text-align: center;
padding: 10px;
}
#credits a {
color: #5A5858;
text-decoration: none;
}
p.copy:after {
content: " 1999-2012"
}
ralphm
December 2, 2012, 10:29pm
5
At the moment, the div around the menu is set to the same color as the site background:
#navcontainer {
height: 45px;
display: block;
[COLOR="#FF0000"]background: slateGray;[/COLOR]
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
So you could change that to something else.
The submenu colors are set in the menumatic style sheet, such as here:
#subMenusContainer a, #nav li li a {
font-size: 12px;
text-align: left;
[COLOR="#FF0000"]background-color: #292D30;[/COLOR]
padding: 10px 20px;
color: white;
}
becuase I want the links on the left of the page to remain static wilst the right hand side moves up.