Skocz do zawartości

Różne divy pod IE i Operą

gofer

Przez gofer
w HTML i CSS

Rekomendowane odpowiedzi

gofer Newbie

gofer

Opublikowano
Opublikowano

Witam,

zabrałem się za 'lepsze' kodowanie, problem polega na tym, zrobiłem sobie układ na trzech divach, jeden

pod drugim (nagłówek, treść, stopka), pod IE wszystko wygląda super, pod Operą jednak się sypie, tzn.

wszystkie divy zaczynają się w tym samym miejscu, czyli od samej góry, pomyślałem, że można

zdefiniować height i to pomogło w przypadku nagłówka, jednak w treści wysokość będzie zmienna i nie

mogę jej z góry zadeklarować, trochę to zagmatwane, ale mam nadzieję, że wiadomo o co chodzi :)

czy ktoś ma pomysł jak to rozwiązać?

kod wygląda mnie więcej tak:

<div id="content">treść</div>

<div id="content">treść</div>

<div id="content">treść</div>

css:

#content {

width: 750px;

padding: 0px;

margin-top: 0px;

margin-bottom: 0px;

margin-right: auto;

margin-left: auto;

}

strachy
Odnośnik do komentarza
Udostępnij na innych stronach
zerocool Newbie

zerocool

Opublikowano
Opublikowano

Sprawdź w validatorze czy Twoja strona nie zawiera jakichś błędów a będziesz wiedział co robisz źle.

U mnie na ten przykład (test 3div) wszystko wyświetla się poprawnie w Operze i nie tylko :

https://www.ecv1457.2-ec.com/testy/3div.html

serce.gifKocham Cię | Życie po Ślubie | Psychopatologia

Popełniłeś tylko jeden błąd ... jaki ? ... RAMBO !

Odnośnik do komentarza
Udostępnij na innych stronach
Bełdzio Newbie

Bełdzio

Opublikowano
Opublikowano 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
.content {
	width: 750px; 
	padding: 0px;
	margin: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	border: 1px solid #000;
}
</style>

</head>

<body>
<div class="content">treść</div>
<div class="content">treść</div>
<div class="content">treść</div>
</body>
</html>

w jednym dokumencie nie może być więcej niż 1 element o takim samym id

Let's Rock! - Agencja interaktywna dla wymagających

O tworzeniu (bezpiecznych) aplikacji internetowych

Odnośnik do komentarza
Udostępnij na innych stronach
zerocool Newbie

zerocool

Opublikowano
Opublikowano
nie może być więcej niż 1 element o takim samym id

właśnie dlatego powiedziałem żeby sprawdził validatorem który od razu by to pokazał, jeśli chcesz powtarzać elementy stosuj class

serce.gifKocham Cię | Życie po Ślubie | Psychopatologia

Popełniłeś tylko jeden błąd ... jaki ? ... RAMBO !

Odnośnik do komentarza
Udostępnij na innych stronach
  • 1 miesiąc temu...
gofer Newbie

gofer

Opublikowano
  • Autor
Opublikowano

pozwolę sobie wrócić do tematu, strona po walidacji nie ma żadnych błędów, nie chodzi tutaj o powtarzanie

się id, to jest schemat, bo kod jest tutaj za duży do wklejenia,

problem ciągle jest taki, strona pod IE wygląda ok, ale pod Operą divy zaczynają się (od góry) w jednym

miejscu, więc zdefiniowałem sobie height, co dało rezultat, ale mam jedną klasę, w której będzie treść

i nie mogę zdeklarować jej wysokości i tutaj leży problem, bo klasa pod nią wchodzi na treść,

próbowałem .clear {clear: both;} ale nie pomaga, ogólnie nie mam pomysłu jak to rozwiązać...

strachy
Odnośnik do komentarza
Udostępnij na innych stronach
qwertyuiop Newbie

qwertyuiop

Opublikowano
Opublikowano

<div class="content">treść</div>

<div class="content">treść</div>

<div class="content">treść</div>

.content {

display: block;

width: 750px;

padding: 0px;

margin-top: 0px;

margin-bottom: 0px;

margin-right: auto;

margin-left: auto;

}

display:

Styl definiuje sposób wyświetlania/interpretowania elementu.

WARTOŚCI

• block - CSS: 2.1, 2.0, 1.0

tworzy element blokowy, wartość domyślna

• inline - CSS: 2.1, 2.0, 1.0

tworzy element liniowy

• inline-block - CSS: 2.1

tworzy element liniowy z wnętrzem blokowym

• list-item - CSS: 2.1, 2.0, 1.0

tworzy listę

• none - CSS: 2.1, 2.0, 1.0

ukrywa element

• compact - CSS: 2.0

tworzy zagęszczony akapit bez odstępów

• run-in - CSS: 2.1, 2.0

tworzy element liniowy, jeżeli następny jest element blokowy

• marker - CSS: 2.0

tworzy marker

• table-header-group - CSS: 2.1, 2.0

tworzy nagłówek tabeli

• table-footer-group - CSS: 2.1, 2.0

tworzy stopkę tabeli

• table - CSS: 2.1, 2.0

tworzy tabelę

• inline-table - CSS: 2.1, 2.0

tworzy tabelę

• table-caption - CSS: 2.1, 2.0

tworzy podpis tabeli

• table-cell - CSS: 2.1, 2.0

tworzy komórkę tabeli

• table-row - CSS: 2.1, 2.0

tworzy rząd tabeli

• table-row-group - CSS: 2.1, 2.0

tworzy grupę rzędów tabeli

• table-column - CSS: 2.1, 2.0

tworzy kolumnę tabeli

• table-column-group - CSS: 2.1, 2.0

tworzy grupę kolumn tabeli

• inherit - CSS: 2.1, 2.0

przejęcie wartości "rodzica", np. display: inherit;

"Dopiero gdy wolna wola znowu zaskoczyła, przerwali bieg po torze przeszkód ich własnej konstrukcji."

Odnośnik do komentarza
Udostępnij na innych stronach
Gość w3master

Gość w3master

Opublikowano
Opublikowano

.content {

display: block;

width: 750px;

padding: 0px;

margin-top: 0px;

margin-bottom: 0px;

margin-right: auto;

margin-left: auto;

}

a to samo w zwiezlejszej formie:

.content {
width: 750px;
margin: 0 auto;
}

qwertyuiop: div z zalozenia jest blokowy, nie musisz powtarzac tego w deklaracji css.

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności