[problem] css odmawia posłuszeństwa - box


(Thesopranos1990) #1

Witam.
Kilka dni temu zacząłem naukę cssa i już mam problem z którym za nic w świecie nie mogę się uporać. 

Problem jest taki, że tekst (docelowo linki) który powinien być w szarym pasku na górze zjeżdża mi w dół i nachodzi na kolejnego diva, dlaczego? Nie wiem, dodam tylko, że w podglądzie w kEDzie wszystko wygląda poprawnie.
Screen jak to wygląda w przeglądarce: https://zapodaj.net/7da7bbdb23391.jpg.html
Dodatkowo chciałbym ten tekst wyśrodkować w pionie tak aby niezależnie od height'a paska był on wyśrodkowany w pionie. 

Kod css:

http://wklej.org/id/2600491/

Kod HTML:

http://wklej.org/id/2600493/

 

Czekam na sugestie :slight_smile:

 


#2

Odpowiedź brzmi - reset stylów. Zawsze dodawaj do projektu reset stylów. W Twoim przypadku pojawiły sie pseudoementy dla p (p:before i p:after z marginesem 1em czyli takim jak wysokość linii dla p), dlatego się rozjechało.

 

Skopiuj to:

/* http://meyerweb.com/eric/tools/css/reset/ 

   v2.0 | 20110126

   License: none (public domain)

*/



html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

	margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	font: inherit;

	vertical-align: baseline;

}



/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

	display: block;

}

body {

	line-height: 1;

}

ol, ul {

	list-style: none;

}

blockquote, q {

	quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

	content: '';

	content: none;

}

table {

	border-collapse: collapse;

	border-spacing: 0;

}

i wstaw na początku pliku style.css lub stwórz nowy plik reset.css i podepnij go przez style.css w nagłówku dokumentu html.

<link rel="stylesheet" href="reset.css" type="text/css">

<link rel="stylesheet" href="style.css" type="text/css">

i tyle. Po tej operacji wszytko jest w porządku. 

Zrzut-ekr_sqnppsp.jpg


(Thesopranos1990) #3

Dzięki mistrzu :wink:


(angh) #4

hmm, zamiast masy tagow nie lepiej po prostu:

* {

margin: 0;

padding: 0

}

?


(Thesopranos1990) #5

Jak tak zrobisz to dotknie lewej krawędzi przeglądarki a górnej nie. 


(angh) #6

http://www.w3schools.com/css/css_margin.asp

 

If the margin property has one value:

margin: 25px;

all four margins are 25px

 

Gwiazdka oznacza, ze wszystkie tagi zostana zresetowane do bazowych ustawien. Moj komentarz nie dotyczyl parametrow CSS a po prostu sposobu odwolania do tagow, ktore chcemy zresetowac.

I tak, dotknie gornej krawedzi, a takze prawej jezeli element jest typu block i nie zakombinowany.


(Thesopranos1990) #7

Aaahaa, okej. :) 
Musiałem Cię źle zrozumieć.


(angh) #8

http://jsbin.com/xenuluriyi/edit?html,output

tutaj masz szybki przyklad.


(tomms) #9

 

Jak tak zrobisz to zmodyfikujesz także elementy formularza (input, select, …) a to zmieni ich domyślny systemowy wygląd i nie da się już do ich oryginalnego wyglądu powrócić. Oprócz wspomnianego wcześniej ‘Resetu Meyera’  jest jeszcze normalizer: http://necolas.github.io/normalize.css/ obydwa mają swoich zwolenników i przeciwników.

 


(angh) #10

zgadza sie, ale z mojego doswiadczenia wynika, ze jezeli i tak resetujesz wiekszosc elementow, to dostarczasz wlasne style do nich. Po drugie, nie zawsze uzywasz inputow i formularza tak, aby ten reset mial na niego wplyw. Jezeli resetuje wszystko, to wole nei zostawiac przegladarce wyboru obslugi tych paru elementow, ktore wyrzucilem z definicji, bo niektore zrobia to inaczej niz inne.

A na sam koniec, to w 99% przypadkow i tak najlepiej uzyc jakis framework, ktory sciagnie z glowy takie szczegoly i pozwoli skupic sie na funkjonalnosci lub qunit.


#11

 

Owszem, reset ma wpływ na wszytko ale na te chwile mozna albo z niego skorzystać albo resetować style samodzielnie według potrzeb. Co do frameworku (np. bootstrap) dla mnie to jest nieporozumienie pisać w tym kod. Głównym problemem jest nadmiarowość kodu. Wolę reset stylów + tylko grid (semntic grid system w less) i mam pełną konktrolę nad tym co pisze i nie ma zbędnych wpisów a generowane pliki css są na maxa zoptymalizowane (ja podczas konwrsji less-css od razu poddaje je minifikacji.


(angh) #12

Nadmiarowosc kodu…:wink:

Wszystko zalezy od tego, co i dla kogo piszesz. Ja od tygodnia robie tylko technical validation kilku aplikacji napisanej z uzyciem pewngo frameworka. Pomijajac framework ktorego nie ruszam, mam do analizy ponad 50k linii kodu pisanego na 3 kontynentach przez pare tuzinow programistow. I tylko tyle, dzieki frameworkowi - jezeli calosc miala by byc napisana od podstaw, to zarowno ilosc kodu do przetestowania, jak i ilosc problemow bylaby dramatycznie wieksza.

Wiec, dla mnie nieporozumieniem jest pisac kod od podstaw. Uzywajac frameworka oszczedzam czas, ktory moge spozytkowac na lepsze zrozumienie wymagan klienta, skupic sie na funkcjonalnosci interface zamiast na walczeniu z pozycja Div’a, czy tez na napisaniu i automatyzacji qunit/jasmin i podobnych. Wiem z cala pewnoscia, ze ta i inne aplikacje dzialaja tak samo, wygladaja tak samo, i ich maintenance w czasie jest proste, przejzyste i szybkie. Mam wiecej czas na dopracowanie serwisow REST czy innych, i moge szybko prototypowac dzieki czemu klient jest na bierzaco i moze podsuwac wlasne uwagi, i robie to od dnia pierwszego, kiedy jeszcze osoba piszaca od zera walczy z pozyjca tabelki.

I frameworki dzisiaj sa bardzo male, i np. caly Angular.js (potezny, swietny framework) zajmuje 40 kB. Niektore favicons sa wieksze;)

 

Przy robieniu wiekszych projektow pelna jednej osoby nad kazda linia kodu to mit. Poddawanie CSS minifikacji podczas pisania? Fajne;) ja odpalam automatyzacje ktore odpalaja testy, minifikuja html+js+cokolwwiek tam mamy, integruja z z czym potrzeba, i na koncu wypluwaja pojedynczy, spakowany plik ktory jest wciagany przez malego bootstrapa na startowej stronie (z bardzo duzym pomienieciem wiekszosci szczegolow).

 

I spoko, to jest dobre cwicenie, aby pisac to recznie. Jak ktos ma czas, nie chce uczyc sie dodatkowych rzeczy spoza jednej dziedziny, lub wciaz poczatkuje jako programista. Ale w rzeczywistosci liczy sie tylko jedna rzecz: zadowolenie klienta, a to jest mierzalna wypadkowa wielu innych rzeczy, i frameworki powstaly, zeby znaczaco te zdowolenie poprawic;)