+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [CSS] rozmieszczenie modułów vs. rozdzieczość ekranu (/thread-css-rozmieszczenie-modulow-vs-rozdzieczo%C5%9Bc-ekranu)
[CSS] rozmieszczenie modułów vs. rozdzieczość ekranu - neuromancer - 14-01-2012
Witam, mam problem z rozmieszczeniem zawartości strony - staram się zaprojektować stronę i potrzebuję zrobić ją tak (przynajmniej na mój rozum
- nie zajmowałem się tym wcześniej):![[Obrazek: pytanko.JPG]](http://freeside.pl/tmp/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]](http://freeside.pl/tmp/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.
RE: [CSS] rozmieszczenie modułów vs. rozdzieczość ekranu - Ancik - 14-01-2012
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.
RE: [CSS] rozmieszczenie modułów vs. rozdzieczość ekranu - neuromancer - 14-01-2012
RE: [CSS] rozmieszczenie modułów vs. rozdzieczość ekranu - Damian19 - 14-01-2012
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.
RE: [CSS] rozmieszczenie modułów vs. rozdzieczość ekranu - Ancik - 14-01-2012
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.
RE: [CSS] rozmieszczenie modułów vs. rozdzieczość ekranu - neuromancer - 14-01-2012
RE: [CSS] rozmieszczenie modułów vs. rozdzieczość ekranu - Damian19 - 14-01-2012
Dodaj ten selektor do kodu css:
* {
margin: 0;
padding: 0;
}
i zobacz czy będzie ok.
RE: [CSS] rozmieszczenie modułów vs. rozdzieczość ekranu - neuromancer - 14-01-2012
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.
RE: [CSS] rozmieszczenie modułów vs. rozdzieczość ekranu - Damian19 - 14-01-2012
Spoko
RE: [CSS] rozmieszczenie modułów vs. rozdzieczość ekranu - Ancik - 14-01-2012
Poczytaj o resetach css
na pewno ci się przyda.