• Ik ben voor mijn werk een wordpress pagina aan het maken.
    Ik heb al wel enige ervaring met het maken van websites maar hier heb ik toch echt wat hulp bij nodig.

    De bedoeling is dat mijn inhoud van de pagina altijd gecentreerd staat. zowel horizontaal als verticaal.

    Weet simpelweg niet precies waar en wat in het script ik iets moet aanpassen.

    Heb al het een en ander geprobeert in de css.style maar werken doet het nog niet.

    Dit is de website: doe-nl.nl/wp
    Dit is de CSS zoals hij nu is:

    <em><em>/*
    Theme Name: Blast
    Theme URI: http://www.templatepanic.com/articles/blast-wordpress-theme
    Description: A wordpress theme with lots of features.
    Version: 1.0
    Author: Web Design Company
    Author URI: http://www.thoughtmechanics.com/
    Tags: threaded-comments, fixed-width, right-sidebar, two-columns
    */
    
    /* ===================== import css ===================== */ 
    
    @import "includes/css/nivo-slider.css";
    
    /* ===================== reset ===================== */ 
    
    * { margin: 0; padding: 0; }
    
    .clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }
    .clearfix { display: inline-block; }
    * html .clearfix { height: 1%; }
    .clearfix { display: block; }
    
    /* ===================== general ===================== */ 
    
    body { font: 500 13px/21px Tahoma, Verdana, Arial, sans-serif; color: #676767; text-align: center; background:}
    
    .embed {
    width:100%;
    float:left;
    padding:0 0 0 10px;
    margin:0 0 20px 0;
    }
    
    a { color: #5b81a9; text-decoration: none; }
    a:hover { text-decoration: underline; }
    
    h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; color: #555; font-weight: 300; font-family: 'Radley', arial, serif; }
    h1 { font-size: 34px; line-height: 36px; }
    h2 { font-size: 28px; line-height: 32px; }
    h3 { font-size: 24px; line-height: 28px; }
    h4 { font-size: 22px; line-height: 24px; }
    h5 { font-size: 20px; line-height: 20px; }
    h6 { font-size: 14px; line-height: 14px; }
    
    input, textarea { font-size: 12px; padding: 2px; }
    
    hr { display: none; }
    p { padding: 7px 0; }
    code { color: #5886a3; }
    pre { margin: 10px 0; padding: 15px; background: #eee; border: 1px solid #ddd; clear: both; width: 558px; overflow: auto /*--If the Code exceeds the width, a scrolling is available--*/; overflow-Y: hidden /*--Hides vertical scroll created by IE--*/ ; }
    small { font-size: 11px; line-height: 12px; }
    
    blockquote { display: block; margin: 25px 0; padding: 0 0 0 45px; clear: both; font-size: 14px; font-style: italic; background: url(images/quote.png) no-repeat; font-family: Georgia, Times; }
    blockquote.pullquote, blockquote.pullquoteleft { font-size: 2em; line-height: 1em; font-style: italic; width: 200px; color: #a1a1a1; background-image: none; }
    blockquote.pullquote { margin: 0 0 0 30px; border-left: 5px solid #eee; padding: 10px 0 10px 30px; }
    blockquote.pullquoteleft { margin: 0 30px 0 0; border-right: 5px solid #eee; padding: 10px 30px 10px 0; text-align: right; }
    
    table { margin: 0; }
    
    .multi_col { -moz-column-width: 14em; -webkit-column-width: 14em; -moz-column-gap: 1em; -webkit-column-gap: 1em; }
    .list_inline li { display: inline; margin: 0 5px 0 0; list-style: none; padding: 0; } 
    
    .box_yellow { clear: both; padding: 20px; margin: 20px 0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #fff58f; border: 1px solid #efdb00; }
    .box_green { clear: both; padding: 20px; margin: 20px 0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #aaff8f; border: 1px solid #5fdf37; }
    .box_blue { clear: both; padding: 20px; margin: 20px 0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #9fcfff; border: 1px solid #4593df; }
    
    .checklist ul { margin-left: 0; list-style:none!important; }
    .checklist ul li { padding: 0 0 0 30px; background-image: url(images/check.png); background-position: left center; background-repeat: no-repeat; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='images/check.png'); }
    
    .left { float: left; }
    .right { float: right; }
    
    .dropcap { font-size: 270%; line-height: 100%; font-weight: bold; float: left; padding-top: 0; padding-right: 5px; }
    .highlight { background: #ffff66; }
    
    .rounded { -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; display: block; }
    
    div.divider { clear: both; display: block; height: 1px; padding-top: 20px; margin-bottom: 20px; border-bottom: 1px dashed #aaa; }
    div.divider.no_border { border: none; }
    
    .transparent_class { filter:alpha(opacity=90); -moz-opacity:0.9; -khtml-opacity: 0.9; opacity: 0.9; }
    
    /* ===================== shortcodes/framework fluid width ===================== */ 
    
    .one_half { width: 48%; }
    .one_third { width: 30.66%; }
    .two_third { width: 65.33%; }
    .one_fourth { width: 22%; }
    .three_fourth { width: 74%; }
    .one_half, .one_third, .two_third, .three_fourth, .one_fourth { position: relative; float: left; display: inline; overflow: hidden; margin-right: 4%; }
    
    .first { margin-left: 0; /* the first left column */ }
    .last { margin-right: 0; clear: right; /* the last right column */ }
    
    /* ===================== images ===================== */ 
    
    img, img a { border: none; vertical-align: bottom; }
    
    .alignleft { float: left; margin: 0 15px 5px 0; display: inline; }
    .alignright { float: right; margin: 0 0 5px 15px; display: inline; }
    .aligncenter { display: block; margin: 0 auto; }
    
    .wp-caption, .imgthumb, .entry img { text-align: center; }
    .wp-caption img { margin: 0; padding: 0; border: 0 none; }
    .wp-caption-dd { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; }
    
    .post_image { margin-bottom: 15px; overflow: hidden; font-size: 12px; text-align: center; background-color: #f9f9f9; border: 1px solid #dedede; padding: 20px; padding-bottom: 15px; }
    .post_image img { background-color: #f9f9f9; border: 1px solid #888; margin: auto; }
    .post_image .wp-caption { background-color: #f9f9f9; overflow: hidden; }
    .post_image .wp-caption img { background: none; float: left; }
    .post_image p.wp-caption-text { clear: left; border-top: none; font-size: 12px; padding: 10px; text-align: center; color: #555; }
    
    .special img, .special img a { border: 5px solid #ccc; vertical-align: bottom; }
    
    /* ===================== layout ===================== */ 
    
    #header { padding: 0 35px; height: 160px; background: url(images/bg.jpg) repeat-x top center; position: relative; z-index: 100; }
    #header-inner { margin: auto; width: 970px; position: relative; }
    
    #header #logo { float: center; display: inline; margin: 0; }
    #header #logo img { margin-top: 27px; }
    
    #header #banner-top { float: right; display: inline; margin-top: 27px; }
    
    #top-nav { padding: 0 35px; height: 30px; background: url(images/bg-dark-shadow.png) repeat-x; position: relative; z-index: 500; }
    #top-nav-inner { margin: auto; width: 1040px; position: center; }
    
    #featured-area { background: url(images/bg-dark-shadow.png) repeat-x top center; padding: 0 35px; position: relative; z-index: 1; }
    #featured-area-inner { margin: auto; width: 1020px; position: relative; }
    
    #page { padding: 0 35px; position: absolute; top: 50%; left: 50%; z-index: 1; width: 1040px;}
    #page-inner { margin: auto; width: 1040px; position: absolute; } 
    
    #content { width: 1040px; padding: 0px 0px 0px 0px; float: center;  }
    
    #sidebar { width: 300px; padding: 0 0 20px 0; margin: 20px 40px 40px 0; float: right; display: inline; }
    #sidebar .box { padding: 20px; margin: 0 0 20px 0; border-top: 1px solid #fff; background: #fff url(images/bg-shad-top.png) repeat-x top center; }
    
    /* ===================== featured ===================== */ 
    
    #sliderbox_inner { width: 960px; height: 300px; padding: 30px; background: url(images/bg-slider.png) no-repeat top center; }
    
    /* ===================== myslidemenu ===================== */ 
    
    #myslidemenu { width: 765px; height: 30px; padding-center: 35px; float: center; display: inline; }
    
    .jqueryslidemenu { width: 100%; font-size: 13px; text-transform: uppercase; }
    .jqueryslidemenu ul { margin: 0; padding: 0; list-style-type: none; }
    
    .jqueryslidemenu ul li { position: relative; display: inline; float: left; }
    .jqueryslidemenu ul li a { padding: 4px 65px; display: block; text-decoration: none; }
    
    .jqueryslidemenu ul ul { background: #131313; top: 30px; padding: 0px; }
    .jqueryslidemenu ul ul ul { background: #232323; margin: 0 0 0 20px; padding: 0px; }
    
    * html .jqueryslidemenu ul li a { /*IE6 hack to get sub menu links to behave correctly*/ display: inline-block; }
    
    .jqueryslidemenu ul li a { color: #999; }
    .jqueryslidemenu ul li a:hover { color: #ccc; }
    
    /*1st sub level menu*/
    .jqueryslidemenu ul li ul { position: center; left: 0; width: 140px; display: block; visibility: hidden; clear: both; }
    
    /*Sub level menu list items (undo style from Top level List Items)*/
    .jqueryslidemenu ul li ul li { display: list-item; float: none; }
    
    /*All subsequent sub menu levels vertical offset after 1st level sub menu */
    .jqueryslidemenu ul li ul li ul { top: 0; }
    
    /* Sub level menu links style */
    .jqueryslidemenu ul li ul li a { width: center; padding: 5px 5px; margin: 0; border-top-width: 0; }
    
    /* ===================== searchform ===================== */ 
    
    #search { width: 240px; height: 30px; float: left; display: inline; }
    #s { background: url(images/bg-search.png) no-repeat top right; border: none; width: 180px; color: #555; font-size: 100%; top: 0; height: 20px; }
    #searchform { float: right; padding-top: 5px; padding-right: 40px; }
    #searchform, #searchform div { position: relative; }
    #searchsubmit { display: none; }
    form#searchform input#s { padding: 0 20px; width: 145px; }
    
    /* ===================== subtitle  ===================== */ 
    
    #subtitle { font-size: 30px; color: #777; margin: 20px 0 30px; border-bottom: 1px solid #ccc; font-family: 'Radley', arial, serif; font-weight: 300; }
    
    /* ===================== content  ===================== */ 
    
    .post { padding: 155px; margin-bottom: 0px; border-top: 0px solid #fff; background: #none; }
    .post h2 a { color: #555; text-transform: uppercase; }
    
    .post .thumbnail { float: center; width: 200px; display: inline; }
    .post .post-content { float: center; width: 1200px; display: inline; }
    
    .entry { padding: 0; }
    .entry a { text-decoration: underline; }
    .entry a:hover { text-decoration: none; }
    .entry ul, .entry ol { padding: 9px 40px; }
    
    .read_more { background: #353535; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; padding: 4px 10px 3px; text-shadow: #777 0 1px; font-size: 12px; float: right; }
    .read_more a { text-decoration: none; color: #f1f1f1; text-transform: uppercase; }
    .read_more:hover { background: #888; }
    
    .post_meta { margin: 10px 0 20px; }
    .postmeta { background: #f1f1f1; padding: 4px 8px 3px; display: inline; font-size: 80%; color: #555; }
    .postmeta li { display: inline; }
    .postmeta li a { display: inline; text-decoration: none; color: #454545; }
    .postmeta li a:hover { text-decoration: underline; }
    
    #nav-below { margin: 0 0 20px 0; padding: 10px 0; border-top: 0px solid #ccc; border-bottom: 0px solid #ccc; }
    .nav-previous { float: left; width: 50%; }
    .nav-next { float: right; text-align: right; width: 50%; }
    
    /* ===================== sidebar ===================== */ 
    
    #sidebar { color: #555; font-size: 95%; }
    #sidebar a { color: #777; }
    #sidebar ul { padding: 0 0 10px 0; margin: 0; list-style: none; overflow: hidden; }
    #sidebar ul li { border-bottom: 1px dotted #ccc; }
    #sidebar ul li a { line-height: 22px; }
    #sidebar ul li li { padding-left: 10px; border-bottom: none; }
    #sidebar h4, #sidebar h4 a { border-bottom: 1px solid #999; margin: 0 0 10px; color: #777; }
    #sidebar h4 a:hover { text-decoration: none; }
    
    #ads { padding: 5px 0 0 0; width: 265px; }
    #ads ul { list-style: none; padding: 0; overflow: hidden; }
    #ads ul li { float: left; }
    #ads ul li a { float: left; display: block; height: 135px; width: 132px; }
    #ads ul li a img { margin: 0 7px 10px 0; }
    #ads ul li.wide a { width: 260px; height: 130px; margin-right: 0; }
    #ads ul li { border-bottom: 0; }
    #ads ul li li { border-bottom: 0; }
    
    #myflickr { padding: 5px 0 10px 1px; width: 265px; }
    #myflickr ul { list-style: none; padding: 0; overflow: hidden; }
    #myflickr ul li { float: left; }
    #myflickr ul li a { float: left; display: block; height: 65px; width: 65px; }
    #myflickr ul li { border-bottom: 0; }
    #myflickr ul li li { border-bottom: 0; }
    
    /* ===================== bottom-menu ===================== */ 
    
    #bottom-menu { padding: 20px; position: relative; z-index: 1; list-style-type: none; background: #141414; border-top: 1px solid #fff; color: #777; }
    #bottom-menu-inner { margin: auto; width: 1040px; position: relative; }
    
    #bottom-menu a { color: #999; text-decoration: none; }
    #bottom-menu a:hover { color: #e1e1e1; text-decoration: underline; }
    #bottom-menu ul { margin: 0; padding: 0; list-style: none; }
    #bottom-menu ul li { border-bottom: 1px dotted #555; }
    #bottom-menu ul li a { line-height: 22px; }
    #bottom-menu ul li li { padding-left: 10px; border-bottom: none; }
    #bottom-menu h4 { border-bottom: 1px solid #555; margin-bottom: 10px; color: #777; }
    
    #bottom-menu-left { width: 293px; margin: 0 40px; float: left; display: inline; }
    #bottom-menu-center { width: 293px; margin: 0 40px 0 0; float: left; display: inline; }
    #bottom-menu-right { width: 293px; margin: 0 40px 0 0; float: left; display: inline; }
    
    /* ===================== footer ===================== */ 
    
    #footer, .push { padding: 15px; bottom: 0; float: left; display: inline;  position: fixed; clear: both; z-index: 1; list-style-type: none; background: url(images/bg-dark-shadow.png) repeat-x; }
    
    #footer-inner { margin: auto; width: 1040px; position: relative; text-shadow: #555 0 1px; }
    
    #footer-left, #footer-right { width: 430px; display: inline; font-size: 12px; }
    #footer-left { float: left; }
    #footer-right { float: right; text-align: right; }
    
    #footer-left p, #footer-right p { padding: 0 40px;  }
    #footer-left a, #footer-right a { font-weight: 300; }
    #footer-left, #footer-left a, #footer-right, #footer-right a { color: #fefefe; }
    
    /* ===================== pagenavi ===================== */ 
    
    #pagenavi { clear: both; text-transform: uppercase; margin: 20px 0; }
    #pagenavi a, #pagenavi span { color: #ccc; text-decoration: none; padding: 7px 9px 6px; background: #777; border: none; }
    #pagenavi a:hover, #pagenavi span.current { color: #fff; }
    #pagenavi span.current { font-weight: bold; }</em></em>
1 reactie aan het bekijken (van in totaal 1)
  • ik snap niet helemaal wat je wilt?
    Uit jouw verhaal begrijp ik dat je de content wilt centreren, zowel horizontaal als verticaal. Ik verwacht dan een soort blok die in het midden moet komen te staan, als ik jouw website zie, is er geen blok.

    Dus…wat wil je precies?

1 reactie aan het bekijken (van in totaal 1)
  • Het onderwerp ‘Hulp nodig bij Centreren van page content’ is gesloten voor nieuwe reacties.