Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML/CSS]Problem z float i clear
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
Szymciosek
Witam,
tak myślę, że to z tym jest problem.

Chodzi o klasę shadow, która jest wrzucona do header od razu jako div

http://jsfiddle.net/HkRSJ/1/
Ma się wyświetlić tak jakoś ładnie jak w footer.
No chyba, że źle to robię i nie powinno to być wrzucone w footer/header a poza nie czyli przed <footer> i po </header> ?

Dopiero teraz na poważniej zabrałem się za html, css i pewnie to jest banał, ale nie wiem co i jak...

Rozwiązane -> Można zamknąć.
com
zacznijmy od tego że takie rzeczy nie robi sie jako div tylko border smile.gif
Szymciosek
W sumie też racja i chyba to zmienię, ale mam jeszcze jeden problem jak chętny do rozwiązania jesteś.
com
no to dajesz ;P
Szymciosek
http://jsfiddle.net/pRUjQ/
Obrazki się nie załadują, bo działa lokalnie, ale tam nad napisem CONTENT TITLE jest belka 960x30px.

I teraz chcę mieć ten napis od margin-top: 0;

Doszedłem do tego, że dodając do:
Kod
#top_pattern {
    position: absolute;
}


Rozwiązuje to częściowo problem, ale napis ucieka pod tą belkę, więc takie działanie jest niepożądane...
com
zró jakiś screen z locala bo tak to ja Cię nie rozumiem wink.gif
Szymciosek
Mówisz masz biggrin.gif
https://dl.dropboxusercontent.com/u/2123959...emo_problem.JPG
com
nie wyraziłem się jasno mój bład, chodzi mi o to, żebyś mi zaznaczył co i gdzie ucieka, bo ja dalej tego nie widze ;d
Szymciosek
To co widziałeś, to jest pożądany efekt:

Normalnym trybem wychodzi coś takiego: https://dl.dropboxusercontent.com/u/2123959...mo_problem2.JPG

A to wychodzi po zastosowaniu powyżej opisanego position: absolute (to raczej jak najprędzej chcę wywalić, bo wpływa na resztę elementów i muszę brać na https://dl.dropboxusercontent.com/u/2123959...mo_problem3.JPG
com
tylko ja nadal nie wiem czym jest top_pattern.jpg wink.gif
Szymciosek
Na screenach widać takie paski skośne, to są właśnie one. Działają jak belka 960x30px.

Tutaj zaznaczyłem, gdzie one się znajdują itd. https://dl.dropboxusercontent.com/u/2123959...mo_problem4.JPG
com
ja ich na tych screenach nie widze biggrin.gif albo jestes ślepy... a jakbyś dodał ją jako div bo img ma swoje prawa i nie zawsze wyswietla sie tak jak ma bo ten znacznik ma własne formatowanie domyśle wink.gif
Szymciosek
http://jsfiddle.net/pRUjQ/1/ to (chyba najbardziej) oczojebn* biggrin.gif
com
no to tutaj ewidentnie widac czemu jest tam taka przerwa smile.gif
http://jsfiddle.net/pRUjQ/4/ o to chodziło?
Szymciosek
Prawie, tzn. jest ok, ale nie zadowala mnie obecność tego:
margin-top: -23px;

Chciałbym żeby to było jak najbardziej niezależne od innych elementów.
com
nie da rady zawsze coś bedzie kosztem czegoś bo jak to zrobie bez tego, to kolejne div Ci sie poprzesuwaja i to bedzie takie błędne koło wink.gif
Szymciosek
No właśnie... coś za coś niby, ale spoko.

Czyli czasami robiąc stronę w html/css trzeba się poświęcić i próbować różnych wartości żeby coś dobrze ustawić mimo tego, że właśnie wartość będzie np. "-24px"?
com
wszystko zależy od tego jaki efekt chcemy uzyskać, bo równie dobrze można operować na nakładaniu sie warstw (z-index), pozycjach(position) i formatowaniach typu top, left itd ale można też zrobić to tak jak zrobiłem wink.gif
Szymciosek
Już wiesz co chcę uzyskać i jaki sposób jest najlepszy?

I na przyszłość od razu jaki sposób jest bardziej uniwersalny? Tzn. który lepiej stosować?
com
w ostatnim poście mówiłem właśnie na temat uniwersalności, w tym przypadku wygodniej było przesunać marginesy w góre, niż nakładać na siebie warstwy, bo wtedy każdą kolejną byś musiał przesówać, a zważajać na to iż jak widać są z tym problemy, było by to dla Ciebie może kłopotliwe wink.gif A tak naprawde nie da sie określić który sposób jest lepszy, bo zasadniczo jeden a drugi to zupełnie inna bajka smile.gif
Szymciosek
Kod
#content-title {
    width: 960px;
    text-align: center;
    margin-top: -30px; /* height of top_pattern */
    z-index: 2;
}


W sumie jakaś zależność.

I nawet nie muszę na razie brać pod uwagę kolejne elementu poniżej, bo wyszło super. Dzięki wielkie.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2024 Invision Power Services, Inc.