проблема с подвалом

Bismuth · April 11, 2012

Всем доброе время суток

У меня проблема с резиновой версткой, а точнее с подвалом. он у меня прижать основным блоком Wrapper, все бы хорошо, но когда заполняется контетом, он остается на месте, а все остальное спускается как надо.

Куда мне нужно поставить блок див с классом clear:both;?

вот html

<body>
<div id="wrapper">
	<div id="header">
    	<div id="logo">
         	<a href="#"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/images/the_gamer.png" width="286" height="66" title="The Gamer"></a>
        </div><!--logo-->
        	<div id="banner">
            	<jdoc:include type="modules" name="banner" />
            </div><!--banner-->
    </div><!--header-->
    	<div id="nav">
        	<div id="menu">
            	<jdoc:include type="modules" name="menu_top" />
            </div><!--menu-->
        </div><!--nav-->
          	<div id="container">
            	<div id="content">
                	<div id="all">
                    	<div id="top">
                        	<div id="top_back">
                            	<div id="top_left">
                                	<div id="top_right"></div><!--top_right-->
                                </div><!--top_left-->                                
                            </div><!--top_back-->
                        </div><!--top-->
                        	<div id="center">
                            	<div id="text">
                                	<jdoc:include type="component" />
                                </div><!--text-->
                                	<div id="comeng">
                                    	<div class="comeng_box"><jdoc:include type="modules" name="comeng_box" style="xhtml" /></div><!--comeng-->
                                    </div><!--comeng-->
                            </div><!--center-->
                            	<div id="bottom">
                                	<div id="bottom_back">
                            			<div id="bottom_left">
                                			<div id="bottom_right"></div><!--bottom_right-->
                                		</div><!--bottom_left-->                                
                            		</div><!--bottom_back-->
                             	</div><!--bottom-->
                    </div><!--all-->
                </div><!--content-->
                	<div id="left_s">
                      <jdoc:include type="modules" name="left" style="wall" />
                    </div><!--left_s-->
                    	<div id="right_s">
                        	<jdoc:include type="modules" name="right" style="wall" />
                        </div><!--right_s-->
            </div><!--cotnainer-->
</div><!--wrapper-->
<div class="clear"></div>
    <div id="footer">
      	<div id="counter">
        	<jdoc:include type="modules" name="counter" />
        </div><!--counter-->
    	<span>2012 © The Gamer</span>
	</div><!--footer-->
</body>

Заранее спасибо))

Switch74 · April 11, 2012

а стили то какие у всего этого?

а clear в wrapper засунуть скорее всего нужно

Edited April 11, 2012 by Switch74

Bismuth · April 12, 2012

а стили то какие у всего этого?
а clear в wrapper засунуть скорее всего нужно

Стили вот CSS


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	height:100%;
	background-color:#d0cfcf;
	line-height: 1;
	min-width:970px;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

:focus {
	outline: 0;
}


ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*————————————*/

html {height:100%;}

#wrapper {height:100%;}

/*————————————*/

#header {
	width:100%;
	height:150px;
	background-image:url(../images/header.jpg);
	background-repeat:repeat-x;
}

#logo {
	padding:40px 0 0 100px;
}

#banner {
	margin-top:-120px;
	margin-right:310px;
	width:460px;
	height:60px;
	float:right;
}

/*————————————*/

#nav {
	margin-bottom:20px;
	width:100%;
	height:40px;
	background-image:url(../images/nav.jpg);
	background-repeat:repeat-x;
}

#menu {
	margin:0 auto;
	width:700px;
}

/*————————————*/

#container {
	margin:0 auto;
	width:90%;
}

#content {
	width:100%;
	float:left;
}

#all {
	margin:0 214px;
	height:100px;
}

#center {
	padding:0 25px;
	background-color:#fff;
	border-left:3px solid #adadad;
	border-right:3px solid #adadad;
	overflow:hidden;	
}

#text {}


#top {
	width:100%;
}

#top_back, #top_left, #top_right, #bottom_back, #bottom_left,  #bottom_right {height:17px;}

#top_back {
	background-image:url(../images/top.png);
	background-repeat:repeat-x;
}

#top_left {
	background-image:url(../images/left_top.png);
	background-repeat:no-repeat;
	background-position:left top;
}

#top_right {
	background-image:url(../images/right_top.png);
	background-repeat:no-repeat;
	background-position:right top;
}

