Skocz do zawartości

Zdjęcie
- - - - -

Sprawdź, czy dobrze... [Html/css]

Rozpoczął Rafeq_PL, kwi 09 2014 17:25
Check sprawdź CSS HTML Responsive

21 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
Rafeq_PL

    Nowy użytkownik

  • 13 postów
    • Czas spędzony online: 12m 28s
2
Neutralna

Napisano 09 kwietnia 2014 - 17:25

#1

Witajcie!

Na samym wstępie chciałbym ostrzec, że nie jestem jakimś zaawansowanym użytkownikiem CSS'a. Chciałbym dowiedzieć się czy na ten moment wszystko robię dobrze, czy nie ma żadnych błędów w kodzie. Ma to być "przedstrona" z wyborem języka.

body {
	background-color: black;
	background-image:  url("lang/Polish_Flag.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	margin: 0;
	min-width: 1224px;
	min-height: 866px;
	width: 100%;
	height: 100%;
	}
div#Standard
	{
	vertical-align: center;
	padding: 0px;
	text-align: center;
	height: 866px;
	display: flex;
	}
div#box-wymiar{
	background-image:  url("lang/bg_lang.jpg");
	background-repeat: repeat-x;
	margin: auto;
	width: 400px;
	height: 191px;
	box-shadow: #000000 15;
	}
div#box {
	padding-top: 5px;
	}
p#box {
	text-align: center;
	}

A tu html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
<head>
<title>[*pagetitle*] - Choosing lang</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="Standard">
<div id="box-wymiar">
<div id="box">
<p id="box">
BOKSIK
</p>
</div>
</div>
</div>
</body>
</html>


Co chciałem osiągnąć?

Chciałem, by 'box' z wyborem języka znajdował się na samym środku dokumentu. Staram się robić od początku responsywną, ale widzicie jak to wychodzi... Długo się męczyłem z tym, by ustawić w środku i nie do końca jestem przekonany/nie wiem jak działa to:

display: flex;

Mógłby ktoś o tym napisać?

 


  • 0
studenciak

    Użytkownik

  • 53 postów
    • Czas spędzony online: 3h 6m 29s
4
Neutralna

Napisano 09 kwietnia 2014 - 17:29

#2

W przypadku problemów z HTML/CSS polecam używać serwisów typu http://jsfiddle.net do stworzenia demka. Patrząc na sam kod nie wszystko się wahaczy, a demo się przyda do analizy :)


  • 1
Rafeq_PL

    Nowy użytkownik

  • 13 postów
    • Czas spędzony online: 12m 28s
2
Neutralna

Napisano 09 kwietnia 2014 - 17:33

#3

Dziękuję za tak szybką odpowiedź, z pewnością sprawdzę tą stronkę, bo dotychczas korzystam z notepad++ ;p


  • 0
zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 09 kwietnia 2014 - 17:58

#4

Koledze chodziło o to, żebyś na forum wrzucił link z demem zamiast suchego kodu ;) Pisanie w notepad++ nie jest niczym złym, chociaż polecam Aptanę Studio z darmówek :)

Wrzuć demo, to coś zaradzimy.


  • 0

Papierowe wizytówki NFC

Rafeq_PL

    Nowy użytkownik

  • 13 postów
    • Czas spędzony online: 12m 28s
2
Neutralna

Napisano 09 kwietnia 2014 - 20:57

#5

próbowałem zrobić demo, ale chyba jednak nie wiem jak... Nie wiem jak ustawić zdjęcia.


  • 0
zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 09 kwietnia 2014 - 21:07

#6

próbowałem zrobić demo, ale chyba jednak nie wiem jak... Nie wiem jak ustawić zdjęcia.

No żeby móc korzystać ze zdjęć na tym portalu, to najpierw musisz umieścić je gdzieś na serwerze.

Przykładowo uploadujesz je tutaj: http://postimage.org, a potem w kodzie wklejasz cały URL do obrazka zamiast względnego url takiego jak ten: " lang/bg_lang.jpg"


  • 1

