Float left Div

Cześć pisze z nowym problem, wasze podpowiedzi zawsze mi pomagają więc mogę skorzystać a dla zaawansowanych koderów to nie bedzie problemem. 

Wiec tak chciałbym aby wszystkie pola tekstowe były obok siebie w jakiś odstępach od siebie podglad tutaj

www.project.krystianjarzebski.pl

Jak to ustawić zeby było tak poustawiena [] [] [] []  (beda 4 boxy) 

                     <section id="graphic_designer">
    	<div class="graphic_designer"><h3>Strony Internetowe.</h3> 
        <p>Grafik komputerowy, web designer, grafik 3D. Projektuję grafikę do stron www, grafikę do aplikacji mobilnych, aplikacji firmowych, identyfikacji wizualnych, rendery 3d, animacje i wiele wiele innych. Projektuję grafiki responsywne dopasowane do telefonów, tabletów, laptopów i komputerów stacjonarnych.</p>
        </div>
        
        <section id="web_designer">
    	<div class="web_designer"><h3>Strony Internetowe.</h3> 
        <p>Grafik komputerowy, web designer, grafik 3D. Projektuję grafikę do stron www, grafikę do aplikacji mobilnych, aplikacji firmowych, identyfikacji wizualnych, rendery 3d, animacje i wiele wiele innych. Projektuję grafiki responsywne dopasowane do telefonów, tabletów, laptopów i komputerów stacjonarnych.</p>
        </div>

#graphic_designer {
	
	border-top: #aaa 1px solid;
	width: 350px;
	height: 350px;
	margin-left: 50px;
	display: block;
	float: left;
	
}


	
.graphic_designer {
	clear: both;
}	
.graphic_designer h3 {
	
	font-size: 20px;
	line-height: 40px;
	margin-top: 60px;
	text-align: center;
	display: block;
	float: left;
}

.graphic_designer p {
	
	line-height: 1.7;
	font-size: 14px;
	margin: 20px 0;
	text-align: justify;
	text-align: center;
	display: block;
	float: left;
	
}

#web_designer {
	
	border-top: #aaa 1px solid;
	width: 350px;
	height: 350px;
	margin-left: 50px;
	display: block;
	float: right;
	
}


	
.web_designer {
	clear: both;
	
}	
.web_designer h3 {
	
	font-size: 20px;
	line-height: 40px;
	margin-top: 60px;
	text-align: center;
	float: right;
	
}

.web_designer p {
	
	line-height: 1.7;
	font-size: 14px;
	margin: 20px 0;
	text-align: justify;
	text-align: center;
	float: right;
	
	
}

