obramowanie div'ów

esop · Post autor: **esop** » pn sty 29, 2007 12:09 pm

To mój pierwszy post na forum, wypada się przywitać:
Hello

nie mogę sobie poradzić z obramowaniem div'ów. mozilla i IE zupełnie inaczej wyświetlają tę kwestię. a tworząc stronę, wiadomo, że trzeba brać pod uwagę wiele przeglądarek

powiedzmy, że mamy taką stronę:

css:

Kod: Zaznacz cały

body {margin: 0px; text-align: center;}
#ogarniajacy {width: 700px; height: 500px; background-color: #E0E0E0;
              margin: 10px auto; text-align: center;}       
#lewa_kol {width: 200px; height: 460px; background-color: #40B846;
           margin-top: 20px; float: left;
           border: solid; border-right: none; border-color: #EF4C40; border-width: 5px;
           }         
#prawa_kol {width: 500px; height: 460px; background-color: #85CEF4;
           margin-top: 20px; float: right;
           border: solid; border-color: #A3372F; border-width: 5px;
           }

i html:

Kod: Zaznacz cały

<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<link rel="stylesheet" href="styl.css" type="text/css" />
<title>przykładzik</title>
</head>

<body>

 <div id="ogarniajacy">
   <div id="lewa_kol"></div>
   <div id="prawa_kol"></div>
 </div>

</body>
</html>

efekt w mozilli:
Obrazek

efekt w IE:
Obrazek

no i jest problem. tzn przynajmniej dla mnie
łatwo można to naprawić w FF, zmniejszając szerokość kolumn, ale wtedy w IE będzie dziuuura.

jak temu zaradzić?

greenripper · Post autor: **greenripper** » pn sty 29, 2007 6:15 pm

Od szerokości poszczególnych div`ów trzeba odjąć grubości obramowania. Zmierz sobie o ile pixeli rozjeżdża Ci się w FF.
Skoro całość ma mieć 700px to:
LEWA: 200px - 5px = hmmmm....

PRAWA: 500px - 2*5px (obramowanie po obu stronach)

Powinno działać wszędzie dobrze. W IE prawdopodobnie rozjeżdża się 'ogarniający' - zmierz go.

esop · Post autor: **esop** » pn sty 29, 2007 7:25 pm

a ja proponuję, żebyś lepiej 1. przeczytał poprzedzający post 2. zagłębił się w skoro chcesz pomóc.

jeśli w FF odejmę szerokość obramowania od szerokości div'ów to będzie się zgadzało, ale w IE będzie dziura między kolumnami.
jeśli zmniejszę div "ogarniający" to w IE będzie dobrze, za to w FF powrócimy do stanu pierwszego, czyli prawa kolumna zsunie się do dołu

tak więc w rozwiązaniu nie pomogłeś kopiując to co napisałem w 1szym poście

sztacho · Post autor: **sztacho** » pn sty 29, 2007 9:25 pm

Zawsze możesz użyć hacka dla IE. Np. takiego

albo komentarze warunkowe

Salfunglandyare · Post autor: **Salfunglandyare** » pn sty 29, 2007 9:29 pm

użyj hacków, jest tyle w sieci... poszukaj box model. Podam tu jeden ze sposobów (najłatwiejszy, ale nie waliduje CSS).

Kod: Zaznacz cały

body {margin: 0px; text-align: center;}
#ogarniajacy {width: 700px; height: 500px; background-color: #E0E0E0;
              margin: 10px auto; text-align: center;}       
#lewa_kol {width: 200px; height: 460px; background-color: #40B846;
           margin-top: 20px; float: left;
           border: solid; border-right: none; border-color: #EF4C40; border-width: 5px;
           }         
#prawa_kol {width: 485px; _width: 500px; height: 460px; background-color: #85CEF4;
           margin-top: 20px; float: right;
           border: solid; border-color: #A3372F; border-width: 5px;
           }

zauważ _width - IE to interpretuje i nadaje dobrą szerokość, a FF i inne nie i pozostawiają szerokość określoną w width.
Albo inaczej:

Kod: Zaznacz cały

body {margin: 0px; text-align: center;}
#ogarniajacy {width: 700px; height: 500px; background-color: #E0E0E0;
              margin: 10px auto; text-align: center;}       
#lewa_kol {width: 200px; height: 460px; background-color: #40B846;
           margin-top: 20px; float: left;
           border: solid; border-right: none; border-color: #EF4C40; border-width: 5px;
           }         
#prawa_kol {width : 485px !important; /* dla innych przegladarek */
	   width: 500px; /* wartości dla IE */
	   height: 460px; background-color: #85CEF4;
           margin-top: 20px; float: right;
           border: solid; border-color: #A3372F; border-width: 5px;
           }

w sieci jest więcej

pzdr

esop · Post autor: **esop** » pn sty 29, 2007 10:45 pm

dzięki wielkie, działa i przechodzi przez walidator CSS

Wyniki Walidatora CSS W3C dla http://e-sobczak.jor.pl/test/styl.css

Dokument ten jest poprawnie napisanym arkuszem CSS!

esop · Post autor: **esop** » pn sty 29, 2007 10:45 pm

[czemu nie ma możliwości kasowania postów? :F]

obramowanie div'ów

obramowanie div'ów

Re: obramowanie div'ów

Re: obramowanie div'ów

Re: obramowanie div'ów

Re: obramowanie div'ów

Re: obramowanie div'ów

Re: obramowanie div'ów