Papierowe wizytówki NFC

Zimistrz

    Stary wyjadacz

  • 465 postów
    • Czas spędzony online: 14d 2h 42m 38s
116
Znakomita!

Napisano 10 kwietnia 2014 - 10:09

#7

Mam dwie prośby do wszystkich.

1. Kod powinien być zawsze wklejony na forum - zewnętrzne serwisy mogą paść w każdej chwili.

Tu prośba do administracji, aby długi kod był ucinany w pewien sposób i dawał możliwość rozwinięcia.

Wciąż widuję wielokilometrowe wklejki, co jest dobre chyba tylko dla masochistów w pomaganiu ;)

 

2. Gdy proponujecie narzędzia ułatwiające, wypadałoby polecać odpowiedni do danej rzeczy serwis.

Używanie Jsfiddle wyłącznie do css/html jest przegięciem. Są dedykowane temu celowi serwisy i są w tym dużo lepsze.

Po przejrzeniu wszystkiego co istniało w końcówce zeszłego roku proponuję: http://cssdesk.com


  • 1
Rafeq_PL

    Nowy użytkownik

  • 13 postów
    • Czas spędzony online: 12m 28s
2
Neutralna

Napisano 10 kwietnia 2014 - 16:17

#8

Dobrze, już zażegnałem mój problem, oto rozwiązanie:

 

position: relative;
    left: 50%;
    top: 50%;
    margin-top: -95.5px;

    margin-left: -200px;
    width: 400px;
    height: 191px;

 

 

Dzięki temu box/pudełko będzie na środku.

 

Wysokość box'u zaznaczona jest kolorem czerwonym. Pamiętajmy, że na marginesie należy odjąć połowę wysokości obiektu jeśli chcemy by znajdował się na środku.

 

Szerokość box'u zaznaczona jest kolorem pomarańczowym. Jeśli chcemy uzyskać pożądaną pozycję to uprzednio w marginesie należy odjąć połowę szerokości obiektu.


  • 0
studenciak

    Użytkownik

  • 53 postów
    • Czas spędzony online: 3h 6m 29s
4
Neutralna

Napisano 10 kwietnia 2014 - 16:33

#9


Wysokość box'u zaznaczona jest kolorem czerwonym. Pamiętajmy, że na marginesie należy odjąć połowę wysokości obiektu jeśli chcemy by znajdował się na środku.
 
Szerokość box'u zaznaczona jest kolorem pomarańczowym. Jeśli chcemy uzyskać pożądaną pozycję to uprzednio w marginesie należy odjąć połowę szerokości obiektu.


Jeśli strona ma być responsywna to wysokość i szerokość boxa nie powinny być hardcodowane. Nie podawaj ich na sztywno. Dałeś szerokość 400px, a co jeśli smartfon będzie miał szerokość 320px? :)
 
  • 0
Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 10 kwietnia 2014 - 16:43

#10

Mam dwie prośby do wszystkich.

1. Kod powinien być zawsze wklejony na forum - zewnętrzne serwisy mogą paść w każdej chwili.

Tu prośba do administracji, aby długi kod był ucinany w pewien sposób i dawał możliwość rozwinięcia.

Wciąż widuję wielokilometrowe wklejki, co jest dobre chyba tylko dla masochistów w pomaganiu ;)

 

2. Gdy proponujecie narzędzia ułatwiające, wypadałoby polecać odpowiedni do danej rzeczy serwis.

Używanie Jsfiddle wyłącznie do css/html jest przegięciem. Są dedykowane temu celowi serwisy i są w tym dużo lepsze.

Po przejrzeniu wszystkiego co istniało w końcówce zeszłego roku proponuję: http://cssdesk.com

 

1. Zgodzę się z tym przycinaniem (przykładowo jakiś scroll nawet mógłby być), ale jak ktoś wkleja i nie formatuje kodu to w oczy razi mnie strasznie :P

2. Przegięciem ? Przegięciem byłoby uzywać jsfiddle dla css'a nie używając ramki 'css' :P Ktos lubi jsfiddle, ktoś cssdesk. Mi osobiście ten drugi nie hula ;) (nie generuje rezultatu).

 

