Fatal编程技术网
  • html/
  • Html 奇怪的空白出现在我的网站的一部分

Html 奇怪的空白出现在我的网站的一部分

html css

Html 奇怪的空白出现在我的网站的一部分,html,css,whitespace,Html,Css,Whitespace,我刚完成我的网站。至少主要是因为有一块空白让我困惑。它每次都会出现，但当我选择它时，它就会消失。这是它的样子 HTML 任何关于修复此问题的建议都将不胜感激 变化 字体系列：“特殊精英”，草书 致： 字体系列：“特殊精英”，无衬线 草书似乎有很多问题。请发布一个实例（例如在JSFIDLE上）。@Jack奇怪的是，如果我添加边距：0到您的正文，此问题消失。如果我把它去掉，问题又来了。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran

我刚完成我的网站。至少主要是因为有一块空白让我困惑。它每次都会出现，但当我选择它时，它就会消失。这是它的样子

HTML

任何关于修复此问题的建议都将不胜感激

变化 
字体系列：“特殊精英”，草书

致：

字体系列：“特殊精英”，无衬线


草书似乎有很多问题。
请发布一个实例（例如在JSFIDLE上）。@Jack奇怪的是，如果我添加
边距：0
到您的
正文
，此问题消失。如果我把它去掉，问题又来了。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.Jack Murdock,</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="portfolio.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
<!-- Start WOWSlider.com HEAD section -->
    <link rel="stylesheet" type="text/css" href="engine1//style.css" media="screen" />
    <script type="text/javascript" src="engine1//jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->

</head>

<body bgcolor="#3b3a3b">

<div id="HeaderContainer">
</div>
<h1>.01 Photography</h1>

<ul class="flatflipbuttons">
<li><a href="photography.html"><span><img src="images/photography.png" /></span></a><b>photography</b></li>
<li><a href="2d design.html"><span><img src="images/graphicdesign.png" /></span></a><b>2D Design</b></li>
<li><a href="3d work.html"><span><img src="images/3dwork.png" /></span></a><b>3D Work</b></li>
<li><a href="contact.html"><span><img src="images/contact.png" /></span></a><b>Contact</b></li>

</ul>
<!-- Start WOWSlider.com BODY section id=wowslider-container1 -->
    <div id="wowslider-container1">
    <div class="ws_images"><ul>
<li><img src="data1/images/1277971_10202333285879975_353051239_o.jpg" alt="1277971_10202333285879975_353051239_o" title="1277971_10202333285879975_353051239_o" id="wows1_0"/></li>
<li><img src="data1/images/14262710457_9135dff762_o.jpg" alt="14262710457_9135dff762_o" title="14262710457_9135dff762_o" id="wows1_1"/></li>
<li><img src="data1/images/dsc_1180.jpg" alt="DSC_1180" title="DSC_1180" id="wows1_2"/></li>
<li><img src="data1/images/dsc_2612.jpg" alt="DSC_2612" title="DSC_2612" id="wows1_3"/></li>
<li><img src="data1/images/dsc_8128.jpg" alt="DSC_8128" title="DSC_8128" id="wows1_4"/></li>
<li><img src="data1/images/image_2.jpg" alt="image_2" title="image_2" id="wows1_5"/></li>
<li><img src="data1/images/image_10.jpg" alt="image_10" title="image_10" id="wows1_6"/></li>
<li><img src="data1/images/image_12.jpg" alt="image_12" title="image_12" id="wows1_7"/></li>
<li><img src="data1/images/image_15.jpg" alt="image_15" title="image_15" id="wows1_8"/></li>
<li><img src="data1/images/image_17.jpg" alt="image_17" title="image_17" id="wows1_9"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="1277971_10202333285879975_353051239_o"><img src="data1/tooltips/1277971_10202333285879975_353051239_o.jpg" alt="1277971_10202333285879975_353051239_o"/>1</a>
<a href="#" title="14262710457_9135dff762_o"><img src="data1/tooltips/14262710457_9135dff762_o.jpg" alt="14262710457_9135dff762_o"/>2</a>
<a href="#" title="DSC_1180"><img src="data1/tooltips/dsc_1180.jpg" alt="DSC_1180"/>3</a>
<a href="#" title="DSC_2612"><img src="data1/tooltips/dsc_2612.jpg" alt="DSC_2612"/>4</a>
<a href="#" title="DSC_8128"><img src="data1/tooltips/dsc_8128.jpg" alt="DSC_8128"/>5</a>
<a href="#" title="image_2"><img src="data1/tooltips/image_2.jpg" alt="image_2"/>6</a>
<a href="#" title="image_10"><img src="data1/tooltips/image_10.jpg" alt="image_10"/>7</a>
<a href="#" title="image_12"><img src="data1/tooltips/image_12.jpg" alt="image_12"/>8</a>
<a href="#" title="image_15"><img src="data1/tooltips/image_15.jpg" alt="image_15"/>9</a>
<a href="#" title="image_17"><img src="data1/tooltips/image_17.jpg" alt="image_17"/>10</a>
</div></div><span class="wsl"><a href="http://wowslider.com/vw">slider plugin wordpress</a> by WOWSlider.com v5.6</span>
    <a href="#" class="ws_frame"></a>
    <div class="ws_shadow"></div>
    </div>
    <script type="text/javascript" src="engine1//wowslider.js"></script>
    <script type="text/javascript" src="engine1//script.js"></script>
<!-- End WOWSlider.com BODY section -->
<ul id= "nav2">
    <li><a href="#">Photography</a></li>
    <li><a href="Photo retouching.html">Photo retouching</a></li>
    <li><a href="StudioWork.html">Studio Work</a></li>
