html, css пару вопросов [Архив]

procedure

07.07.2008, 19:44

Не могу разобраться в теге div, нету времени. Подскажите пожалуйста, как можно оптимизировать этот код так, чтоб отображение было во всех браузерах со всеми разрешениями экрана одинаково:
<style>
div.l1 {
color:white;
background:green;
margin-right:-2%;
}
</style>
</head>

<body bgcolor="#4c4c4c" link="white" vlink=#cacaca>
<div class="l1">
<div style="margin-left:25%; margin-right:66%; margin-top:-1.3%;

border-width:1%; border-color:white; border-style:solid;

background:black;">
<font color="blue" size="6%">новости</font>
</div>
<div style="margin-left:40%; margin-right:53%; margin-top:-3.05%;

border-width:1%; border-color:white; border-style:solid;

background:black;">
<font color="blue" size="6%">книги</font>
</div>
</div>

astrologer

07.07.2008, 20:01

Для начала - доктайп + указать обе части парных тегов, а не только открывающую или закрывающую.

procedure

07.07.2008, 20:10

все указано верно, доктайп есть. А где именно есть не закрытые теги?
body не закрыт потому что я внизу ниче не копировал, head не открыт потому что доктайп и head и титлы тоже не скопированы.

-=Static=-

07.07.2008, 21:30

Может канешн я чегонить не понимаю или не знаю, но вроде как принятно, что если взялся CSS использовать, так надо все в отдельном месте...а тэги style - это ЗЛО))

вообщем если я прально понял то как-то так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>

body{
margin: 0px;
padding: 0px;
background: #4c4c4c;
}

a {color: #FFFFFF;}
a:hover {text-decoration: none;}

div.li {
color: #FFFFFF;
background: #00AA00;
}

div.li div.li1{
margin: 0% 66% 0% 25%;
border: 3px solid #FFFFFF;
background: #000000;
}

div.li div.li2{
margin: 0% 53% 0% 40%;
border: 3px solid #FFFFFF;
background: #000000;
}
</style>
</head>
<body>
<div class="li">
<div class="li1">
<a href="#">Новости</a>
</div>

<div class="li2">
<a href="#">Книги</a>
</div>
</div>

</body>
</html>

Chaak

07.07.2008, 22:48

procedure, юзай Miicrosoft Expression WEb, это действительно вещь. Выставь доктайп командой, если гдето есть несовместимость со спецификацией то он тебе подчеркнет крассной линией.

А еще проще, сделать табличную верстку и не морочить себе голову этой дрянью..

smOleg

08.07.2008, 18:37

А еще проще, сделать табличную верстку и не морочить себе голову этой дрянью..
Табличная верстка это слишком просто :)

-=Static=-

08.07.2008, 19:12

Табличная верстка это слишком просто :)

Зря ты так. Дело то не в просто или сложно, а в рациональности использования определенного подхода и в кроссбраузерности.
Ни один знающий верстальщик не скажет, что таблицы - это полный отстой и их нельзя использовать. Просто на DIV более прозрачный код. И места меньше занимает.

mff

08.07.2008, 23:49

procedure, проблема со стилем для тега div как я понял, у тебя написанно margin-right:-2%;, а эту конструкцию только IE понимает, остальные броузеры не схавают! Откажись от отрицательных величин!

smOleg

09.07.2008, 07:39

procedure, проблема со стилем для тега div как я понял, у тебя написанно margin-right:-2%;, а эту конструкцию только IE понимает, остальные броузеры не схавают! Откажись от отрицательных величин!

Минуса даж валидацию проходят. Так что непутай людей

mff

09.07.2008, 13:01

Минуса даж валидацию проходят. Так что непутай людей

В смысле "непутай людей" ? Я тебя не понял! Человек пишет, что проблемма с расположением элементов в разных броузерах, я советую отказаться от отрицательных велечин, так как их не все браузеры понимают.

Alekzzzander

09.07.2008, 14:22

раз эта тема поднялась, то не могли бы вы и мне не много помочь, мне требуеться, что бы рамки были расположены рядом, но если выставляю код один за другим, то они получаються друг под другом, как расположить их рядом?

код рамки:

<fieldset>

Jer1cho

09.07.2008, 14:39

Как вариант, поместить их в таблицу:

<table cellspacing="0" cellpadding="0">
<tr>
<td><fieldset>A</fieldset></td>
<td><fieldset>B</fieldset></td>
<td><fieldset>C</fieldset></td>
</tr>
</table>

MafiaBoy3

09.07.2008, 15:38

Може так!
.co {
position: absolute;
top: 5px;
left: 7px
}

<div class="co"><fieldset></div>

-=Static=-

09.07.2008, 19:14

раз эта тема поднялась, то не могли бы вы и мне не много помочь, мне требуеться, что бы рамки были расположены рядом, но если выставляю код один за другим, то они получаються друг под другом, как расположить их рядом?

код рамки:

<fieldset>

Вот другой вариант)

