Jump to content
  • 0

футер при относительном позиционировании

RobotWerder

Asked by RobotWerder,

 Share

Question

RobotWerder Explorer

RobotWerder

Posted
Posted

Верстка трехколоночная .Хочу спозиционировать эелменты относительно так как растягивание мне ненужно..

начинающий . делаю как в статье http://www.htmlbook.ru/content/?id=101 , но знаний нехватает чтобы подвал автоматически смещался под самую длинную из колонок..подскажите как решить эту проблемку?!

Заранее благодарен за ответ

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0
rus Explorer

rus

Posted
Posted
хм.... немогу ничего найти .дайте ссылочку если несложно .. что бы не писал в поиске про подвал мне ничего невстречалось

Вот раз

А вот и два

Это только те темы где я участвовал, а есть и еще...

Link to comment
Share on other sites
  • 0
RobotWerder Explorer

RobotWerder

Posted
  • Author
Posted

в вёрстке я неспец пока что поэтому поясню проблемку .

поглядел ваши ссылочки уважаемый rus . Спасибо. только у меня чуточку другая ситуация.

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

Неподскажете Как решить проблемку?

Link to comment
Share on other sites
  • 0
rus Explorer

rus

Posted
Posted
в вёрстке я неспец пока что поэтому поясню проблемку .

поглядел ваши ссылочки уважаемый rus . Спасибо. только у меня чуточку другая ситуация.

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

Неподскажете Как решить проблемку?

Приведите ваш пример кода, что вы пытались сделать и пытались ли вообще.

И что где у вас не получается.

И что нужно что бы получилось.

Link to comment
Share on other sites
  • 0
RobotWerder Explorer

RobotWerder

Posted
  • Author
Posted

вот чёрт .. помощь так нужна но проблема в том что решил шаблон забабахать на ЦМС жумла и некоторые css-стили там формируются php модулями выводящимися в соответствующей позиции. То есть основа-разметка страницы (дивы или таблица) нормальные, а остальное при помощи отдельных стилей (если интересно описание стилей тут http://help.joom.ru/content/view/42/11/). Если что нить поймёте буду рад помощи..

В общем данная трехколоночная верстка мне подходит.Я очень многово ещё сам непонимаю в данной верстке. Код частично переделан мною.Лишнее удалил Естественно опыта нет и начались проблемы :

текст в левом меню (.mainlevel) отчего та не позиционируется как justifi

в правом диве выводится меню-список (.mostread) и почему то в ИЕ6 съезжает вниз. прочитал что проблема со списком но незнаю что в нем изменить

И в ИЕ отчего то вся верстка спозиционированная поцентру прибилась к левому краю..в ост браузерах как надо по центру

Сss еще не далеко недоделан .пока такие проблемки

<head>

<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />

<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_css.css" rel="stylesheet" type="text/css" />

<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/images/favicon.ico" />

</head>

<body>

<div id="container">

<div id="innerbox">

<div id="leftinner">

<div id="headerbox">

<div id="headmenu"></P>

</div>

</div>

<div id="topbox"> </div>

<div id="pathbox"></div>

<div id="leftbox">

<div id="leftmenu"><div id="leftmenubox">

</div></div>

<div id="mainbox">

<div id="maincontent">

<div id="maininner">

<?php mosMainBody(); ?>

</div></div>

<div id="newsbox">

<div id="news1"></div>

<div id="news2"></div>

</div>

</div>

<div id="rightinner">

<div id="rightmenubox">

</div></div>

</div>

</div>

<div id="clearbox"></div>

<div id="footerbox">

<div id="madeby">

<div align="left">| Design by <a href="http://www.dharc.de" target="_blank">dharc</a> |</div></div>

<div id="version">

<div align="right">| Version 1.0 |</div></div>

<center>

<?php

echo ("<div class=\"small\">");

$tend = mosProfiler::getmicrotime();

$totaltime = ($tend - $tstart);

printf ("Diese Seite wurde in %f Sekunden generiert", $totaltime);

echo ("</div>");

?>

</center>

</div>

</div>

</div>

</body>

</html>

—————————————————————-

css

——————————————————————-

html {

margin-bottom: 1px;

height: 100%!important;

}

body {

min-height:101%;

padding: 0;

font-family: "Century Gothic";

font-size : 11px;

margin: 0px;

background-color: #FFFF00;

color: #FFFFFF;

}

#header {

width:100%;

height:289px;

position:absolute;

top:0;

left:0;

}

