[XHTML/CSS] Zamrożenie elementów

Post09 maja 2010, 14:53

Gdy wstawię obrazek z pozycjonowaniem absolutnym, a następnie zmniejszę okno przeglądarki, to obrazek dopasowuje się do tego mniejszego okienka powodując zasłanianie tekstu. To samo się dzieje z tekstem, gdy np. mam nagłówek <h1>...</h1>. Jeśli wystarczająco zwężę okno firefoxa to tekst zaczyna mi się zwijać. Wygląda to mniej więcej tak:

Przed:

Tytuł strony internetowej!

Po:

Tytuł
strony
internetowej!

Jest to dla mnie efekt niepożądany. Minimalizując przeglądarkę na choćby tej stronie można zauważyć, że pojawiają się paski do przewijania, gdyż elementy nie zmieniają swej pozycji. Jak tego dokonać?

Podkreślam, że nie tylko chodzi tylko o zamrożenie tekstu, ale również obrazków.
----------------------------------------------------------------------------------

Jak ustalić jakiej wielkości ma być tło obrazkowe? Na kurshtml nie bardzo zrozumiałem to wyjaśnienie.

Post09 maja 2010, 15:17

Możesz zastosować właściwość min-width i/lub min-height, aby na sztywno określić minimalną szerokość/wysokość danego elementu. Oczywiście używając CSS.

Co do obrazków to ustalasz wymiary na sztywno, określasz width i height w tagu IMG i uzyskasz satysfakcjonujący Cię efekt.

Post09 maja 2010, 17:00

Co do obrazków to ustalasz wymiary na sztywno, określasz width i height w tagu IMG i uzyskasz satysfakcjonujący Cię efekt.

Ja tez mam ten kłopot, ale width i height zmieniają rozmiary obrazka. Ja na początku obrazki mam ułożone w taki sposób:
X X X X X wszystkie obok siebie, a gdy zmniejszę okienko przeglądarki to się robi tak:

X X
X X
X
Jak to naprawić?

Post09 maja 2010, 17:15

rokko pisze:Możesz zastosować właściwość min-width i/lub min-height, aby na sztywno określić minimalną szerokość/wysokość danego elementu. Oczywiście używając CSS.

Hm, zrobiłem tak:

<body>
<div id="body">
.
.
</div>
<body>

Po czym w CSS dałem parametry min-width i min-height. Jednak obrazki się przesuwają i zasłaniają tekst, co w sumie jest jasne, skoro są one pozycjonowane względem okna przeglądarki, a nie body. I znów utknąłem.

Post09 maja 2010, 17:17

Pozycja absolutna, to absolutna odległość od (zdefiniowanej: góra, dół, lewa, prawa) krawędzi strony. Zamiast pozycji absolutnej, użyj pozycji względnej (position: relative;), czyli odległości od normalnej pozycji elementu.

Np.

Kod: Zaznacz cały

position: relative;
left: 10px;
top: 20px;

Ale do takich rzeczy, moim zdaniem lepiej użyć innych metod. Np. marginesów.

Post09 maja 2010, 18:04

@Tomasz
Owszem można się bawić w pozycjonowanie elementów, można też dość łatwo taki efekt uzyskać wrzucając obrazki do kontenera, w tym wypadku kontenerem może być np. paragraf (<p>). Do paragrafu przypisujesz klasę zawierającą zdefiniowany w pliku styles.css właściwość min-width określającą minimalną długość bloku. Max width w tym wypadku będzie sumą szerokości wszystkich zdjęć mających być w jednym ciągłym bloku.

Plik HTML:

Kod: Zaznacz cały

<p class="pos"><img src="http://twoja_strona/aaa.png" alt="" /><img src="http://twoja_strona/bbb.png" alt="" /><img src="http://twoja_strona/ccc.png" alt="" /></p>

Plik styles.css

Kod: Zaznacz cały

p img{padding-right:5px;}
.pos{min-width:1000px;}

@PKP, daj cały kod pliku styli i html to rzucę na to okiem.

Post09 maja 2010, 18:18

Poleciały kody na PM.

Post09 maja 2010, 21:13

W ogóle jeżeli chciałbyś aby pozycjonować menu względem bloku tekstu (obecnie w div kartusz) to należałoby wcześniej stworzyć dodatkowe warstwy, aby to miało ręce i nogi, w tej chili widać wyraźnie że brakuje przynajmniej jednego diva, kontenera dla treści strony. Gdybym ja stronkę robił zrobiłbym to zupełnie inaczej, w tej chwili trzeba by sie bawić z pozycjonowaniem i ramkami pływającymi aby to wszystko działało, po pierwsze to sporo roboty jest, po drugie nie wszystkie przeglądarki poprawnie obsługują elementy relative/absolute oraz float więc z tychże powodów uważam że to zły pomysł, lepiej zrobić to klasycznie. Weź sobie jakiś gotowy szablon i na jego podstawie to wykonaj, tak aby to na każdej przeglądarce prawidłowo się wyświetlało.

Post10 maja 2010, 16:08

Ok, w zasadzie oba problemy zostały rozwiązane. Przyjrzałem się gotowym szablonom dostępnym w Internecie i zrobiłem stronę w strukturze tabeli. Nic się nie rozjeżdża przy zmianie okna, a przy okazji mając rozmiary komórek w px można bardzo ładnie dopasować grafikę. Usuwając obrys tabelki mamy ładną strukturę na stronie.

-- 10 maja 2010, 15:08 ---

Cóż, problemy się nie kończą. Spójrzcie na to:

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="pl" lang="pl">


<head>
  <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  <meta name="Description" content=" [wstaw tu opis strony] " />
  <meta name="Keywords" content=" [wstaw tu slowa kluczowe] " />
  <meta name="Author" content="  " />
  <meta name="Generator" content=" kED " />

  <title> Bla Bla Bla </title>

   <link rel="Stylesheet" type="text/css" href="forum.css" />

</head>
<body>

   
   <table border="0" cellpadding="0" align="center">
      <tr>
         <td class="stopka">
            <h5 align="center">
            
            Strona ta ma charakter edukacyjny.<br />
            
            Kopiowanie i rozpowszechnianie całości lub fragmentów<br />
            
            dozwolone pod warunkiem podania źródła.<br />
            
            &copy 2010
            
            </h5>
         </td>
      </tr>
   </table>
   
</body>
</html>

Kod: Zaznacz cały

body 
{   
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10pt;
   color: #ffffff;
   background-color: #000000;
   margin: 3%
}


.stopka
{
   width: 794px;
   border-style: solid;
   border-color: #ffffff;
   background-color: #575757;
}

Niby prosta tabelka, ale jak otwieram ją w IE to tekst nie jest wycentrowany, lecz jest troszkę podniesiony. Mozilla pokazuje wszystko w jak najlepszym porządku. Jak sobie z takim czymś radzić?

Post10 maja 2010, 17:07

ale jak otwieram ją w IE to tekst nie jest wycentrowany

Na której wersji IE? U mnie na IE8 jest wszystko oki więc domyślam się że chodzi o IE6 lub 7

Niestety nie mam możliwości teraz przetestować tego na IE6 (nie mam emulatora na tym kompie na którym teraz siedzę), więc spróbuj tego:

Zamiast...

<h5 align="center">

Daj...
text-align:center;

Spróbuj dać wyśrodkowanie pionowe.
vertical-align:middle;

EDIT:
W stylach powinno być oczywiście middle nie center, pomyłka

Oprócz tego jeżeli wersja ze stylami nic nie da spróbuj zastosować valign w tabeli.

Post12 maja 2010, 17:24

IE7. Odpuszczam sobie póki co, bo do poprawy były też obrazki (leciutko się przesuwały), a nie tylko tekst. Trzeba mieć nadzieję, że użytkownicy aktualizują przeglądarki.

-- 12 maja 2010, 16:24 ---

Dziś dowiedziałem się, że tworzenie stron www, gdzie szkieletem jest tabela, nie jest zalecane. Czy to prawda? Lepiej wszystko ubrać w divy i nimi rozporządzać wstawiając je na stronie w odpowiednie miejsca. Mnie się lepiej pracuje na tabelach, dlatego chciałem dowiedzieć się jak jest bardziej poprawnie lub czy jest to zależne od tworzącego i zdania są podzielone.

Słyszałem, że strona zbudowana w szkielecie tabeli dłużej się ładuje. Jest też problem z wydrukowaniem np. samego teksu. Tzn. trudno pominąć menu, nagłówek i stopkę, gdy są zamrożone w tabeli. Jak to jest?

Post12 maja 2010, 20:21

Zgadza się, na tabelach już od dawna nie tworzy się stron WWW. Obecnie tabelek powinno używać się tylko wtedy, gdy zachodzi potrzeba wyświetlenia pewnego typu danych tabelarycznych, które w żaden inny sposób nie mogą być wyświetlone na stronie. Swoją drogą wyświetlanie danych w tabelach na divach też nie jest trudnym zadaniem, ale trzeba zdecydowanie więcej czasu poświęcić na to, niż w przypadku klasycznej definicji.

Słyszałem, że strona zbudowana w szkielecie tabeli dłużej się ładuje.

Na to pytani ciężko mi jest odpowiedzieć bez wykonania konkretnych eksperymentów, trzeba by wykonać dwie wersje strony i przetestować przy pomocy dodatków do Firefoksa np. PageSpeed, YSlow.

Co do problemów przy wydruku, jeszcze nigdy nie miałem z tym problemów, w zasadzie zależne to jest bardziej od użytej przeglądarki (silnika renderującego) niż samej technologi tworzenia strony.

Post14 maja 2010, 23:09

Stworzyłem elementarną stronę opartą na divach:

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="pl" lang="pl">


<head>
  <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  <meta name="Description" content=" " />
  <meta name="Keywords" content=" " />
  <meta name="Author" content=" PKP " />
  <meta name="Generator" content=" kED " />

  <title> Przykładowa strona </title>

   <link rel="Stylesheet" type="text/css" href="divy.css" />


</head>
<body>
<center>

<div id="all">

      <div id="naglowek">
         <center>naglowek</center>
      </div>

   
      <div id="text">
         <center>tekst</center>
      </div>


      <div id="menu">
         <center>menu</a></center>
      </div>


      <div id="stopka">
         <center>stopka</center>
      </div>   
   
</div>
   
</center>
</body>
</html>

Kod: Zaznacz cały

body
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10pt;
   color: #ffffff;
   background-color: #000000;
   margin: 3%
}

div#naglowek
{
   border-style: solid;
   width: 800px;
   height: 100px;
}

div#text
{
   border-style: solid;
   width: 590px;
   height: 500px;
   position: relative; left: -105px; top: 6px;
}

div#menu
{
   border-style: solid;
   width: 190px;
   height: 500px;
   position: relative; left: 305px; top: -500px;
}

div#stopka
{
   border-style: solid;
   width: 800px;
   height: 50px;
   position: relative; bottom: 490px;
}

div#all
{
   width: 810px;
   height: 700px;
}

I mam dwa pytania:

1. Czy strukturalnie wszystko jest ok? W sensie, czy tak powinien mniej więcej wyglądać szkielet strony oparty na divach?
2. Jak się pozbyć tego, by strona pod stopką nie była pusta? Chodzi o to, że tam gdzie kończy się stopka powinna się też kończyć strona (zapewne to winna pozycjonowania i "podnoszenia" elementów). Tak się jednak nie dzieje i mamy pustą przestrzeń, dość sporą. Próbowałem się tego pozbyć robiąc diva z indeksem all i podając jego rozmiar jednak nic to nie dało.

Post15 maja 2010, 12:53

Co do tekstu i menu - daj je w tabelkę. Użyłeś pozycji względnej, wystarczy, że dasz tam więcej tekstu, a wyjedzie, poza divy w bok strony. A i jeszcze w menu jest nie potrzebne zakończenie dla tagu <a>.

A to puste miejsce to wina właśnie pozycjonowanie. Po prostu nie używaj pozycjonowania. Tam gdzie ma być podwójna treść (text i menu) użyj tabelki, a do rozmieszczenia innych divów - marginesów. Chociaż dla pozbycia się tego pustego miejsca możesz dodać w pliku CSS do stopki:

Kod: Zaznacz cały

margin-bottom: -500px;

Post15 maja 2010, 15:55

Coś takiego na szybko stworzyłem, luknij sobie...

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="pl" lang="pl">


<head>
  <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  <meta name="Description" content=" " />
  <meta name="Keywords" content=" " />
  <meta name="Author" content="rokko" />
  <meta name="Generator" content=" kED " />

  <title> Przykład </title>

   <link rel="Stylesheet" type="text/css" href="strona.css" />

</head>
<body>

<div id="main">

<div id="header">Nagłówek strony</div>

<div id="mainmenu"><ul>
   <li><a href="http://test.html">Strona główna</a></li>
   <li><a href="http://test.html">Artykuły</a></li>
   <li><a href="http://test.html">Newsy</a></li>
   <li><a href="http://test.html">O stronie</a></li>
</ul></div>

<div id="content"><p>Treść strony</p></div>
<div id="navigation">
<ul>
   <li><a href="http://test.html">Link1</a></li>
   <li><a href="http://test.html">Link2</a></li>
   <li><a href="http://test.html">Link3</a></li>
   <li><a href="http://test.html">Link4</a></li>
   <li><a href="http://test.html">Link5</a></li>
   <li><a href="http://test.html">Link6</a></li>
</ul>
                        
</div>
<div id="footer">Stopka</div>

</div>

</body>
</html>

CSS:

Kod: Zaznacz cały

* {
  padding: 0;
  margin: 0;
}

body {
     color: #000;
     background-color: #fff;
     font-family: Arial, Verdana, Helvetica, sans-serif;
     font-size: 11px;
}

#main {
         width: 990px;
         min-width:990px;
         margin: 0 auto;
}

#header {
        margin: 10px 0 0 0;
        height: 100px;
        padding: 5px;
        background-color: #666;
        min-height:100px
}

#navigation {
            margin: 0 0 3px 0;
            padding: 5px;
            display: inline;
            float: right;
            width: 220px;
            background-color: #777;
            min-height: 500px;
}

#content {
              margin: 0 0 3px 0;
              display: inline;
              padding: 5px;
              width: 745px;
              float: left;
              background-color: #888;
              min-height: 500px;
}

#footer {
        background-color: #999;
        margin: 0px 0px 10px 0px;
        display: inline;
        float: left;
        width: 100%;
        min-height:60px;
}

#mainmenu{
        background-color: #555;
        margin: 3px 0px 3px 0px;
        float: left;
        width: 990px;
}

#mainmenu ul li {float: left;}

#mainmenu ul, ul li {
   list-style: none;
   display: block;
   margin: 0;
   padding: 0;
}

#mainmenu ul {
   float: left;
   background-color: #999;
   padding: 0px;
}


#mainmenu ul a:link, ul a:visited {
   text-decoration: none;
   display: block;
   font-weight: bold;
   color: #fff;
   padding: 10px 10px;
   background: #555;
}

#mainmenu ul a:hover {background-color: #000; color:#fff;}

#navigation ul a:hover {background-color:#444; color:#999;}

#navigation ul a:link, ul a:visited {
   text-decoration: none;
   color: #fff;
}