Фиксированный размер окна; Zurb Foundation

В настоящее время я тестирую Zurb Foundation и у меня проблема с размером окна.Фиксированный размер окна; Zurb Foundation

<body id="gradient"> 
     <div id="title" class="small-2 large-6 large-centered text-center columns">Example</div>  
</body>

В настоящее время у меня есть слово Example набора для large-6 вместо large-12, потому что если я выхожу за пределы более чем large-10 то мой размер окна будет иметь увеличенную ширину, вызвавшую влево-вправо прокрутка появляться.

Однако, я думал, что правильно настроил свой CSS, чтобы этого не произошло.

html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#gradient {  
    background: #00BFFF; 
    background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF); 
    background: linear-gradient(to right bottom, #086A87, #00BFFF); 
    border-radius: 2px; 
    background-size:100% 100%; 
    background-repeat: no-repeat; 

}

Я думал, установив мой background-size до 100% 100% будет иметь мое окно фиксированной и предотвратить любую дополнительную ширину и высоту (как я не хочу, чтобы прокрутить вверх/вниз/влево/вправо).

Причина: Я хочу исправить это, когда я перетаскиваю свой экран, чтобы уменьшить размер из полного экрана, слово Example исчезнет из центра экрана и останется ближе к правой стороне окна, таким образом, вы не сможете см. слово.

Извините, если это сбивает с толку, сообщите мне, если вам нужны какие-либо разъяснения. Благодаря!

EDIT: http://jsfiddle.net/5vdobycy/9/

Надеюсь, я сделал это правильно, как вы можете видеть Example не полностью центр, как вы можете прокручивать вправо и часть слова падает в простом белом фоне. jsfiddle не показывает, действительно ли это выглядит так, как он выглядит в моем браузере, но в значительной степени это проблема, с которой я сталкиваюсь.

Однако, не уверен, если я не включил права Foundation или это из-за jsfiddle, но нет никаких различий в изменении столбцов, т.е. large-6 показывает то же самое, как large-12 на jsfiddle.

источник

2015-03-29 user3128376

Что о создании [скрипку] (http://jsfiddle.net/) демо? – Manwal

укажите свой код в jsfiddle .. –

Обновлено edit on top – user3128376

Самый простой способ получить текст в центре, чтобы использовать всю ширину столбцов и применять text-align: center на них:

<div id="title" class="small-12 text-center column">Example</div>

Ваша скрипка имеет несколько проблем:

вы не включают в фонд на всех
вы перегрузили размещение колонки с
```
position: absolute; 
top: 180px; 
left: 400px; 
```
small-2 был слишком мал, чтобы содержать текст, поэтому он ткнул на право:

Это также причина, по которой текст не был центрирован - сам столбец был, но текст только ускользает от центрированного столбца вправо.

Ни установка width, height или background-size сделать ничего, чтобы предотвратить страницу с прокруткой. Для этого вам понадобится свойство CSS overflow.

Вот простой пример, который работает:

#gradient { 
 
    height: 100%; 
 
    background: #00BFFF; 
 
    background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF); 
 
    background: linear-gradient(to right bottom, #086A87, #00BFFF); 
 
    border-radius: 2px; 
 
    background-size:100% 100%; 
 
    background-repeat: no-repeat; 
 

 
} 
 
#title { 
 
    font-size: 60px; 
 
    color: #FF8000; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/css/foundation.min.css" rel="stylesheet" type="text/css"> 
 

 
<div id="gradient"> 
 
    <div class="row "> 
 
     <div id="title" class="small-12 text-center column">Example</div> 
 
    </div> 
 
</div>

источник

2015-03-31 09:53:24 janfoeh

-1

CSS

#gradient { 
    background: #00BFFF; 
    background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF); 
    background: linear-gradient(to right bottom, #086A87, #00BFFF); 
    border-radius: 2px; 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0px; 
    bottom: 0px; 
    text-align: center; 
} 
#title{ 
    padding-top:20%; 
    font-size:40px; 
}

HTML

<body> 
    <div id="gradient"> 
     <div id="title"> Example :) </div> 
    </div> 
</body>

источник

2015-03-29 09:06:33

Это не сработало для меня. Это все равно. – user3128376

укажите свой код в jsfiddle .. –

Фиксированный размер окна; Zurb Foundation

ответ

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