Центральное тело и несколько изображений?

Question

Центральное тело и несколько изображений?

0

Я знаю, что это звучит очень странно, но я пытаюсь закодировать веб-сайт с очень небольшим знанием CSS. Это просто тестовый веб-сайт, так что я могу немного поучиться на этом языке, но у меня проблемы. Я не могу найти ответы нигде. В случае необходимости я включил файлы HTML и CSS внизу.

1. Центральный корпус

Мне было интересно, как сосредоточиться на теле моего сайта? Я знаю, что это кажется простым, но я просмотрел каждую ссылку Google, и я не могу найти решение. Когда я увеличиваю масштаб, чтобы протестировать мой сайт с увеличением увеличения на 175%, как это, по крайней мере, большинство мониторов, я заметил, что мой браузер прокручивается в левую часть веб-сайта, а не в центр. Я хотел бы, чтобы элементы веб-сайта были в центре, так что у него не осталось пустого места справа, как у YouTube, для более крупных мониторов. Тем не менее, я понятия не имею, существует ли способ, по которому веб-сайт может приближаться к центру?

2. Несколько изображений

Когда я нарезал макет веб-сайта, который я сделал, я взял три изображения из одной из форм "округленного прямоугольника". Моя цель состоит в том, чтобы сделать так, чтобы форма стала расширяемой, что означает, что она будет небольшим полем [] для небольших чисел, но если число больше цифр, поле может расширяться без нарушения веб-сайта. Из-за этого я нарезал ЛЕВУЮ и ПРАВУЮ сторону окна содержимого, а также 1px, внутри которого я надеялся расширить. Я понятия не имею, где искать учебник, однако, о том, как заставить всех работать вместе. Если бы кто-нибудь мог указать мне в правильном направлении, я был бы чрезвычайно благодарен.

3. После

Решено - огромное спасибо Николь Бибер, который помог мне! :-)

Большое спасибо.

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> .. </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<a href="#" id="logo"> .. </a>
<div id="header"></div>
<div id="navigation">
<div class="founders2">
<div id="left_content">
<div class="news">Latest News &amp; Information</div>
<div id="right_content"></div>
</div>
<div id="footer"></div>

</body>
</html>

CSS:

#logo {
    background:url(images/main/logo.png) top left no-repeat;
    width:391px;
    height:148px;
    font-size:0px;
    margin:-10px 0 0 0;
    float:left
}

body {
    margin:0px;
    padding:0px;
    background:url(images/main/bg.gif) repeat;
    #31
}

#header {
    margin:0 auto;
    width:100%;
    height:147px;
    background:url(images/main/header_bg.gif) repeat-x;
}

#navigation {
    width:100%;
    height:500px;
    background:url(images/siteSlice_13.gif) repeat-x;   
}

#founders1 {}


#left_content {
    float:left;
    width:910px;
    height:100%;
}

#right_content {
    float:right;
    width:490px;
    height:100%;
}

#footer {
    margin:0 auto;
    clear:both;
    width:100%;
    height:77px;
    background:url(images/siteSlice_96.gif) repeat-x;
}

/**
 * Needs to be aligned vertically.. no idea how.
 **/

.news {
    font-family:ubuntu;
    font-size:25px;
    color:#FFFFFF;
    text-shadow: 2px 2px #000000 12;
    text-align:left;
    text-indent:15px;
    width:100%;
    height:100%;
    background:url(images/main/news_header.gif) no-repeat;
    margin:100px;
}

.founders2 {
    background:url(images/main/founders_navbar.gif) no-repeat;
    width:265px;
    height:52px;
    margin:0 0 0 600px;
}

Все, что не было в папке /main/image, еще не было повторно отредактировано мной, но по-прежнему является основным изображением, которое должно действовать так же, как при замене нового.

Rees 03 янв. 2014, в 20:00

Источник

0

Вставил ваш код в скрипку, чтобы я мог поиграть с ним: jsfiddle.net/QGh5t - без каких-либо изображений трудно понять, что он делает, но я заметил, что ваши теги div на самом деле не совпадают. Первое, что вы, вероятно, должны сделать, это убедиться, что у каждого <div> есть соответствующий </ div> и что они вложены правильно - попробуйте сделать отступ, чтобы вы могли видеть, как они вложены ... (Исправление должно решить проблему # 3 - весь ваш контент, и ваш нижний колонтитул находится внутри div2основателей)
Nicole Stein 03 янв. 2014, в 18:38
0

Спасибо вам большое! Я забыл, что учебник сказал мне расширить div вниз, но я забыл, что я удалил то, что изначально было там, что означало, что мне нужно было добавить теги обратно! :)
Rees 03 янв. 2014, в 18:53

Теги:

html

css

1 ответ

Ещё вопросы

Вставил ваш код в скрипку, чтобы я мог поиграть с ним: jsfiddle.net/QGh5t - без каких-либо изображений трудно понять, что он делает, но я заметил, что ваши теги div на самом деле не совпадают. Первое, что вы, вероятно, должны сделать, это убедиться, что у каждого <div> есть соответствующий </ div> и что они вложены правильно - попробуйте сделать отступ, чтобы вы могли видеть, как они вложены ... (Исправление должно решить проблему # 3 - весь ваш контент, и ваш нижний колонтитул находится внутри div2основателей)
Спасибо вам большое! Я забыл, что учебник сказал мне расширить div вниз, но я забыл, что я удалил то, что изначально было там, что означало, что мне нужно было добавить теги обратно! :)

Codie Morgan · Accepted Answer · 2014-01-03T17-58-00.000Z

Центрированное содержание страницы

Один из способов, которым вы могли бы сосредоточить тело шаблона с фиксированной шириной страницы, можно было бы сделать с помощью Auto Margins, как я покажу в следующем примере

Это базовый пример с только элементом div, который будет нашим контейнером веб-сайта. Вы можете применить фиксированную либо к контейнеру, либо к телу, и применить автоматические поля к самому контейнеру...

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="center.css" rel="stylesheet" type="text/css">
<!---
    other header and meta stuff ...
--->

</head>

<body>
 <div id="box_content">
    <p>
     My Content Area.
    </p>
 </div>
</body>
</html>

и CSS для вышеперечисленного: CSS для выравнивания по центру с использованием централизованного тела

В этом примере CSS для вышеуказанного HTML-кода мы центрируем наш элемент container (div), применяя фиксированную ширину к элементу Body и присваивая Auto margin одному элементу. Поля будут расширяться равномерно с обеих сторон, чтобы сохранить фиксированный 800px с, таким образом, центрируя страницу:

@charset "utf-8";
/* CSS Document */


body{
    /*
        Applying a fixed width with automatic margins will center the page:
    */
    width: 800px;
    margin-left:auto;
    margin-right:auto;

    /*
        and whatever...
    */
    margin-top: 5px;
    margin-bottom: 0px;
    /*
        Here we have a gray background so we can see the centered content area
    */
    background-color:#CCC;
}

/*
    Our content area will be white  so we can see it centered over the gray background. 
*/
#box_content{
    background-color:#FFF;
    overflow:auto;
    padding:5px;
}

Однако вы также можете применить фиксированную ширину к самому контейнеру. Следующий пример работает с указанным выше кодом HTML.

Пример CSS с центрированным элементом div

@charset "utf-8";
/* CSS Document */


body{

    /*
        Here we have a gray background so we can see the centered content area
    */
    background-color:#CCC;
}

/*
    Our content area will be white  so we can see it centered over the gray background. 
*/
#box_content{
    /*
        Applying a fixed width with automatic margins will center the page, 
        will also work on the container itself:
    */
    width: 800px;
    margin-left:auto;
    margin-right:auto;

    /*
        and whatever...
    */
    margin-top: 5px;
    margin-bottom: 0px;
    background-color:#FFF;
    overflow:auto;
    padding:5px;
}

Оба вышеуказанных примера CSS выглядят точно так же. (Должно выглядеть одинаково во всех современных веб-браузерах).

Существуют и другие способы центрирования с использованием CSS (включая установку позиции до 50% с помощью поля -400, но это ломается на некоторых рендерах).

Подход, который я продемонстрировал, - это просто мой простой, но мой предпочтительный подход к центрированным макетам с фиксированной шириной.

Кроме того, я удалял значения 100% ширины для ваших вложенных элементов, которые им не нужны (элементы div по умолчанию будут по умолчанию равно 100% ширины)

Высота 100% не будет работать, элемент div не будет расширяться вертикально к своему контейнеру, если вы не используете абсолютное позиционирование (но оно будет расширяться до размера страницы, а не размера родительского контейнера). В DynamicDrive есть примеры того, как это сделать.

