0
미안 데 문제가 사업부는 바닥
이 내 페이지에서 다른 DIV 요소를 포함하는 DIV 래퍼가 ... 꽤 간단한 일해야하지만 이것이 해결 점점 정렬되지 DIV. 모두px에
margin-top을 사용하여 정렬됩니다. 마지막 부분 (바닥 글)은
margin-bottom:0px이어야하므로 래퍼의 맨 아래에 표시되지만 작동하지 않습니다. 바닥 글은 항상 페이지 상단에 표시됩니다.
여기 다른 정렬 문제로 갔다. 꼬리표에 position: absolute을주고 래퍼에 position:relative을 붙이려고했다. 일하지 않았다. 나는 % 높이도 최소 높이를 사용하여 시도 ...하지만 여전히 좌절을 조금 받고 최고
미안에 바닥 글 :(
CSS :
body {
margin: 0px;
background-repeat: repeat;
background-image: url(images/modulo-pattern-grey-light.gif);
}
#body-quienes {
height: 800px;
}
#pagina {
height: 720px;
margin: 0 auto;
background: #fff url(images/footer.gif) left bottom no-repeat;
width: 980px;
box-shadow: 4px 4px 5px #999;
}
.header {
position: absolute;
margin-top: 0px;
margin-bottom: 0 px;
margin-right: auto;
margin-left: auto;
height: 70px;
width: 980px;
margin: 0px;
background-image: url(images/header.gif);
}
.menu_container{
position: absolute;
float: left;
width: 270px;
margin-top: 220px;
}
.main_menu ul {
padding: 0px;
margin:0px;
list-style-type: none;
}
.main_menu ul li {
font-family:Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-size:11px;
letter-spacing:4px;
text-align:right;
line-height:35px;
list-style-type:none;
}
.main_menu ul li a {
padding-right: 25px;
text-decoration:none;
color:#999;
display: inline-block;
}
.main_menu ul li a.selected {
color: #bc4c9b;
font-weight:bold;
background: url(images/circle.gif) right center no-repeat;
}
.main_menu ul li a:hover {
text-decoration:none;
color:#999;
font-weight:bold;
background:url(images/circle_grey.gif) right center no-repeat;
}
.quienes_pic{
position: absolute;
height: 259px;
width: 174px;
margin-left: 306px;
margin-top: 230px;
background-image: url(images/san.jpg);
}
.quienes_text{
position: absolute;
padding-left: 25px;
border-left: 2px dotted #ccc;
width: 395px;
height: 360px;
margin-left: 510px;
margin-top: 230px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color: #bc4c9b;
line-height:20px;
content-left-padding: 25px;
}
.footer {
position:absolute;
margin-bottom: 0px;
margin-left: 490px;
width: 460px;
height: 98px;
margin-right: 30px;
background-color: #bc4c9b;
}
HTML :
<body id="body-quienes">
<div id="pagina">
<div class="header"></div>
<div class="logo"></div>
<div class="flashanim"></div>
<div class="menu_container">
<div class="main_menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a class="selected" >Quiénes Somos</a></li>
<li><a href="consultoria.html">Consultoría</a></li>
<li><a href="capacitacion.html">Capacitación</a></li>
<li><a href="academico.html">Académico/Artículos</a></li>
<li><a href="alianzas.html">Alianzas</a></li>
<li><a href="proyectos.html">Proyectos</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</div>
</div>
<div class="quienes_pic"></div>
<div class="quienes_text">Main Text</div>
<div class="footer"></div>
</div>
당신은 CSS의 기본으로 돌아 가야 할 수도 있습니다. 왜 대부분의 div가 첫 번째 위치에 절대적으로 위치합니까? –
당신은 당신의 요점을 분명히하지 않습니다 : 먼저 "항상 래퍼의 맨 아래에 나타납니다"라고 말한 다음 "꼬릿말은 항상 페이지 상단에 나타납니다"라고 말합니다. 질문을 명확하게하고 불필요한 문장을 제거해야합니다. –
나는 CSS의 기본에서 오전 :) 나는 divs에 대한 이런 종류의 배치를 사용하는 튜토리얼을 읽었을 것이다. 좋은 정보가 아닐지도 모른다. 나는 더 나은 정보를 찾으려고 노력할 것이다. – eliana