Могу ли я сделать div не "сплошным" для окна страницы? - PullRequest
1 голос
/ 05 апреля 2011

У меня есть div с левой стороны, удерживающий «крыло», к которому применен левый с плавающей точкой, но мне нужно, чтобы средний div (есть содержащий div2and3) всегда был в центре, что я могу сделать, но еслиширина окна мала, поэтому средний контейнер отталкивается от экрана, потому что левый div блокируется по краю.

Мне нужно, чтобы оставленный div не был «сплошным», чтобы он мог быть вне экрана и невлияют на авто поля на средний div.Кто-нибудь?Если вам нужно больше объяснений, я могу говорить только в течение еще 20 минут (я нахожусь в классе), и мой интернет был отключен вчера вечером / сегодня утром, мы увидим, когда я вернусь домой, если это будет.

(игнорируйте мой аквариум вфон был проект, который мы только что сделали в этом классе)

Screencap:

http://i53.tinypic.com/2lu3oz9.png

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Banta - Homepage</title>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<style type="text/css">
body {
    background-image: url(images/backgroundd.png);
}
body,td,th {
    color: #0d2927;
}
</style>
</head>
<body>
<div id="maincont">
<div id="middlecont">
<div id="leftwing">
</div>
<div id="header">
</div>
<div id="body">
Lorem ipsum doler sit AMETTTTTTTTTTTTTTT FILLER TEXT FILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXTFILLER TEXT
</div>

</div>
<div id="rightwing">
</div>
</div>

</body>
</html>



    @charset "utf-8";
/* CSS Document */

body{
    font-family:Verdana, Geneva, sans-serif;
}

#maincont {
    margin:auto;
    width:1518px;
    height:782px;
}

#leftwing{
    min-width:0%;
    background-image:url(images/leftside.png);
    width:405px;
    height:449px;
    position:absolute;
    left:-405px;
}

#rightwing{
    float:right;
    background-image:url(images/rightside.png);
    width:405px;
    height:449px;
    margin-top:-782px;
}

#middlecont{
    position:relative;
    margin:auto;
    width:708px;
    height:782px;
}

#header{
    background-image:url(images/headhome.png);
    width:708px;
    height:150px;
}

#body{
    background-image:url(images/bodybg1.png);
    width:708px;
    height:632px;
}

Ответы [ 3 ]

0 голосов
/ 05 апреля 2011

Содержит ли левая часть (div1) какую-либо информацию, например, боковую панель?Если все, что вам нужно, это центрированный div, и div1 и div3 не содержат информации, выполните:

<div align="center">
  <div style="width: 80%" />  <!-- set your own percentage -->
</div>

Или просто укажите ширину для div2 и оставьте ширину в одиночку для div1, и div1 должен свернуться, когда ширинабраузер рухнул.

0 голосов
/ 05 апреля 2011

Это работает - я тестировал его в Chrome, IE8, FF 4.

Левое «крыло» все еще сплошное (фиксированная ширина), но абсолютное позиционирование означает, что оно не влияет на центрированиесредний дел.Он будет вежливо перемещаться за сцену влево, постепенно, по мере уменьшения ширины порта просмотра.

Поместите div1 в middleDiv и используйте абсолютное позиционирование - вы должны применить {position: относительный} к среднему div.

<!DOCTYPE  html>

<html>
<head>
<style>
    div{outline:1px solid gray;}
    #div1{position:absolute;height:300px;width:100px;left:-100px;}  /*the value of the left property should be negative the value of the div's width */
    #div2, #div3{height:200px}
    #middleDiv{width:300px;margin:auto;position:relative;}
</style>
</head>

<body>
    <div id="middleDiv">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </div>
</body>
</html>

(Примечание: контур не будет работать в IE7 или менее, он просто здесь, чтобы показать расположение div.)

0 голосов
/ 05 апреля 2011

Если вы используете фиксированную ширину div2and3, вы можете добавить стиль min-width к элементу body вашей страницы. Установите значение для общей ширины всех ваших элементов (ширина div1 + ширина div2and3).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...