100% ширина нижнего колонтитула в сетке 960

У меня есть нижний колонтитул, и я хочу, чтобы он был на 100% в ширину, используя сетку 960, все в порядке, я могу работать с тегом div с помощью id. но сетка плавает полностью влево от страницы, в то время как весь сайт, используя сетку, центрируется на странице. Я попытался префикс_2, чтобы дать толчок справа, но он не выстраивается правильно. Вот мой код для начала.100% ширина нижнего колонтитула в сетке 960

<div id="footer" class="container_12"><img class="prefix_6" id="abs" align="right"  src="#img" width="500" height="258" /> 
<br /><br /> 
<div class="grid_2"><p><a href="#link">Home</a></p><p><a href="#link">Services</a></p><p><a href="#link">Plans</a></p></div> 
<div class="grid_2"><p><a href="#link">Pricing</a></p><p><a href="#link">Design</a></p><p><a href="#link">Logos</a></p></div> 
<div class="grid_2 suffix_6"><p>Call Tool Free:</p><p>1-800-495-5933</p><p><a href="#link">Contact Us</a></p></div> 
<div class="grid_6"><a href="#link"><img src="#img" width="16" height="16" />Follow me on Twitter</a> <img src="#img" width="16" height="16" />Become a Fan on Facebook</div> 
</div>

CSS:

#footer { 
    background-color: #f0e9d8; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 14px; 
    color: #6e2500; 
    font-weight: bold; 
    height: 250px; 
} 
#abs { 
    position: absolute; 
    clip: rect(auto,auto,500px,auto); 
}

источник

2013-07-01 user2539697

Какие рамки вы используете? –

960 Сетка системы. Спасибо, ребята. – user2539697

Если я вас правильно понял, вы хотите, чтобы сноска будет ширина 100%? Это легко исправить. Вам просто нужна другая обертка вокруг вашего нижнего колонтитула. Я хотел бы сделать это следующим образом:

<div id="footer"> 
     <div class="container_12"> 
      <img class="prefix_6" id="abs" align="right"  src="#img" width="500" height="258" /> 
      <br /><br /> 
      <div class="grid_2"><p><a href="#link">Home</a></p><p><a href="#link">Services</a></p><p><a href="#link">Plans</a></p></div> 
      <div class="grid_2"><p><a href="#link">Pricing</a></p><p><a href="#link">Design</a></p><p><a href="#link">Logos</a></p></div> 
      <div class="grid_2 suffix_6"><p>Call Tool Free:</p><p>1-800-495-5933</p><p><a href="#link">Contact Us</a></p></div> 
      <div class="grid_6"><a href="#link"><img src="#img" width="16" height="16" />Follow me on Twitter</a> <img src="#img" width="16" height="16" />Become a Fan on Facebook</div> 
     </div> 
    </div>

И CSS для этого было бы:

#footer { 
    background-color: #f0e9d8; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 14px; 
    color: #6e2500; 
    font-weight: bold; 
    height: 250px; 
    width: 100%; 
    position: relative; 
} 
#abs { 
    position: absolute; 
    clip: rect(auto,auto,500px,auto); 
}

источник

2013-07-01 16:50:38

Когда я устанавливаю ширину на 100%, нижний колонтитул наклоняется влево, я хочу оставаться центрированным, как и остальная часть страницы. – user2539697

Получил это исправление спасибо ребятам. – user2539697

Если вы хотите ширина нижнего колонтитула, чтобы быть 100% просто удалить его из 960 Grid System.

<html> 
    <body> 
    <header> 
     Header 
    </header> 
    <section class="container_12"> 
     <!--960 grid--> 
    </section> 
    <footer class="footer-main"> 
     <!--img--> 
    </footer> 
    </body> 
</html>

CSS

.footer-main { 
    width:100%; 
}

источник

2013-07-01 16:57:45

Внутри container_12 он не получается правильно, он остается внутри этого контейнера. Мне нужно, чтобы он занимал 100% по ширине этой страницы. – user2539697

Получил исправление, спасибо, ребята. – user2539697

100% ширина нижнего колонтитула в сетке 960

ответ

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