Jump to content

Maj

Members
 View Profile  See their activity

  • Posts

    4

  • Joined

  • Last visited

 Content Type 

Posts posted by Maj

    Sidebar main content sidebar

    in CSS

    Posted

     

    <!DOCTYPE html><html><head></head><table style='border: 0; width: 100%; table-layout: fixed' id='blogTable' class='wsite-not-footer'> <tr> <td valign='top'> <div id='879090667725960140-blog' class='blog-body' style='float: left;'> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head><body class='no-header-page wsite-background wsite-theme-light'> <div id="header-wrap"> <div class="container"> <table id="header"> <tr> <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><!-- end container --> </div><!-- end header-wrap --> <div id="nav-wrap"> <div class="container"> <table> <tr> <td id="logo">{logo}</td> <td>{menu}</td> </tr> </table> </div><!-- end container --> </div><!-- end nav-wrap --> <div id="banner-wrap"> <div class="container"> <div class="top-bar"></div> <div id="banner"> <div style="clear:both;"></div> </div><!-- end banner --> </div><!-- end container --> </div><!-- end banner-wrap --> <div id="main-wrap"> <div class="container"> {content} </div><!-- end container --> </div><!-- end main-wrap --> <div id="footer-wrap"> <div class="container"> {footer} </div><!-- end container --> </div><!-- end footer-wrap --></body></html>

    Sidebar main content sidebar

    in CSS

    Posted

     

    /* Resets--------------------------------------------------------------------------------*/ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote,fieldset, input { margin: 0; padding: 0;}a img { border: 0;}a { text-decoration: none;}/* General Styling and Structure--------------------------------------------------------------------------------*/body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; background: url(body-bg-purple.jpg) fixed center left;}.container { margin: 0 auto; width: 1000px;}#header-wrap,#banner-wrap,#nav-wrap,#main-wrap,#footer-wrap{ width:100%;}h3 { font-size: 30px; padding: .5em 0; line-height: 1.2; font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 400; color: #3f3f3f; border-bottom: 1px solid #c3c3c3;}a { color: #7e649a;}a:hover { color: #bca4d7;}h2 { font-size: 34px; padding: .2em 0; line-height: 1.2; font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 400; color: #3f3f3f; border-bottom: 1px solid #c3c3c3;}blockquote {border-left:none !important;}p, blockquote { font-family: Arial, Helvetica, sans-serif; font-size: 13px !important; line-height: 1.5; padding: 0.7em 0;}div#content {min-height:400px;}/* Header--------------------------------------------------------------------------------*/#header-wrap .container { background: #1e1e1e; width: 990px; padding: 0px 5px;}#logo,#logo a { font-family: 'Satisfy', cursive; font-size: 48px; color: #fff; float:left; padding: 10px 0 6px;}#header { border-collapse: collapse; border-spacing: 0; width:100%; height: 40px;}#header td { vertical-align: middle; text-align: left;}#header-right table { float: right; width: 1px;}#header-right td { padding: 0;}/* Header: Phone Number--------------------------------------------------------------------------------*/#header-right .phone-number .wsite-text { color: #545454; font-size: 12px; font-family: Arial, Helvetica, sans-serif; display: block; white-space: nowrap;}/* Header: Social Links--------------------------------------------------------------------------------*/#header-right .wsite-social { vertical-align: middle; margin: 0 0px 0 10px;}.wsite-social-item { width: 23px; height: 23px; margin: 0 0 0 3px; background-image:url(social-dark.png);}.wsite-social-facebook {background-position:0 0;} .wsite-social-facebook:hover {background-position:0 -23px;} .wsite-social-facebook:active {background-position:0 -46px;}.wsite-social-pinterest {background-position:-23px 0;} .wsite-social-pinterest:hover {background-position:-23px -23px;} .wsite-social-pinterest:active {background-position:-23px -46px;}.wsite-social-twitter {background-position:-46px 0;} .wsite-social-twitter:hover {background-position:-46px -23px;} .wsite-social-twitter:active {background-position:-46px -46px;}.wsite-social-linkedin {background-position:-69px 0;} .wsite-social-linkedin:hover {background-position:-69px -23px;} .wsite-social-linkedin:active {background-position:-69px -46px;}.wsite-social-mail {background-position:-92px 0;} .wsite-social-mail:hover {background-position:-92px -23px;} .wsite-social-mail:active {background-position:-92px -46px;}.wsite-social-rss {background-position:-115px 0;} .wsite-social-rss:hover {background-position:-115px -23px;} .wsite-social-rss:active {background-position:-115px -46px;}.wsite-social-flickr {background-position:-138px 0;} .wsite-social-flickr:hover {background-position:-138px -23px;} .wsite-social-flickr:active {background-position:-138px -46px;}.wsite-social-plus {background-position:-161px 0;} .wsite-social-plus:hover {background-position:-161px -23px;} .wsite-social-plus:active {background-position:-161px -46px;}.wsite-social-vimeo {background-position:-184px 0;} .wsite-social-vimeo:hover {background-position:-184px -23px;} .wsite-social-vimeo:active {background-position:-184px -46px;}.wsite-social-yahoo {background-position:-207px 0;} .wsite-social-yahoo:hover {background-position:-207px -23px;} .wsite-social-yahoo:active {background-position:-207px -46px;}.wsite-social-youtube {background-position:-230px 0;} .wsite-social-youtube:hover {background-position:-230px -23px;} .wsite-social-youtube:active {background-position:-230px -46px;}/* Header: Search Box--------------------------------------------------------------------------------*/#header-right .wsite-search { vertical-align: middle; margin-left:10px; width:160px;}#header-right .wsite-search-input { width: 128px; height: 16px; border: 0; color: #828282; font-size: 12px; padding: 4px 5px !important; float:left; background: url(input-bg.png) no-repeat center left;}#header-right .wsite-search-button { position: relative; width: 22px; height: 24px; border: 0; padding: 0px; float:right; background: url(submit-bg.png) no-repeat center right;}/* Navigation--------------------------------------------------------------------------------*/#nav-wrap .container { clear: both; overflow: hidden; position: relative; background: #0d0d0d; border-radius: 0px 0px 5px 5px; min-height: 100px; width:940px; padding: 0px 30px;}#nav-wrap table { width: 100%; border-collapse: collapse; border:0px;}#nav-wrap .container ul { list-style: none; float: right;}#nav-wrap .container ul li { list-style: none; float: left; padding: 0px 10px;}#nav-wrap .container ul li a { float: left; display: block; font-family: 'Open Sans Condensed', sans-serif; color: #939393; padding: 40px 0px 40px; border: 0; outline: 0; list-style-type: none; font-size: 17px; text-transform: uppercase;}#nav-wrap .container ul li#active a,#nav-wrap .container ul li a:hover { color: #d6d6d6; background: url(nav-hover-bg-purple.png) repeat-x center bottom; border: 0;}/* Navigation Submenu's--------------------------------------------------------------------------------*/#wsite-menus .wsite-menu li a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #545454; background: #1e1e1e; border: 0;}#wsite-menus .wsite-menu li a:hover { color: #545454; background: #0d0d0d;}/* Universal banner--------------------------------------------------------------------------------*/#banner-wrap { margin-top: 30px;}#banner-wrap .container { background: #fff; border-radius: 5px 5px 0px 0px; width: 1000px;}#banner-wrap .top-bar { background: #755e8d url(main-top-bg.png) repeat-x bottom left; height: 23px; border-radius: 5px 5px 0px 0px; margin-bottom:13px;}#banner { margin:0 34px 0;}/* Page type: Tall header--------------------------------------------------------------------------------*/.tall-header-page #banner { width: 932px; height: 325px; background: url(banner-tall-bg.png) no-repeat;}.tall-header-page .wsite-header { background: url(banner-tall.jpg) no-repeat; float: left; height: 296px; margin: 9px; width: 914px;}/* Page type: Short header--------------------------------------------------------------------------------*/.short-header-page #banner { width: 932px; height: 256px; background: url(banner-short-bg.png) no-repeat;}.short-header-page .wsite-header { background: url(banner-short.jpg) no-repeat; float: left; height: 226px; margin: 9px; width: 914px;}/* Page type: No header--------------------------------------------------------------------------------*/.no-header-page .wsite-header { display:none;}.no-header-page #banner-wrap .top-bar { margin-bottom: 0px;}<html>/* Page type: Landing page--------------------------------------------------------------------------------*/.landing-page #banner { width: 932px; height: 384px; background: url(banner-landing-bg.png) no-repeat;}#bannerleft { float: left; margin: 9px; width: 503px; height: 356px;}.landing-page .wsite-header {width: 503px;height: 356px;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%;}#bannerright { float: right; margin-right: 9px; margin-top:9px; padding: 0 20px; width: 330px; height: 356px;}#bannerright h2 { color: #3f3f3f; font-size: 40px; font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 400; border: none; padding: 0px; line-height: 40px;}#bannerright p { color: #3f3f3f; font-size: 14px; padding: 17px 0px 20px 0px; line-height: 140%;}/* Main Content--------------------------------------------------------------------------------*/#main-wrap { margin-bottom: 30px; }#main-wrap .container { background: #fff; border-radius: 0px 0px 5px 5px; padding: 0 30px 30px; width:940px;} blockquote { font-size:20px; color: #fff; border-radius: 5px; background: #7e649a; padding: 20px 30px; margin: 20px 0px;}blockquote a {color:#fff; text-decoration:underline;}/* Footer--------------------------------------------------------------------------------*/#footer-wrap { text-align:right; margin-bottom: 50px; color:#ddd;}#footer-wrap .container { background: #0d0d0d; border-radius: 5px; padding: 30px; width:940px;}#footer-wrap .wsite-form-container { text-align:left; margin-top:0 !important;}#footer-wrap h2{ border: none; padding: .5em 0 0.2em; font-size:27px;}#footer-wrap p{ color: #808080; font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding: .5em 0px;}/* Form Customization--------------------------------------------------------------------------------*/.wsite-form-label { display: inline-block; color: #3f3f3f; font-family: Arial, Helvetica, sans-serif; font-size: 13px; margin:10px 0px 5px 0px; font-weight:normal;}.form-radio-container { color: #3f3f3f; font-size: 13px; font-family: Arial, Helvetica, sans-serif;}.wsite-form-input, .wsite-search-element-input { font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #3f3f3f; background: #fff; border: 1px solid #dcdcdc; padding: 5px !important; -webkit-box-shadow: inset 3px 1px 3px rgba(62, 62, 62, .07); box-shadow: inset 3px 1px 3px rgba(62, 62, 62, .07);}.form-select { color: #3f3f3f; border: 1px solid #dcdcdc; font-size: 13px; font-family: Arial, Helvetica, sans-serif; padding: 7px !important; width: 385px; height: 35px !important; line-height: 35px; background: #fff; margin-bottom:20px;}.wsite-form-container {margin-top:0 !important;}#footer-wrap .wsite-form-input, #footer-wrap .wsite-search-element-input { background:#555; border:none; color:#fff;}#footer-wrap .wsite-search-element-submit { background: url(search-dark.png) left;}#footer-wrap .wsite-form-label, #footer-wrap .form-radio-container {color:#aaa;}/* Buttons--------------------------------------------------------------------------------*//* Small structure & regular style */.wsite-button { height: 34px; display: inline-block; padding: 0 18px 0 0; background: url(button_purple.png) no-repeat 100% -105px;}.wsite-button:hover { background-position: 100% -140px;}.wsite-button:active { background-position: 100% -175px;}.wsite-button-inner { color: #fffeff !important; font-family: 'Open Sans Condensed', sans-serif; height: 34px; line-height: 34px; display: block; font-size: 17px; padding: 0 0 0 18px; background: url(button_purple.png) no-repeat 0px 0px;}.wsite-button:hover .wsite-button-inner { background-position: 0px -35px;}.wsite-button:active .wsite-button-inner { background-position: 0px -70px;}/* Large structure & regular style */.wsite-button-large { color: #fffeff !important; height: 41px; background: url(button_large_purple.png) no-repeat 100% -126px; padding: 0 18px 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 0 0 18px; background: url(button_large_purple.png) no-repeat 0px 0px;}.wsite-button-large:hover .wsite-button-inner { background-position: 0px -42px;}.wsite-button-large:active .wsite-button-inner { background-position: 0px -84px;}/* Highlighted styles */.wsite-button-highlight { background-image: url(button_highlight.png);}.wsite-button-highlight .wsite-button-inner { background-image: url(button_highlight.png);}.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);}

    Sidebar main content sidebar

    in CSS

    Posted · Edited by Maj

    When I try that, I get three bars above the header area, which is progress, but not like I wanted Like I see, the columns and then below that, the header and current layout: 1 content, 1 sidebar.

     

    Or: Sidebar

     

    scroll

     

    scroll

     

    content.

     

    I found a page very similar to the layout I want. http://mythicalbooks.blogspot.ro/2015/01/snowed-in-so-read-giveaway-hop.html

     

    Can I post what I see in HTML and CSS and get tips that way?

    Sidebar main content sidebar

    in CSS

    Posted

    I'm trying to add a second sidebar, in HTML/ CSS and I must not be entering the right codes. I'm looking for a right side bar and a left side bar, of equal sizes, on the sides of my content. What I have found, simply, is that I can change the width, float, and padding of the right sidebar when I enter in CSS some things... but that I don't know the right coding for moving it to the left, or creating a second, and continuing to move that to the left and leave the other on the right. Please direct me to the correct coding. My blog support obviously has less of an idea than me (and when I asked there answer was "not our problem that your stupid, go pay a pro" to which I had to say: I am not interested (nor are my subscribers) in me buying a different design and I am fully aware that the common person doesn't have the necessary knowledge to edit the CSS and HTML page of their blog, but it might benefit your professionalism not to assume a customers stupidity in the future. They're a tough crowd. Can anyone look at the source of http://majesticgoldenrose.weebly.com and help me out?

×
×
  • Create New...