[CSS] Problem z image repeat na DIV-ach

0

Witam,
Przesiedziałem dzisiaj cały dzień, żeby zrobić sobie layout strony. A cały dzień straciłem na jednym problemie... niestety.
Byłbym wdzięczny za wskazanie miejsca, gdzie popełniam błąd.
Do rzeczy:
Mam na Divach zrobioną górną belkę strony: lewa strona (z tłem repeat-x), środkowy div z obrazkami-przyciskami, prawa strona (z tłem repeat-x).
Za nic ten repeat-x nie chce ruszyć. W ogóle rozsypuje się ten cały blok, gdy do pierwszego i ostatniego diva dorzucę tekst.

W załączniku screen z efektu obecnego, docelowego i oryginalny kod.

Z góry dziękuję za pomoc :)

0

Nie rób żadnego position: absolute, ani niczego takiego. Kodowanie layoutu -- i w ogóle jakiekolwiek kodowanie -- nigdy nie powinno polegać na wpisywaniu losowych komend i posiadaniu nadziei, że zadziała. A jak zadziała, to nie ruszać, bo się zepsuje ;).

Nie używaj atrybutu style, tylko zewnętrznego arkusza stylów CSS. Plik CSS dołączamy w elemencie <head>, korzystając z elementu <link>.

W pliku ze stylami zrób dwie rzeczy:

  1. Wyśrodkuj element body w ten sposób:
body {
  margin: 0 auto;
  width: 746px; /* szerokość, jaką ma mieć wyśrodkowana część strony */
}

Dzięki temu cała zawartość strony będzie wyśrodkowana.

  1. Ustaw tło w elemencie HTML. Obrazek tła niech będzie u góry i niech ma repeat-x:
html {
  background: url('img/1x00.png') repeat-x left top; /* ustaw odpowiednio ścieżkę; tę wziąłem z Twojego kodu */
  /* ^^ możesz też zechcieć ustawić kolor tła, np. dodając #56BCFE przed url(...)  */
}

W sumie więc robisz coś takiego:

Całość obszaru graficznego strony zawarta jest w elemencie <html>. Jest on rozciągnięty na całe okno przeglądarki. U góry ustawiasz szeroki na 1 piksel (lub więcej, żeby przeglądarka nie musiała kafelkować) pasek z gradientem i powtarzasz go w poziomie, dzięki czemu sięga od lewej do prawej, przez całe okno przeglądarki.

Następnie, wewnątrz elementu <html> jest element <body>, zawierający właściwą treść strony. Wyśrodkowujesz ten element nadając szerokość i nadając poziomym marginesom (lewemu i prawemu) wartość auto.

To wszystko. Możesz wywalić wszelkie dodatkowe divy itp., których używałeś do tła.

Uwag o kodzie, który zamieściłeś mogę powiedzieć wiele, ale masz tu jeszcze jedną, na dobry początek: używanie atrybutów onmouseover itd. jest generalnie niezbyt dobrą praktyką, miesza warstwy zachowania (JavaScript) i struktury (HTML). Skrypty mogą same się dołączać. Ale jeśli już używasz atrybutów, to pisz je małymi literami. W HTML-u nie ma to znaczenia, ale w XHTML-u ma. Tam wielkość liter się liczy, a atrybuty są zdefiniowane jako mające tylko małe litery. Więc nie onMouseOver tylko onmouseover. Wiem, że to pierwsze jest ładniejsze, ale -- formalnie rzecz biorąc -- nie wolno tego używać i przeglądarka ma prawo udawać, że tego nie widzi. Ponieważ wielu koderów jest na tyle nieogarniętych, że tego nie wie, przeglądarki tolerują nawet niepoprawne wielkości liter. Szczególnie gdy podajesz XHTML w zasadzie jako HTML z błędami, a zapewne tak właśnie robisz (zależy to od ustawień serwera).

0

Dzięki :)
Efekt jest taki, że przyciski są na środku :)
Lecz lewa i prawa strona w ogóle się nie powiela - białe pola.

Wiem, namieszane w tym kodzie jest nieźle, a to przez stosowanie metody prób i błędów. Niestety, moja wiedza się wyczerpała i musiałem tę drogą posiłkować się.

0

Tzn. źle się zrozumieliśmy.
Jak wrzucę tak jak napisałeś, dla całego HTML-a, to ok, grafika się powiela.
Ale takie rozwiązanie mnie nie urządza, bowiem poniżej będą kolejne divy, na tej samej zasadzie działające, ale grafika do powielenie będzie inna.

0

W takim wypadku, zamiast ostylowywać elementy <html> i <body>, możesz sobie wstawić w kod HTML inne elementy i to do nich się odnosić w arkuszu CSS.

Np. wstaw w HTML element

(domykaj te tagi), a wewnątrz niego umieść
i dopiero wewnątrz headerInner umieścić kod menu. Wtedy w dołączonych przeze mnie stylach zmieniasz tylko selektory. Selektor "html" zmieniasz na "#header", a selektor "body" zmieniasz na "#headerInner" (w rzeczywistym kodzie, selektory nie są otoczone cudzysłowami :P ).</p>
0

Nie ukrywam, że DIVy są jakieś strasznie przekombinowane (jak dla mnie).
Na tabelkach nie mam większych problemów osiągnąć taki efekt, jaki sobie zażyczę.

Aktualny efekt w załączniku. Porobiły się jakieś odstępy między img oraz marginesy.

0

A gdy dorzuciłem do obrazków float:left oraz do body margin: 0 auto, efekt następujący (załącznik).
Czyli wyśrodkowanie posypało się. Naprawdę nie kumam zależności jednego od drugiego parametru, a trochę się oczytałem na ten temat.

0

Możesz dać link do aktualnej wersji strony? Albo zamieścić paczkę z HTML-em, CSS, ale także obrazkami itd.?

matmic napisał(a)

Nie ukrywam, że DIVy są jakieś strasznie przekombinowane (jak dla mnie).

Nie, nie są, nawet jak dla Ciebie.

to o wiele prostszy element niż np.

Kłopoty sprawiają Ci nie żadne "divy", tylko CSS. Wiele osób mówi o "robieniu strony na divach", gdy tak naprawdę chodzi im o użycie CSS do pozycjonowania i innych elementów prezentacyjnych.

CSS ma znacznie większe możliwości prezentacyjne (wizualne) niż HTML, włącznie z tabelkami. CSS jest jednak bardziej skomplikowany, a zrozumienie pozycjonowania faktycznie jest trudniejsze niż ogarnięcie tabelek. Choć tabel często i tak ludzie nie ogarniają w 100% -- nie znają np. algorytmu automatycznego obliczania szerokości kolumn. Zauważ proszę, że z tabelkami masz najwyraźniej większe doświadczenie niż z CSS, przez co CSS wydaje Ci się (jeszcze) trudniejsze niż jest. CSS ma trochę niezgrabności, ale mi np. zakodowanie takiego menu czy tła strony prawdopodobnie nie przysporzyłoby najmniejszych problemów. Mógłbym się co najwyżej zastanawiać, jak to rozwiązać w najbardziej elegancki sposób. Także to nie tak, że CSS jest be, a używanie go jest powolne.

Wygląda na to, że jeszcze za wcześnie żebyś się rzucał na używanie CSS w projektach, skoro chyba nie masz jeszcze opanowanych podstaw. Tak naprawdę to z semantycznego punktu widzenia nawet kod HTML tego menu jest pozbawiony sensu, ale nie wiesz tego, ponieważ zapewne nie czytałeś jeszcze o rozdzielaniu warstw i być może niewiele wiesz o semantyce (choć używasz atrybutów alt). To menu powinno być listą, prawdopodobnie też użycie dla poszczególnych linków także nie jest tam optymalne.

Musiałbyś sobie trochę o tym poczytać, nawet tutoriale (z tych polskich, to podobno dobry jest ten: http://www.kurshtml.boo.pl/ ). Książki jakieś, np. "CSS według Erica Meyera" lub "CSS według Erica Meyera. Kolejna odsłona". W tej ostatniej jest opisany proces tworzenia menu w formie zakładek, czyli czegoś bardziej złożonego niż Ty tam masz. Podobne menu jest opisane w książce "Kuloodporne strony internetowe" (Dan Cederholm). Obaj autorzy trzymają się wysokich standardów, opisują krok po kroku tworzenie HTML-a i CSS dla kolejnych, praktycznych projektów (przykładowym projektem jest właśnie menu nawigacyjne). Nie ma w tych książkach podstaw CSS, więc do nich trzeba dodać choćby ten kurs internetowy.

To wszystko to po prostu kwestia nauki. Opanowania technologii. Na tabelkach w XXI wieku daleko nie zajedziesz. Już od dawna dobre firmy nie tworzą w ten sposób stron, ew. poza fragmentami witryny, które znacznie trudniej zrobić za pomocą CSS (takie menu nie należy do tych fragmentów). I w CSS możesz śmigać, ale nie opanujesz tego ani w dzień, ani w tydzień.

0

Co racja to racja.
Wybacz, ale niestety mój brak wiedzy, nie jest powodem do takich wywodów.
Do rzeczy... siedzę dalej nad tym i niestety, nie potrafię tego opanować.

Nie chcę się chwalić kodem, bo to jest już w tym momencie jeden wielki b...

Chodzi mi o naprawdę (na pewno dla Ciebie) prostą strukturę strony.
Jak w załączniku.

Czy wzorując się tą strukturą, mógłbyś coś poradzić, na co mam zwrócić uwagę w kodzie?
O gotowca nawet nie będę śmiał prosić, bo wiem, że go nie dostanę - i słusznie! Gotowiec mnie niczego nie nauczy :)

0
matmic napisał(a)

Wybacz, ale niestety mój brak wiedzy, nie jest powodem do takich wywodów.

???

Do jakich wywodów? Do tego co ja tam napisałem? Ależ jest. Aktualny brak wiedzy odnośnie używanej technologii w momencie gdy próbujesz zawalczyć z jakoś-tam złożonym projektem był dokładnie powodem dla tego, bym Ci o tym wspomniał i wskazał miejsca, gdzie możesz poszerzyć wiedzę w zakresie, który najwyraźniej jest Ci potrzebny. I to ja decyduje, co jest powodem do moich... wywodów -- to chyba oczywiste.

Żebyśmy się zrozumieli: nie oceniam Ciebie jako człowieka, a nawet nie jako programistę. Każdy koder natrafia co jakiś czas na nowe technologie i czasem są one dla niego na początku zagadką. Jeśli mamy ich używać, musimy się ich nauczyć i tyle. Nic mądrzejszego się nie wymyśli. Ciężko robić już prawdziwe, w miarę złożone projekty w technologii, która jest dla nas zupełnie nieznana. Nawet co innego znać np. Javę i przesiąść się na C# -- języki jakoś tam podobne (mając dobrą znajomość Javy, szybko łapalibyśmy C#) -- a co innego znać HTML i layouty oparte na tabelach i przesiąść się na semantyczny HTML+CSS. To drugie przejście jest trudniejsze, bo znajomość prezentacyjnego HTML-a za wiele tu nie pomaga, a jedynie człowiek się wkurza, że przez jakiś czas po przejściu na CSS jest mu trudniej (bo dopiero się uczy!).

matmic napisał(a)

Nie chcę się chwalić kodem, bo to jest już w tym momencie jeden wielki b...

Wystarczyłoby mi wrzucenie w paczkę (czy gdzieś obok na stronę) samej góry strony wraz z dotyczącymi góry obrazkami i plikami CSS. To dlatego, że napotkałeś na osobliwy problem z tymi floatami i nie jestem pewien, co go spowodowało. Może źle odczytałeś moje wskazówki, może w nich samych jest błąd (sprawdziłem -- nie widzę), może są zbyt mało szczegółowe. A może przebija Ci się coś z innych stylów.

Te floaty mogą sprawiać problemy gdy się nie wie jak ich używać, one w ogóle są dość niezgrabne jako narzędzie pozycjonujące (niestety, często po prostu trzeba ich użyć). Na pewno przydałby Ci się też tzw. clearfix. Na razie używasz w jego roli floatów, ale od tego -- co zapewne zauważyłeś -- nagle otrzymujesz w kodzie same floaty. Wywal te floaty z całej sekcji menu, za wyjątkiem elementów oraz tego jednego obrazka z logo. Tylko tam niech zostaną floaty. Z reszty rzeczy w nagłówku powywalaj. Zastosuj też prosty clearfix: elementowi, który zawiera wszystkie floaty z menu, czyli elementowi otaczającemu logo i serię linków, daj overflow: hidden.

Patrząc na tę strukturę i zakładając, że po lewej i po prawej ma być to samo tło, raczej trzymałbym się tego o czym pisałem wcześniej. Dla każdej sekcji zrób coś takiego (w brzydki sposób skorzystam z zagnieżdżonych stylów; normalnie powinny być w oddzielnym pliku CSS)

<!-- Przepraszam za ten brzydki kod!
      Naprawdę polecam nauczyć się selektorów i przenieść style z atrybutu style
      do osobnych reguł w osobnym pliku CSS! -->
<div style="background: url(obrazek.png) repeat-x left top;">
  <div style="width: 746px; margin: 0 auto; background: #FFF; /* tu ustawiasz kolor tła środka */">
    Jakaś zawartość
    Jeśli chcesz tu dać jakieś floaty, to opakuj je w element mający overflow: hidden, jak poniżej:
    <div style="overflow: hidden; /* tu możesz dawać dalsze style */">
      <a href="#" style="float: left">Link</a>
      <a href="#" style="float: left">Inny link</a>
    </div>
  </div>
</div>

To powinno działać. Tym dwu zewnętrznym DIV-om nie dawaj float, position itd., bo coś się "spieprzy" (ściślej: przeglądarki zrobią to, co im każesz, ale nie musi to być to, co chcesz osiągnąć ;) ). Takie sekcje powinny być umieszczone bezpośrednio w elemencie <body>. Elementy <body> i <html> nie powinny mieć ustawianej szerokości itp.

0

Hmmm, w większej mierze widzę, że brak overflow: hidden powodował mi problemy.
Jakoś dałem radę, trochę jeszcze niektóre rzeczy mam porozjeżdżane, ale jest progress :)
Dzięki za pomoc.

Aaa, jeszcze takie jedno pytanko: jak taki cały blok, jaki mi napisałeś, przypiąć jako stopkę do dolnej krawędzi strony?
Position i bottom zapewne nie wchodzi w grę!? :)

0

Jeśli znasz wysokość stopki to możesz wyjątkowo użyć tego bottoma. To jeden z raczej niewielu przypadków, gdy używamy pozycjonowania bezwzględnego (ono też jest dla ludzi; problem w tym, że początkujący często próbują stosować to dosłownie wszędzie i layout się robi zupełnie nieelastyczny dla treści). Jak zaczniesz wpisywać w Google zapytanie, to samo za Ciebie dokończy: "css footer always on bottom".

0

Dzięki.
Wybrnąłem z tą stopką następująco:
CSS:

#stopka
{
margin-top: -7.5em;
height: 57px;
clear: both;
bottom:0px;
width:100%;
position:fixed;
}

DIVy ze stopką:

 </div>		
	<div style="background: url(img/5x00.png) repeat-x" id="stopka">
  <div style="width: 746px; margin: 0 auto;background-image:url('img/5x00.png');background-repeat:repeat-x">
    <div style="overflow: hidden;height:57px">
		<div style="font-family:'Segoe UI';font-size:small;text-align:center;margin-left:0px;color:#999999"><br/>2007 - 2010 &copy; treść</a></p>
		</div>
	
</div></div></div>

Takie "coś" powoduje, że stopką jest pięknie na dole. Ale gdy wysokość okna przeglądarki jest mniejsza od wysokości całej treści strony, stopka zaczyna od dołu nachodzić na treść (wyższe divy). Nadmieniam, że stopka nie jest wrzucona w żaden Container. Jest bezpośrednio w Body.

0

Spróbuj dać ostatniemu blokowi przed stopką padding-bottom o wysokości stopki. Dzięki temu nawet jeśli użytkownik zmniejszy okno w pionie, powinien być w stanie zescrollować się na dół. Stopka w tym położeniu (po przescrollowaniu) będzie przykrywała jedynie to dolne dopełnienie (padding-bottom), a nie treść ostatniego bloku.

PS. Zauważ proszę,że font "Segoe UI" nie jest dostępny we wszystkich popularnych systemach operacyjnych. Jest na nowych Windowsach, ale na XP go nie było, a XP wciąż ma kilkadziesiąt procent popularności. Polecam zabezpieczyć się i użyć np. takiej deklaracji:

font-family: 'Segoe UI', Tahoma, Arial, Helvetica, sans-serif;

Widząc coś takiego, przeglądarka spróbuje wyświetlić tekst używając Segoe UI. Jeśli czcionki nie ma w systemie, to użyje Tahomy, jeśli nie ma, to Ariala i tak dalej.

Tak, jak masz teraz, to być może (zależnie od innych reguł CSS) przeglądarka użyje czcionki, którą ma ustawioną jako domyślną. To może być np. Times New Roman. Font szeryfowy i zupełnie inny niż ten, który chcesz tam mieć. Warto więc podać na liście jakieś popularne fonty bezszeryfowe, w miarę zbliżone do Segoe UI.

1 użytkowników online, w tym zalogowanych: 0, gości: 1