Forum Debian Users Gang

HAL9000 · 2014-12-15 10:18:33

Witam
Znajomy "zlecił" mi zrobienie strony i z html i php jakoś sobie radzę ale pozycjonowanie elementów to dla mnie czarna magia i aby to uprościć chciałem wykorzystać 960gs -> http://960.gs/ i jak zwykle na obrazkach wszystko wygląda ładnie prosto itd ale gdy przyjdzie coś zrobić to zaczynają się schody.

Po pierwsze
idealne ustawienie elementów wygląda tak -> http://images.sixrevisions.com/2010/07/12-03_12columngrid.jpg
u mnie po ustawieniu obrazka z tłem aby mieć jakąś orientację jak to działa wygląda tak -> http://www.h9k.republika.pl/960gs.png
i nie wiem dlaczego tekst z lewej nie pokrywa sie z początkiem obrazka, który wydaje się przesunięty w prawo.

Następna sprawa puste przestrzenie realizowane za pomocą klas prefix_x i suffix_x na obrazku wygląda tak -> http://images.sixrevisions.com/2010/07/12-11_prefixsuffix.jpg
i dla jasności chciałem wyjaśnić te tła to są zrobione w jakimś programie graficznym bo gdy ja próbuję czegoś takiego to tło rozciąga się na całą "wolną przestrzeń" gdyż jak podejrzałem w pliku css te przesunięcia są realizowane przez padding-left i padding-right. Czy jedyny sposób aby osiągnąć efekt gdzie tylko tło konkretnego div'a jest żądanego kolory tak jak na tym moim obrazku w przypadku elementu "footer" to wstawianie jednego diva w inny gdzie ten zewnętrzny na przezroczyste tło w wewnętrzny na dodany jakiś id i ustawione wymagane tło?
cały kod na razie oczywiście tylko do eksperymentów wygląda tak:

Kod:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>gs2</title>
    <link rel="stylesheet" type="text/css" href="libs/960.css">
    <style type="text/css">
    div.grid_5, div.grid_4
    {
        background-color: #a1a1a1;
    }
    div#maincontainer
    {
        background: #ffffff url('images/960_grid_12_col.png') repeat-y left top;
    }
    div#pagefooter
    {
        background-color: #a1a1a1;
    }
    </style>
</head>
<body>

<div class="container_12" id="maincontainer">
<div class="grid_3">logo</div>

<div class="grid_6 prefix_3">menu</div>

<div class="grid_10 prefix_1 suffix_1">
    <div class="grid_5 alpha">article 1</div>
    <div class="grid_5 omega">article 2</div>
</div>

<div class="grid_3">above footer 1</div>
<div class="grid_3">above footer 2</div>
<div class="grid_3">above footer 3</div>
<div class="grid_3">above footer 4</div>
<div class="grid_6 prefix_3 suffix_3">
<div class="grid_6 alpha omega" id="pagefooter">footer</div>
</div>
</div>
</body>
</html>

ethanak · 2014-12-15 12:57:31

a możesz pokazać projekt graficzny? bo na mój emerytowany webmasterski rozum błąd jest w założeniach...

HAL9000 · 2014-12-15 13:08:11

Masz całkowitą rację co do punktu nr 1 nie sprawdziłem nawet jak wygląda ta grafika i się okazuje, że nie zaczyna się od lewej kolorem różowym ale białym (bo skopiowałem szablon z tego archiwum 960gs i tyle) to by się więc wyjaśniło pozostaje kwestia tych tzw pustych przestrzeni.

ethanak · 2014-12-15 13:10:33

ponawiam prośbę...

HAL9000 · 2014-12-15 13:29:26

Oryginalna grafika wyglada tak -> http://www.h9k.republika.pl/960_grid_12_col.png
natomiast po edycji w niesamowicie zaawansowanym programie graficznym paint wyglad tak -> http://www.h9k.republika.pl/960_grid_12_col_1.png
zostawilem bialy obszar na wymagane marginesy 10px po lewej i prawej i efekt wyglada tak -> http://www.h9k.republika.pl/960gs_1.png

ethanak · 2014-12-15 13:42:53

zadałem ci konkretne pytanie. jeśli dalej chcesz lecieć w ciula - twoja sprawa, ale pomocy szukaj w dokumentacji do tego wynalazku albo na onecie.
masz jeszcze jedną szansę...

HAL9000 · 2014-12-15 23:15:20

Chyba się nie zrozumieliśmy bo "nie lecę w ciula" ale po prostu nie wiem o co Tobie w tym momencie chodzi projekt graficzny czego?

ethanak · 2014-12-16 12:57:54

Znajomy "zlecił" mi zrobienie strony

Nie powiesz mi że robisz to bez projektu?
Przy czym nie chodzi mi tu o smętne dywagacje na temat prostokącików na pasiaku.

pink · 2014-12-16 13:03:28

http://www.responsivegridsystem.com/

HAL9000 · 2014-12-17 07:52:58

ethanak napisał(-a):
Nie powiesz mi że robisz to bez projektu?
Przy czym nie chodzi mi tu o smętne dywagacje na temat prostokącików na pasiaku.

Ano bez a te paski to sa tylko po to abym mógł się zorientować jak ten cały system siatkowy z tego szablonu działa bo jak widać treści tam nie ma żadnej a ja nie lubię robić x razy tego samego więc na początek chciałem mieć przynajmniej minimalne zrozumienie tego 960gs is tyle.

Forum Debian Users Gang

Ogłoszenie

#1 2014-12-15 10:18:33

HAL9000 - Użytkownik

Pozycjonowanie z wykorzystaniem 960gs

Kod:

#2 2014-12-15 12:57:31

ethanak - Użytkownik

Re: Pozycjonowanie z wykorzystaniem 960gs

#3 2014-12-15 13:08:11

HAL9000 - Użytkownik

Re: Pozycjonowanie z wykorzystaniem 960gs

#4 2014-12-15 13:10:33

ethanak - Użytkownik

Re: Pozycjonowanie z wykorzystaniem 960gs

#5 2014-12-15 13:29:26

HAL9000 - Użytkownik

Re: Pozycjonowanie z wykorzystaniem 960gs

#6 2014-12-15 13:42:53

ethanak - Użytkownik

Re: Pozycjonowanie z wykorzystaniem 960gs

#7 2014-12-15 23:15:20

HAL9000 - Użytkownik

Re: Pozycjonowanie z wykorzystaniem 960gs

#8 2014-12-16 12:57:54

ethanak - Użytkownik

Re: Pozycjonowanie z wykorzystaniem 960gs

#9 2014-12-16 13:03:28

pink - Użytkownik

Re: Pozycjonowanie z wykorzystaniem 960gs

#10 2014-12-17 07:52:58

HAL9000 - Użytkownik

Re: Pozycjonowanie z wykorzystaniem 960gs

ethanak napisał(-a):

Stopka forum