Koledze chodziło o to, żebyś na forum wrzucił link z demem zamiast suchego kodu ;) Pisanie w notepad++ nie jest niczym złym, chociaż polecam Aptanę Studio z darmówek :)

Wrzuć demo, to coś zaradzimy.

 

A to już nie chce się samemu wkleić tego do demka ? :D hehe żarcik ;P

 

Kilka szczegółów dotyczących kodu.

 

1. Proponuję stylować po klasach,  nie po ID.

2. Stosuj nazewnictwo bardziej unikalne, bo troszkę ułatwi Ci to później problemów i lepiej się będzie czytało kod (mówię o box w box)

3. Odnoś się do samego ID lub klasy - pomijaj tagi elementów.

4. Flex nie zadziała na starszych wersjach przeglądarek (w tym IE) - a jeśli już byś chciał to masz tutaj:

html, body {
    height: 100%;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    margin:0;
}
#box {
    padding: 0;
    margin: 0;
}

<div id="Standard">
    <div id="box-wymiar">
            <p id="box">
                BOKSIK
            </p>
    </div>
</div>

5. Proponuję edytor SublimeText

6 . Nie pisz 0px tylko po prostu 0

7.  .. coś tam bym jeszcze znalazł ale starczy Ci na tyle feedback'u :P

 

 

Jeśli strona ma być responsywna to wysokość i szerokość boxa nie powinny być hardcodowane. Nie podawaj ich na sztywno. Dałeś szerokość 400px, a co jeśli smartfon będzie miał szerokość 320px?

 

A tak:

@media only screen and (max-width : 320px) {
    div#box-wymiar{
        width: 100%;
    }
}

No ale wiadomo, po prostu od razu dać 100% lub w ogóle nie dawać.

Pozdrawiam :)


  • 1

2ed58r7.png

Zimistrz

    Stary wyjadacz

  • 465 postów
    • Czas spędzony online: 14d 2h 42m 38s
116
Znakomita!

Napisano 11 kwietnia 2014 - 08:29

#11

tani hosting

1. Zgodzę się z tym przycinaniem (przykładowo jakiś scroll nawet mógłby być), ale jak ktoś wkleja i nie formatuje kodu to w oczy razi mnie strasznie :P
2. Przegięciem ? Przegięciem byłoby uzywać jsfiddle dla css'a nie używając ramki 'css' :P Ktos lubi jsfiddle, ktoś cssdesk. Mi osobiście ten drugi nie hula ;) (nie generuje rezultatu).
 
 
A to już nie chce się samemu wkleić tego do demka ? :D hehe żarcik ;P

 
Nie otagowany kod po przeklejce może zawierać niewidoczne znaki specjalne i ... doprowadzić do szewskiej pasji.
Ja takiego szajsu nawet nie przeglądam ;)
 
Odnośnie cssdesk, bacz na noscripta, bo się ze sobą gryzą. Czeknij na czystym profilu lub innej przegądarce.
 
A co do demka, to nie Zonic szuka pomocy :}
 
 
Dopiero przyuważyłem że się rozchodzi jeszcze o stronę responsywną.
Tu Rafeq_PL najpierw zainteresuj się metodyką i podejściem w projektowaniu, zanim zaczniesz rzeźbić kod.
Pytanie na start to czy strona jest mobile first (nie mówię tu o dedykowanej wersji mobilnej) czy tylko jako dodatek ?
To pierwsze odznacza się tym, że wersję wyświetlającą się urządzenia przenośnych tworzysz jako pierwszą i dostawiasz kod wersji stacjonarnej.
Druga sprawa to czy tworzysz wersję responsywną czy adaptacyjną?
Bo z podanych tu odpowiedzi wychodzi na to że tą drugą.
Jedno nie jest synonimem drugiego, jak to błędnie interpretuje gro projektantów trzepiących stronki po 50 ;)
  • 0
