链接CSS时页面崩溃

时间：2014-04-01 14:07:34

标签： javascript php jquery html css

突然当我今天在一个项目上工作时，我的页面崩溃了。它看起来像这样：enter image description here

我直接回到了Dreamweaver并点击了cmd + z然后回到了一两步。但是根本没有发现任何问题。虽然我的页面仍然看起来很容易被误导。 发生这种情况的那一刻，我使用了一些数据库编码，如POST / GET请求，还有一些java脚本。

我试图重做我的CSS文件，但它仍然拒绝工作。

这是我的一个页面的代码，我几乎也在其他2个页面上使用相同的代码。

<!doctype html>

<html>
<head>
<meta charset="UTF-8">
<title>Mountain</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link href="jquery.fancybox.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="jquery.fancybox.pack.js"></script>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

</head>

<body>

<div id="allcontent">

<div>
 <ul id="cssmenu"><!--Includes menu-->
             <?php include ("menu.php");?>




      </ul>
</div>
<div id="content">

<header><img src="mountain.jpg"></header>
<hr>
<div id="left">

<script>

var thumbs = ["thumb1", "thumb2", "thumb3", "thumb4", "thumb5"];

function myHandler(target, event){
//
// Thumbs management och mousemove
  if(event.type == 'mouseover'){
//
// Clear all thumbs
    for( var count in thumbs ){
      $('#'+thumbs[count]).attr("src","stjärna.png");
    }   
//
// Show thumbs_up upto mouse position
    for( var count in thumbs ){
      $('#'+thumbs[count]).attr("src","star-iconyellow.png");
      if(thumbs[count] == target.id) break;
    }
  }
}

$("#thumb1").live('mouseover click', function(event){
  myHandler(this, event);
});
$("#thumb2").live('mouseover click', function(event){
  myHandler(this, event);
});
$("#thumb3").live('mouseover click', function(event){
  myHandler(this, event);
});
$("#thumb4").live('mouseover click', function(event){
  myHandler(this, event);
});
$("#thumb5").live('mouseover click', function(event){
  myHandler(this, event);
});

$("#rating-area").live('mouseleave', function(){
// Clear all thumbs when mouse leaves the rating area
    for( var count in thumbs ){
      $('#'+thumbs[count]).attr("src","stjärna.png");
    } 
});

</script>

            <?php
            if (isset($_FILES['file'])) {

        //Kontrollerar att uppladdad bild är av rätt typ (JPEG) och att storleken
            //inte överstiger en viss storlek - i det här fallet väldigt stor...
                if ((($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] ==
                        "image/pjpeg")) && ($_FILES["file"]["size"] < 1000000)) {
                        if ($_FILES["file"]["error"] > 0) {
                            echo "Errormessage: " . $_FILES["file"]["error"] . "<br />";
                        } else {

                            //Kontrollerar att en bild med samma namn inte redan finns i 
                            //katalogen dit bilden skall flyttas
                            if (file_exists("bilder/" . $_FILES["file"]["name"])) {
                                echo $_FILES["file"]["name"] . " alrady exists. Pick another name please.";

                            } else {

                            //Flyttar filen till rätt katalog      
                            move_uploaded_file($_FILES["file"]["tmp_name"], "bilder/" . $_FILES["file"]["name"]);

                            //Spar namn på originalbild och miniatyr i variabler
                            $storedfile = $_FILES["file"]["name"];
                            $thumbnail = "thumb_" . $_FILES["file"]["name"];

                            //Maximal storlek i höjd och bredd för miniatyr
                            $width_thumbnail = 250;
                            $height_thumbnail = 80;


                            //Läser in originalstorleken på den uppladdade bilden, och spar 
                            //den i variablerna width_orig, height_orig
                            list($width_thumbnail_orig, $height_thumbnail_orig) = getimagesize('bilder/' . $storedfile);

                            //Räknar ut förhållandet mellan höjd och bredd (sk "ratio")
                            //Detta för att kunna få samma höjd- breddförhållande på miniatyren
                            $ratio_orig = $width_thumbnail_orig / $height_thumbnail_orig;                                      

                            //Räknar ut storlek på miniatyr
                            if ($width_thumbnail / $height_thumbnail > $ratio_orig) {
                                $width_thumbnail = $height_thumbnail * $ratio_orig;
                                $height_thumbnail = $width_thumbnail / $ratio_orig;
                            } else {
                                $height_thumbnail = $width_thumbnail / $ratio_orig;
                                $width_thumbnail = $height_thumbnail * $ratio_orig;
                            }

                            //Skapar en ny bild miniatyrbild med rätt storlek
                            $image_p = imagecreatetruecolor($width_thumbnail, $height_thumbnail);
                            $image = imagecreatefromjpeg('bilder/' . $storedfile);
                            imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width_thumbnail, $height_thumbnail, $width_thumbnail_orig, $height_thumbnail_orig);

                            //Sparar miniatyr
                            imagejpeg($image_p, 'bilder/' . $thumbnail);

                            echo "<h3>Image uploaded</h3>\n";
                            echo "<a href='bilder/$storedfile' title='Öppna originalbild'><img src='bilder/thumb_$storedfile' alt='$storedfile' /></a>\n";

                            }
                        }
                    } 
                    else {
                        // Här hamnar man om det inte är JPEG/bildfil för stor
                        echo "No image larger than 500kb.";
                    }
            } // Slut på isset(FILE)
            ?>


    </div><!-- /uploadform -->


</div>
<div id="right">



<h4>Mountains</h4>
<p>Here you will find all the pictures uploaded that contains a mountain in it "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</div>


<div id="mitten">

<p> <a href="mountain.php?order=uppladdare">Uploader</a>  -  <a href="mountain.php?order=date">Date</a></p>

<div id="uploadform">
    <form action="mountain.php" method="post" enctype="multipart/form-data">
        <input type="hidden" name="MAX_FILE_SIZE" value="500000" />
        <label for="file"><strong>Filename:</strong></label>
        <input type="file" name="file" id="file" />
        <input type="text" name="uppladdare" placeholder="Uploader:" title="What's your name?"/>
        <input type="text" name="titel" placeholder="Title" title="Give a title to your piece of work"/>
        <input type="text" name="history" placeholder="History" title="Tell us the story behind your image. Where is it taken, etc."/>
        <input type="submit" name="submit" value="Upload" />
    </form>
<!--Function adding tooltip to input-->

    <script>
        $(function() {
            $(document).tooltip();
        }); 
    </script>
<?php
//Send data to databae
if (isset($_POST['submit'])) {
    $dbcon = mysqli_connect("localhost", "user1", "test1", "tutorial");

    $stored_file = $_FILES["file"]["name"];
    $file = "";

    $query = "INSERT INTO mountains (filname, uppladdare, titel, History)
VALUES ('$stored_file','$_POST[uppladdare]','$_POST[titel]','$_POST[history]')";
    if (!mysqli_query($dbcon, $query))
        ;
}
?>
<?php

error_reporting(0);
$order = "";

if ($_GET['order']) {
    if ($_GET['order'] == "date") {
        $order = " ORDER BY date DESC";
    }
}
if ($_GET['order']) {
    if ($_GET['order'] == "uppladdare") {
        $order = " ORDER BY uppladdare";
    }//Connections to database
}

$dbcon = mysqli_connect("localhost", "user1", "test1", "tutorial");
$selectall = "SELECT * FROM mountains $order";
$result = mysqli_query($dbcon, $selectall);

while ($row = mysqli_fetch_array($result)) {

    $information = ' Titel: ' . $row['titel'] . ' Uppladdare: ' . $row['uppladdare'] . ' Filnamn: ' . $row['filname'] . ' History: ' . $row['History'] . ' Datum: ' . $row['date'];

    //Echo out the form and information gathered from the database
    echo "<strong>Title: </strong>" . $row['titel'] . "<br>";
    echo "<strong>Uploader: </strong>" . $row['uppladdare'] . "<br>";
    echo "<strong>Imagename: </strong>" . $row['filname'] . "<br>";
    echo "<strong>History: </strong>" . $row['History'] . "<br>";
    echo "<strong>Date: </strong>" . $row['date'] . "<br>";
    echo "<br>";

    $original = $row['filname'];

    echo "<a class='fancybox' rel='massoravbilder' href='bilder/$original'> <img src='bilder/thumb_" . $row['filname'] . "' alt='$information' /></a>" . "<br>";
}
?>





</div>

<script>
$(document).ready(function()
 {
   $('li a').click(function(){
        $.get($(this).prop('href'), function(data){
            $('#allcontent').html(data);
        });
        return false;
    });
 });
 </script>

</div>
</div>
</div>
</body>
</html>

我的CSS文件如下：

body    {
    background-color:white;
    color:black;



}

#content{
    width:800px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
}


#left   {
    float:left;
    width:350px;
    margin:10px;

}
#right  {
    float:right;
    width:350px;
    margin:10px;
    text-align:left;
}

h3  {
    text-align:center;
}

header  img {
    margin-left:auto;
    margin-right:auto;
    display:block;
}

#cssmenu    li  {
    list-style-type:none;

}
#cssmenu    li  a   {
    float:right;
    display:inline-block;
    text-decoration:none;
    color:grey;
    margin:4px;


}

#cssmenu    a:hover {
    background-color:grey;
    color:white;

}

.inlogg {
    margin:0;
    padding:0;


}

#mitten {
    width:200px;

}

#footer

{ 
width: 100%;
height:20px;
background-color:#999;
position:fixed;
text-align:center;
top:97.5%;
border-top: solid #000;
}

img:nth-child(1){
    width: 10px;
    height: 15px;
  }
  img:nth-child(2){
    width: 15px;
    height: 20px;
  }
  img:nth-child(3){
    width: 20px;
    height: 25px;
  }
  img:nth-child(4){
    width: 25px;
    height: 30px;
  }

  div {
// Rounded corners with border and padding of the rating area div
    -moz-border-radius: 15px;
    webkit-border-radius: 15px;
    border-radius: 15px;
    position: relative; 
    top: 100px; 
    left: 200px; 

    border: 2px solid grey; padding:10px; 
  }
  .shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
  }

  #resultat{
      width:100px;
      height:100px;
      position:relative;
  }

正如我所说，它起作用但突然之间却没有。

我已经坐了将近6个小时试图解决为什么我现在无法链接CSS文件。我删除了head部分中的其他链接/脚本，只尝试使用此CSS链接。但没有任何效果。

请帮我解决这个问题。

如果我忘了什么，请告诉我。

1 个答案:

答案 0 :(得分：0)

在＆＃34; allcontent＆＃34;之后删除你的DIV。 DIV。布局可以追溯到可识别的东西。它应该是：

<div id="allcontent">

 <!-- REMOVE THIS  <div>   -->

 <ul id="cssmenu"><!--Includes menu-->
             <?php include ("menu.php");?>

可能存在一些布局问题。尝试运行它：

http://validator.w3.org/

相关问题
最新问题