Автор Тема: Проблем с div-ове при различни резолюции  (Прочетена 2311 пъти)

0 Потребители и 1 Гост преглежда(т) тази тема.

antigoogle

  • Sr. Member
  • ****
  • Благодарности
  • -Казани: 6
  • -Получени: 5
  • Публикации: 273
Здравейте, имам следния проблем.Имам три дива,  които трябва да заемат 100% ширина на прозореца.Средния див е с фиксирана ширина, например 1000 пиксела.Как да направя , така че  при смяна на резолюцията  ширините на страничните два дива да се променят динамично, като запълват ширината на прозореца на 100% без да се застъпват или раздаличават, а като се зумне браузъра да не се раздалечават?Направих примерен код за да ви опиша проблема:
    <style type="text/css">
        body {
            margin: 0px;
        }
        .div1 {
            background-color: black;
            float: left;
            height: 170px;
            width: 140px;
        }
        .div2 {
            background-color: yellow;
            height: 170px;
            width: 1000px;;
            margin: 0 auto;
        }
        .div3 {
            background-color: blue;
            height: 170px;
            float: right;
            width: 140px;
            margin-top: -170px;
        }
    </style>
</head>
<body>

        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>

</body>
</html>



//wuser премахнах code=html, за да може да се види, какво си писал, plug-ина нещо ни е проблемен


корекция на заглавието - kerkenez
« Последна редакция: 27 Април 2011, 17:35:32 от kerkenez »
Кажи му дизайнер и не го обиждай повече !

Avalanche

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 65
  • -Получени: 275
  • Публикации: 2602
  • meow
Re: Проблем
« Отговор #1 -: 26 Януари 2011, 00:05:50 »
Здрасти,
мхм това с див таговете винаги е било малко рисково, не знаеш какъв потребител на какъв монитор/резолюция ще разглежда сайта. Аз лично бих те посъветвал да дадеш шираната в проценти и на трите див тага, примерно средния да бъде 70%, а страничните по 15%... или нещо подобно, предполагам, че ще има и разстояния. Успех!


p.s. Само един тип, като пишеш код тук, слагай го в [ code=име на езика ][ /code ]
"Компютрите не правят каквото искаме, а каквото им кажем." Ако разбереш какво значи това няма да имаш големи проблеми, нито с никоя ОС, нито език, или софтуер.
Аз не съм програмист между другото!

antigoogle

  • Sr. Member
  • ****
  • Благодарности
  • -Казани: 6
  • -Получени: 5
  • Публикации: 273
Re: Проблем
« Отговор #2 -: 26 Януари 2011, 22:09:02 »
не става с проценти.Средния див трябва да е с фиксирана ширина, тъй като е картинка.Крайните два ги направих с проценти, но не става.Все пак благодаря за отговора, най-вероятно ще използвам JS за да проверявам резолюцията и ще направя размерите на двата дива за различните резолюции, просто мислех, че трябва да има и по-лесно решение:)
Кажи му дизайнер и не го обиждай повече !

Avalanche

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 65
  • -Получени: 275
  • Публикации: 2602
  • meow
Re: Проблем
« Отговор #3 -: 26 Януари 2011, 22:17:14 »
Хмм, никога не се бях замислял. Я кажи колко е широк средния див, стана ми интересно да го тествам и аз  ;D
"Компютрите не правят каквото искаме, а каквото им кажем." Ако разбереш какво значи това няма да имаш големи проблеми, нито с никоя ОС, нито език, или софтуер.
Аз не съм програмист между другото!

antigoogle

  • Sr. Member
  • ****
  • Благодарности
  • -Казани: 6
  • -Получени: 5
  • Публикации: 273
Re:Проблем
« Отговор #4 -: 02 Февруари 2011, 18:23:02 »
Оправих се.Сложих на двата странични дива width: 50% и z-index: -1 , а на средния, който е с фиксирана ширина 900 пиксела и е центриран z-index: 1 , така при всяка резолюция и оразмеряване на браузъра изглежда еднакво.
Кажи му дизайнер и не го обиждай повече !

Raicho

  • Гост
Re:Проблем
« Отговор #5 -: 26 Април 2011, 18:59:03 »
Може и по лесно но незнам дали работи под ie
margin-left: auto;
sredniq div width: 100%;
Margin-right: auto;
С auto много лесно се позиционира центара а като сложиш и див между тях
<left taga примерно е 150px><center taga 1000>Тук ще се центрира и би трябвало нещатата да се получат аз така ги права <right taga 150>

wuser

  • Administrator
  • Hero Member
  • *****
  • Благодарности
  • -Казани: 85
  • -Получени: 49
  • Публикации: 2761
Re:Проблем
« Отговор #6 -: 26 Април 2011, 20:16:56 »
Обзалагам се на шише водка, че тая постовка няма да работи на ието. ;D
Мъдростта на патилото
Perl Monks: PHP - it's "training wheels without the bike" -- Randal L. Schwartz


Дееба... чувствам се все едно обяснявам на майка ми как да си отвори пощата
"не работи"
WTF?!?!? к'во значи че не работи?
Не ти се компилира, дава ти грешка, вади ти грешни резултати, компютърът ти се изключва като го напишеш или на целия квартал му спира тока?
Stilgar

echeveria

  • Hero Member
  • *****
  • Благодарности
  • -Казани: 72
  • -Получени: 93
  • Публикации: 4836
Re:Проблем
« Отговор #7 -: 27 Април 2011, 07:34:42 »
Само едно въпросче на дизайнерите тука с убунту: вие сериозно и не пробвате дизайните си под ИЕ?
Днес Печатарите използват парите за да купят мозъците на онези, които ги превъзхождат, за да ги накарат да им служат и така да се превърнат в жертва на посредствеността. Това ли е причината, поради която ги наричате благо?
<iframe src="http://www.corbindavenport.com/ubuntu/widget.html" style="width:

Raicho

  • Гост
Re:Проблем
« Отговор #8 -: 27 Април 2011, 08:55:09 »
Аз пробвам ли пробвам .... И се резултата е 70,80% на лице съвместимост на 2 та browsers Mozila, IE винаги нещо е различно при мен :D

antigoogle

  • Sr. Member
  • ****
  • Благодарности
  • -Казани: 6
  • -Получени: 5
  • Публикации: 273
Re:Проблем
« Отговор #9 -: 27 Април 2011, 17:24:21 »
То аз отдавна се оправих, вече написах по-горе как, но само да вметна.Центрирането с margin:0 auto не работи за IE.За това изчадие :P се ползва следния номер text-align: center , на бодито и след това на най-главния див, във който е целия сайт си се "резетва" , чрез text-align: left.
Кажи му дизайнер и не го обиждай повече !

xxTTcc

  • Sr. Member
  • ****
  • Благодарности
  • -Казани: 21
  • -Получени: 10
  • Публикации: 414
  • Logged as root
Re:Проблем с div-ове при различни резолюции
« Отговор #10 -: 10 Юни 2011, 13:30:57 »
Stilgar щеше да каже, че 70 - 80% е различно от IE  ;D ;D ;D ;D ;D
Прочети правилата, потърси и попитай!