Площадь области содержимого между верхним и нижним колонтитулом

ВОПРОС: Я пытаюсь, чтобы мой раздел {{TEXT}} или ".acton" оставался центрированным в теле страницы и между нижним колонтитулом и заголовком во все времена.Площадь области содержимого между верхним и нижним колонтитулом

Я использую этот шаблон для создания целевых страниц в программном обеспечении автоматизации маркетинга под названием ACT-ON. Так что, надеюсь, любое исправление, которое мы можем внести в содержание тела, останется в центре внимания.

Вот мой jsfiddle: http://jsfiddle.net/misterizzo/dMu79/

<body> 
<div id="bg"> 
    <img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png"> 
</div> 
<div id="main"> 
<div id="header"> 
    <div id="top-left"><a href="http://medata.com/"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo"></a> 
    </div> 

    <div id="nav"> 
    <ul> 
     <li><a href="http://newsworthy.medata.com/" target="_blank"><span class="button">NewsWorthy</a> 
      </span> 
     </li> 
     <li><a href="#"><span class="button">Solutions</a> 
      </span> 
     </li> 
     <li><a href="#"><span class="button">About Us</a> 
      </span> 
     </li> 
     <li><a href="#"><span class="button">Home</a> 
      </span> 
     </li> 
    </ul> 
    </div> 

<div class="acton"> 
{{TEXT}} 
</div> 

<div id="footer"> 
<ul> 
     <li><a href="http://newsworthy.medata.com/" target="_blank"><span class="button">NewsWorthy</a> 
      </span> 
     </li> 
     <li><a href="#"><span class="button">Solutions</a> 
      </span> 
     </li> 
     <li><a href="#"><span class="button">About Us</a> 
      </span> 
     </li> 
     <li><a href="#"><span class="button">Home</a> 
      </span> 
     </li> 
    </ul> 
</div> 
</div> 



</div> 
</body>

Надеюсь, это мой последний вопрос по этому шаблону я уже строите. Я искренне ценю всю помощь от всех до сих пор!

источник

2014-02-18 Misterizzo

вы можете Ис использовать дисплей: table,table-row/table-cell вместе с Недвижимостью Болгарии Недвижимости: vertical-align:middle; если ваш HTML является действительным, и со структурой, необходимой.

Сброс CSS должен быть загружен перед вашим собственным CSS, он также будет не использовать! Важно.

// comment // недействительный комментарий в CSS, но /* comment */ есть.

http://jsfiddle.net/dMu79/7/

основно структура:

<body or wrapper><!-- as heigh/width:100%; and display:table --> 
<header> as table-row</header> 
<main> as table-cell and height:100% , it will shrink to leave space to header and footer</main> 
<footer> as table-row</footer> 
</body or wrapper>

источник

2014-02-18 18:03:47

Спасибо за это, это, кажется, работает лучше всего до сих пор! – Misterizzo

Вот одно решение, которое может работать для вас:

Demo Fiddle

CSS:

.acton { 
    width: 900px; 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    height: auto; 
    top: 106px; 
}

источник

2014-02-18 17:44:39 badAdviceGuy

Ты HTML сломана в местах и отсутствует закрывающий div. Я установил ее в этом Fiddle и обновленный код ниже:

<div id="header"> 
     <div id="top-left"> 
      <a href="http://medata.com/"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo"></a> 
     </div> 

     <div id="nav"> 
      <ul> 
       <li> 
        <a href="http://newsworthy.medata.com/" target="_blank"><span class="button">NewsWorthy</span></a> 
       </li> 
       <!-- the closing span's were after the closing A --> 
       ... 
      </ul> 
     </div> 
</div> <!-- this div was missing -->

источник

2014-02-18 17:51:41 DAC84

Я зафиксировал его, установив Поле вверху в разделе .action.

Также я извлекал позиционные права и положение левого

Обратите внимание, что маржа-топ устанавливается на 40%. Это связано с тем, что он принимает во внимание навигацию и нижний колонтитул. Вы можете играть с полями в зависимости от другого содержимого, которое добавлено над ним или под ним.

работает jsfiddle

http://jsfiddle.net/dMu79/9/

.acton { 
    width: 900px; 
    position: absolute; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 40%; 
    text-align: center; 
}

источник

2014-02-18 18:15:17 wuno

Площадь области содержимого между верхним и нижним колонтитулом

ответ

Смежные вопросы