Rafeq_PL

    Nowy użytkownik

  • 13 postów
    • Czas spędzony online: 12m 28s
2
Neutralna

Napisano 11 kwietnia 2014 - 10:31

#12

Design całej strony mam gotowy, teraz zostało mi już tylko wdrożenie. Chciałbym zrobić swoje portfolio i zacząć ten temat na serio, a nie na odwal się. Decyduję się na zrobienie czegoś dynamicznego, opartego o animacje w CSS, ale wyglądającego przy tym zaje... bardzo dobrze :). Jednocześnie chciałbym, gdy coś jest na środku strony to by było na niej w każdej rozdzielczości.


  • 0
testerius

    Użytkownik

  • 77 postów
    • Czas spędzony online: 2d 8h 52m 2s
6
Neutralna

Napisano 11 kwietnia 2014 - 17:44

#13

Hej, mógłbyś pokazać co planujesz wykonać? :)


  • 0

deviantART

Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 12 kwietnia 2014 - 09:56

#14


Chciałbym zrobić swoje portfolio i zacząć ten temat na serio, a nie na odwal się

 

A jaka tematyka portfolio ? Czym się zajmujesz ?


  • 0

2ed58r7.png

Rafeq_PL

    Nowy użytkownik

  • 13 postów
    • Czas spędzony online: 12m 28s
2
Neutralna

Napisano 18 kwietnia 2014 - 12:38

#15

Web-developing. Uczę się css'a. Html,php i Jquery opanowane.

 

Next Quest!

Witajcie! Po raz kolejny potrzebuję waszej pomocy. Nie wiem jak zrobić, by naprawić ten problem (pokazuje go poniżej - pozmieniajcie flagi):

 

http://jsfiddle.net/...mbedded/result/

 

Z góry dziękuję za pomoc :)


  • 0
Michał

    Stary wyjadacz

  • 301 postów
    • Czas spędzony online: 16d 7h 11m 3s
95
Znakomita!

Napisano 18 kwietnia 2014 - 13:03

#16

Możesz elementom o klasie box ustawić pozycję absolutną.
Wtedy będzie jeden na drugim, dzięki czemu uzyskasz lepszy efekt przejścia.
Później już tylko ustawiasz margin i ewentualny padding.


  • 1
Krzycho

    Nowy użytkownik

  • 13 postów
    • Czas spędzony online: 8m 25s
0
Neutralna

Napisano 18 kwietnia 2014 - 13:06

#17

Ale, że jak mają być te flagi zmienione, bo nie rozumiem.


  • 0
Rafeq_PL

    Nowy użytkownik

  • 13 postów
    • Czas spędzony online: 12m 28s
2
Neutralna

Napisano 18 kwietnia 2014 - 13:39

#18

Nie, po prostu ma mi to nie spadać z boxa.


Możesz elementom o klasie box ustawić pozycję absolutną.
Wtedy będzie jeden na drugim, dzięki czemu uzyskasz lepszy efekt przejścia.
Później już tylko ustawiasz margin i ewentualny padding.

Próbowałem, ale jakoś nie chce się przestawić ;\. mam jeszcze jeden pomysł, na razie to sprawdzam..


  • 0
Michał

    Stary wyjadacz

  • 301 postów
    • Czas spędzony online: 16d 7h 11m 3s
95
Znakomita!

Napisano 18 kwietnia 2014 - 14:11

#19

Pewnie nie chce sie przestawić, bo masz ustawioną pozycje relatywną dla #pl i #en ;).


  • 1
unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 18 kwietnia 2014 - 14:45

#20

Może być tak?

http://jsfiddle.net/...mbedded/result/


Użytkownik unbreak edytował ten post 18 kwietnia 2014 - 14:47

  • 0

webDeveloper

Wróć do HTML i CSS



Podone tematy Collapse

  Temat Forum Autor Podsumowanie Ostatni post

Również z jednym lub większą ilością słów kluczowych: Check, sprawdź, CSS, HTML, Responsive

Użytkownicy przeglądający ten temat: 1

0 użytkowników, 1 gości, 0 anonimowych