Reklama: Jesteś webmasterem ? Zacznij zarabiać KLIKNIJ
Dołącz do grupy

Stwórz profil

Musisz wpisać swoje imię
Musisz wpisać swoje nazwisko
Musisz wpisać poprawny e-mail
Musisz wpisać hasło (min. 8 znaków)
Musisz zaakceptować regulamin

Krzysztof Durak Początkujący
Grafik... Rozwijam
się dopiero

Temat: Problem z tlem

Witam
mam problem z tłem do stronki mianowicie tło wygląda tak:

Obrazek

chciałbym żeby te pikselowe kreski leciały przez całą przeglądarkę
a między nimi chciałbym umieścić galerie która rozszerzałaby te miejsce pomiędzy tymi kreskami.
pomoże ktoś ?
bo to pierwsza moja strona.Krzysztof Durak edytował(a) ten post dnia 02.08.11 o godzinie 22:06
2.08.2011, 21:30
Link do wypowiedziLink | Cytuj

Łukasz Stępa wszelakopojęty
html/css

Temat: Problem z tlem

Jednolitym tłem się nie da. Proponuje rozbić to na 3 elementy.

<body>
<div class="header">górny pasek</div>

<div class="content">galeria</div>

<div class="footer">dolny pasek</div>
</body>

body { background: #ccc; }
.header { height: 20px; }
.content { height: 300px; border-top: 1px solid #000; }
.footer { height: 20px; border-top: 1px solid #000; border-bottom: 1px solid #000; }

oczywiście height dodałem tak żeby było widać od razu po klejeniu kodu. Normalnie w contencie nie bedzie height i bedzie sie rozwijał na tyle w dół na ile wysoka będzie galeriaŁukasz Stępa edytował(a) ten post dnia 02.08.11 o godzinie 21:56
2.08.2011, 21:54
Link do wypowiedziLink | Cytuj

Krzysztof Kawa pomysłowy
programista

Temat: Problem z tlem

Jeśli na stronie będzie dużo treści to tak jak napisał Łukasz, natomiast przy małej jej ilości stopka "ucieknie" w górę.
Tutaj rozwiązanie tego problemu: http://stickyfooter.com

p.s. Krzysztof, oczy bolą - chciałbym, chciałbym, rozszerzałaby - tam nie ma miejsca na spacje;)
2.08.2011, 22:01
Link do wypowiedziLink | Cytuj

Krzysztof Durak Początkujący
Grafik... Rozwijam
się dopiero

Temat: Problem z tlem

Łukasz Stępa:
Jednolitym tłem się nie da. Proponuje rozbić to na 3 elementy.

<body>
<div class="header">górny pasek</div>

<div class="content">galeria</div>

<div class="footer">dolny pasek</div>
</body>

body { background: #ccc; }
.header { height: 20px; }
.content { height: 300px; border-top: 1px solid #000; }
.footer { height: 20px; border-top: 1px solid #000; border-bottom: 1px solid #000; }

oczywiście height dodałem tak żeby było widać od razu po klejeniu kodu. Normalnie w contencie nie bedzie height i bedzie sie rozwijał na tyle w dół na ile wysoka będzie galeria

Dziki wielkie dopiero się uczę ale chyba rozumiem co napisałeś tylko będę musiał zamiast class zrobić div bo w te paski górny i dolny chce dać jeszcze menu logo i jakiś JPG
ale mniejsza o to dzięki jeszcze razKrzysztof Durak edytował(a) ten post dnia 02.08.11 o godzinie 22:08
2.08.2011, 22:03
Link do wypowiedziLink | Cytuj

Łukasz Stępa wszelakopojęty
html/css

Temat: Problem z tlem

Faktycznie zapomniałem o tym, że stopka może uciec do góry jeśli będzie za mało treści :) Dzięki Krzysztof za sprostowanie.
Krzysztof Durak:

Dziki wielkie dopiero się uczę ale chyba rozumiem co napisałeś tylko będę musiał zamiast class zrobić div bo w te paski górny i dolny chce dać jeszcze menu logo i jakiś JPG
ale mniejsza o to dzięki jeszcze raz


poprzez "div" miałeś na myśli "id" ? Klasy tutaj w niczym ci nie będą przeszkadzać jeśli chcesz w te paski dodać jeszcze inne elementy.
3.08.2011, 00:24
Link do wypowiedziLink | Cytuj

Krzysztof Durak Początkujący
Grafik... Rozwijam
się dopiero

Temat: Problem z tlem

Krzysztof Kawa:
Jeśli na stronie będzie dużo treści to tak jak napisał Łukasz, natomiast przy małej jej ilości stopka "ucieknie" w górę.
Tutaj rozwiązanie tego problemu: http://stickyfooter.com

p.s. Krzysztof, oczy bolą - chciałbym, chciałbym, rozszerzałaby - tam nie ma miejsca na spacje;)
Panowie siedziałem może z pół dnia i nie mogłem zrobić tej stopki
niewiem robię tak jak podane jest w tym Tutku

Zauważyłem że jak daje na content height:100%; to nic się z nim nie dzieje nie zjeżdża w dół na maksa bo chyba powinien ?
Mam coś takiego:
HTML
<body>
<div id="warp">
<div id="heder">
<div class="heder">
<img id="logo"src=images/logo.png>
<img id="col"src=images/coloratka3.png>
<ul id="baton">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<img id="shadow"src=images/shadow.png>
<img id="shadow"src=images/TAG.png>
</div>
</div>
<div id="content">
<div class="content">
<div class="box">
</div>
</div>
</div>
</div>

<div id="social">
<div class="social">

</div>
</div>

CSS

body {
height:100%;
background-color:#e6e5e5;
margin: 0px;
font-family: verdana, sans-serif;
}
div#warp{
min-height:100%;
}
div#heder {
width: 100%;
height: 195px;
margin : 0 auto;
padding: 0px;
border-bottom:solid 1px #d0cfcf;

}
.heder {
width: 960px;
margin : 0 auto;
padding: 10px;

}
div#content{
width: 100%;
height:auto;
height:100%;
margin : 0 auto;
overflow:auto;
padding-bottom: 176px;
}
.content {
width: 960px;
height:auto;
margin : 0 auto;
padding: 0px;

}
div#social {
width: 100%;
margin : 0 auto;
border-top:solid 1px #d0cfcf;
position: relative;
margin-top: -176px; /* negative value of footer height */
height: 176px;
clear:both
}
.social {
width: 960px;
height:auto;
margin : 0 auto;
padding: 0px;
}Krzysztof Durak edytował(a) ten post dnia 04.08.11 o godzinie 20:38
4.08.2011, 20:35
Link do wypowiedziLink | Cytuj

