Kursy Programowania i Tworzenia stron WWW

Forum programowania i tworzenia stron WWW na podstawie video kursów ze strony videokurs.pl
https://forum.videokurs.pl/

Problem z rozmieszczeniem elementów stronki

https://forum.videokurs.pl/viewtopic.php?t=304

Strona 1 z 2

Problem z rozmieszczeniem elementów stronki

Napisane: środa, 19 października 2011, 14:27
przez Italic
Witam, prosżę niepatrzeć na grafikę strony gdyż jest ona czysto testowa, tylko w celu przecwiczenia okodowania.

Mam aktualnie 2 problemy:

Niewiem czemu, ale po zrzuceniu stronki na server: niewyswietlaja sie obrazki. W Aptana wyswietla sie wszystko poprawnie.

Adres stronki: http://www.2poczatek.za.pl/#
Tutaj screen: http://imageshack.us/f/856/beztytuuqtn.png/

Chodzi mi o to, by ten biały napis po lewo wskoczył w te 3 pola po prawo. Dwoje sie i troje i nic nie działa, marginesy niedziałają - gdy wpisuje wartosći im są wyższe tym tekst sie coraz bardziej rozjeżdza i ostatecznie zawija w linijke pod. Jeszcze wkleje kod stronki.

Code: Zaznacz cały

<!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" xml:lang="pl" lang="pl">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="content-language" content="pl" />
        <meta name-"robots" content="index, follow" />
        <title>Moja pierwsza strona www</title>
        <meta name="description" content="Moja pierwsza strona www" />
        <meta name="keywords" content="Moja pierwsza strona www, pierwsza strona www" />
		
		<link href="style.css" rel="stylesheet" type="text/css" />
	     <style type="text/css">
			/*<![CDATA[*/
			*
			{
				padding: 0; /* dopełnienie ustawione na 0*/
				margin: 0; /* margines ustawiony na 0 */
				
					}
			body
			{
				background-image: url('obrazki/charcoal.gif'); /* osadzenie tła strony */
				background-attachment: fixed; /*ustawienie przymocowania tła: na ustalone z góry */
			}
				
				#kontener /* kontener - przetrzymuje reszte elementów naszej strony */
				{
					width: 1004px; /*szerokosc prawidłowo powinna byc 1004px*/
					margin: 0 auto; /* wysrodkowanie- dodatkowo ustawione w divie align="center" dla starych przeglądarek */
					}
					#stronka_01
					{
						position: relative; /* pozycjonowanie relatywne wzdledem siebie */
						margin-top: 10px; /*margines gorny ustawiony na 10 px */
						background-image: url('obrazki/Bez-nazwy-1_01.gif'); /* adres obrazka */
						width: 1004px; /* szerokosc */
						height: 141px /* wysokosc */
					}
					img.logo
					{
						position: absolute; /* pozycjonowanie wzgledem stronka_01 a nie przeglądarki */
						border: 0; /* obwoluta wokol loga znikla */
						left: 20px; /* połozenie zawsze 20 px od lewej strony stronka_01 */
						top: 45px; /* połozenie 20 px od gory stronka_01 */
						
					}
					
					#kontakt_box
					{
						position: absolute;
						right: 20px;
						top: 20px;
						color: white;
						font-size: 11px;
						font-family: "Trebuchet MS", Helvetica, sans-serif;
						line-heght: 125%; /* odstepy miedzy liniami */
						}
				
					#menu_gorne
				{
					background-image: url('obrazki/Bez-nazwy-1_02.gif');
					width: 1004px; /* szerokosc */
					height: 41px; /*wysokosc */
   
				}
				
				#wlasciwe_gorne_menu li
				{
					list-style-type: none; /* brak kropek w liscie */
					float: left; /*opływa po lewej stronie, zmienia pion linkow na poziom */
					
				}	
		
				#wlasciwe_gorne_menu li a
				
				{
					border-bottom: none;
					Color: #C7C7D4;
					font-size: 13px;
				    font-family: "Trebuchet MS", Helvetica, sans-serif;
					font-weight: bold;
					font-style: italic;
					
				}

					span.link 
					
					{
						display: inline-block;
						margin-top: 10px;
					}
					
				
			
			/*]]>*/
		</style>
			
		
    </head>
    <body>
    	<div align="center">
			<div id="kontener"> 
	    		<div id="stronka_01">
	    			
	    			<a href="http://www.google.pl"><img class="logo" src="obrazki/logo.jpg" alt="Logo zwykłe" /></a>
						<div id="kontakt_box">
							<table>
								<tr><th>Kontakt:</th></tr>
								<tr><td>sdfsdfsdf</td></tr>
								<tr><td>dsfsdf</td></tr>
								<tr><td>dsfdsf</td></tr>
								<tr><td>dsfdsf</td></tr>
								<tr><td>dsfdsfsdfsdf</td></tr>
												
							</table>
							 </div> <!-- koniec div kontakt box -->
	   			</div>	<!-- koniec div stronka 01 -->
			
			<div id="menu_gorne">
	    				<ul id="wlasciwe_gorne_menu">
	    					<li><a href="#"><span class="link">asassas</span></a></li>
							<li><a href="#"><span class="link">dsdssdd</span></a></li>
							<li><a href="#"><span class="link">fdfdfdff</span></a></li>
	    				</ul>
	    			</div>  <!-- koniec div menu gorne-->
			
			</div> <!-- koniec div kontener -->
			
			
		</div>
		
    </body>
