我似乎是一个非常愚蠢的css问题。
我在引人注目的主题中创建了一个子模板,其唯一目的是显示全屏革命滑块。我不认为这与给定输出源的图像大小有任何关系。
模板文档: <?php wp_head(); ?>
<body style =" margin-bottom:-40;">
<div style = "margin-top: -40; ">
<?php if ( have_posts() ) : while( have_posts() ) : the_post();
the_content();
endwhile; endif;?>
</div>
</body>
在这段代码中,我能够删除上边距(margin-top:-40;)然而,我已经尝试了边距,填充,并将其放在div's和主体(如你所见)....当我在谷歌浏览器中检查它的滑块尺寸是在它自己的div,和完整的身体是显示在底部与滑块div的边距。
我知道这必须是一个非常简单的修复,它只是让我困惑....
这是页面源的输出(边距编辑是我的,顶部工作,底部不能在div或body):
<link rel="alternate" type="application/rss+xml" title="3D Sign Systems » Feed" href="http://yrock.co.uk/3dsign/feed/" />
<link rel="alternate" type="application/rss+xml" title="3D Sign Systems » Comments Feed" href="http://yrock.co.uk/3dsign/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="3D Sign Systems » hippy Comments Feed" href="http://yrock.co.uk/3dsign/hippy/feed/" />
<link rel='stylesheet' id='open-sans-css' href='//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=3.9' type='text/css' media='all' />
<link rel='stylesheet' id='dashicons-css' href='http://yrock.co.uk/3dsign/wp-includes/css/dashicons.min.css?ver=3.9' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css' href='http://yrock.co.uk/3dsign/wp-includes/css/admin-bar.min.css?ver=3.9' type='text/css' media='all' />
<link rel='stylesheet' id='rs-plugin-settings-css' href='http://yrock.co.uk/3dsign/wp-content/themes/striking_r/framework/plugins/revslider/rs-plugin/css/settings.css?rev=4.3.5&ver=3.9' type='text/css' media='all' />
<style type='text/css'>
.tp-caption.medium_grey {
position:absolute;
color:#fff;
text-shadow:0px 2px 5px rgba(0, 0, 0, 0.5);
font-weight:700;
font-size:20px;
line-height:20px;
font-family:Arial;
padding:2px 4px;
margin:0px;
border-width:0px;
border-style:none;
background-color:#888;
white-space:nowrap;
}
.tp-caption.small_text {
position:absolute;
color:#fff;
text-shadow:0px 2px 5px rgba(0, 0, 0, 0.5);
font-weight:700;
font-size:14px;
line-height:20px;
font-family:Arial;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.medium_text {
position:absolute;
color:#fff;
text-shadow:0px 2px 5px rgba(0, 0, 0, 0.5);
font-weight:700;
font-size:20px;
line-height:20px;
font-family:Arial;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.large_text {
position:absolute;
color:#fff;
text-shadow:0px 2px 5px rgba(0, 0, 0, 0.5);
font-weight:700;
font-size:40px;
line-height:40px;
font-family:Arial;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.very_large_text {
position:absolute;
color:#fff;
text-shadow:0px 2px 5px rgba(0, 0, 0, 0.5);
font-weight:700;
font-size:60px;
line-height:60px;
font-family:Arial;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
letter-spacing:-2px;
}
.tp-caption.very_big_white {
position:absolute;
color:#fff;
text-shadow:none;
font-weight:800;
font-size:60px;
line-height:60px;
font-family:Arial;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
padding:0px 4px;
padding-top:1px;
background-color:#000;
}
.tp-caption.very_big_black {
position:absolute;
color:#000;
text-shadow:none;
font-weight:700;
font-size:60px;
line-height:60px;
font-family:Arial;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
padding:0px 4px;
padding-top:1px;
background-color:#fff;
}
.tp-caption.modern_medium_fat {
position:absolute;
color:#000;
text-shadow:none;
font-weight:800;
font-size:24px;
line-height:20px;
font-family:"Open Sans", sans-serif;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.modern_medium_fat_white {
position:absolute;
color:#fff;
text-shadow:none;
font-weight:800;
font-size:24px;
line-height:20px;
font-family:"Open Sans", sans-serif;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.modern_medium_light {
position:absolute;
color:#000;
text-shadow:none;
font-weight:300;
font-size:24px;
line-height:20px;
font-family:"Open Sans", sans-serif;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.modern_big_bluebg {
position:absolute;
color:#fff;
text-shadow:none;
font-weight:800;
font-size:30px;
line-height:36px;
font-family:"Open Sans", sans-serif;
padding:3px 10px;
margin:0px;
border-width:0px;
border-style:none;
background-color:#4e5b6c;
letter-spacing:0;
}
.tp-caption.modern_big_redbg {
position:absolute;
color:#fff;
text-shadow:none;
font-weight:300;
font-size:30px;
line-height:36px;
font-family:"Open Sans", sans-serif;
padding:3px 10px;
padding-top:1px;
margin:0px;
border-width:0px;
border-style:none;
background-color:#de543e;
letter-spacing:0;
}
.tp-caption.modern_small_text_dark {
position:absolute;
color:#555;
text-shadow:none;
font-size:14px;
line-height:22px;
font-family:Arial;
margin:0px;
border-width:0px;
border-style:none;
white-space:nowrap;
}
.tp-caption.boxshadow {
-moz-box-shadow:0px 0px 20px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:0px 0px 20px rgba(0, 0, 0, 0.5);
box-shadow:0px 0px 20px rgba(0, 0, 0, 0.5);
}
.tp-caption.black {
color:#000;
text-shadow:none;
}
.tp-caption.noshadow {
text-shadow:none;
}
.tp-caption.thinheadline_dark {
position:absolute;
color:rgba(0,0,0,0.85);
text-shadow:none;
font-weight:300;
font-size:30px;
line-height:30px;
font-family:"Open Sans";
background-color:transparent;
}
.tp-caption.thintext_dark {
position:absolute;
color:rgba(0,0,0,0.85);
text-shadow:none;
font-weight:300;
font-size:16px;
line-height:26px;
font-family:"Open Sans";
background-color:transparent;
}
.tp-caption.largeblackbg {
position:absolute;
color:#fff;
text-shadow:none;
font-weight:300;
font-size:50px;
line-height:70px;
font-family:"Open Sans";
background-color:#000;
padding:0px 20px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
.tp-caption.largepinkbg {
position:absolute;
color:#fff;
text-shadow:none;
font-weight:300;
font-size:50px;
line-height:70px;
font-family:"Open Sans";
background-color:#db4360;
padding:0px 20px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
.tp-caption.largewhitebg {
position:absolute;
color:#000;
text-shadow:none;
font-weight:300;
font-size:50px;
line-height:70px;
font-family:"Open Sans";
background-color:#fff;
padding:0px 20px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
.tp-caption.largegreenbg {
position:absolute;
color:#fff;
text-shadow:none;
font-weight:300;
font-size:50px;
line-height:70px;
font-family:"Open Sans";
background-color:#67ae73;
padding:0px 20px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
.tp-caption.excerpt {
font-size:36px;
line-height:36px;
font-weight:700;
font-family:Arial;
color:#ffffff;
text-decoration:none;
background-color:rgba(0, 0, 0, 1);
text-shadow:none;
margin:0px;
letter-spacing:-1.5px;
padding:1px 4px 0px 4px;
width:150px;
white-space:normal !important;
height:auto;
border-width:0px;
border-color:rgb(255, 255, 255);
border-style:none;
}
.tp-caption.large_bold_grey {
font-size:60px;
line-height:60px;
font-weight:800;
font-family:"Open Sans";
color:rgb(102, 102, 102);
text-decoration:none;
background-color:transparent;
text-shadow:none;
margin:0px;
padding:1px 4px 0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_thin_grey {
font-size:34px;
line-height:30px;
font-weight:300;
font-family:"Open Sans";
color:rgb(102, 102, 102);
text-decoration:none;
background-color:transparent;
padding:1px 4px 0px;
text-shadow:none;
margin:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.small_thin_grey {
font-size:18px;
line-height:26px;
font-weight:300;
font-family:"Open Sans";
color:rgb(117, 117, 117);
text-decoration:none;
background-color:transparent;
padding:1px 4px 0px;
text-shadow:none;
margin:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.lightgrey_divider {
text-decoration:none;
background-color:rgba(235, 235, 235, 1);
width:370px;
height:3px;
background-position:initial initial;
background-repeat:initial initial;
border-width:0px;
border-color:rgb(34, 34, 34);
border-style:none;
}
.tp-caption.large_bold_darkblue {
font-size:58px;
line-height:60px;
font-weight:800;
font-family:"Open Sans";
color:rgb(52, 73, 94);
text-decoration:none;
background-color:transparent;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_bg_darkblue {
font-size:20px;
line-height:20px;
font-weight:800;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:rgb(52, 73, 94);
padding:10px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_bold_red {
font-size:24px;
line-height:30px;
font-weight:800;
font-family:"Open Sans";
color:rgb(227, 58, 12);
text-decoration:none;
background-color:transparent;
padding:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_light_red {
font-size:21px;
line-height:26px;
font-weight:300;
font-family:"Open Sans";
color:rgb(227, 58, 12);
text-decoration:none;
background-color:transparent;
padding:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_bg_red {
font-size:20px;
line-height:20px;
font-weight:800;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:rgb(227, 58, 12);
padding:10px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_bold_orange {
font-size:24px;
line-height:30px;
font-weight:800;
font-family:"Open Sans";
color:rgb(243, 156, 18);
text-decoration:none;
background-color:transparent;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_bg_orange {
font-size:20px;
line-height:20px;
font-weight:800;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:rgb(243, 156, 18);
padding:10px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.grassfloor {
text-decoration:none;
background-color:rgba(160, 179, 151, 1);
width:4000px;
height:150px;
border-width:0px;
border-color:rgb(34, 34, 34);
border-style:none;
}
.tp-caption.large_bold_white {
font-size:58px;
line-height:60px;
font-weight:800;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:transparent;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_light_white {
font-size:30px;
line-height:36px;
font-weight:300;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:transparent;
padding:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.mediumlarge_light_white {
font-size:34px;
line-height:40px;
font-weight:300;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:transparent;
padding:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.mediumlarge_light_white_center {
font-size:34px;
line-height:40px;
font-weight:300;
font-family:"Open Sans";
color:#ffffff;
text-decoration:none;
background-color:transparent;
padding:0px 0px 0px 0px;
text-align:center;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_bg_asbestos {
font-size:20px;
line-height:20px;
font-weight:800;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:rgb(127, 140, 141);
padding:10px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.medium_light_black {
font-size:30px;
line-height:36px;
font-weight:300;
font-family:"Open Sans";
color:rgb(0, 0, 0);
text-decoration:none;
background-color:transparent;
padding:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.large_bold_black {
font-size:58px;
line-height:60px;
font-weight:800;
font-family:"Open Sans";
color:rgb(0, 0, 0);
text-decoration:none;
background-color:transparent;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.mediumlarge_light_darkblue {
font-size:34px;
line-height:40px;
font-weight:300;
font-family:"Open Sans";
color:rgb(52, 73, 94);
text-decoration:none;
background-color:transparent;
padding:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.small_light_white {
font-size:17px;
line-height:28px;
font-weight:300;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:transparent;
padding:0px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.roundedimage {
border-width:0px;
border-color:rgb(34, 34, 34);
border-style:none;
}
.tp-caption.large_bg_black {
font-size:40px;
line-height:40px;
font-weight:800;
font-family:"Open Sans";
color:rgb(255, 255, 255);
text-decoration:none;
background-color:rgb(0, 0, 0);
padding:10px 20px 15px;
border-width:0px;
border-color:rgb(255, 214, 88);
border-style:none;
}
.tp-caption.mediumwhitebg {
font-size:30px;
line-height:30px;
font-weight:300;
font-family:"Open Sans";
color:rgb(0, 0, 0);
text-decoration:none;
background-color:rgb(255, 255, 255);
padding:5px 15px 10px;
text-shadow:none;
border-width:0px;
border-color:rgb(0, 0, 0);
border-style:none;
}
.tp-caption a {
color:#ff7302;
text-shadow:none;
-webkit-transition:all 0.2s ease-out;
-moz-transition:all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
-ms-transition:all 0.2s ease-out;
}
.tp-caption a:hover {
color:#ffa902;
}
</style>
<link rel='stylesheet' id='theme-style-css' href='http://yrock.co.uk/3dsign/wp-content/themes/striking_r/css/screen.min.css?ver=3.9' type='text/css' media='all' />
<link rel='stylesheet' id='theme-icons-awesome-css' href='http://yrock.co.uk/3dsign/wp-content/themes/striking_r/icons/awesome/css/font-awesome.min.css?ver=3.9' type='text/css' media='all' />
<link rel='stylesheet' id='theme-responsive-css' href='http://yrock.co.uk/3dsign/wp-content/themes/striking_r/css/responsive.min.css?ver=3.9' type='text/css' media='all' />
<link rel='stylesheet' id='theme-skin-css' href='http://yrock.co.uk/3dsign/wp-content/themes/striking_r/cache/skin.css?ver=1399289595' type='text/css' media='all' />
<script type='text/javascript' src='http://yrock.co.uk/3dsign/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
<script type='text/javascript' src='http://yrock.co.uk/3dsign/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://yrock.co.uk/3dsign/wp-content/themes/striking_r/framework/plugins/revslider/rs-plugin/js/jquery.themepunch.plugins.min.js?rev=4.3.5&ver=3.9'></script>
<script type='text/javascript' src='http://yrock.co.uk/3dsign/wp-content/themes/striking_r/framework/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js?rev=4.3.5&ver=3.9'></script>
<script type='text/javascript' src='http://yrock.co.uk/3dsign/wp-content/themes/striking_r/js/jquery.fancybox.min.js?ver=2.1.3'></script>
<script type='text/javascript' src='http://yrock.co.uk/3dsign/wp-content/themes/striking_r/js/custom.combine.js?ver=3.9'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://yrock.co.uk/3dsign/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://yrock.co.uk/3dsign/wp-includes/wlwmanifest.xml" />
<link rel='prev' title='hello' href='http://yrock.co.uk/3dsign/hello/' />
<meta name="generator" content="WordPress 3.9" />
<link rel='canonical' href='http://yrock.co.uk/3dsign/hippy/' />
<link rel='shortlink' href='http://yrock.co.uk/3dsign/?p=34' />
<script type="text/javascript">
var image_url='http://yrock.co.uk/3dsign/wp-content/themes/striking_r/images';
var theme_url='http://yrock.co.uk/3dsign/wp-content/themes/striking_r';
var fancybox_options = {
skin : 'theme',
title_type : 'float',
width : 800,
height : 600,
autoSize: true,
autoWidth: false,
autoHeight: false,
fitToView : true,
aspectRatio: false,
arrows: true,
closeBtn: true,
closeClick: false,
nextClick: false,
autoPlay: false,
playSpeed: 3000,
preload: 3,
loop: true,
thumbnail : true,
thumbnail_width : 50,
thumbnail_height : 50,
thumbnail_position: 'bottom'
};
var pie_progress_bar_color = "#3cabce",
pie_progress_track_color = "#e5e5e5";
var nav2select_indentString = "–";
var nav2select_defaultText = "Navigate to...";
</script>
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
html { margin-top: 32px !important; }
* html body { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
html { margin-top: 46px !important; }
* html body { margin-top: 46px !important; }
}
</style>
<body style =" margin-bottom:-40;">
<div style = "margin-top: -40; ">
<!-- START REVOLUTION SLIDER fullscreen mode -->
<div id="rev_slider_3_1_wrapper" class="rev_slider_wrapper fullscreen-container" style="background-color:#E9E9E9;padding:0px;">
<div id="rev_slider_3_1" class="rev_slider fullscreenbanner" style="display:none;">
<ul> <!-- SLIDE -->
<li data-transition="random" data-slotamount="7" >
<!-- MAIN IMAGE -->
<img src="http://yrock.co.uk/3dsign/wp-content/uploads/2014/05/SOLLEDS-LOGO.png" alt="SOLLEDS-LOGO" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
<!-- LAYERS -->
</li>
<!-- SLIDE -->
<li data-transition="random" data-slotamount="7" data-masterspeed="300" >
<!-- MAIN IMAGE -->
<img src="http://yrock.co.uk/3dsign/wp-content/uploads/2014/05/ARENA-XL.png" alt="ARENA-XL" data-bgposition="center top" data-bgfit="100% 100%" data-bgrepeat="no-repeat">
<!-- LAYERS -->
</li>
<!-- SLIDE -->
<li data-transition="random" data-slotamount="7" >
<!-- MAIN IMAGE -->
<img src="http://yrock.co.uk/3dsign/wp-content/uploads/2014/05/Samsung-Ultra-bright.png" alt="Samsung-Ultra-bright" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
<!-- LAYERS -->
</li>
</ul>
<div class="tp-bannertimer"></div> </div>
</div>
<script type="text/javascript">
var tpj=jQuery;
tpj.noConflict();
var revapi3;
tpj(document).ready(function() {
if(tpj('#rev_slider_3_1').revolution == undefined)
revslider_showDoubleJqueryError('#rev_slider_3_1');
else
revapi3 = tpj('#rev_slider_3_1').show().revolution(
{
dottedOverlay:"none",
delay:9000,
startwidth:960,
startheight:350,
hideThumbs:200,
thumbWidth:100,
thumbHeight:50,
thumbAmount:3,
navigationType:"bullet",
navigationArrows:"solo",
navigationStyle:"round",
touchenabled:"on",
onHoverStop:"on",
swipe_velocity: 0.7,
swipe_min_touches: 1,
swipe_max_touches: 1,
drag_block_vertical: false,
keyboardNavigation:"off",
navigationHAlign:"center",
navigationVAlign:"bottom",
navigationHOffset:0,
navigationVOffset:20,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"center",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:0,
soloArrowRightHalign:"right",
soloArrowRightValign:"center",
soloArrowRightHOffset:20,
soloArrowRightVOffset:0,
shadow:0,
fullWidth:"off",
fullScreen:"on",
spinner:"spinner0",
stopLoop:"off",
stopAfterLoops:-1,
stopAtSlide:-1,
shuffle:"off",
forceFullWidth:"on",
fullScreenAlignForce:"on",
minFullScreenHeight:"",
hideThumbsOnMobile:"off",
hideNavDelayOnMobile:1500, hideBulletsOnMobile:"off",
hideArrowsOnMobile:"off",
hideThumbsUnderResolution:0,
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
startWithSlide:0,
videoJsPath:"http://yrock.co.uk/3dsign/wp-content/themes/striking_r/framework/plugins/revslider/rs-plugin/videojs/",
fullScreenOffsetContainer: ""
});
}); //ready
</script>
<!-- END REVOLUTION SLIDER -->
</div>
</body>
提前感谢!
实际上我遇到这个问题是由于一个不同的原因…
当通过页面编辑器将滑块添加到页面中时,滑块短代码被包装在一个span元素中。滑块上方没有间隙的页面没有任何额外的HTML标签包裹在短代码周围。删除额外的标签,删除额外的间隙。
一般来说,在PHP编程(和许多C风格语言)中,空格是被忽略的。然而,在WordPress的页面和帖子所见即所得的内容编辑器,无论是视觉和文本模式,可能呈现断行在意想不到的位置?