Centered содержание с заголовком слева к центру

я не знаю, что было бы лучше название для моего вопроса ...Centered содержание с заголовком слева к центру

Ну, я покажу, что я хочу сделать с простым изображением:

enter image description here

вопрос:

Я мое содержание по центру, позволяет сказать, что это 980px ширина.
Теперь у моего заголовка будет логотип и меню.
НО, я хочу, чтобы мой заголовок использовал только левую часть верхней части, например 50% от ширины содержимого и , затем растягивается влево от области просмотра. Я знаю, что это можно использовать javascript и рассчитать левое смещение содержимого и установить динамическую ширину div с его смещением влево.

Это лучший способ? Я считаю, что должен быть другой путь, но я не могу думать об этом. Надеюсь, у вас, ребята, есть лучшая идея, чем у меня, так как моя замедляет работу сайта при изменении размера окна.

источник

2013-04-05 silentw

Я думаю, что отрицательное левое поле должно работать на внутренних делах. – Mike

@Mike, пожалуйста, объясните свой комментарий лучше – silentw

Можете ли вы перефразировать то, что хотите? Это не очень ясно ... –

Возможно, есть 2 div с; один в фоновом режиме и один, чтобы содержать логотип?

http://jsfiddle.net/kUKyp/1/

источник

2013-04-05 15:55:06

thats, что я имел в виду также :) – trajce

@trajce Это единственный чистый-CSS способ, о котором я могу думать. Самое сложное в этом состоит в том, что содержимое является фиксированной шириной ... Великие умы одинаковы :) –

Спасибо, он решил мой вопрос: D – silentw

Я верю, что вы после этого margin: auto в CSS. Это очень просто:

Поместите свой контент div на страницу с фиксированной шириной, скажем 980px, как вы хотели, и установите margin: auto.
Поместите свой логотип и меню в содержимое.

Вот хороший пример этого в действии:

http://bluerobot.com/web/css/center1.html

CSS-код из приведенной выше страницы:

body { 
    margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */ 
    text-align:center; /* Hack for IE5/Win */ 
    } 

#Content { 
    width:500px; 
    margin:0px auto; /* Right and left margin widths set to "auto" */ 
    text-align:left; /* Counteract to IE5/Win Hack */ 
    padding:15px; 
    border:1px dashed #333; 
    background-color:#eee; 
    }

И разметке:

<body> 
    <div id="Content"></div> 
</body>

источник

2013-04-05 15:46:10

Это не то, что мне нужно, после обозначения «Динамическая ширина», который будет расширяться или сокращаться, в зависимости от ширины браузера (помните, что: у этого div нет контента, только фонового цвета). – silentw

Итак, вы хотите что-то вставить в динамическую ширину div, что вы говорите? –

В принципе, это похоже на заголовок, идущий с левой стороны монитора, но у него есть только логотип и меню «внутри» содержимого div. – silentw

Использования Twitter бутстрэпам жидкости макеты

<div class="row-fluid"> 
     <div class="span12"> 
      <div class="row-fluid"> 
        <div class="span6"> (6 for half of the width, number can be changed 1-12)      your logo and menu 
        </div> 
      your content 
      </div> 
     </div>

источник

2013-04-05 16:10:45

Centered содержание с заголовком слева к центру

ответ

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