SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help for a beginner

    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, becuase I want the links on the left of the page to remain static wilst the right hand side moves up.

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You could try something like this:

    Code:
    #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.

  3. #3
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestion.

    I shall give it a try

    Kind regards

    Antony

  4. #4
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code CSS:
    /* 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" 
    }
    Last edited by TechnoBear; Dec 3, 2012 at 06:22. Reason: CSS code tags added

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    At the moment, the div around the menu is set to the same color as the site background:

    Code:
    #navcontainer {
    height: 45px;
    display: block;
    background: slateGray;
    -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:

    Code:
    #subMenusContainer a, #nav li li a {
    font-size: 12px;
    text-align: left;
    background-color: #292D30;
    padding: 10px 20px;
    color: white;
    }

  6. #6
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much

    That's perfect

    Thanks

    Antony


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •