Лента этого топика

Проблема с правильным позиционированием div-блоков на странице

(Ответов: 5, Просмотров: 967)
  1. 05.02.2012 16:29
    #1
    InFakes вне форума
    InFakes
    Tux Аватар для InFakes
    • Регистрация: 21.06.2011
    • Сообщений: 697
    • Репутация: 186
    • Webmoney BL: ?
    Помогите решить данную проблему или укажите на материал, с которым нужно ознакомиться. Есть такой сайт lamer-help.ru . Подгоняю под текущее разрешение 1920*1080 - все нормально:

    На меньшем разрешении 1024*768 - все уезжает:


    Html-код

    PHP код:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <    html>
    <    head>
    <    meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <    meta name="description" content="Скачать самую последнюю версию аськи на телефон">
    <    meta name="keywords" content="аська шмаська паська">
    <    title>Скачать самую последнюю версию аськи на телефон</title>
    <    link rel="stylesheet" type="text/css" href="style.css">
    </    head>

    <    body>
    <    div id="header"> 
        <    div id="header_top"></div>
        
    </    div>

    <    div id="header2">
        <    div id="iphones"></div>
        <    div id="picture1"></div>
        <    div id="picture2"></div>
        <    div id="grattis"><noindex><iframe src="http://grattis.ru/widget.js?id=7185" style="width:100%; height:433px; border:5px"></iframe></noindex></div>
    </    div>
        
    </    body>
    </    html> 
    [свернуть]


    Стиль css

    PHP код:
    body {
            background:url(images/header_3pix.png) repeat;
            font-family:Verdana,"BitStream vera Sans",Tahoma,Helvetica,Sans-serif;
            font-size:12px;
    }

    #header {
    width: 960px;
    margin: 0 auto;
    }

    #header_top {
    width: 960px;
    height: 83px;
    background: url(images/header.png) no-repeat;
    position: relative;
    text-align: center;
    }

    #iphones {
    width: 388px;
    height: 513px;
    background: url(images/iphones.png) no-repeat;
    position: relative;
    left:470px; 
    top:10px; }

    #picture1 {
    width: 380px;
    height: 150px;
    background: url(images/picture1.png) no-repeat;
    position: relative;
    left: 470px; 
    top: 10px; }

    #picture2 {
    width: 380px;
    height: 150px;
    background: url(images/picture2.png) no-repeat;
    position: relative;
    left: 470px; 
    top: 10px; }

    #grattis {
    width: 380px;
    height: 150px;
    position: relative;
    left: 1030px; 
    bottom: 425px;
    } 
    [свернуть]
    Последний раз редактировалось ArhStrAngeR; 05.02.2012 в 17:39. Причина: потер ссылку
    • 0
  2. 05.02.2012 16:42
    #2
    antiblef вне форума
    antiblef
    Дипломник Аватар для antiblef
    • Регистрация: 10.11.2010
    • Сообщений: 233
    • Репутация: 60
    • Webmoney BL: ?
    Закрепите все таблицей, чтобы не расходилось :)
    myCallBack / Альтернатива call back hunter без абонентской платы
    • 2

    Спасибо сказали:
    InFakes(05.02.2012), Orcstation(05.02.2012),
  3. Значок / Очков: 5 Значок / Очков: 5
    05.02.2012 16:49
    #3
    Orcstation вне форума
    Orcstation
    Пастафариани Аватар для Orcstation
    • Регистрация: 05.01.2011
    • Сообщений: 3,183
    • Записей в дневнике: 2
    • Репутация: 1427
    • Webmoney BL: ?
    antiblef, Табличная верстка форева! Блоки фтопку!
    ВДВ РФ — Вернёшься Домой В РеФрижераторе.
    • 1

    Спасибо сказали:
    InFakes(05.02.2012),
  4. Медаль / Очков: 5
    05.02.2012 16:54
    #4
    assai вне форума
    assai
    Гуру Аватар для assai
    • Регистрация: 11.08.2011
    • Сообщений: 794
    • Репутация: 360
    InFakes, оно не разъезжается, а остается на месте. Блоками еще приучиться нужно верстать ) хотя и правда проще таблицами.

    Как вариант можно выравнять с помощью margin: 0px auto;

    PHP код:
    #iphones { 
    width: 388px; 
    height: 513px; 
    background: url(images/iphones.png) no-repeat; 
    position: relative; 
    margin: 0px auto;
    top:10px; } 
    остальное по аналогии
    • 1

    Спасибо сказали:
    InFakes(05.02.2012),
  5. Значок / Очков: 5 Значок / Очков: 5 Значок / Очков: 5 Значок / Очков: 5
    05.02.2012 17:37
    #5
    ArhStrAngeR вне форума
    ArhStrAngeR
    Разработка любых сайтов Аватар для ArhStrAngeR
    • Регистрация: 08.06.2011
    • Сообщений: 3,375
    • Записей в дневнике: 1
    • Репутация: 2506
    Проще указать минимальную ширину и высоту в сss, скажем 1000 и сделать под нее. А при увеличении будет равномерно увеличиваться, оставаясь по центру.

    ---------- Сообщение добавлено 15:37 ---------- Предыдущее 15:31 ----------

    PHP код:
    #header2 {
            min-width: 1000px;
    } 
    но для виджета #grattis нужно будет все равно изменить размеры left
    Разработка сайтов любой сложности!
    Ультрабыстрые SSD VPS по смешным ценам(промокод VPS - дает скидку 25%)
    • 1

    Спасибо сказали:
    InFakes(05.02.2012),
  6. 05.02.2012 18:52
    #6
    InFakes вне форума
    InFakes
    Tux Аватар для InFakes
    • Регистрация: 21.06.2011
    • Сообщений: 697
    • Репутация: 186
    • Webmoney BL: ?
    assai, ArhStrAngeR, большое спасибо за отличные советы... заработало!
    • 1

    Спасибо сказали:
    ArhStrAngeR(05.02.2012),

Тэги топика:

« Как в дле подставить свой титл? | Вывод строк из файла по очереди php »

Похожие темы

Темы Раздел Ответов Последний пост
Вставка тизеров и блоков
 Web программирование 2 05.11.2011 09:24
Вставка тизеров и блоков
 Вопросы от новичков 0 04.11.2011 18:28
Количество блоков на странице
 Партнерские программы 6 21.09.2010 13:18
КАЧЕСТВЕННЫЕ WEB-РЕШЕНИЯ ПО ПРАВИЛЬНЫМ ЦЕНАМ
 Реклама партнерских программ 1 14.09.2010 13:03
Качественные сервера по правильным ценам!
 Хостинг и Серверы 0 25.06.2010 13:23
(добавить баннер)

Баннеры



(добавить ссылку)

Витрина ссылок

У нас проходит

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Или перенести аккаунт с других форумов

Золотые темы форума

Все золотые темы

Популярные темы

Информеры