Ocena wątku:
  • 1 głosów - średnia: 1
  • 1
  • 2
  • 3
  • 4
  • 5
[CSS] rozmieszczenie modułów vs. rozdzieczość ekranu
#1
Witam, mam problem z rozmieszczeniem zawartości strony - staram się zaprojektować stronę i potrzebuję zrobić ją tak (przynajmniej na mój rozum Smile - nie zajmowałem się tym wcześniej):
[Obrazek: pytanko.JPG]

przyjmując, że biała przestrzeń to ekran, umieszczam logo na samej górze (100% width), to jest oczywiście trywialne, problem pojawia się potem - potrzebuję, żeby przestrzeń obszar1 wyświetlała się zawsze dokładnie w odległości 1/4 od lewego dolnego boku mojego logo. O ile jestem to w stanie zrobić to gdy tylko zmienię rozdzielczość to zawsze okazuje, że, że jest duży odstęp między logo, a obszar1

Może pokaże jeszcze na modelu:
[Obrazek: przyklad2.PNG]

Czerwona linia oddziela logo od obszaru gdzie chcę wstawić treść.
Czy istnieje jakiś sposób w CSS żeby właśnie "związać" dwa obszary, tak by położenie jednego zależało od wyświetlającego się loga?

tło oraz logo wstawiam tak samo, przez:
Kod:
<img class="source-image" src="images/grafika/logo.jpg" alt="" />

gdzie w pliku CSS .source-image jest zdefiniowany jako:
Kod:
img.source-image {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

logo oraz tło są w dużej rozdzielczości i przy pomocy tych instrukcji ładnie mi się wczytują od razu się skalując.
W ogóle jest jakiś sposób (jestem początkującym hobbistą jeśli chodzi o projektowanie stron) żeby przeglądarka zawsze traktowała, że masz rozdzielczość ustawioną np 1280x1024 i wyświetlała zawsze ten sam rozmiar zawartości strony (nawet w przypadku większej rozdzielczości)?
Będę wdzięczny za pomoc.
Odpowiedz
#2
Ciężko cię zrozumieć...

Cytat:...że, że jest duży odstęp między logo, a obszar1

Jaki odstęp konkretnie bo nie rozumiem. Jeżeli chcesz aby wyświetlał się zawsze w odległości 1/4, to pozycjonuj go absolutnie w odległości 25% od kontenera względem którego ma być pozycjonowany.

Cytat:W ogóle jest jakiś sposób (jestem początkującym hobbistą jeśli chodzi o projektowanie stron) żeby przeglądarka zawsze traktowała, że masz rozdzielczość ustawioną np 1280x1024 i wyświetlała zawsze ten sam rozmiar zawartości strony

Tego też nie rozumiem. Wydaje się, że nie rozumiesz podstaw. Jeżeli stosujesz layout typu fixed, czyli o ustalonej rozdzielczości, to będzie on zawsze takiej samej wielkości, niezależnie od rozdzielczości jaką ktoś ma ustawioną w systemie. Rozdzielczość ustawiona w systemie decyduje w tym wypadku tylko o wielkości obszaru body.


[Obrazek: ancik.jpg]
Odpowiedz
#3
Postaram się na konkretnym przykładzie pokazać bo tak będzie najprościej mam nadzieje:
http://freeside.pl/tmp/tmp.html

tutaj umieściłem przykładowy kod - to co chce osiągnąć to taki widok:
http://freeside.pl/tmp/full_size.JPG

obszar1 jest pod moim logo, chcę by obszar1 zawsze wyświetlał się dokładnie w tym miejscu w strosunku co do mojego logo - tymczasem tak się nie dzieje, gdy zmniejszę rozmiar okna przeglądarki to wyświetla się tak:
http://freeside.pl/tmp/small.JPG
(to właśnie ten odstęp o którym pisałem)

a jak wyświetliłem sobie na innej przeglądarce to w ogóle pojawia się tak:
http://freeside.pl/tmp/przegladarka.JPG
czyli obszar1 za bardzo wchodzi w logo.

Nie wiem jak tego uniknąć - znaczy właśnie, żeby zrobić tak, żeby bez względu na rozmiar okna przeglądarki wyświetlał się ciągle tak samo obraz (jak na 1 linku)

kod CSS jest dostępny http://freeside.pl/tmp/css/tmp.css - to tylko jedna z opcji którą próbowałem, ale za każdym razem dzieje się to samo co piszę - obszar1 rozjeżdża się.

Dziś dopiero (a w zasadzie wczoraj) skończyłem przerabiać dość dogłębnie tutorial na w3 school więc na pewno nie zdążyłem przyswoić wszystkiego (za dużo jak na 2 dni pracy Wink). Będe wdzięczy za każdą sugestię. Jakby coś było niezrozumiałe to postaram się wyjaśnić.


(14-01-2012, 03:58)Ancik napisał(a): Ciężko cię zrozumieć...

Cytat:...że, że jest duży odstęp między logo, a obszar1

Jaki odstęp konkretnie bo nie rozumiem. Jeżeli chcesz aby wyświetlał się zawsze w odległości 1/4, to pozycjonuj go absolutnie w odległości 25% od kontenera względem którego ma być pozycjonowany.

Cytat:W ogóle jest jakiś sposób (jestem początkującym hobbistą jeśli chodzi o projektowanie stron) żeby przeglądarka zawsze traktowała, że masz rozdzielczość ustawioną np 1280x1024 i wyświetlała zawsze ten sam rozmiar zawartości strony

Tego też nie rozumiem. Wydaje się, że nie rozumiesz podstaw. Jeżeli stosujesz layout typu fixed, czyli o ustalonej rozdzielczości, to będzie on zawsze takiej samej wielkości, niezależnie od rozdzielczości jaką ktoś ma ustawioną w systemie. Rozdzielczość ustawiona w systemie decyduje w tym wypadku tylko o wielkości obszaru body.

Odpowiedz
#4
Strona jest zła... nie możesz wstawiać całych obrazów... musisz je ciąć i kodować tak by jak najmniej zajmowały ale na szybkiego coś takiego napisalem.

Powinienes sobie to poprawic i juz to powinnio cie nakierowac na dobra droge:

CSS:

body {
margin:0;
padding:0;
}

#body {
background: url (images/grafika/tloG.jpg) no-repeat;
width: wpisz sobie;
height: wpisz sobie;
}