Łukasz Z. Programista,
Optiguard

Temat: Problem z tlem

Krzysztof Durak:

body {
height:100%;
background-color:#e6e5e5;
margin: 0px;
font-family: verdana, sans-serif;
}

Ustawienie wysokości sekcji body na 100% jakoś mi nie za bardzo pasuje.
Czy konieczne jest aby stopka wyświetlała się na dole okna przeglądarki (nie jestem pewien czy dobrze Cię zrozumiałem)?

PS. Jeśli obrazek daje się wyrazić przez powielenie to można ograniczyć się do przygotowania pliku graficznego o szerokości jednego pixela i go potem tylko powtarzać na całą szerokość strony ;)

Edytka dodaje:
Czy takie coś by Cię satysfakcjonowało (działającą wersję wrzuciłem na http://zajonc.pl/test/test.htm)?



<html>

<head>

	<style type="text/css">

		body

		{

			background-color: #efefef;

		}



		div 

		{ 

			background-image:url('back.png');

			background-repeat: repeat-x;

			background-position: bottom;

		}



		#naglowek

		{

			height: 50px;

		}



		#tresc

		{

			height: 450px;

		}



		#stopka

		{

			height: 30px;

		}

	</style>

</head>

<body>

	<div id="naglowek">To jest naglowek</div>

	<div id="tresc">Tutaj bedzie tresc</div>

	<div id="stopka">Stopka</div>

</body>

</html>


Wiem, że można ten kod napisać inaczej (np. z odpowiednim dziedziczeniem a nie tak ordynarnie po gołym DIV), ale zależało mi na pokazaniu idei i prostocie. Przyznaję się więc bezczelnie, że mocno ten kod uprościłem na potrzeby chwili ;)Łukasz Z. edytował(a) ten post dnia 04.08.11 o godzinie 21:37
4.08.2011, 20:59
Link do wypowiedziLink | Cytuj

Krzysztof Durak Początkujący
Grafik... Rozwijam
się dopiero

Temat: Problem z tlem

Łukasz Z.:
Krzysztof Durak:

body {
height:100%;
background-color:#e6e5e5;
margin: 0px;
font-family: verdana, sans-serif;
}

Ustawienie wysokości sekcji body na 100% jakoś mi nie za bardzo pasuje.
Dałem body na 100% bo tak było w tutku Który podał Krzysztof
ale nawet jak daje content na height 100% to nic się z nim nie dzieje
Czy konieczne jest aby stopka wyświetlała się na dole okna przeglądarki (nie jestem pewien czy dobrze Cię zrozumiałem)?
Chciałem żeby stopka była na dole przeglądarki bo jak ktoś będzie maił duży monitor to stopkę będzie miał w połowie
nie wiem czy to będzie dobrze ?

PS. Jeśli obrazek daje się wyrazić przez powielenie to można ograniczyć się do przygotowania pliku graficznego o szerokości jednego pixela i go potem tylko powtarzać na całą szerokość strony ;)

Edytka dodaje:
Czy takie coś by Cię satysfakcjonowało (działającą wersję wrzuciłem na http://zajonc.pl/test/test.htm)?
4.08.2011, 21:47
Link do wypowiedziLink | Cytuj

Łukasz Z. Programista,
Optiguard

Temat: Problem z tlem

Krzysztof Durak:
Chciałem żeby stopka była na dole przeglądarki bo jak ktoś będzie maił duży monitor to stopkę będzie miał w połowie
nie wiem czy to będzie dobrze ?

Spróbuj zmienić styl stopki na coś takiego (pisane na szybko - nie wiem czy będzie działać poprawnie wszędzie bo jeśli mnie pamięć nie myli to z takimi efektami bywają problemy ;) )



#stopka

{

	height: 30px;

	position: fixed;

	bottom: 0px;

	width: 100%;

}


Możesz też to podejrzeć na stronie, którą podesłałem wcześniej (już ją poprawiłem) http://zajonc.pl/test/test.htm.
Efekt rozdzielenia "stref" pominąłem jako rzecz wtórną - z tym powinieneś dać sobie radę sam ;)

Edytka dodaje:
Mankament tego rozwiązania jest taki, że jeśli treść z nagłówkiem będą większe od wysokości okna przeglądarki to stopka nałoży się na resztę strony. Ale jak już pisałem - z takimi efektami przeważnie są problemy ;) Być może odpowiedniejsze będzie użycie JavaScript, ale to już inna bajka.Łukasz Z. edytował(a) ten post dnia 04.08.11 o godzinie 22:12
4.08.2011, 22:00
Link do wypowiedziLink | Cytuj

Krzysztof Kawa pomysłowy
programista

Temat: Problem z tlem

Wystarczy kod wg stickyfooter, nie trzeba js:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<style type="text/css">

* {margin:0; padding:0;}

html, body {height: 100%; }

#header { height: 100px; }

#wrapper { min-height: 100%; }

#content { overflow:auto; }

#footer { position: relative; margin-top: -100px; height: 100px; clear:both; } 



/*do celow wizualizacji*/

#header  { background-color: red;}

#wrapper { background-color: green;}

#content { background-color: blue;}

#footer  { background-color: magenta;}

</style>

</head>

<body>

  <div id="wrapper">

    <div id="header"> header </div>

    <div id="content"> content</div>

  </div>

  

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

</body>

</html>

Wewnątrz #header, #content i #footer można umieścić co tam się sobie wymyśli. Stopka będzie widoczna do momentu kiedy content będzie się nad nią mieścił, potem jak dobry obywatel przesunie się w dół razem z resztą strony.Krzysztof Kawa edytował(a) ten post dnia 04.08.11 o godzinie 23:26
4.08.2011, 23:24
Link do wypowiedziLink | Cytuj

Łukasz Z. Programista,
Optiguard

Temat: Problem z tlem

Krzysztof Kawa:
Wewnątrz #header, #content i #footer można umieścić co tam się sobie wymyśli. Stopka będzie widoczna do momentu kiedy content będzie się nad nią mieścił, potem jak dobry obywatel przesunie się w dół razem z resztą strony.

Uruchomiłem Twój kod i zmniejszając okno przeglądarki uzyskałem ten sam efekt co u mnie. Nie dość, że stopka zasłoniła content to jeszcze kawał nagłówka. Nie dała rady zasłonić dopiero samego tekstu nagłówka - wtedy pojawił się suwak.

Testowałem to na FF 5.0 oraz IE 9.
5.08.2011, 16:31
Link do wypowiedziLink | Cytuj

Michał Wachowski Freelancer na
zakręcie i
bazodanowiec z
bożej łaski

Temat: Problem z tlem



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

	"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

	<title></title>

	<style type="text/css">

		html,body { height: 100%; margin: 0; background: #000; }



		#wrapper { position: relative; min-height: 100%; background: #FFF; }



		#header { height: 100px; background: #f00; }



		#content { position: relative; min-height: 100px; background: #0f0; padding-bottom: 100px; }

			#overflow { position: absolute; left: 0; bottom: 0; width: 100%; height: 100px; border-top: 1px dotted #F00; }



		#footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 100px; background: #00f; }

	</style>

</head>

<body>



<div id="wrapper">

	<div id="header">HEADER</div>



	<div id="content">CONTENT

		<div id="overflow">TU BEDZIE NACHODZIC STOPKA</div>

	</div>



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

</div>



</body>

</html>


Najważniejsze - padding-bottom w #content musi być większy lub równy od całkowitej wysokości #footer.
5.08.2011, 16:54
Link do wypowiedziLink | Cytuj

Dawid Pierzchalski Projektant, Bank
Pekao SA

Temat: Problem z tlem

Albo ja czegoś nie rozumiem, albo za bardzo komplikujecie prostą rzecz. Przygotuj sobie tło dla diva content daj repeat:repeat; overflow:hidden, a w tym divie umieszczasz galerię.

Pod #content dajesz stopkę.
28.08.2011, 22:03
Link do wypowiedziLink | Cytuj
« Wróć do tematów
Odpowiedz
Dołącz do grupy



Wyślij zaproszenie do

Anuluj