Nauka CSS

**sam_wiesz_kto** · 07-06-2013

Witam.
Wiem, w sieci jest mnóstwo materiałów.
No właśnie... który z nich wybrać, co polecacie ?
Każda rada, wskazówka, podpowiedź jest na wagę złota.
Książki, kursy, strony ?
W jakim kierunku iść ? Może CSS nie jest dobrym pomysłem ? Wyczytałem, że po HTML'u warto przyswoić CSS, jeżeli to nie do końca dobry kierunek to prosiłbym o sprostowanie.
Mój plan/sytuacja wygląda tak :

Siedzę przy komputerze i czekam na klientów, nie gram w gry, nie mam facebooka i innych pożeraczy czasu, chcę ten czas spożytkować.
W przyszłości na pewno pójdę w stronę programowania, ale póki co tata ma firmę i potrzebuje zmienić stronę, nie ma pośpiechu, gdzieś za 6 miesięcy.
Uważam, że w 6 miesięcy można dużo się nauczyć.
CSS czy coś innego ? Co po CSS ?
Co myślicie ?
Tak jak napisałem, każda rada mile widziana.
Pozdrawiam.

**lame2** · 07-07-2013

Zacznij od typografii. HTML + CSS to tylko narzędzie.

Web Design is 95% Typography | Information Architects

**sam_wiesz_kto** · 07-07-2013

Napisał lame2

Zacznij od typografii. HTML + CSS to tylko narzędzie.

Web Design is 95% Typography | Information Architects

Super ! Właśnie o to chodziło.
Dzięki !

**sam_wiesz_kto** · 07-18-2013

Typografia jest tak obszernym tematem... im więcej czytam tym większą sprawę zdaję sobie z tego jak mało wiem.

Sprawdzam swoje umiejętności w praktyce, napisałem prostą stronę.

Kod HTML

Kod:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>TYTUL STRONY</title>

<meta name="description" content=" OPIS STRONY">

<meta name="keywords" content =" POZYCJONOWANIE ">

<link href="css/main.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lora">


</head>

<body>

<div id="wrapper">
<div id="header">
		<img src="img/lego.png" alt"OPIS"/>
</div>

<div id="menu">

<ul>
	<li><a href="index.html">Strona Główna</a></li>
	<li><a href="#">OPCJA</a>
		<ul>
			<li><a href="#" >PODOPCJA</a></li>
			<li><a href="#">PODOPCJA2</a></li>
			<li><a href="#">PODOPCJA3</a></li>
			<li><a href="#">PODOPCJA4</a></li>
			<li><a href="#">PODOPCJA5</a></li>
			<li><a href="#">PODOPCJA6</a></li>
		</ul>
		</li>
	<li><a href="#">Oferta</a>

		<ul>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
	  		<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
		</ul>
		</li>

	<li><a href="#">AHAAA</a></li>
	<li><a href="#">Kontakt</a></li>
</ul>

</div>

<div id="content">


<p>JAKIS TAM TEKST</p>

<h1>NAGLOWEK</h1>




</div>
	<div id="footer">STOPKA</div>
</div>



</body>
</html>

CSS

Kod:

body{
	background-image: url(../img/tlo.jpg);
	background-repeat: repeat;
	color: #333333;
	font-family: 'Lora', serif;
    font-size: 1em; line-height: 1.5em;
	height: 900px;
	margin: 0;
	padding: 0 100px;
}
	
p {  margin: 0; padding: 0;}

h1, h2 { 
	color: #333333 ;
	padding: 0 20px;
	text-align: center;
}
	
#wrapper{
	background-color: white;
	margin: 0 auto;
	min-height: 100%;
	position: relative;
}
	
#content{
	margin: 10px;
	padding: 0;
}
	
#header{
background-color: #000;
width:100%;
}

#footer{
	bottom:0;
	background:#383838;
	color: #ebcc50;
	height:30px; 
	position:absolute;
	text-align: center;
	width:100%; 
}
/* menu */

#menu {

background: #444; 
color: #999;
font-family: sans-serif, lora;
font-size: 14px;
height: 44px;
margin: 0 auto;
position: relative;
width: 100%;
}

#menu ul {list-style-type: none;}

#menu ul li { 
float:left; 
position:relative;
}

#menu ul li a {
border-right:1px solid #000;
color: #999;
display: block;
padding: 10px;
text-align: center;
text-decoration: none;
}

#menu ul li a:hover {
background: #6B6B6B;
color: #fff;
}

#menu ul li ul { display:none; }

#menu ul li:hover ul { 
display:block; 
position:absolute;
}

#menu ul li:hover ul li a{ 
background: #624949; 
border-bottom: 1px solid #f2f2f2; 
border-right:none; 
color: #fff; 
display: block; 
width: 110px; 
}

#menu ul li:hover ul li:hover { 
background: #ffbd55; 
color: #fff;
}

Dałem 900px height dla BODY, by w przypadku małej ilości tekstu nie kończyła się 2cm pod logo

, dobrze to zrobiłem ?
Min-height przeciwnie... jak będzie dużo treści by rozciągała się w dół.

Problem mam z LOGO i MENU, a konkretnie z przestrzenią między tymi dwoma elementami. Widać to dokładnie na poniższym screenie.
Chodzi mi o ten biały pasek.

WAŻNE : nie chcę gotowej odpowiedzi, prosiłbym o jakąś wskazówkę, żebym sam do tego doszedł.
Z góry dzięki za pomoc.
Pozdro

menu.JPG

**lame2** · 07-18-2013

Zboczyłeś. Zostaw HTML, ucz się typografii, umiejętności praktykuj przy użyciu odpowiednich narzedzi, np. Axure czy Fireworks.
Znajomość HTML ani troche nie zrobi z Ciebie eksperta od typografii, usability, UI-designera (czy jak bys tego nie nazwal).
Specow od kodowania HTML jest sporo, nie zarobisz duzo bedac jednym z nich.

Axure

**sam_wiesz_kto** · 07-18-2013

Wielkie dzięki !

Trochę jestem zagubiony, bo na dzień dzisiejszy pracuję w ,,biurze", siedzę tu 12 godz. mam internet i komputer, klienci przychodzą na max 5-10 minut, także w ciągu tych 12godz. mam ok. 10 godz. luzu.
Nie lubię siedzieć bez celu na serwisach typu facebook, tylko inwestować w siebie, w rozwój, gospodarować czas, uczyć się, budować skilla.

Także dzięki za pokierowanie mną.
Na pewno sprawdzę wyżej wymienione programy,a typografia zawsze mnie interesowała, może nie w postaci online, ale przez kilka lat maluję regularnie graffiti, także litery to moja pasja poza komputerowa.
A litery to nie tylko litery, ale cała kompozycja, wszystko musi być dopracowane.

Napiszę coś tutaj czasami, chyba, że ktoś uzna to za spam, postaram się pisać rzeczy wnoszące coś.
Pozdro

Temat: Nauka CSS

Narzędzia wątku

Display

Hybrid View

Nauka CSS

Zasady Postowania

Subskrybuj