ďťż

[XHTML/CSS] Problem z tłem i wymiarami div-ów Help me please :)

Strona początkowa
 
JavaScript
 
Max dla RAM
 
Quick Time
 
phpBB skins

Podstrony

telcocafe

Mam problem polegający na tym, że mam obok siebie trzy divy: div1 div2 div3
Chcę aby puste divy 1 i 3 automatycznie miały taką samą długość jak div2 zawierający tekst i wypełniały się tłem graficznym.
Mam jeszcze jeden problem z wyświetlaniem divów w Firefoxie: mam jeden div, który ma wyświetlać kawałek strony, ale tylko graficzny. Divowi nadałem wymiary takie jak obrazka, który ma się w nim znajdować. W IE działa luksus, ale w Firefoxie div jest mniejszy niż powinien być i wyświetla tylko dolną część obrazka.

I jeszcze jedno: mogę prosić o jakieś linki do kursów z budowaniem strony na warstwach, bo do tej pory moje strony były osadzone na ramkach ale coraz więcej słyszę o tych warstwach więc chyba należałoby się przystosować?


Nie wiem czy zadziała ale przy pomocy js można spróbować
Najpierw przypisujesz identyfikatory (id) do divów
<div id="id_1">&nbsp;</div>
<div id="id_2">tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst</div>
<div id="id_3">&nbsp;</div>
Teraz js najlepiej w sekcji head
<script>
var width_2;
width_2 = document.getElementById("id_2").style.width;
document.getElementById("id_1").style.width = width_2;
document.getElementById("id_3").style.width = width_2;
</script>
Użytkownik deallas edytował ten post 10 kwiecień 2007, 18:31
Dzięki! Z tym problemem właśnie sobie poradziłem z pomocą tego artykułu. Teraz został mi jeszcze tylko ten problem z Firefoxem :(

to daj linka do tej strony albo pokaz przynajmniej jej cześć


Kod strony przedstawia się tak:

<!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">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body background="grafika/tlo.gif">
<div id="obszar_glowny">

<div id="logowanie">
</div>
<div id="logo">
</div>
<div id="menu">
<div id="lewykawalek"><img src="grafika/lewykawalekmenu.png" /></div>
<div id="glowna"><a href="glowna.php"><img src="grafika/glowna.png" border="0" /></a></div>
<div id="galeria"><a href="galeria.php"><img src="grafika/galeria.png" border="0" /></a></div>
<div id="pliki"><a href="pliki.php"><img src="grafika/pliki.png" border="0" /></a></div>
<div id="ja"><a href="ja.php"><img src="grafika/ja.png" border="0" /></a></div>
<div id="kontakt"><a href="kontakt.php"><img src="grafika/kontakt.png" border="0" /></a></div>
<div id="linki"><a href="linki.php"><img src="grafika/linki.png" border="0" /></a></div>
<div id="prawykawalek"><img src="grafika/prawykawalekmenu.png" /></div>
</div>
<div id="poczatek"></div>
<div id="poleglowne">

<div id="tresc"><p>Siemka banany!<br/> Jak życie płynie?</p></div>

</div>

</div>

</body>
</html> A plik css tak:


html, body{
background: url('grafika/tlo.gif');
padding:0;
margin: 0 auto;
text-align: center;
height:100%;
width:100%;
font-family:Tahoma, Verdana, Arial;
font-size: 12px;
}
div#obszar_glowny {
width: 800px;
margin: 0 auto;
border-left: solid #B3B3B3 1px;
border-right: solid #B3B3B3 1px;
}
div#logowanie {
width: 800px;
height: 34px;
margin: 0 auto;
background: url('grafika/logowanie.png');
}
div#logo {
width: 800px;
height: 146px;
background: url('grafika/logo.png');
}
div#menu {
border: 0px;
width: 800px;
height: 44px;
padding: 0px;
margin: 0px;
margin-top: 0px;
text-align: left;
float: left; clear: none;
}
div#glowna, #galeria, #pliki, #ja, #kontakt, #linki {
width: 120px;
height: 44px;
margin: 0px;
margin-top: 0px;
padding: 0px;
border: 0px;
float: left; clear: none;
}
div#lewykawalek, #prawykawalek {
width: 40px;
height: 44px;
margin: 0px;
margin-top: 0px;
padding: 0px;
border: 0px;
float: left; clear: none;
}
div#poczatek {
width: 800px;
max-width: 800px;
height: 56px;
min-height: 56px;
margin: 0px;
margin-top: 0px;
padding: 0px;
background: url('grafika/poczatek.png');
}
div#poleglowne {
border: 0px;
width: 800px;
background: url('grafika/tlotresci.png') 0 0 repeat-y;
padding: 0px;
margin: 0px auto;
margin-top: 0px;
text-align: left;
float: left; clear: none;
}
div#tresc {
width: 700px;
background: url('grafika/tresc.png');
margin-left: 50px;
margin-right: 50px;
margin-top: 0px;
padding: 0px;
border: 0px;
float: center;
position: center;
}

A tu masz screeny jak to wyglądać powinno, a jak wygląda w firefoxie:

Internet Explorer
Firefox
Użytkownik Lukasjed edytował ten post 10 kwiecień 2007, 19:04
Wywal float:left; żeby w css wyglądało tak...

div#poleglowne {
border: 0px;
width: 800px;
height:100%;
background: url('grafika/tlotresci.png') repeat-y;
padding: 0px;
margin: 0px auto;
margin-top: 0px;
text-align: left;
clear: none;
}

To też nie pomaga, ale znalazłem taki motyw, że jak się zmieni margines górny to dobrze wyświetla ten początek w firefoxie, ale znowu w IE jest źle. Znasz może jakiś skrypt lub funkcję php, która by rozpoznawała przeglądarkę i dołączała odpowiedni plik ze stylem, gdybym miał dwa rodzaje tego pliku?

Dzięki za pomoc, już znalazłem rozwiązanie - wystarczyło w sekcji meta strony wstawić kod:

<!--[if IE]> <link rel="stylesheet" type="text/css" href="styleie.css" /> <![endif]-->

  • zanotowane.pl
  • doc.pisz.pl
  • pdf.pisz.pl
  • nvm.keep.pl
    		•
    Sitedesign by AltusUmbrae.