</ul>

<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>



@charset "utf-8";
@charset "utf-8";
/* CSS Document */
 body {
     background-color: #FFFFFF;
 }

#HeaderContainer {
    width: 102%;
    height: 320px;
    background-color: #FFFFFF;
    background-image: url("title2.png");
    background-repeat: no-repeat;
    margin-left: 0 auto;
    margin-right: 0 auto;
    float: center;
    position: relative;
    top: -50px;
}    
.title {
    position: relative;
    text-align:center;
    color: #5f5f5f;
}

#nav {
    display: inline;
}

ul {
    list-style: none;
    display: block;
}

.CenterContainer {
    width: 102%;
    overflow: visible;
    display: block;
    height: 210px;
    padding-top: 10px;

}

div.img{
  height: 133px;
  width: 200px;
  float: left;
  text-align: center;
  margin: 20px 30px 20px;
  display: block;
  line-height:0;
}
#nav li a:hover {
    color: #9BACC4;}
/* CSS Document */

a.current:link, a.current:visited {

    border-bottom:thick dotted #FFFFFF;
  }

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}    
#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}    
.TitleImg {
position: relative;
top: 100px;
}

#nav2 {
    max-width: 30%;
    height: 50px;
    float: left;
    padding: 0;
    list-style: none;
    list-style: none;
    background-color: #FFFFFF;
    z-index: 90;
    position: relative;
    top: -500px;
    left: 800px;
    margin: 0 0 10px 0;
    font-weight: bold;
    font-family: 'Hammersmith One', sans-serif;
    }

#nav2 li:hover{
transform: scale(0.862, 1.134);
    -webkit-transform: scale(0.862, 1.134);
    -moz-transform: scale(0.862, 1.134);
    -o-transform: scale(0.862, 1.134);
    -ms-transform: scale(0.862, 1.134);
}

#nav2 li {
    float: left; 
    padding-left: 10px;
    }

#nav2 li a {
        display: inline;
        color: #66a9df;
        }
.frontimage {
        position: absolute;
        left: 500px;
        display: inline;
}    
#nav {
    width: 25px;
    height: 600px;
}
ul.flatflipbuttons{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
perspective: 10000px;
}

ul.flatflipbuttons li{
margin:0;
display: block;
width: 100px; /* dimensions of buttons. */
height: 100px;
margin-bottom: 0; /* spacing between buttons */
background: white;
text-transform: uppercase;
text-align: center;
}

ul.flatflipbuttons li a{
display:table;
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
width: 100%;
height: 100%;
color: black;
background: #3B9DD5;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out; /* CSS3 transition. */
-moz-transition:all 300ms ease-out;
transition:all 300ms ease-out;
}

ul.flatflipbuttons li:nth-of-type(1) a{
color: green;
background: #3B9DD5;
}

ul.flatflipbuttons li:nth-of-type(2) a{
background: #A1CD3A;
}

ul.flatflipbuttons li:nth-of-type(3) a{
background: #80C5EC;
}

ul.flatflipbuttons li:nth-of-type(4) a{
color: white;
background: #635746;
}

ul.flatflipbuttons li:nth-of-type(5) a{
background: #F2C96D;
}

ul.flatflipbuttons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}

ul.flatflipbuttons li b{ /* CSS for text alongside button */
display: block;
position: relative;
top: -100%; /* starting vertical position of text */
left: 100%; /* horizontal position of text */
text-align: left;
text-indent: 10px;
width: 100%;
opacity: 0;
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */
-moz-transition: all 300ms ease-out 0.2s;
transition: all 300ms ease-out 0.5s;
}    

ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */
border-width: 0;
vertical-align: middle;
}   

ul.flatflipbuttons li:hover a{
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #c1e4ec; /* bgcolor of button onMouseover*/
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}

ul.flatflipbuttons li:hover a span{
color: black; /* color of icon font onMouseover */
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}    

ul.flatflipbuttons li:hover b{
opacity: 1;
top: -65%; /* vertical position of text onmouseover */
}

/* CSS for 2nd menu below specifically */

ul.second li a{
background: #eee !important;
}

ul.second li a:hover{
background: #ddd !important;
}      

h1 {
    position: relative;
    top: -100px;
    font-family: 'Special Elite', cursive;
    display: inline;
}

#nav3 {
    max-width: 30%;
    height: 50px;
    float: left;
    padding: 0;
    list-style: none;
    list-style: none;
    background-color: #FFFFFF;
    z-index: 90;
    position: absolute;
    top: 200px;
    left: 800px;
    margin: 0 0 10px 0;
    font-weight: bold;
    color: #5674DC;
    }

#nav3 li {
    float: left; 
    margin: 2px;
    }
#nav3 li a {
        display: inline;

        }

#nav4 {
max-width: 30%;
    height: 50px;
    float: left;
    padding: 0;
    list-style: none;
    list-style: none;
    background-color: #FFFFFF;
    z-index: 90;
    position: absolute;
    top: 200px;
    left: 800px;
    word-spacing:30px;
    margin: 0 0 10px 0;
    }

#nav2 li {
    float: left; 
    margin: 2px;

    }
#nav2 li a {
        display: inline;

        }

a:link {
    text-decoration: none;
    color: #0e5b9a;
}
.contact {
    margin: 0 auto;
    position: relative;
    top: -400px;
    display: block;
    width: 40%;
    font-family: 'PT Sans Narrow', sans-serif;
    }