#bottom_back {
	background-image:url(../images/bottom.png);
	background-repeat:repeat-x;
}

#bottom_left {
	background-image:url(../images/left_bottom.png);
	background-repeat:no-repeat;
	background-position:left bottom;
}

#bottom_right {
	background-image:url(../images/right_bottom.png);
	background-repeat:no-repeat;
	background-position:right bottom;
}

/*————————————*/

#left_s {
	margin-left:-100%;
	width:204px;
	float:left;
}

#right_s {
	margin-left:-204px;
	width:204px;
	float:left;
}


/*————————————*/

#footer {
	margin-top:-40px;
	width:100%;
	height:20px;
	font-family:Tahoma;
	font-size:12px;
	text-align:center;
	color:#2b2b2b;

}

/*———————————--*/

#counter {
	margin-left:100px;
	border:1px solid #000;
	width:100px;
	height:20px;
}

/*———————————--*/

.clear {clear:both;}

Switch74 · April 12, 2012

попробуй


#wrapper {min-height:100%;}

и вот этот момент между wrapper и footer я бы изменил так, но это не принципиально


   <div class="clear"></div>
</div><!--wrapper-->
<div id="footer">

а вообще можно удалить

<div class="clear"></div>

и сделать

<div class="clear" id="footer">

Bismuth · April 12, 2012

попробуй
#wrapper {min-height:100%;}
и вот этот момент между wrapper и footer я бы изменил так, но это не принципиально
   <div class="clear"></div>
</div>
<div id="footer">
а вообще можно удалить
<div class="clear"></div>
и сделать
<div class="clear" id="footer">

Не работает ни как, из выше перечисленных(((, footer как впаянный((

Switch74 · April 13, 2012

ххх... почему у меня ваш код работает, а у вас нет?

к слову у вас доктайп стоит?

Bismuth · April 13, 2012

ххх... почему у меня ваш код работает, а у вас нет?
к слову у вас доктайп стоит?

Да стоит, вот весь код

<?php
defined('_JEXEC') or die;
$document = JFactory::getDocument();
$document->addScript('https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); ?>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
</head>

<body>
<div id="wrapper">
	<div id="header">
    	<div id="logo">
         	<a href="#"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/images/logo.png" width="267" height="94"></a>
        </div><!--logo-->
        	<div id="banner">
            	<jdoc:include type="modules" name="banner" />
            </div><!--banner-->
    </div><!--header-->
    	<div id="nav">
        	<div id="menu">
            	<jdoc:include type="modules" name="menu_top" />
            </div><!--menu-->
        </div><!--nav-->
          	<div id="container">
            	<div id="content">
                	<div id="all">
                    	<div id="top">
                        	<div id="top_back">
                            	<div id="top_left">
                                	<div id="top_right"></div><!--top_right-->
                                </div><!--top_left-->                                
                            </div><!--top_back-->
                        </div><!--top-->
                        	<div id="center">
                            	<div id="text">
                                	<jdoc:include type="component" style="my"/>
                                </div><!--text-->
                                	<div id="img">
                                    	<div class="img_box"><jdoc:include type="modules" name="box" /></div><!--box-->
                                    </div><!--img-->
                            </div><!--center-->
                            	<div id="bottom">
                                	<div id="bottom_back">
                            			<div id="bottom_left">
                                			<div id="bottom_right"></div><!--bottom_right-->
                                		</div><!--bottom_left-->                                
                            		</div><!--bottom_back-->
                             	</div><!--bottom-->
                    </div><!--all-->
                </div><!--content-->
                	<div id="left_s">
                    	<jdoc:include type="modules" name="left" style="wall" />
                    </div><!--left_s-->
                    <div id="right_s">
                    	<jdoc:include type="modules" name="right" style="wall" />
                    </div><!--right_s-->
            </div><!--cotnainer-->
            <div class="clear"></div>
</div><!--wrapper-->
    <div id="footer" class="clear" >
    	<div id="counter">
        	<jdoc:include type="modules" name="counter" />
        </div><!--counter-->
    	<span>2012 © WallpaperHD</span>
	</div><!--footer-->
</body>
</html>

Sign In

проблема с подвалом

Question

Bismuth

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Switch74

Link to comment

Share on other sites

Bismuth

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

Bismuth

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

Bismuth

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information