Help with CSS positioning

4 отговора 224 прегледа
#1

Help with CSS positioning

Здравейте,
сега тествам различни варианти за позициониране и оформление само с 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-ове, но изобщо не мога да ги изравня вертикално по долният им край.
Някой може ли да помогне с идея?
Благодаря предварително.

Отговор
в отговор на CSS_tester #2

Re: Help with CSS positioning

zashto ne slojish div-a na text-a malko po-nagore za da se izravni s dolnata 4ast na div-a na logo-to ti

Отговор
в отговор на CSS_tester #3

Re: Help with CSS positioning

За да ти стои всичко винаги централно на шир. 779px , независимо от резолюцията на монитора, не можеш за използваш абсолютно позициониране.
Според мен, трябва да постъпиш така:
1. Един общ контейнер за съдържанието в ляво и дясно -
примерно
width: 779px;
text-align: center;
margin: 0 auto;

2. втори контейнер за съдържанието в ляво:
float: left;

3. трети контейнер, който е в дясно
float: right;

и един div clear:both;

като код, ето какво би трябвало да представлява:
<html>
<head>
<title>page</title>
<style type="text/css">
<!--
html,body {
text-align:center;
}
#header {
width: 779px;
margin: 0 auto;
}
.left {
position:relative;
float:left;
}
.right {
position:relative;
float:right;
}
.clear {
clear: both;
}
-->
</style>
</head>
<body>
<div id="header">
<div class="left">logo</div>
<div class="right">address</div>
</div>
<div class="clear"><!-- --></div>
</body>
</html>

По този начин лявото и дясното са на една линия.
Остави text-align:center на body, иначе ИЕ-то ще покаже всичко в ляво.
Да допълня: ако искаш да наместваш лявото и дясното на една линия долу , използвай необходимите margin-top на .left или .right.
Scriptura pro scribente nihil probat...

Редактирано от Flamm на

Отговор
в отговор на Flamm #4

Re: Help with CSS positioning

Blagodaria ti za primera - raboti!
Imam samo o6te edin vupros, kak moje vertikalnoto centrirane po dolnia krai na .left i .right da stane bez margin-top za6toto taka ne mi se struva mnogo universalno - ako ne znam kakva e viso4inata (ili e promenliva) na edinia ot dvata elementa kakva stoinost za margin-top triabva da se zadade?

Отговор
в отговор на CSS_tester #5

Re: Help with CSS positioning

Не знам как, освен да направиш така, че да знаеш размерите на двата елемента:-) Или пък да се откажеш да нареждаш всичко по конец, след като имаш елементи с неизвестен/неустановен размер. Всъщност не ми е много ясно какво имаш предвид, че толкова ти трябва подравняване долу, а пък имаш елементи с променлив размер. Ако имаш текст от едната и картинка от другата страна и се опасяваш, че потребителят може да увеличи размера на текста и той да отиде по-долу от картинката, използвай шрифт в пиксели - и без това потребителите на ИЕ са една преобладаваща част - ИЕ не може да увеличава размера на шрифт в пиксели. Операта е ок- при нея всичко се увеличава пропорционално - и картинки и текст, мозилите тук са проблем, но ако не сложиш някакъв супер дребен размер, на никой няма да му дотрябва да ти увеличава текста. Ако пък е толкова задължително всичко и винаги да е по конец, направи всичко на картинки - те са с установен размер. Ако е друго, пусни адрес на проекта или код, но това е, което се сещам в момента.
Пробвай и с абсолютно позициониране, ама центрирането на съдържанието не знам как ще докараш .., по добре недей:-) Или пък си използвай таблици - ей на, всички пишат още на таблици, то с тия браузъри ...

Scriptura pro scribente nihil probat...
Отговор