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[/quote]
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.

Nim mechaniczne larum zagrasz mi, kanalio,
głosząc nadejście Javy - śmiertelnego wroga!
[i]Zespół Adwokacki Dyskrecja[/i]

Time (s)	Query
0.00011	SET CHARSET latin2
0.00005	SET NAMES latin2
0.00106	SELECT u., g., o.logged FROM punbb_users AS u INNER JOIN punbb_groups AS g ON u.group_id=g.g_id LEFT JOIN punbb_online AS o ON o.ident='3.144.115.125' WHERE u.id=1
0.00080	REPLACE INTO punbb_online (user_id, ident, logged) VALUES(1, '3.144.115.125', 1732217015)
0.00040	SELECT * FROM punbb_online WHERE logged<1732216715
0.00067	SELECT topic_id FROM punbb_posts WHERE id=280147
0.00139	SELECT id FROM punbb_posts WHERE topic_id=26798 ORDER BY posted
0.00057	SELECT t.subject, t.closed, t.num_replies, t.sticky, f.id AS forum_id, f.forum_name, f.moderators, fp.post_replies, 0 FROM punbb_topics AS t INNER JOIN punbb_forums AS f ON f.id=t.forum_id LEFT JOIN punbb_forum_perms AS fp ON (fp.forum_id=f.id AND fp.group_id=3) WHERE (fp.read_forum IS NULL OR fp.read_forum=1) AND t.id=26798 AND t.moved_to IS NULL
0.00010	SELECT search_for, replace_with FROM punbb_censoring
0.00078	SELECT u.email, u.title, u.url, u.location, u.use_avatar, u.signature, u.email_setting, u.num_posts, u.registered, u.admin_note, p.id, p.poster AS username, p.poster_id, p.poster_ip, p.poster_email, p.message, p.hide_smilies, p.posted, p.edited, p.edited_by, g.g_id, g.g_user_title, o.user_id AS is_online FROM punbb_posts AS p INNER JOIN punbb_users AS u ON u.id=p.poster_id INNER JOIN punbb_groups AS g ON g.g_id=u.group_id LEFT JOIN punbb_online AS o ON (o.user_id=u.id AND o.user_id!=1 AND o.idle=0) WHERE p.topic_id=26798 ORDER BY p.id LIMIT 0,25
0.00081	UPDATE punbb_topics SET num_views=num_views+1 WHERE id=26798
Total query time: 0.00674 s

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

Stopka forum

Informacje debugowania