<style>
fieldset{
float: left;
margin: 0px 4px;
}
</style>

<fieldset>A</fieldset>
<fieldset>B</fieldset>
<fieldset>C</fieldset>

Можно через <li> Сделать. Вообщем как больше нравится)

mff

09.07.2008, 19:38

Еще legend вставить круто будет
<fieldset><legend>legend</legend>content</fieldset>

Alekzzzander

09.07.2008, 21:20

Еще legend вставить круто будет
<fieldset><legend>legend</legend>content</fieldset>

эт я знаю, но не всегда эта легенда нужна :)

procedure

10.07.2008, 03:31

Понимаете, я просто попросил отредактировать мой код так, чтоб во всех браузерах или хотяб в опере и лисе показывал вид одинаково. А -2% чтоб верхняя рамка не была видна. И картинка как будто бы выходила свеху в будующем там все будет реализовано с помщью js. Кто поможет тому + max

-=Static=-

10.07.2008, 04:13

Понимаете, я просто попросил отредактировать мой код так, чтоб во всех браузерах или хотяб в опере и лисе показывал вид одинаково. А -2% чтоб верхняя рамка не была видна. И картинка как будто бы выходила свеху в будующем там все будет реализовано с помщью js. Кто поможет тому + max

Ты выложи код всей страницы и картинку как должно быть. А то так как у в разных браузерах поразному, то и не оч понятно, что ты хочешь получить?)

mff

10.07.2008, 14:15

Ты выложи код всей страницы и картинку как должно быть. А то так как у в разных браузерах поразному, то и не оч понятно, что ты хочешь получить?)

Да! Скрин и код нужен! :)

procedure

13.07.2008, 00:56

вот:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>

body{
margin: 0px;
padding: 0px;
background: #4c4c4c;
}

a {color: #FFFFFF;}
a:hover {text-decoration: none;}

div.li {
color: #FFFFFF;
background: #00AA00;
}

div.li div.li1{
margin: 0% 66% 0% 25%;
border: 3px solid #FFFFFF;
background: #000000;
}

div.li div.li2{
margin: -1.8% 53% 0% 40%;
border: 3px solid #FFFFFF;
background: #000000;
}
</style>
</head>
<body>
<div class="li">
<div class="li1">
<a href="#">Новости</a>
</div>

<div class="li2">
<a href="#">Книги</a>
</div>
</div>

</body>
</html>
это в увеличенном виде страница. На глаз не ровности не видно. Но если поменять разршение. + в кнопках нужно чтоб рамка обтекала текст ровно. Даже при смене текста в кнопке. Что посоветуете делать?
http://img297.imageshack.us/img297/3899/123le1.th.jpg (http://img297.imageshack.us/my.php?image=123le1.jpg)

procedure

14.07.2008, 03:25

up может ли кто нибудь помочь?

mff

14.07.2008, 16:24

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
body{
margin: 0px;
padding: 0px;
background: #4c4c4c;
}
a{ color: #FFFFFF;
}
a:hover{
text-decoration: none;
}
div.li{
position:relative;
background: #00AA00;
width:100%;
height:40px;
}
div.li1{
position:absolute;
left:25%;
top:0px;
border: 3px solid #FFFFFF;
background: #000000;
}
div.li2{
left:40%;
top:10px;
position:absolute;
border: 3px solid #FFFFFF;
background: #000000;
}
</style>
</head>
<body>
<div class="li">

<div class="li1">
<a href="#">Новости</a>
</div>

<div class="li2">
<a href="#">Книги</a>
</div>

</div>

</body>
</html>

procedure

14.07.2008, 20:53

Очень большое спасибо, но остаеться одна проблема. Нужно чтоб кнопки вместе находились на одном и том же горизонтальном уровне.

mff

14.07.2008, 21:28

Очень большое спасибо, но остаеться одна проблема. Нужно чтоб кнопки вместе находились на одном и том же горизонтальном уровне.
Вот такой тогда вариант:
<html>
<head>
<style>
body{
margin: 0px;
padding: 0px;
background: #4c4c4c;
}
a{ color: #FFFFFF;
}
a:hover{
text-decoration: none;
}
div.li{
position:relative;
background: #00AA00;
width:100%;
height:40px;
}
div.li0{
position:absolute;
left:40%;
top:10px;
}
div.li1{
height:26px;
display:inline;
margin-right:6px;
border: 3px solid #FFFFFF;
background: #000000;
}
div.li2{
height:26px;
display:inline;
border: 3px solid #FFFFFF;
background: #000000;
}
</style>
</head>
<body>
<div class="li">

<div class="li0">
<nobr>
<div class="li1">
<a href="#">Новости</a>
</div>
<div class="li2">
<a href="#">Книги</a>
</div>
</nobr>
</div>

</div>
</body>
</html>

procedure

14.07.2008, 21:34

спасибо, очень благодарен.

mff

14.07.2008, 21:38

спасибо, очень благодарен.
И тебе сенкс :)