Z tego co widzę na Twojej stronie nie masz domkniętych <section> (#graphic_designer, #web_designer). Dodatkowo do każdego z nich daj float: left; i bedzie grało - o ile Ci chodzi o te 2 istniejące boksy w drugiej sekcji na białym tle u Ciebie na stronie... Generalnie ja to bym zrobił tak, że dałbym jedną ogólne <section>, a później w nim separował za pomocą <div> kolejne boksy co już w sumie masz zrobione, wewnątrz aktualnego <section>.

Faktycznie- nie domknąłeś tagu <section>. Wystarczy, że go domkniesz, i ustawisz display: inline-block; dla #graphic_designer. U mnie działa. 

Ja jednak polecałbym nie dawać inline-block ponieważ kreuje on niepotrzebne spacje pomiędzy elementami i możesz mieć później kłopoty z obliczaniem szerokości, a może Ci napsuć to nerwów jeśli o tym nie wiesz.

więcej na ten temat opisał Chris Coyer (co by nie powielać tematów): http://css-tricks.co...block-elements/

Super dzięki za pomoc juz sie zabieram za poprawki temat do zamkniecia  

Jeszcze jedna sprawa odnośnie tych boxów, tekst z nagłówka h3, nei chce mi sie wycentrować tylko jest przesunięty do lewej krawędzi próbowałem

juz ustawić 

text-align center; i nic nie dawało 

Jeszcze jedna sprawa odnośnie tych boxów, tekst z nagłówka h3, nei chce mi sie wycentrować tylko jest przesunięty do lewej krawędzi próbowałem

juz ustawić 

 

text-align center; i nic nie dawało 

Nie chce mi się analizować całego kodu, ale może text nie jest na całą szerokość? Daj mu width: 100% i wtedy próbuje text-align: center;

Nie chce mi się analizować całego kodu, ale może text nie jest na całą szerokość? Daj mu width: 100% i wtedy próbuje text-align: center;

Zadziała, aczkolwiek jak widziałem to kolega tam ma niepotrzebnego float: left; który niestety psuje szerokość nagłówka (styl dla <h3> mam na myśli). Proponuje go usunąć i dać text-align: center;

Yeoman pomogło, dzięki raz jeszcze za pomoc. Mam jeszcze drugi problem zwiazany z nawigacją hover. Napisze tutaj ponieważ nie chce zakładać kolejnego tematu. 

Na stronie w nawigacji jest takie podkreślenie http://amofw.com/ 

Mój kod CSS

/*********************************************************************************/
/* Nav                                                                       */
/*********************************************************************************/

	#nav
	{
	}

		#nav-wrapper
		{
			background: #fff ;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			
		}
		
		#nav > ul
		{
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: Lato, sans-serif;
	width: auto;
		}

		#nav > ul > li
		{
			display: inline-block;
			border-color: rgba(255,255,255,.1);
			font-family: Lato, sans-serif
		}
		
			#nav > ul > li:last-child
			{
				padding-right: 0;
				border-right: none;
			}

			#nav > ul > li > a, 
			#nav > ul > li > span
			{
				display: inline-block;
				padding: 1.5em 1.5em;
				letter-spacing: 0.06em;
				text-decoration: none;
				font-size: 1.1em;
				outline: 0;
				color: #000;
				
			}

			#nav li.active a
			{
				color: #000;
				border-bottom: #000 3px solid;
				margin-bottom: 5px;
				padding-bottom: 3px;

				
			}

			#nav > ul > li > ul
			{
				display: none;
			}

a html 

				<!-- Nav -->
				<nav id="nav">
					<ul>
						<li class="active"><a href="index.html">Home</a></li>
						<li><a href="left-sidebar.html">About</a></li>
						<li><a href="right-sidebar.html">Project</a></li>
						<li><a href="no-sidebar.html">Contact</a></li>
					</ul>
				</nav>
			</div>

Chodzi tutaj o to ze na tamtej stronie gdy najedzie sie mysza to sie po prostu podświetla i znika, a u mnie na stronie jest tak ze gdy kliknie się w daną podstronę to to pozostaje. A chciałbym uzyskać efekt jak na tej stronie 

W Twoim kodzie css nie widzę żadnego hovera. Masz tylko klasę 'active' dla aktualnie przeglądanej strony. Przekopiuj zawartość z "#nav li.active a" do "#nav li a:hover" i będziesz miał hovera

Oni mają jeszcze do a dodane opóźnienie. Dodaj sobie też:
 

transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;

Będzie Ci ładnie animowało, a nie mrugało. Możesz nawet czas trochę zwiększyć dla bardziej wyraźnego efektu.

PS: Dla kolejnych problemów polecam nowe tematy. Pamiętaj też  o ludziach, którzy szukają pomocy przy podobnych problemach.

Okej dzięki za tą opcję, zonic. Masz może jakiś tutorial który pokazuje do czego używać jeszcze tych opcji? I jakie są jeszcze prócz tych 4? 

Okej dzięki za tą opcję, zonic. Masz może jakiś tutorial który pokazuje do czego używać jeszcze tych opcji? I jakie są jeszcze prócz tych 4? 

To jest jedna opcja napisana dla różnych przeglądarek. 

Tutaj trochę więcej:
 

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

Ogólnie poszukaj w necie "css transition examples"

Dzięki wielkie. Można temat zamknąć boxy prawie gotowe