</html>

Re: Problem z rozmieszczeniem elementów stronki

Napisane: środa, 19 października 2011, 17:00
przez Morfidon
Italic napisał(a): Niewiem czemu, ale po zrzuceniu stronki na server: niewyswietlaja sie obrazki. W Aptana wyswietla sie wszystko poprawnie.
Prawdopodobnie masz włączone przy uploadingu zmianę liter w nazwach plików z dużych na małe, a ponieważ grafikę masz tak:

Code: Zaznacz cały

background-image: url('obrazki/Bez-nazwy-1_02.gif');
to dlatego się nie wyświetla.

A wręcz na pewno: http://www.2poczatek.za.pl/obrazki/bez-nazwy-1_01.gif vs http://www.2poczatek.za.pl/obrazki/Bez-nazwy-1_01.gif - to co innego.

Pozdrawiam

Re: Problem z rozmieszczeniem elementów stronki

Napisane: środa, 19 października 2011, 18:33
przez Italic
Poprawiłem, ale w dalszym ciągu zamiast obrazka "bez-nazwy-1_01.gif" wyrzucają mi się reklamy friko.pl, a przecież w kodzie niema do nich nigdzie odnosnika...

Niemniej widać czerowny pasek. I dokładnie chodzi mi o to jak przerzucić 3 linki z lewej strony w te pola po prawo. Probowałem z marginesami, ale niedziała, a niemoge ustawić position: absolute; i pozńiej od tego odnosić bo jest ponizej czarnego boksa.

Pozdrawiam

Edit: Niewiem jak, ale reklamy same znikly i "strona" jest wyswietlana poprawie.

Re: Problem z rozmieszczeniem elementów stronki

Napisane: środa, 19 października 2011, 18:40
przez Morfidon
Reklam na tego typu darmowym hostingu nie usuniesz. Są one dodawane prawdopodobnie automatycznie do każdego pliku przy pomocy np. .htaccess. Polecam netmark.pl, za 35 zł masz dobry hosting na cały rok.

Coś co nie jest ustawione jako "block" nie przesuniesz, tak łatwo. Te żółte przegródki musisz skonstruować inaczej. Np. niech będą się pojawiać w raz z jakimś divem w którym jest tekst.

Re: Problem z rozmieszczeniem elementów stronki

Napisane: piątek, 21 października 2011, 17:13
przez Italic
Dlaczego przeglądarki niereagują na:

Code: Zaznacz cały

	#srodkowe_menu li
			{
				list-style-type: none;
				float: left;
			}

     #srodkowe_menu li a
				{
					border-bottom: none;
					color: c7c7d4;
					
				}
W kodzie powinienem mieć wszystko ok, bo robię narazie według kursu. Zrzuciłem stronke na server wiec mozna sobie zobaczy, że niereeaguje. Link w podpisie.

Edit: Przejrzałem jeszcze raz kod i znalazłem błąd, także problem już nieaktualny :)

Re: Problem z rozmieszczeniem elementów stronki

Napisane: wtorek, 25 października 2011, 12:01
przez Italic
Zrobiłem stronę według tutoriala:
http://longway.blox.pl/2008/10/Tutorial ... oshop.html

I niepotrafie pociąć layoutu, tak by po złożeniu stronki w html strona powiekszała się wraz z tekstem, tak jak w efekcie koncowym tutka: http://www.2poczatek.za.pl/wood.n/index.htm

Stworzyłem stronę, ale na twardo, wszystko zagniezdzone na stałe do konkretnego miejsca, tak ze rozmiar stronki sie niepowieksza: http://www.2poczatek.za.pl/#
Proszę zajrzeć w kod.

Tutaj daje, to co zrobilem na podstawie tutoriala: http://www.2poczatek.za.pl/cegly.rar
I proszę, by go pociąć tak, by po złożeniu strona się powiększała i wysłac mi plik psd z zaznaczonymi cieciami.

