Question

以下是我正在处理的网站的链接：http://students.bcitwebdev.com/jlandon/geordieirving/index.php。

我遇到了问题......边距是以汽车为中心的...但它只是有点偏离。谁能看到这个？这真让我烦恼。

这是我的html：

<!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet" type="text/css" href="geordie.css" />
<script type="text/javascript" src="geordie.js"></script>

<title>Home</title>
<meta charset="UTF-8"/>

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./galleria/galleria-1.2.8.min.js"></script>
<script type="text/javascript" src="./galleria/plugins/flickr/galleria.flickr.min.js">    </script>

<script type="text/javascript">
$(document).ready(function(){

Galleria.loadTheme('./galleria/themes/classic/galleria.classic.min.js');
$("#galleria").galleria({
    autoplay: 5000,
    responsive: true,
    height: .57,
    imageCrop: false,
    thumbCrop: 'height',
    carousel: true,
    showInfo: true,
    swipe: true,
    easing: 'galleriaOut',
    transition: 'pulse',
    flickr: 'search:Vancouver Whitecaps FC vs. San Jose Earthquakes',
    flickrOptions: {
        max: 30
    }
});

});
</script>

</head>

<body>
<?php
//header
include("header.php");
?>

<div id="content">

<div id="galleria"></div>

</div>

<div id="footer"></div>

</body>

</html>

这是我的css：

@font-face          {   font-family:"sketchscala";
                    src:url('sketchscalasans-webfont.ttf');
                }

@font-face          {   font-family:"gudearegular";
                    src:url('gudea_regular.ttf');
                }

*                   {   margin:0;
                    padding:0;
                }

html, body          {   background-color:#1A1A1A;
                    height:100%;
                }

h1                  {   font-size:300%;
                }

h2                  {   color:#6EB89F;
                }

h3                  {   color:#7DB4B6;
                }

h4                  {   color:#76BCAE;
                }

p                   {   font-size:50%;
                }

hr                  {   height:22px;
                    background-image:url('hrimage2.png');
                    background-repeat:repeat-x;
                    border:none;
                }

ul                  {   list-style-type:none;
                }

li                  {   display:inline;
                }

#galleria           {   width:900px;
                    margin-left: auto;
                    margin-right:auto;
                    height:auto;
                    background:#000000;
                }                   

#container          {   min-height:100%;
                }

#header             {   background-image:url('debut_dark.png');
                    background-color:#333333;
                    height:100px;
                    width:100%;
                }

#title              {   color:#FFFFFF;
                    font-family:"sketchscala";
                    width:723px;
                    position:relative;
                    margin-left:auto;
                    margin-right:auto;
                    top:10px;       
                }

#nav                {   font-family:"sketchscala";
                    color:#FFFFFF;
                    width:480px;
                    position:relative;
                    margin-left:auto;
                    margin-right:auto;
                    top:10px;
                }

#nav a:link         {   color:#FFFFFF;
                    text-decoration:none;
                }

#nav a:hover            {   color:#999999;
                    text-decoration:underline;
                }

#nav a:visited      {   color:#FFFFFF;
                    text-decoration:none;
                }   

#content            {   font-family:"gudearegular";
                    color:#333333;
                    overflow:auto;
                    padding-bottom:271px;
                    padding-left:100px;
                    padding-top:10px;
                }

#content a:link     {   color:#333333;
                    text-decoration:underline;
                }

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

#content a:visited  {   color:#333333;
                    text-decoration:underline;
                }

#footer             {   position:relative;
                    margin-top:-271px;
                    height:271px;
                    width:100%;
                    clear:both;
                    background-image:url('bottom_border.png');
                }

HAAAALP

Answer 1

padding-left: 100px;上有一个#content，删除它，一切看起来都不错！

Answer 2

删除padding-left ID

上的#content

#content {
    color: #333333;
    font-family: "gudearegular";
    overflow: auto;
    padding-bottom: 271px;
    padding-left: 100px; //remove this line 
    padding-top: 10px;
}

Answer 3

转到geordie.css中的#content样式并禁用＆＃34; padding-left：100px;＆＃34;。之后应该看起来很好。

为什么这个幻灯片不以我的页面为中心？

3 个答案: