小编Lis*_*isa的帖子

我正在开发一个响应式网站,并希望将其文本集中在一起.我可以用行高来做这个,但是它不会响应,当nav元素变小时,行高保持不变.所以,它基本上搞砸了我的设计.

有没有办法让行高响应,或任何其他(响应)方式将文本放在垂直中心？这似乎是一件简单的事情,但我无法弄明白.

这是一个小提琴:http://jsfiddle.net/4zahumwm/

HTML:

<h1 title="test">test</h1>
<nav id="nav-utility">
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">MY STORY</a></li>
        <li class="mid-left"><a href="#">GALLERY</a></li>
        <li class="mid-right"><a href="#">RATES</a></li>
        <li><a href="#">TERMS</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</nav>

<div id="container"></div>

CSS:

html, body{
    width:100%; height:100%;
    margin:0; padding:0;    
}

html {  
}

div#container{
    width:100%;
    height:95.7%;

    background: url(background/monitor/IMG_5929.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}

h1{
    background-image:url(images/menu/polygon.png);
    display: block;
    height: 71px;
    left: 50%;
    margin:0; padding:0;    
    margin-left: -43px;
    position: absolute;
    text-indent: -9999px;
    top: 0;
    width: 87px;
    z-index: …

我正试图让这个设计:

但是我遇到了徽标和漩涡的问题,我不知道如何添加它们.我尝试过绝对定位,但在调整网站大小时,徽标和漩涡最终会出现与图像正方形不同的地方.

如何添加漩涡和徽标？

JSFiddle: http ://jsfiddle.net/uHsJv/1/
当你想编辑JS小提琴时,在我网站上的images文件夹中你可以找到以下图片:
- logo(images/logo.png或images/logogroot .png)
- 顶部的两个漩涡包括logo(images/boven.png)
- 底部的两个漩涡(images/onder.png)
- 完整的'背景'(images/achtergrond.png)

目前的HTML:

<div class="outer"><div class="middle"><div class="wrap"> <!-- Open .wrap -->

    <div class="box side left"><!-- Open .box -->
        <a href="#" class="boxInner innerLeft"><!-- Open .boxInner -->
            <div class="overlay hover"></div>
        </a><!-- Close .boxInner -->
    </div><!-- Close .box -->


    <div class="boxWrap"> <!-- Open .boxWrap -->
      <div class="leftUp"><!-- Open .box -->
        <a href="#" class="boxInner innerLeftUp"><!-- Open .boxInner -->
            <div class="overlay blue"></div>
        </a><!-- Close .boxInner -->
      </div><!-- Close .box --> …

我正在制作一个用PHP和mysql加载图像的画廊.现在我正在尝试合并类似灯箱的叠加层,但具有特定的,可编辑的html.所以,我可以添加我想要显示的元素(图像,标题,描述,扩展描述),这些元素通过php和mysql加载.

我用谷歌搜索了一堆灯箱,但它们并不是我想要的,除此之外它必须获得许可才能在商业上使用它.(所以如果可能的话,我想自己做)

我目前的html代码,由php和mysql加载:

<div class='view view-tenth'>
<img src='".$images['orig']."' alt='".$images['name']."' />
<div class='mask'>
<h2>".$images['model']."</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href='#' class='info'>Read More</a>
</div>
</div>

基本上,我希望在点击"阅读更多"时加载叠加层,但是具有该特定图像的特定标题,描述等.

但问题是,我不确定如何编码.有人有关于如何处理这个问题的建议吗？

-edit-
所以基本上我正在寻找的是一种方法,将从我的数据库中检索到的PHP数据,例如HREF链接,转移到覆盖层,这样当点击图像时,正确的信息(标题,描述等)显示.

我正在努力转移数据,而不是制作实际的HTML叠加层.希望清除一切.

-edit 2-得到了colorbox jquery工作... http://imandragrafie.nl/demo/ontwerp_test.php但是现在我需要将信息加载到框中:)

没有的fancybox请,我不能用花哨的框商业网站.

我按照本教程制作了一个图像上传器.它工作正常,除非我尝试上传更大的文件大小:它只是将文件大小"更改"为64KB并且只显示较大图像的一小部分.所以,我用Google搜索并发现'blob'的最大文件大小为64kb,因此我将其更改为longblob,其最大文件大小为4GB.

但现在,尝试上传大图像(1MB或更大),我得到SQL错误' MySQL服务器已经消失 '.对于小于1MB的图像,上传工作.上传文件大小为915kb的1400x900图像,但文件大小为1.6mb的1400x900图像不上传.上传了一个250x179的gif,文件大小为1mb.看起来如果文件大小大于1MB,PHP中的SQL插入函数就不再连接了:这怎么可能？

我的php.ini的最大文件大小为32MB,所以这不是问题.我正在使用MAMP.

HTML:

<form action="tutorial.php" method="POST" enctype="multipart/form-data">
    File:
    <input type="file" name="image" > <input type="submit" value="Upload">
</form>

PHP:

// connect to database
include 'include/config.php'; 

// file properties
$file = $_FILES['image']['tmp_name'];

if (!isset($file)){
    echo "Please select an image.";
} else {
    $image = addslashes(file_get_contents($_FILES['image']['tmp_name']));
    $image_name = addslashes($_FILES['image']['name']);
    $image_size = getimagesize($_FILES['image']['tmp_name']);

    if ($image_size==FALSE){
        echo "This is not an image";    
    }else{
        if(!$insert = mysql_query("INSERT INTO gallery VALUES ('', '$image_name', '$image')")){
            die(mysql_error());
            echo "Problem uploading the image.";
        }else{
            $lastid = …

我正在尝试编写我之前在 photoshop 中制作的设计，但我觉得我没有以“正确”的方式做事，应该有另一种更好的方式来实现我想要的。

为了旋转 div 并保持它与 100% 宽度 a href 属性的链接，我使用了转换。但是这样一来，get 里面的所有东西也都变成了 45 度。有没有更好的方法来实现它？因为我想稍后添加 Jquery，而且不必旋转我在这些 div 中添加的每一个小东西会很好。

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);

我真的希望网站能够响应，但由于某种原因，高度不想与其他百分比一起加入。例如，我希望 div#midden 为高度的 24%，但保持正方形。我无法弄清楚如何做到这一点。 http://jsfiddle.net/AeFcY/1/

最后，定位。我希望整个事情都在页面的中心，但我想出的唯一方法是使用边距：0 自动和绝对定位。但是，这给将 div 彼此相邻定位带来了一项艰巨的工作......现在我已经通过将 'right' 属性从 855px 更改为 -855px 来定位它们。

HTML代码：

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<title>imandragrafie</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>

<div id="wrapper">
    <div id="links" class="zijden draai"><a href="#"></a></div>
    <div id="midden" class="draai"><a href="#"></a></div>
    <div id="rechts" class="zijden draai"><a href="#"></a></div>
</div>
</body>
</html>

CSS：

html, …

我只是编写简单的代码,但我的结果中似乎有一个无法解释的空白......我似乎无法失去它!

要清楚:我的意思是紫色标题和白色nav属性之间的"线".

我尝试删除代码中的选项卡和空格,但它没有帮助.

这是一个简单的小提琴:http: //jsfiddle.net/LNhK5/

HTML:

<body>

<div id="wrapper">

    <header>
        <img class="logo" src="images/logo.png">
    </header>

    <nav id="mainMenu">
        <ul>
            <li>Nieuwsoverzicht</li>
            <li>Trending</li>
            <li>Lokaal nieuws</li>
        </ul>
    </nav>
</div>
</body>

CSS:

body{
    background-color:#ebebeb;
    margin:0;
    padding:0;
}

#wrapper{
    width:100%; 

    padding:0;
    margin:0;
}

header{
    background-color:#835497;

    height:70px;
    width:100%;

    margin:0;
    padding:0;
}

.logo{
    height:80%;

    display:block;
    margin: 0 auto 0 auto;
}

nav{
    background-color:#ffffff;

    height:45px;
    width:100%;

    margin:0;
    padding:0;
}

nav#mainMenu ul li{
    font-family:'source_sans_proregular';
    font-size:1.2em;
    color:#c2c2c2;

    display:inline-block;
    text-align:center;
    margin:0;
    padding:0;

}

这是我忽视的事情,还是我只是犯了一个拼写错误？