Также, глядя на ваш источник, я предлагаю изменить следующее:

font-family:ubuntu;

Поскольку это не семейство шрифтов, распознанное всеми операционными системами, поэтому посетители вашей веб-страницы, скорее всего, не будут видеть те же шрифты, которые вы видите в своей собственной системе. если вы не используете шрифты ServerSide.

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

3 кнопки нарезки

Еще раз - есть более чем один способ сделать это. Один из самых простых способов сделать это - сложить 3 divs и применить срез к каждому слою. Следующий пример - это простая кнопка для изменения размера в одном из моих собственных шаблонов, простая кнопка с короткими кнопками, чтобы сказать наименее.

Примечание. Я считаю, что вложенные элементы div в гиперссылке << a >> считается плохой практикой? Хотя я все равно... Я мог ошибаться.

HTML

    <a href="contact.php" style="float:right">
        <div class="b_1"><div class="b_2"><div class="b_3">
        Contact
        </div></div></div>
    </a>

CSS для кнопки выше:

/*
    Contains the left slice of the button:
*/
.box_nav a          .b_1{
    float: left;
    margin-top: 3px;
    background-image: url(ui/ui_19.png);
    background-repeat: no-repeat;
}

/*
    Contains the Right slice of my button:
*/
.box_nav a          .b_2{
    background-image: url(ui/ui_23.png);
    background-repeat: no-repeat;
    background-position: right;
}

/*
    COntains the tiled center slice of the button
*/
.box_nav a          .b_3{
    background-image: url(ui/ui_21.png);
    height: 43px;
    margin-right: 10px; /* This margin is the same width as the RIGHT slice */
    margin-left: 10px;  /* This margin is the same width as the LEFT  slice */
    line-height: 40px;  /* my way of centering text vertically in the button */
    text-align: center;
    /*
        prevents buttons with more than one word ( has spaces ) from breaking into two lines 
    */
    white-space: nowrap; 
}

.box_nav a:hover    .b_1{
    background-image: url(ui/ui_24.png);
}
.box_nav a:hover    .b_2{
    background-image: url(ui/ui_28.png);
}
.box_nav a:hover    .b_3{
    background-image: url(ui/ui_26.png);
}

Как видно выше, это структура ячеек. Сам box_nav требует "overflow: auto"; или "переполнение: скрыто"; однако если высота не задана явно.

Вышеприведенная кнопка из моего фактического примера выглядит так:

Итоговый раздел

Что касается вашего третьего вопроса, я не понимаю, что вы просите, и комбинация html/css ломается в моем браузере при копировании кода. (также я не могу видеть это должным образом, потому что у меня также нет ваших изображений. Я не уверен, что вы там пытались, но похоже, что вы пытались создать 3 столбца?

Ваш html для этого раздела довольно сильно разваливается в моем браузере (а также в Dreamweaver)

ОБНОВИТЬ:

В соответствии с вашими запросами, вот два способа сделать макеты жидкостей:

В этом примере вы можете использовать те же автоаргины с такой же шириной жидкости (просто измените фиксированную ширину 800PX на ширину жидкости, например 80%

width: 80%;
margin-left:auto;
margin-right:auto;

Если вы хотите, чтобы фиксированные поля были с макетом жидкости, вы можете просто установить поля, но не устанавливать ширину:

width: auto;
margin-left:100px;
margin-right:100px;

Спасибо тебе большое за это! Это действительно помогло мне понять CSS, а также ваши полезные советы, которые вы нашли время, чтобы рассказать мне. Я действительно ценю это, но мне было интересно, был ли способ сделать тело центрированным с плавным расположением? Я хочу, чтобы изображение заголовка полностью вытянулось, повторяя его по оси X, в то время как основная область содержимого будет в фиксированном положении, как вы продемонстрировали.
Я обновлю свой ответ двумя вариантами макета. РЕДАКТИРОВАТЬ: Обновил мой пост.
Кроме того, (я не уверен, как выглядит ваше изображение заголовка), но: - ЕСЛИ это мозаичное изображение: автоматическая ширина с мозаичным изображением и ручная высота. - Если это элемент изображения (img): ширина 100% (но не устанавливать высоту). Изображение через элемент IMG сохранит форму аспекта, если вы установите только ширину, но не высоту.
Изображение выложено плиткой, да.