Форум АНТИЧАТ

Форум АНТИЧАТ (https://forum.antichat.xyz/index.php)
-   PHP, PERL, MySQL, JavaScript (https://forum.antichat.xyz/forumdisplay.php?f=37)
-   -   html, css пару вопросов (https://forum.antichat.xyz/showthread.php?t=76352)

procedure 07.07.2008 19:44
html, css пару вопросов
 
Не могу разобраться в теге div, нету времени. Подскажите пожалуйста, как можно оптимизировать этот код так, чтоб отображение было во всех браузерах со всеми разрешениями экрана одинаково:
PHP код:
<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 - это ЗЛО))

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

PHP код:
<!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
Цитата:
Сообщение от ChaaK
А еще проще, сделать табличную верстку и не морочить себе голову этой дрянью..
Табличная верстка это слишком просто :)

-=Static=- 08.07.2008 19:12
Цитата:
Сообщение от smOleg
Табличная верстка это слишком просто :)

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

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

smOleg 09.07.2008 07:39
Цитата:
Сообщение от mff
procedure, проблема со стилем для тега div как я понял, у тебя написанно margin-right:-2%;, а эту конструкцию только IE понимает, остальные броузеры не схавают! Откажись от отрицательных величин!
Минуса даж валидацию проходят. Так что непутай людей

mff 09.07.2008 13:01
Цитата:
Сообщение от smOleg
Минуса даж валидацию проходят. Так что непутай людей
В смысле "непутай людей" ? Я тебя не понял! Человек пишет, что проблемма с расположением элементов в разных броузерах, я советую отказаться от отрицательных велечин, так как их не все браузеры понимают.

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

код рамки:

Код HTML:
<fieldset>

Jer1cho 09.07.2008 14:39
Как вариант, поместить их в таблицу:
PHP код:
<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
Цитата:
Сообщение от Alekzzzander
раз эта тема поднялась, то не могли бы вы и мне не много помочь, мне требуеться, что бы рамки были расположены рядом, но если выставляю код один за другим, то они получаються друг под другом, как расположить их рядом?

код рамки:

Код HTML:
<fieldset>

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

PHP код:
<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 вставить круто будет
Код HTML:
<fieldset><legend>legend</legend>content</fieldset>

Alekzzzander 09.07.2008 21:20
Цитата:
Сообщение от mff
Еще legend вставить круто будет
Код HTML:
<fieldset><legend>legend</legend>content</fieldset>
эт я знаю, но не всегда эта легенда нужна :)

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

-=Static=- 10.07.2008 04:13
Цитата:
Сообщение от procedure
Понимаете, я просто попросил отредактировать мой код так, чтоб во всех браузерах или хотяб в опере и лисе показывал вид одинаково. А -2% чтоб верхняя рамка не была видна. И картинка как будто бы выходила свеху в будующем там все будет реализовано с помщью js. Кто поможет тому + max
Ты выложи код всей страницы и картинку как должно быть. А то так как у в разных браузерах поразному, то и не оч понятно, что ты хочешь получить?)

mff 10.07.2008 14:15
Цитата:
Сообщение от -=Static=-
Ты выложи код всей страницы и картинку как должно быть. А то так как у в разных браузерах поразному, то и не оч понятно, что ты хочешь получить?)
Да! Скрин и код нужен! :)

procedure 13.07.2008 00:56
вот:
PHP код:
<!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

procedure 14.07.2008 03:25
up может ли кто нибудь помочь?

mff 14.07.2008 16:24
Код HTML:
<!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
Цитата:
Сообщение от procedure
Очень большое спасибо, но остаеться одна проблема. Нужно чтоб кнопки вместе находились на одном и том же горизонтальном уровне.
Вот такой тогда вариант:
Код HTML:
<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
Цитата:
Сообщение от procedure
спасибо, очень благодарен.
И тебе сенкс :)


Время: 19:15