#logo {
background: url(images/grafika/grafa.jpg);
width: wpisz sobie;
height: wpisz sobie;
}

#container {
width: 450px;
margin: 0 auto;
}

#content {
font-size: 14px;
padding: 4px;
}

HTML:

<div id="body">
<div id="logo"></div>
<div id="container">
<div id="content">Treść</div>
</div>
</div>

Tak ma mniej więcej to wyglądać ,pewnie jest tutaj parę błędów ale napisałem to w 2 min. Popraw sobie i będzie dobrze.
Odpowiedz
#5
Rozumiem, że chcesz logo mieć na całą szerokość ekranu, a pod tym content, który niezależnie od wielkości okna przeglądarki ma być na środku, bo żadnej 1/4 odległości tam nie widzę.

Kod:
.content { width: ilosc px; MARGIN: 0 AUTO; }

To samo napisał ci kolega powyżej zresztą. Margin:0 auto; sprawia, że element o ustalonej szerokości zawsze będzie na środku okna przeglądarki, niezależnie od rozdzielczości.
[Obrazek: ancik.jpg]
Odpowiedz
#6
Damian19, Ancik - działa, dzięki już sobie poprzestawiałem tak jak ma być Smile
[Obrazek: done.jpg]

jednak pod chrome jak wyświetlam to to to między logo, a treścią jest mały odstęp Big Grin
http://www.freeside.pl/tmp/tmp.html

uaktualniłem kod css o wasze komentarze
http://www.freeside.pl/tmp/css/tmp.css

to jak to wygląda pod Chrome (pod FF, a nawet IE jest ok...)
[Obrazek: chrome.jpg]

walczyłem, ale nie wiem jak w Chrome zrobić tak żeby się wyświetlał jak w reszcie przypadków...
część pliku css:
Kod:
body {
    /*background-color:#b0c4de;*/
    margin:0;
    padding:0;

}

#body {
background:url(tloFull.jpg) no-repeat;
width: 100%;
height: 1465px;
}

#logo {
background: url(LogoFull.jpg);
width: 100%;
height: 295px;
overflow:hidden;
}

#container {
width: 700px;
margin: 0 auto;
background: blue;
}

#content {
font-size: 14px;

}

#black_area {
    padding: 0.1px;
    width: 854px;
    height: 344px;
    position:relative;
    left:240px;
    margin: 0 0 0 0;
    background: black;
    /*border-radius:25px; margin: 0 auto;*/
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    
    box-shadow: 10px 10px 5px #26CAD4;
}
Odpowiedz
#7
Dodaj ten selektor do kodu css:

* {
margin: 0;
padding: 0;
}

i zobacz czy będzie ok.
Odpowiedz
#8
Tak, o to chodziło, teraz jest w porządku. Wielkie dzięki za pomoc.


(14-01-2012, 22:56)Damian19 napisał(a): Dodaj ten selektor do kodu css:

* {
margin: 0;
padding: 0;
}

i zobacz czy będzie ok.


Odpowiedz
#9
Spoko Wink
Odpowiedz
#10
Poczytaj o resetach css Wink na pewno ci się przyda.
[Obrazek: ancik.jpg]
Odpowiedz


Podobne wątki
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  [xHTML][CSS][JQ] Dopasowanie strony do rozdzielczości ekranu. kadobe 3 4,215 17-08-2013, 01:57
Ostatni post: msx83
  Pytanie o rozłożenie modułów [email protected] 3 2,456 31-08-2012, 13:46
Ostatni post: hieroshima
Exclamation Wyśrodkowanie strony. Rozjeżdżanie przy powiększaniu. Rozdzielczość ekranu. PROBLEM ohcs 6 3,332 24-02-2012, 16:31
Ostatni post: kornell
  [JS][CSS] Obrazek dostosowujący się do ekranu. boorish 4 3,375 15-12-2011, 00:01
Ostatni post: boorish
  Równomierne rozmieszczenie środków pozycji menu poziomego noiragneau 4 4,210 28-08-2011, 00:13
Ostatni post: Kartofelek

Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości
Sponsorzy i przyjaciele
SeoHost.pl