Wiem, ze pliki trzeba powielać repeat-x , -y. Ale nierozumiem dlaczego w efekcie koncowym tutka strona sie powiększa gdy wpisuje tekst z lewej strony na bialym tle, to powieksza sie rowniez strona pod tą żółtą kartką. Jesli to jest połączone w jeden pasek to dlaczego tekst sie trzyma tylko białego pola?

Mam nadzieję, że linki do obcego tutoriala nie urażą właściciela tej stronki...

Pozdrawiam

Re: Problem z rozmieszczeniem elementów stronki

Napisane: wtorek, 25 października 2011, 23:10
przez GniadeK
Panie, ink do paczki z rarem nie dziala, poza tym wątpie czy admin zrobi coś za Ciebie, raczej tylko naprowadza radami ;

Moim zdaniem "position: absolute" to największe zło i powinno sie tego używać tylko w uzasadnionych wypadkach ;) tak więc to co zobaczylem pod adresem http://www.2poczatek.za.pl/# było dla mnie niezłym szokiem, ale spoko nikt nie rodzi się geniuszem zresztą każdy ma inny styl kodowania ;) - Ja bym tym divom dawał "float: left"

Co do linków to jest wiele sposobów, ja bym np. zrobił tak: do diva "linki2" wsadził listę, dla znaczników <li> ustawił "display: inline" - wtedy pokazują się obok siebie, jak normalny tekst, ALE możesz każdemu z osobna jak i wszystkim na raz ustawić "padding-left: 110px" - problem z głowy :D

Jak chcesz żeby stronka się rozciągała to nie możesz dawać na sztywno wymiaru, wysokość pudła musi się sama regulować względem zawartości :)

Re: Problem z rozmieszczeniem elementów stronki

Napisane: środa, 26 października 2011, 10:14
przez Italic
Poradziłem sobie z cięciem layouta :) Znalazłem świetnego tutoriala, jasno pokazane.

Ale mam inny problem. Ciągle się pojawiają nowe problemy. Mam taką prostą stronkę i niepotrafie jej ogarnąć.

Czym się różnią te dwie strony ? Są podobne z tym, że jedna działa tak jak ma działać, a druga nie.

Pierwsza strona, działająca poprawnie:
http://www.2poczatek.za.pl/proba/index.html

Code: Zaznacz cały

[syntax=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" xml:lang="pl" lang="pl">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="content-language" content="pl" />
        <meta name-"robots" content="index, follow" />
        <title>Moja pierwsza strona www</title>
        <meta name="description" content="Moja pierwsza strona www" />
        <meta name="keywords" content="Moja pierwsza strona www, pierwsza strona www" />
		
		<link href="style.css" rel="stylesheet" type="text/css" />
		
    </head>
    <body>
    	<div id="container">

			<div id="header"></div>
			<div id="content">
            	<div id="main_column">jakis tekst jakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekst</div>
  				<div id="side_panel">jakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekstjakis tekst</div>
  				<div class="clear"></div>
			</div>
		</div>
		<div id="footer"></div>

		
    </body>
</html>[/syntax]

[syntax=css]* {
  padding: 0;
  margin: 0;
}
body {
  background: #6e4b26 url('images/bg.jpg') 0 0 fixed;
  margin: 20px 0;
}
#container {
  width: 758px;
  margin: 0 auto;
  padding: 0 15px 0 5px;
}
#header {
  height: 155px;
  position: relative;
  background: url('images/header.gif') left bottom no-repeat;
}
#content {
  background: url('images/content.gif') 0 0 repeat-y;
  height: 100%;
}
#main_column {
  float: left;
  width: 528px;
  padding: 0 13px 0 15px;
  background: url('images/main_column.gif') 0 0 no-repeat;
}
#side_panel {
  float: right;
  width: 191px;
  padding: 106px 0 0 9px;
  background: url('images/side_panel.gif') 0 0 repeat-y;
  position: relative;
}
.clear {
  clear: both;
}
#footer {
  width: 778px;
  margin: 0 auto;
  height: 20px;
  background: url('images/footer.gif') 5px 0 no-repeat;
}
[/syntax]

Druga stronka, niedziałająca:
http://www.2poczatek.za.pl/Nowastronka/index.html

[syntax=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" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="pl" />
<meta name-"robots" content="index, follow" />
<title>Moja pierwsza strona www</title>
<meta name="description" content="Moja pierwsza strona www" />
<meta name="keywords" content="Moja pierwsza strona www, pierwsza strona www" />

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

</head>
<body>
<div id="kontener">
	<div id="top"> </div> 
<!-- koniec top -->
    <div id="srodek">
        <div id="lewo">Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.</div>
   <!-- koniec lewo -->
         <div id="prawo">Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.Jakis tekst.</div>
      <!-- koniec prawo -->

<div class="clear"></div></div> 
<!-- koniec srodek -->
<div id="bottom"> </div>
<!-- koniec bottom -->
</div>
<!-- koniec kontenera -->

</body>
</html> [/syntax]

[syntax=css]*
			{
				padding: 0; /* dopełnienie ustawione na 0*/
				margin: 0; /* margines ustawiony na 0 */
				
					}
					
			body
			{
				background-image: url('images/tlo.jpg'); /* osadzenie tła strony */
				background-attachment: fixed; /*ustawienie przymocowania tła: na ustalone z góry */
			}
			
			#kontener /* kontener - przetrzymuje reszte elementów naszej strony */
				{
					width: 778px; /*szerokosc prawidłowo powinna byc 1004px*/
					margin: 0 auto; /* wysrodkowanie- dodatkowo ustawione w divie align="center" dla starych przeglądarek */
					padding: 0 15px 0 5px;
					}
					
					 /* GORNA CZESC STRONKI */
				#top
					{
						position: relative; /* pozycjonowanie relatywne wzdledem siebie */
						margin-top: 10px; /*margines gorny ustawiony na 10 px */
						background-image: url('images/top.gif'); /* adres obrazka */
						width: 778px; /* szerokosc */
						height: 188px /* wysokosc */
					}
					
					/* SRODKOWA CZESC STRONKI */
					
					#srodek
					{
					position: relative; /* pozycjonowanie relatywne wzdledem siebie */
					background-repeat: repeat-y;
					heght: 100%;
					}
					
					
						#lewo
					{
						
						background-image: url('images/lewo.gif'); /* adres obrazka */
						background-repeat: no-repeat;
						width: 571px;
						float: left;
					
						}
						
						#prawo
						{
						background-image: url('images/prawo.gif'); /* adres obrazka */
						background-repeat: repeat-y;
						width: 207px;
						float: right;
						position: relative;
					
						}
						
						.clear {
						 clear: both;
						 }
			
						
					
					/* DOLNA CZESC STRONKI */
					
					
					#bottom
					{

						background-image: url('images/bottom.gif'); /* adres obrazka */
						width: 778px; /* szerokosc */
						height: 98px; /* wysokosc */
						z-index: 3;
					}
			[/syntax]
Dokładnie chodzi mi o to, że w stronce działającej wraz z tekstem strona się rozszerza razem (spójnie) w dwóch różnych divach. div said_panel i main_column. Tam gdzie niema tekstu jest poprostu białe tło.

Natomiast w stronce niedziałającej jak widać: Dwa różne divy div lewo i prawo, żyją tak osobno, oba się rozszerzą, ale tylko pod ilość tekstu. A gdzie go braknie zostaje dziura. (Akurat tutaj dałem no-repeat w kolumnie po lewo, ale to nieszkodzi) W tej działającej też jest no-repeat, a działa.... nierozumiem tego.

Co odpowiada za to spójne rozszerzanie? Gdy jest więcej tekstu w jednym divie drugi też się rozszerzy.

Próbowałem na podstawie prób i błędów, ale jakbym niekonbinował niepotrafie uzyskac takiego efektu.

Re: Problem z rozmieszczeniem elementów stronki

Napisane: środa, 26 października 2011, 11:19
przez Italic
Doszedłem dlaczego sie rozszerza w dwóch divach:

Code: Zaznacz cały

#srodek
					{
					position: relative; /* pozycjonowanie relatywne wzdledem siebie */
					 background-image: url('images/kreska.gif');
					 background-repeat: repeat-y;
					 
					heght: 100%;
					}
					
					
						#lewo
					{
						
						background-image: url('images/lewo.gif'); /* adres obrazka */
						background-repeat: no-repeat;
						width: 571px;
						float: left;
					
						}
						
						#prawo
						{
						background-image: url('images/prawo.gif'); /* adres obrazka */
						background-repeat: repeat-y;
						width: 207px;
						float: right;
						position: relative;
					
						}
Chodziło o dodanie kreski w divie "srodek" i właczenie powtarzania. tylko dlaczego w lewej kolumnie "lewo" powtarzanie musi być wyłaćzone?

Re: Problem z rozmieszczeniem elementów stronki

Napisane: środa, 26 października 2011, 11:59
przez GniadeK
Skoro tło przeżuciłeś do wyższego diva "środek" to nie potrzebujesz już tła dla lewej kolumny, obecne tło lewej kolumny to linia wysokości 1px, więc jest niezauważalna, jak dasz jej powtarzanie to wypełni ona tylko div "lewy" który kończy się wraz z tekstem i przykryje tło "środka"
Strefa czasowa: UTC+02:00 UTC+2
Strona 1 z 2

Powered by phpBB® Forum Software © phpBB Limited