ISSN 1312-0379

помощ CSS позициониране


 
Тази тема е заключена - не можеш да отговаряте или да променяте мнения    Groove Manifesto Форуми -> Свобода за народа
Предишната тема :: Следващата тема  
Автор Съобщение
CSS_tester
Нелегален




МнениеПуснато на: Нед Фев 20, 2005 19:20    Заглавие: помощ CSS позициониране Отговорете с цитат

Здравейте,
сега тествам различни варианти за позициониране и оформление само с CSS. Когато тръгнах да преправям един сайт зациклих на следният проблем.
1. Съдържанието на целия сайт е центрирано с широчина 779px
2. Най отгоре има едно лого ляво изравнено, а до него дясно изравнено адрес.
3. И двата елемента са изравнени по долния си край.
ето примерния код с таблици:
<tabler widht="779" align="center" cellpading="0" cellspacing="0">
<tr>
<td align="left" valign="bottom">Logo</td>
<td align="right" valign="bottom">Примерен текст</td>
</tr>
</table>
Това, което става елементарно с таблици де оказа за мен доста трудно с css.
Пробвах да центрирам един div-контейнер с широчина 779px и в него да сложа логото и текста в отделни div-ове, но изобщо не мога да ги изравня вертикално по долният им край.
Някой може ли да помогне с идея?
Благодаря предварително.
Върнете се в началото
georgivar
Site Admin


Мнения: 309
Местожителство: Sofia

МнениеПуснато на: Нед Фев 20, 2005 20:32    Заглавие: Отговорете с цитат

Не знам дали те устройва следния вариант, но е най-лесното нещо, за което се сещам така като гледам таблицата ти. Сещаш се, че в зависимост от размера на логото, ще трябва да промениш и стойностите на padding.

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <title></title>
   
   <style type="text/css">
   img {
      float: left;
   }
   body {
      width: 779px;
   }
   div {
      text-align: right;
      padding: 35px 0 0 50px;
      border-bottom: 1px solid red;
   }
   
   </style>
</head>

<body>

<img src="image.jpg" alt="" height="50" width="50" /> <div>Text</div>

</body>
</html>

_________________
DO LESS. LIVE LONGER.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Изпрати мейла Посетете сайта на потребителя
Нелегален





МнениеПуснато на: Пон Фев 21, 2005 12:28    Заглавие: Отговорете с цитат

Blagoradia ti za otgovora, no v taka napisania kod tezi dva elementa (img i text) ne sa centrirani.

Probvah da zadam na BODU text-align: center, no pak ne stava (makar che sega go testvam v rabotata na IE5 Mac)

Ne znam dali biah dostatu4no iasen - iskam IMG-to i Text-a da sa v centurani, vse edno sa v edna tablica, a IMG-to da e vliavo, do nego diasno centriran text-a.

Do kolkoto znam za da se centrira daden element triabva da se zadade na body-to text-align center, a posle v div-a naprimer text-align: left. kato margin-left i margin-right triabva da sa auto, inache ni6to ne stava
Върнете се в началото
copermine



Мнения: 41
Местожителство: Varna

МнениеПуснато на: Пон Фев 21, 2005 12:51    Заглавие: Отговорете с цитат

Трябва да добавиш и margin'и на body тага
Код:
 margin-left: auto; margin-right: auto;


Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <title></title>
   
   <style type="text/css">
   img {
      float: left;
   }
  body {
      width: 779px; margin-left: auto; margin-right: auto;
   }
   div {
      text-align: right;
      padding: 35px 0 0 50px;
      border-bottom: 1px solid red;
   }
   
   </style>
</head>

<body>

<img src="image.jpg" alt="" height="50" width="50" /> <div>Text</div>

</body>
</html>

_________________
Едно от интересните неща в живота е:
че ако отказвате да приемете всичко освен
най доброто, то много често го получавате.
William S. Maugham
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение MSN Messenger
CSS_tester
Нелегален




МнениеПуснато на: Пон Фев 21, 2005 19:47    Заглавие: Отговорете с цитат

Благодаря ви,
Кода работи.
До колкото разбирам обаче вертикалното изравняване по долната част на картинката и текста се получава вследствие на правилото padding-top: 35px на текста.

С риск да стана досаден ще попитам няма ли друг начин да се изравнят вертикално по долната част тези два елемента?
Защото ако не знам каква ще е височината и на двата елемента какво правим?

Поздрави
Върнете се в началото
Покажи мнения от преди:   
Тази тема е заключена - не можеш да отговаряте или да променяте мнения    Groove Manifesto Форуми -> Свобода за народа Часовете са според зоната GMT + 2 Часа
Страница 1 от 1

 
Идете на:  
Не Можете да пускате нови теми
Не Можете да отговаряте на темите
Не Можете да променяте съобщенията си
Не Можете да изтривате съобщенията си
Не Можете да гласувате в анкети