#headerbox {

height:289px;

width: 1023px;

background-image: url(../../dj/images/index_03.jpg);

background-repeat: no-repeat;

margin-left: 5px;

}

#headmenu

{

height:100px;

width: 500px;

margin-left: 400px;

padding-top: 20px;

padding-right: 10px;

padding-bottom: 20px;

padding-left: 10px;

}

#footerbox {

height: 325px;

background-image: url(../../dj/images/index_06.jpg);

background-repeat: no-repeat;

background-position: center;

width: 1023px;

margin-top: 20px;

margin-left: 5px;

}

#footer {

left:0;

height: 325px;

width:1000px;

bottom:0;

color: #FFF;

background-color: #333;

}

#container {

width: 1030px;

background-color: #000000;

margin-left: auto;

margin-right: auto;

}

#leftmenu {

width: 180px;

margin-left: 0px;

float: left;

}

#leftbox {

width: 1030px;

margin-left: 5px;

margin-top: 5px;

}

#mainbox {

width: 600px;

float: left;

margin-left: 30px;

}

#maincontent {

margin-top: 5px;

margin-right: 5px;

margin-bottom: 5px;

margin-left: 5px;

}

#maininner {

margin-left: 5px;

margin-right: 5px;

}

#rightinner {

width: 200px;

margin-top: 5px;

margin-right: 5px;

float: right;

}

#rightmenubox {

margin: 5px;

}

#news1 {

width: 45%;

float: left;

margin-top: 5px;

margin-right: 5px;

margin-bottom: 5px;

margin-left: 5px;

}

#news2 {

width: 45%;

float: right;

margin-top: 5px;

margin-right: 5px;

margin-bottom: 5px;

margin-left: 5px;

}

#clearbox {

clear: both;

}

#madeby {

font-family: "Century Gothic";

font-size: 11px;

color: #000000;

width: 100px;

height: 20px;

margin-top: 20px;

margin-left: 10px;

float: left;

}

#version {

font-family: "Century Gothic";

font-size: 11px;

color: #000000;

width: 100px;

height: 20px;

margin-top: 20px;

margin-right: 10px;

float: right;

}

#pathbox

{

background-color: #000000;

}

/*ссыLко и менюшке цвета и афармление*/

#headmenu .mainlevel-nav {

display: inline;

font-size: 10px;

font-weight: bold;

font-family: "Century Gothic";

text-align: left;

height: 50px;

text-decoration: none;

margin-top: 1px;

margin-bottom: 1px;

padding-left: 30px;

background-position: 15px 9px;

background-image: url(../../dj/images/ic.jpg);

background-repeat: no-repeat;

padding-bottom: 55px;

padding-right: 5px;

}

a.mainlevel-nav {

text-decoration: underline;

color: #FF0000;

}

a.mainlevel-nav:hover {

text-decoration: underline;

color: #FFFFFF;

}

a.mainlevel-nav#active_menu {

color: #333;

}

.pathway

{

padding-left: 5px;

font-family: "Century Gothic";

font-size: 10px;

color: #FFFFFF;

text-decoration: none;

background-color: #000000;

letter-spacing: 1px;

word-spacing: 10px;

}

.mainlevel

{

font-family: "Century Gothic";

font-size: 10px;

color: #FFFFFF;

text-decoration: none;

background-color: #000000;

padding-right: 5px;

padding-bottom: 5px;

padding-left: 25px;

letter-spacing: 1.5px;

word-spacing: 5px;

text-align: center;

}

.mainlevel:hover

{

font-size: 10px;

color: #FFFF00;

text-decoration: none;

}

#leftmenu

{

background-color: #000000;

}

ul

{

list-style: square;

list-style-position: outside;

}

.mostread

{

font-family: "Century Gothic";

font-size: 10px;

color: #FFFFFF;

text-decoration: none;

background-color: #000000;

letter-spacing: 1.5px;

text-align: right;

}

a.mostread:hover

{

font-size: 10px;

color: #FFFF00;

text-decoration: none;

}

#maininner

{

font-family: "Century Gothic";

font-size: 10px;

color: #FFFFFF;

text-decoration: none;

background-color: #000000;

letter-spacing: 1.5px;

text-align: justify;

}

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept