Czym bezboleśnie zastąpić float żeby układ strony?


(system) #1

Sorry, jestem zielona, ale pełna zapału przerobiłam grubą księgę :"HTML i XHTML dla każdego " L.Lemay i zrobiłam w Zajączku stronę opartą na arkuszu CSS z podziałem na część nagłówka, lewą nawigaccyjną ramkę i prawą część z treścią. Lewa i prawa zrobiona jest jako float: left i odpowiedio float: right. W podglądzie wszystko pięknie wyglądało, opublikowałam i ... w IE nadal pięknie a w operze :o ramka z nawigacją lewa jest obniżona i zaczyna się dopiero w miejscu gdzie kończy się tekst z prawej strony :frowning: Help! Zależy mi na czasie, bo zbyt długo już nad tym ślęczałam. Macie jakiś pomysł co z tym zrobić oprócz "wywal to wszystko i zacznij od nowa"?


(mario@) #2

To w ramkach używało się float: left - right :?:

Mamy zacznij od nowa :stuck_out_tongue:

A tak na serio nie podałaś kodu więc nic Tobie nie poradzimy na ten fant, ale dodam że to raczej IE źle wyświetla twoją stronę a nie Opera. IE jest niezgodne ze standardami W3C i niektóre style definiuje się dla niej nieco inaczej niżeli dla Opery, FF, Safari.

Prawdopodobnie w którejś części (nawigacja - treść) masz poustawiane padding'i co powoduje różne wyświetlanie.

IE

width:150px + padding-left:10px + padding-right:10px = width:150px

FF, Opera

width:150px + padding-left:10px + padding-right:10px = width:170px


(Witos) #3

Problem zapewne w obliczaniu szerokości divów.

IE lubi robić wiele rzeczy po swojemu, dlatego najprostszym sposobem jest ustawienie ogólnie divom margin: 0; padding: 0;

W ten sposób ominiesz te rozbieżności w interpretacji podanych wymiarów warstwy.

Choć oczywiście sposób ten ma wady (no bo z marginem i paddingiem jednak łatwiej się robi) :slight_smile:


(Piojed00502) #4

Problem jest pewnie w różnicach w obliczaniu szerokości poszczególnych sekcji przez różne przeglądarki. Obliczona suma szerokości obu sekcji jest większa niż szerokość całej strony/sekcji nadrzędnej - dlatego nie są obok siebie tylko się tak dziwnie rozjechały. Ja miałem podobnie, tyle że problemy robił IE a reszta przeglądarek wyświetlała stronę dobrze. Okazało się, że przez jedną deklarację w nagłówku przypadkowo wprowadziłem IE w tryb Quirks i stąd problemy. Może u Ciebie jest tak samo - tyle że robiłaś stronę pod IE w trybie Quirks i było dobrze a przeglądarka, która renderuje strony zgodnie ze standardami robi to inaczej i stąd rozbieżności. Pokaż pierwsze linijki kodu Twojej strony, będzie można coś więcej powiedzieć :wink:


(system) #5

Wystarczy dać doctype a ie nagle zrozumie że robiło błędy (oczywiście nie jest to recepta na wszystkie dolegliwości ie :wink:


(Witos) #6

Owszem, tyle że wystarczy deklaracja xml

<?xml version="1.0" encoding="utf-8"?>

i IE znowu przestanie rozumieć że robi błędy


(system) #7

Tylko po kiego deklaracja? Wypada poczytać w trybie quirks.


(system) #8

Paddingi mam, owszem, ale z waszym mądrych odpowiedzi niewiele rozumiem, wszędzie mam marginy na zero, a problem jest właśnie w Operze, a nie w IE, muszę jeszcze sciągnąć sobie FF i sprawdzić jakie tam wyszły cuda, wianki. Naiszcie konkretnie jak krowie na miedzy co mam wpisać i gdzie, albo jak im sposobem się z tego wyplątać. Dodam, że całość robiłam raczej metodą prób i błędów, no i stąd może wyszło mi więcej błędów, niż powinno. Jak je poprawić? Oto kod: bez treści, bo tam już nie mam żadnych ustawień:

Przedszkole nr 9 w Chorzowie

body {font-family:;

margin: 0px;

background-image: url(gify/WB01741L.GIF)}

header {font: bold 48px ;

padding: 30px 20px 30px 20px;

border-bottom-style: double ;

background-image: url(gify/b4.jpg);

margin-bottom: 0px;}

nav {float: left;

padding: 15px;

width: 20%;

margin: 0px;

font-weight: bold;

border-right: 3px solid green;

border-bottom: 3px solid green;

font-size: larger;

background-image: url(gify/WB00509_.GIF);}

content {float: right;

width: 80%;

margin-top: 0px;

line-height:20px;

padding: 10px 20px 10 px 10px

}

nav a {text-decoration: none;

color: #006;}

nav a:hover {color: #c00;}

h2 {margin-top: 10px;}


(system) #9

Sprawdziłam w FF, tak samo kiepsko, dodatkowo jeszcze nie odczytał że chcę 48px font w nagłówku i jest mini czcionka :evil: Dam wam adres tej strony (niedokończonej), tylko się nie śmiejcie za bardzo, to moje pierwsze wypociny w htmlu. Litości [-o<


(Lksstudzionka) #10

20% + 80% + 20px = 100% + 20px

W tym tkwi problem. Jeśli koniecznie musi być w procentach to ustaw dla 'content' 70% i sprawdź czy działa. Jeśli nie to najlepiej zmień to i ustaw szerokość na sztywno pamiętając o tym co pisał mario@


(system) #11

Dzięki serdeczne :smiley: Faktycznie o te procenty chodziło, działa! Jak jeszcze mi kto powie czemu ta zakichana czcionka w FF jest mała zamiast tej co ustawiłam to będę dźwięczna na wieki!


(Lksstudzionka) #12
font-size: 48px;

?


(system) #13

:smiley: Dzieki, dzięki, dzięki. Na razie wszystko działa. Moja mrówcza praca nie zostanie zmarnowana! Może w wakacje zmuszę się do poznania php i innych tajników waszej "czarnej magii" i poprawię całość. Mic22 jesteś wielki =D>