[CSS] rozmieszczenie modułów vs. rozdzieczość ekranu

[neuromancer]

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):


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:


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.

[Ancik]

Ciężko cię zrozumieć...

...ż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.

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.

[neuromancer]

[Damian19]

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.

[Ancik]

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.

[neuromancer]

[Damian19]

Dodaj ten selektor do kodu css:

* {
margin: 0;
padding: 0;
}

i zobacz czy będzie ok.

[neuromancer]

Tak, o to chodziło, teraz jest w porządku. Wielkie dzięki za pomoc.

Dodaj ten selektor do kodu css:

* {
margin: 0;
padding: 0;
}

i zobacz czy będzie ok.

[Damian19]

Spoko

[Ancik]

Poczytaj o resetach css na pewno ci się przyda.