Добиться центрирования с переполнением без абсолютного положения

0

Я пытаюсь добиться эффекта центрированного изображения, которое течет мимо его содержащих границ div, но без использования position: absolute, потому что он скрывает за ним заголовок. Есть ли какой-либо чистый способ сделать это, просто используя абсолютную позицию старой школы со всеми элементами (что было бы настоящей болью, если я вообще попытаюсь вообще реагировать)?

Соответствующий код:

.container {
    max-width: 60rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    border-right: 1px solid black;
    border-left: 1px solid black;
    background-color: white;
}

.container.no-border {
    border: none;
    background-color: transparent;
    position: relative;
}

#logo {
    display: block; 
    position: absolute; 
    top: 0; 
    left: 50%;
    width: 150px;
    margin-left: -75px; 
}

JSFiddle: http://jsfiddle.net/bH35r/

PS Я готов использовать почти все, пока это работает чисто.

Теги:

2 ответа

0
Лучший ответ

Вы можете использовать display:inline-block;

FIDDLE

HTML:

<div class="section header">
    <div class="container no-border">
        <a class="header" href="#">About</a>
        <a class="header" href="#">News</a>
        <a class="header" href="#">Teams</a>
        <div class="logo_wrap">
            <img id="logo" src="http://equineclub.zachschristmaslist.info/images/pennant.png"/>
        </div>
        <a class="header" href="#">Apparel</a>
        <a class="header" href="#">Sponsorship</a>
        <a class="header" href="#">Contact</a>
    </div>
</div>

CSS:

body {
    margin: 0;
    font-family: Helvetica;
    font-size: 100%;
    background-color: #191A18;
}

.section {
    margin: 0;
    padding: 0;
    clear: both;
}

.section.header {
    background-image: url('../images/background.png');
    background-position: 50% 90%;
    border-bottom: 1px solid #A8A8A8;
    box-shadow: 0 1rem 1rem #000;
    text-align: center;
}

.container {
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    border-right: 1px solid black;
    border-left: 1px solid black;
    background-color: white;
}

.container.no-border {
    border: none;
    background-color: transparent;
    position: relative;
}

.container.logo {
    background-image: url('../images/main-image.jpg');
    background-position: 50% 20%;
    min-height: 20rem;
}

a.header {
    color: white;
    display:inline-block;
    text-decoration: none;
    padding: 3rem 1.5rem;
    margin: 0 0.5rem;
    background-color: rgba(255,255,255,0.1);
}

#logo {
    width: 150px;

}
.logo_wrap{
    display: inline-block; 
    height: 5.5rem;
    vertical-align:top;
    overflow:visible;
}
  • 0
    @lilweirdward Я только что обновил свой ответ, чтобы он соответствовал вашим дополнениям.
  • 0
    Это фантастично! Таким образом, установив переполнение изображения div на видимое, можно ли заменить границы содержащего div?
Показать ещё 1 комментарий
0

Используйте фоновое изображение CSS.

.container {
    max-width: 60rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    border-right: 1px solid black;
    border-left: 1px solid black;
    background-color: white;
    background-image:url(....);
    background-repeat-no-repeat;
    background-position: 0px 0px; <--- adjust accordingly.
}

В общем, изображения, которые являются частью пользовательского интерфейса (а не содержимого), должны быть фоном CSS, а не встроенными изображениями.

  • 0
    Интересно. А потом добавить переполнение: видимо, я бы предположил? Кроме того, как мне тогда расположить другие кнопки заголовка вокруг него? Грубая сила?
  • 0
    Поплавок один сет влево, другой вправо. Используйте минимальную ширину оберточного элемента, чтобы он не сжимался до точки перекрытия.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню