Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS - changing a vertical menu to a horizontal one

    I'm sure this is very simple, but I am brand new to CSS and would very much appreciate your help.

    I've created a website using weebly and I would like to edit the menu of the design I've chosen. It's currently a vertical list, but I would like it to go horizontally instead, underneath where my banner is.

    Here is the CSS sheet:

    Code:
    body {
    margin: 0 auto;
    padding: 0;
    font: 76% Verdana,Tahoma,Arial,sans-serif;
    background: #f4f4f4 url(bg.gif) top center repeat-y;
    }
    
    #wrap {
    background: #ffffff;
    color: #303030;
    margin: 0 auto;
    width: 760px;
    }
    
    #header {
    clear: both;
    padding: 0;
    padding: 20px 0 0 0;
    height: 45px;
    }
    
    #header h1 {
    margin: 0 0 10px 0;
    float: left;
    line-height:1.5;
    }
    
    #header p {
    width: 500px;
    float: right;
    text-align: center;
    color: #a0a0a0;
    margin: 0 0 10px 0;
    font-size: 0.8em;
    line-height:1.5;
    }
    
    #frontphoto {
    margin: 0 0 10px 0;
    border: 0;
    width: 760px;
    height: 175px;
    background:#ffffff url(%%HEADERIMG%%) top left no-repeat;
    }
    
    #avmenu {
    clear: left;
    float: left;
    width: 150px;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 0.9em;
    }
    
    #avmenu ul {	
    list-style: none;
    width: 150px;
    margin: 0 0 20px 0;
    padding: 0;
    font-size: 1.1em;
    }	
    
    #avmenu li {
    margin-bottom: 4px;
    }
    
    #avmenu li a {
    font-weight: bold;
    text-decoration: none;
    color: #505050;
    display: block;
    padding: 6px 1px 6px 10px;
    background: #f4f4f4;
    border-left: 4px solid #cccccc;
    }	
    	
    #avmenu li a:hover {
    background: #eaeaea;
    color: #286ea0;
    border-left: 4px solid #286ea0;
    }
    #active a:link {
    	background: #eaeaea;
    	color: #286ea0;
    	border-left: 4px solid #286ea0;
    }
    #active a:hover {
    	background: #eaeaea;
    	color: #286ea0;
    	border-left: 4px solid #286ea0;
    }
    #active a:visited {
    	background: #eaeaea;
    	color: #286ea0;
    	border-left: 4px solid #286ea0;
    }
    
    .announce {
    margin: 10px 0 10px 0;
    padding: 10px;
    width: 130px;
    color: #505050;
    background-color: #f4f4f4;
    line-height:1.5;
    }
    
    #extras {
    float: right;
    width: 100px;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 0.9em;
    line-height:1.5;
    }
    
    #extras p {
    margin: 0 0 1.5em 0;
    }
    
    #content {
    margin: 0 0 20px 0px;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    padding: 0 10px 0 10px;
    line-height:1.5;
    text-align: justify;
    min-height:400px;
    height:auto !important;
    height:400px;
    width: 578px;
    float: right;
    overflow-x:visible !important;
    overflow-x:hidden;
    }
    
    #content h2 {
    font-size: 1.5em;
    margin: 0 0 0.5em 0;
    }
    
    #content img {
    padding: 1px;
    display:inline;
    border: 4px solid #f0f0f0;
    }
    
    h3 {
    font-size: 1.3em;
    margin: 0 0 10px 0;
    }
    
    a {
    text-decoration: none;
    color: #286ea0;
    }
    
    a:hover {
    text-decoration: underline;
    color: #286ea0;
    }
    
    a img {
    border: 0;
    }
    
    #footer {
    clear: both;
    margin: 0 auto;
    padding: 10px 0 20px 0;
    border-top: 4px solid #f0f0f0;
    width: 760px;
    text-align: center;
    color: #808080;
    font-size: 0.9em;
    }
    
    #footer a {
    color: #808080;
    text-decoration: none;
    }
    
    #footer a:hover {
    text-decoration: underline;
    }
    
    .left {
    margin: 10px 10px 5px 0;
    float: left;
    }
    
    .right {
    margin: 10px 0 5px 10px;
    float: right;
    }
    
    .textright {
    text-align: right;
    }
    
    .center {
    text-align: center;
    }
    
    .small {
    font-size: 0.8em;
    }
    
    .bold {
    font-weight: bold;
    }
    
    .hide {
    display: none;
    }
    
    
    /****************************** flyout menus ******************************/
    
    #weebly-menus .weebly-menu-wrap {
    	z-index: 5000;
    }
    
    #weebly-menus .weebly-menu {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    }
    
    #weebly-menus .weebly-menu li {
    	float: left;
    	clear: left;
    	width: 170px;
    	text-align: left;
    }
    
    #weebly-menus .weebly-menu li a {
    	position: relative;
    	display: block;
    	width: 100%;
    	background: #286ea0;
    	border-right: 1px solid #286ea0;
    	border-left: 1px solid #286ea0;
    	border-bottom: 1px solid #286ea0;
    	text-decoration: none;
    	font-family:Verdana,Tahoma,Arial,sans-serif;
    	font-size: 11px;
    	font-weight: bold;
    	line-height:1;
    	padding:3px;
    	color: #ccc;
    }
    
    #weebly-menus .weebly-menu li a:hover {
    	border-right: 1px solid #3680b6;
    	border-left: 1px solid #3680b6;
    	border-bottom: 1px solid #3680b6;
    	background: #3680b6;
    }
    
    #weebly-menus span.weebly-menu-title {
    	display: block;
    	padding: 5px 10px;
    }
    
    #weebly-menus span.weebly-menu-more {
    	background: transparent url(http://images.weebly.com/weebly/images/submenu_arrow.gif) no-repeat center top;
    	display: block;
    	position: absolute;
    	right: 5px;
    	top: 0;
    	font-family: Courier;
    	height: 28px;
    	line-height: 28px;
    	padding:1px 0 3px 0;
    }
    Last edited by AnnaS; 09-28-2011 at 08:04 PM.

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    You'll need to do a couple of things. First, for the #avmenu, your css should be:

    Code:
    #avmenu {
        clear: left;
        font-size: 0.9em;
        margin: 0 0 10px;
        padding: 0;
        width: 760px;
    }
    Then, your #avmenu ul should be:

    Code:
    #avmenu ul {
        font-size: 1.1em;
        list-style: none outside none;
        margin: 0 0 20px;
        padding: 0;
        width: 760px;
    }
    #avmenu li should be:

    Code:
    #avmenu li {
        float: left;
        margin-bottom: 4px;
        margin-right: 14px;
    }
    #avmenu li a should be:

    Code:
    #avmenu li a {
        background: none repeat scroll 0 0 #F4F4F4;
        border-left: 4px solid #CCCCCC;
        border-right: 4px solid #CCCCCC;
        color: #505050;
        display: block;
        font-weight: bold;
        padding: 6px 10px;
        text-decoration: none;
    }
    #avmenu li a:hover:
    Code:
    #avmenu li a:hover {
    background: #eaeaea;
    color: #286ea0;
    border-left: 4px solid #286ea0;
    border-right: 4px solid #286ea0;
    }
    And finally, #active a:link should be:
    Code:
    #active a:link {
        background: none repeat scroll 0 0 #EAEAEA;
        border-left: 4px solid #286EA0;
        border-right: 4px solid #286EA0;
        color: #286EA0;
    }
    Hope that helps!
    WordPress Designer and theme developer. KlongDesigns - helping bloggers and non-technical folks claim their space on the internet.

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    If Resdog's post is too difficult or otherwise isn't what you expected, here's a tutorial on how to Create a Drop-down/Fly-out Menu with CSS from scratch. Really easy method, if I may say so.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #4
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks! That's really helped. I think I know what I'm doing now

  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Location
    West Coast
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Frankie View Post
    If Resdog's post is too difficult or otherwise isn't what you expected, here's a tutorial on how to Create a Drop-down/Fly-out Menu with CSS from scratch. Really easy method, if I may say so.
    This is a great tutorial for anyone looking for an easy step-by-step method to build a pretty snazzy menu.

    Thanks Frankie,

  • #6
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with my site?

    Thank you for all the great info, but I'm really struggling applying this to my weebly site. Is there any chance you could take a look at my code? My code is below. I just want my menu to go from vertical to horizontal (under my banner) and drop down like a normal horizontal menu.

    Thanks so much in advance!

    CSS Sheet


    /* Resets
    --------------------------------------------------------------------------------*/

    ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
    margin: 0;
    padding: 0;
    }

    ul {
    list-style: none;
    }

    fieldset {
    border: 0;
    }

    a img {
    border: 0;
    }

    .clear {
    clear: both;
    font-size: 0;
    height: 0;
    }

    a {
    color: #af5211;
    text-decoration: none;
    }

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

    /* General Styling and Structure
    --------------------------------------------------------------------------------*/

    body {
    font-family: 'Palatino', Georgia, "Times New Roman", Times, serif;
    font-size: 14px;
    color: #FFF;
    margin: 0;
    padding: 1px 0 30px;
    background: url(background111.jpg) repeat top;
    }

    p {
    line-height: 1.5;
    padding: .5em 0;
    }

    h1,
    h2,
    h3,
    h4 {
    }

    h1 {
    font-size: 24px;
    line-height: 1;
    font-weight: normal;
    }

    h2,
    h3 {
    font-size: 16px;
    color: #fff;
    line-height: 1.2;
    padding: .4em 0;
    }

    h3 {
    }

    h4 {
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 5px;
    }

    hr {background:#000000 !important;}

    blockquote {
    font-style:italic;
    border-left:4px solid #604029;
    margin:10px 0 10px 0;
    padding-left:20px;
    line-height:1.5;
    color:#7a5c3e;
    }
    .container {
    width: 960px;
    margin: 0 auto;
    }

    .header-wrap {
    background: url(background222.jpg); repeat-x bottom;
    padding-bottom: 25px;
    }

    #header {
    line-height: 1;
    padding: 0 25px;
    }

    #header a {
    color: #999999;
    }

    #header a:hover {
    color: #fff;
    }

    #logo,
    #logo a {
    font-size: 30px;
    line-height: 1;
    font-weight: normal;
    font-style: italic;
    color: #ccc;
    text-decoration: none;
    }

    /* Navigation
    --------------------------------------------------------------------------------*/

    #navigation {
    line-height: 1;
    float: left;
    width: 221px;
    background: #0079a8 no-repeat;
    padding: 24px 0 0;
    }

    #nav-bot {
    background: #0079a8 bottom no-repeat;
    padding: 0 0 9px;
    }

    #nav-in {
    position: relative;
    background: 053e54 #0079a8 repeat-y;
    padding: 0 9px 25px;
    }

    #navigation ul {
    }

    #navigation li {
    position: relative;
    }

    #navigation li a {

    display: block;
    border: 100px; ##0079a8;
    color: #fff;
    font-size: 15px;
    text-transform: capitalize;
    text-decoration: none;
    padding: 11px 13px;
    }

    #navigation li a:hover,
    #navigation li#active a {
    background: #053e54;
    color: #FFF;
    }

    /* Navigation Drop-Down Menu Customization
    --------------------------------------------------------------------------------*/

    #wsite-menus .wsite-menu li a {
    padding: 9px;
    color: #fff;
    background: #0079a8;
    border: 1px solid #0079a8;
    border-top: 0;
    border-bottom-color: #053E54;
    }

    #wsite-menus .wsite-menu li a:hover {
    color: #fff;
    background: #053E54;
    border-bottom-color: #2b1200;
    }

    /* Header Area
    ----------------------------------------------------------------------------*/

    #header {
    width: 100%;
    height: 70px;
    }

    #header,
    #header table {
    border-collapse: collapse;
    border-spacing: 0;
    }

    #header td {
    vertical-align: middle;
    text-align: left;
    }

    #logo {
    padding: 25px 0 25px 20px;
    }

    #header-right {
    padding: 0 20px 0 10px;
    }

    #header-right table {
    float: right;
    width: px;
    }

    #header-right td {
    padding: 0;
    }

    /* TOP RIGHT: Phone Number
    --------------------------------------------------------------------------------*/

    #header-right .phone-number .wsite-text {
    font-family: Arial, Helvetica, sans-serif;
    color: #ccc;
    text-align: right;
    font-size: 14px;
    font-weight: bold;
    padding-top: 1px;
    display: block;
    white-space: nowrap;
    margin: 0 0 0 10px;
    }

    /* TOP RIGHT: Content Area
    --------------------------------------------------------------------------------*/

    #header-right .wsite-social {
    margin: 0 0 0 12px;
    }


    .wsite-social-item {
    width: 20px;
    height: 20px;
    margin: 0 0 0 3px;
    background-image:url;
    }

    .wsite-social-facebook {background-position:0 0;}
    .wsite-social-facebook:hover {background-position:0 -20px;}
    .wsite-social-facebook:active {background-position:0 -40px;}
    .wsite-social-pinterest {background-position:-20px 0;}
    .wsite-social-pinterest:hover {background-position:-20px -20px;}
    .wsite-social-pinterest:active {background-position:-20px -40px;}
    .wsite-social-twitter {background-position:-40px 0;}
    .wsite-social-twitter:hover {background-position:-40px -20px;}
    .wsite-social-twitter:active {background-position:-40px -40px;}
    .wsite-social-linkedin {background-position:-60px 0;}
    .wsite-social-linkedin:hover {background-position:-60px -20px;}
    .wsite-social-linkedin:active {background-position:-60px -40px;}
    .wsite-social-mail {background-position:-80px 0;}
    .wsite-social-mail:hover {background-position:-80px -20px;}
    .wsite-social-mail:active {background-position:-80px -40px;}
    .wsite-social-rss {background-position:-100px 0;}
    .wsite-social-rss:hover {background-position:-100px -20px;}
    .wsite-social-rss:active {background-position:-100px -40px;}
    .wsite-social-flickr {background-position:-120px 0;}
    .wsite-social-flickr:hover {background-position:-120px -20px;}
    .wsite-social-flickr:active {background-position:-120px -40px;}
    .wsite-social-plus {background-position:-140px 0;}
    .wsite-social-plus:hover {background-position:-140px -20px;}
    .wsite-social-plus:active {background-position:-140px -40px;}
    .wsite-social-vimeo {background-position:-160px 0;}
    .wsite-social-vimeo:hover {background-position:-160px -20px;}
    .wsite-social-vimeo:active {background-position:-160px -40px;}
    .wsite-social-yahoo {background-position:-180px 0;}
    .wsite-social-yahoo:hover {background-position:-180px -20px;}
    .wsite-social-yahoo:active {background-position:-180px -40px;}
    .wsite-social-youtube {background-position:-200px 0;}
    .wsite-social-youtube:hover {background-position:-200px -20px;}
    .wsite-social-youtube:active {background-position:-200px -40px;}

    /* TOP RIGHT: Search Box
    --------------------------------------------------------------------------------*/

    #header-right .wsite-search {
    width: 209px;
    height: 25px;
    margin: 0 0 0 15px;
    background: transparent url(searchForm-bg.png) no-repeat;
    }

    #header-right .wsite-search-input {
    vertical-align: top;
    border: 0;
    background: none;
    padding: 6px 8px 6px 10px !important;
    width: 154px;
    height: 13px;
    font-family: Arial, Helvetica, sans-serif;
    color: #2d1300;
    font-size: 12px;
    }

    #header-right .wsite-search-button {
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    font-size: 0;
    border: 0;
    margin: 0;
    padding: 0;
    width: 37px;
    height: 25px;
    background: none;
    }

    /* Footer
    --------------------------------------------------------------------------------*/

    #footer {
    background: #0079a8;
    padding: 15px 25px;
    text-align: right;
    }

    .rights {
    vertical-align: middle;
    }

    .wsite-footer { /* make sure enough space between element footer and attribution */
    margin-bottom: 15px;
    }

    #footer h2 {
    font-size:15px;
    color:#bd8c69;
    border-bottom:1px solid #62310e;
    }

    /* Footer Form Customization
    --------------------------------------------------------------------------------*/

    .wsite-form-container {
    margin-top:0px !important;
    text-align:left !important;
    }

    .wsite-footer .wsite-form-label {
    font-size: 1em !important;
    padding: 5px 0 2px 0 !important;
    }

    .wsite-footer .wsite-form-field {
    width:320px !important;
    }

    .wsite-footer .form-radio-container {
    font-size:1em !important;
    }

    .wsite-footer .wsite-form-input {
    font-size: 1em !important;
    width: 100% !important;
    background-color:#fff;
    }

    .wsite-footer .form-select {
    width: 100% !important;
    background-color:#fff;
    }


    /* main contents styles
    --------------------------------------------------------------------------------*/

    .main-wrap {
    position: relative;
    top: -100px;
    }

    #main {
    padding: 0 0 0 13px;
    }

    #main-bot {
    padding: 6px 0;
    }

    #main-in {
    padding: 14px 20px;
    }

    #banner {
    border: solid #000;
    background: ;
    }

    #content {
    float: right;
    width: 704px;
    min-height: 350px;
    padding: px 0;
    }

    /* PAGE TYPE: tall-header
    --------------------------------------------------------------------------------*/

    .tall-header-page .wsite-header { /* the user-editable image */
    height: 221px;
    background: url(banner-tall.jpg) no-repeat;
    }

    /* PAGE TYPE: short-header
    --------------------------------------------------------------------------------*/

    .short-header-page .wsite-header { /* the user-editable image */
    height: 141px;
    background: url no-repeat;
    }

    /* PAGE TYPE: no-header
    --------------------------------------------------------------------------------*/

    .no-header-page {
    background: #451d00 url(no-header-bg.png) repeat-x;
    }

    .no-header-page #header {
    padding-bottom: 21px;
    }

    .no-header-page #banner {
    display: none;
    }

    .no-header-page .main-wrap {
    top: 0;
    background: #451d00;
    }

    .no-header-page .header-wrap {
    padding-bottom: 0;
    }

    .no-header-page #navigation {
    position: relative;
    top: -2px;
    }

    /* PAGE TYPE: landing
    --------------------------------------------------------------------------------*/

    #banner-left {
    float: left;
    width: 560px;
    }

    #banner-left .wsite-header { /* the user-editable image */
    height: 271px;
    background: url(banner-landing.jpg) no-repeat;
    }

    .landing-banner-outer {
    display: table;
    #position: relative;
    overflow: hidden;
    }

    .landing-banner-mid {
    #position: absolute;
    #top: 50%;
    display: table-cell;
    vertical-align: middle;
    }

    .landing-banner-inner {
    #position: relative;
    #top: -50%;
    }

    #banner-right {
    float: left;
    width: 305px;
    height: 271px;
    padding: 0 0 0 43px;
    }

    #banner-right h2 {
    color: #fff;
    font-size: 22px;
    padding: 0px;
    line-height: 22px;
    }

    #banner-right p {
    color: #a68665;
    font-size: 13px;
    padding: 20px 0px;
    line-height: 140%;
    }

    /* PAGE TYPE: splash
    --------------------------------------------------------------------------------*/

    .splash-page .wsite-header { /* the user-editable image */
    height: 141px;
    background: url(banner-splash.jpg) no-repeat;
    }

    .splash-page #container {
    width: 600px;
    }

    .splash-page #header-right .social {
    }

    .splash-page #navigation {
    display: none;
    }

    .splash-page .search {
    display: none;
    }

    .splash-page #main {
    }

    .splash-page #main-bot {
    }

    .splash-page #main-in {
    }

    .splash-page #content {
    float: none;
    width: auto;
    border: 0;
    height: auto !important;
    min-height: 300px;
    }

    .splash-page #footer {
    text-align: center;
    }

    .splash-page #footer .wsite-social {
    display: none;
    }

    /* Form Customization
    --------------------------------------------------------------------------------*/

    .wsite-form-label {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 0 4px;
    }

    .form-radio-container {
    }

    .wsite-form-input, .wsite-search-element-input {
    font-family: 'Palatino Linotype', Georgia, "Times New Roman", Times, serif;
    font-size: 13px;
    background: #fff url(field.png) repeat-x;
    color: #66330f;
    border: 1px solid #d2d2d2;
    padding: 9px 5px 6px 5px !important;
    line-height: 1;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }

    .form-select {
    font-family: 'Palatino Linotype', Georgia, "Times New Roman", Times, serif;
    font-size: 13px;
    background: #fff url(field.png) repeat-x;
    color: #66330f;
    border: 1px solid #d2d2d2;
    padding: 3px;
    height: 30px;
    line-height: 16px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }

    /* Buttons
    --------------------------------------------------------------------------------*/
    /* small */

    .wsite-button {
    color: #FFF !important;
    height: 34px;
    display: inline-block;
    font-size: 14px;
    border: 2px; #777777
    font-weight: bold;
    text-decoration: none;
    padding: 0 10px 0 0;
    background: #777777 no-repeat 100% -105px;
    text-shadow:0 -1px 0 rgba(0,0,0,0.9);
    }

    .wsite-button:hover {
    background-position: 100% -140px;
    }

    .wsite-button:active {
    background-position: 100% -175px;
    }

    .wsite-button-inner {
    height: 34px;
    line-height: 34px;
    display: block;
    font-size: 14px;
    font-weight: bold;
    border: none;
    text-decoration: none;
    padding: 0 10px 0 20px;
    background: #777777 no-repeat 0 0;
    }

    .wsite-button:hover .wsite-button-inner {
    background-position: 0 -35px;
    }

    .wsite-button:active .wsite-button-inner {
    background-position: 0 -70px;
    }

    /* large */

    .wsite-button-large {
    height: 41px;
    background: url(button_large.png) no-repeat 100% -126px;
    padding: 0 10px 0 0;
    }

    .wsite-button-large:hover {
    background-position: 100% -168px;
    }

    .wsite-button-large:active {
    background-position: 100% -210px;
    }

    .wsite-button-large .wsite-button-inner {
    height: 41px;
    line-height: 41px;
    padding: 0 10px 0 20px;
    background: url(button_large.png) no-repeat 0 0;
    }

    .wsite-button-large:hover .wsite-button-inner {
    background-position: 0 -42px;
    }

    .wsite-button-large:active .wsite-button-inner {
    background-position: 0 -84px;
    }

    /* highlight */

    /*
    Making the highlighted versions of the buttons is easy because we just need
    to switch out the background images. This works because the different button
    states (normal, :hover, :active) have their sprite coordinates in the same places.
    */

    .wsite-button-large.wsite-button-highlight {
    background-image: url(button_large_highlight.png);
    }

    .wsite-button-large.wsite-button-highlight .wsite-button-inner {
    background-image: url(button_large_highlight.png);
    }

    .wsite-button-highlight {
    color: #fff;
    background-image: url(button_highlight.png);
    }

    .wsite-button-highlight .wsite-button-inner {
    background-image: url(button_highlight.png);
    }




    HTML CODE

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body class=' short-header-page wsite-theme-light'>
    <div class="header-wrap">
    <div class="container">
    <table id="header">
    <tr>
    <td id="logo">{logo}</td>
    <td id="header-right">
    <table>
    <tr>
    <td class="phone-number">{phone:text}</td>
    <td class="social">{social}</td>
    <td class="search">{search}</td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </div>
    </div>
    <div class="main-wrap">
    <div class="container">
    <div id="banner">
    <div class="wsite-header"></div>
    </div>
    <div id="main">
    <div id="navigation">
    <div id="nav-bot">
    <div id="nav-in">
    {menu} {belowverticalmenu:content}
    <div class="clear"></div>
    </div>
    </div>
    </div>
    <div id="content">
    {content}
    <div class="clear"></div>
    </div>
    <div class="clear"></div>
    </div>
    <div id="footer-wrap">
    <div id="footer">
    {footer}
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>


  •  

    Posting Permissions

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