Dynamiczny szablon w CSS

0

Witam!

Czy istnieje możliwość, żeby wykonać taki szablon w CSS na divach, aby wysokość kontenera tego szablonu zależała od wysokości jednego z divów, który się wewnątrz niego znajduje, a z kolei wysokość tego wewnętrznego diva była zależna od ilości tekstu w nim zawartego?

Pozdrawiam!

0

przecież domyślnie to tak działa.

kontener jest tak wysoki, jak jego treść, w przypadku kolumn, będzie to najwyższa kolumna, która jest tak wysoka, jak jej treść :P

http://jsbin.com/jezuluda/1/

0

Pokażę najlepiej kod. Podejrzewam, że nie daje mi to pożądanych rezultatów ze względu na zastosowane pozycjonowanie i pewnie brakuje jakiegoś szczegółu, o którym nie wiem.


<!DOCTYPE html>
<html>

<head>

<title>Strona testowa</title>

<style>

html{
height:100%;
position:relative;
}

body{
height:100%;
margin:0;
padding:0;
}

div.tlo{
box-shadow:0 0 5px black;
background-color:lightblue;
position:absolute;
left:20%;right:20%;
top:0%;bottom:0%;
}

div.text{
color:white;
font-size:45px;
box-shadow:0 0 3px black;
background-color:green;
position:absolute;
left:5%;right:5%;
top:5%;
}


</style>

</head>

<body>

<div class="tlo">

	<div class="text">
		<p>text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text
		text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text 
		text text text text text text text text text text text text text text </p>
	</div>

</div>


</body>

</html> 

Div będący wewnątrz zwiększa swoją wysokość zgodnie z ilością tekstu, jednak nie wpływa na wysokość diva, w którym się znajduje i "wychodzi" poza niego.

0

Wydaje mi się, że niepotrzebnie używasz "position:absolute". Postaraj się uzyskać zamierzony efekt bez użycia absolute i div powinien się dostosować

1

jak kolega wczesniej spomnial wina jest position:absolute. Uzywaj tego dopiero jak poznasz cala inna skladnie htmla i wiesz co doc zego sluzy.

http://jsbin.com/rubobazi/1/edit

cos takeigo plus, nie uzywaj marginesow wyrazanych procentowo, chyba ze do wysrodkowania strony, bo strona bedzie plywac jak bedzie chciala. sa ropzne rozdzielczosci i to ze u ciebie to dziala to na innych komputerach z inna rozdzielczoscia sie to wylozy.

0

Ok, ale co w momencie, gdy będę chciał dodać kolejny div obok tego z tekstem. Jak mam potem nimi zarządzać wewnątrz głównego diva jak nie przez position:absolute? Jeśli jest jeden to w porządku, ustawiłeś marginesy wewnętrzne, ale będę miał wiele divów z czego treść jednego z nich ma wpływać na wysokość głównego. Do tej pory robiłem szablony "z procentami" i absolutnie nic się nie sypało na żadnej przeglądarce i żadnej innej rozdzielczości. Jedyny problem był taki, że ustawiałem zwykle domyślną wysokość kontenera na przykład na 1000px i rozmieszczałem resztę wewnątrz. Z tym, że div z tekstem był zaopatrzony w suwaki jak brakowało już miejsca na tekst, robiłem to za pomocą overflow:auto. Chciałbym jednak dokonać tylko jednej zmiany w dotychczasowych szablonach, a mianowicie - div z tekstem ma zwiększać wysokość kontenera, aby nie było już tego suwaka, bo nie jest to dobre. Przecież nie ma opcji, żeby nie korzystać przy tym wszystkim z position:relative i absolute.

0

to dodajesz kolejny div i doklejasz go floatem z jednej strony, potem czyscisz floata i div glowny sie dopasowuje.
http://jsbin.com/rubobazi/3/edit

pokaz mi ten design budowany na procentowych marginach a ja ci pokaze trzyuscreenshoty gdzie to sie wysypalo :)

0

Proszę bardzo, taki przykład :)


<!DOCTYPE html>
<html>

<head>

<title>Strona testowa</title>

<style>

html{
height:100%;
}

body{
height:100%;
margin:0;
padding:0;
}

p{
padding:0;
margin:0;
}

div.tlo{
box-shadow:0 0 5px black;
background-color:lightblue;
height:1000px;
position:absolute;
left:20%;right:20%;
top:0%;bottom:0%;
}

div.banner{
box-shadow:0 0 1px black;
background-color:lightgreen;
position:absolute;
left:0%;right:0%;
top:0%;bottom:85%;
}

div.menu{
box-shadow:0 0 3px black;
background-color:red;
position:absolute;
left:2%;right:80%;
top:20%;bottom:55%;
}

div.text{
padding:20px;
color:white;
font-size:45px;
box-shadow:0 0 3px black;
background-color:green;
position:absolute;
left:22.5%;right:2%;
top:20%;bottom:20%;
}

div.stopka{
box-shadow:0 0 3px black;
background-color:yellow;
position:absolute;
left:0%;right:0%;
top:90%;bottom:0%;
}

</style>

</head>

<body>

<div class="tlo">

	<div class="banner"></div>
	<div class="menu"></div>
	<div class="text">
		<p>text text text text text text text text text text text text text 
		</p>
	</div>
	<div class="stopka"></div>
		

</div>


</body>

</html>

0

ale ja mowie o czyms co jest uzytkowe. wloz cokolwiek do tej czerwonej kolumny (text, obrazek, diva) i juz tak fajnie nie bedzie. ale jak ktos chce cztery kolorowe kolumny bez tresci to twoj szablon pasuje idealnie. :)

0

Dodałem i elegancko się to wewnątrz tej kolumny pozycjonuje, tekst, div, cokolwiek. Naprawdę jedynym moim problemem jest brak możliwości rozciągania kontenera według treści wewnętrznego diva. Możliwe, że jest to spowodowane moim dotychczasowym sposobem tworzenia szablonów, jednak nie mów mi, że taki szablon się sypie, bo takie coś nie występuje, testowałem takie szablony z wieloma rzeczami wewnątrz na browsershots i poza archaicznymi przeglądarkami z linuksa wszystko bangla ;)

0

@pavon147, niestety ale jesteś w błędzie. Wszystko co tylko możliwe powinno być pozycjonowane statycznie lub w ostateczności relatywnie. Pozycjonowania absolutnego używa się w skrajnych przypadkach, gdy nie dadzą rady pierwsze dwa np, slider, itp. cuda na kiju. Jakim cudem Tobie to działo to nie wiem, ale wiem jedno - jak wyjedziesz z tekstem, że pozycjonowanie absolutne jest lepsze niż statyczne na rozmowie kwalifikacyjnej to w tym momencie pracodawca Ci powie do widzenia. Naucz się porządnie html-a i css-a, to w tedy nie będziesz musiał się zastanawiać dlaczego podstawowe mechanizmy takie jak rozszerzanie wraz z treścią nie działa i nie będzie trzeba szukać obejść.

0

@freemp3 Dobra, zrobię nowy szablon i później dam tutaj do oceny, czy tak może być.

0

Kontynuując ten wątek chciałem się upewnić, czy podczas tworzenia szablonu WWW, takiej na razie ogólnej struktury:
banner, lewa kolumna (w niej div z menu), prawa kolumna (w niej div z tekstem), stopka, nie można kompletnie używać position:relative, absolute itp? Tylko i wyłącznie atrybuty float, margin, padding? Nie można nawet ustawić dla lewej kolumny position:relative a później dla menu position:absolute? Chcę aby szablon był wykonany tak, jak należy, żeby nie można się było do niczego przyczepić.

0

Przy takie prostej strukturze? Wszystko można ustawić przy pomocy floatów, marginesów i paddingów. Dlaczego chcesz ustawić menu na absolucie? Nie uda się ustawić tego normalnie? Jak ustawisz na absolucie, to później znów będzie problem z rozciąganiem nadrzędnego elementu. Proponuję abyś zapoznał się z zasadą KISS: http://pl.wikipedia.org/wiki/KISS_%28regu%C5%82a%29
Za bardzo kombinujesz ;)

0

A mógłbyś mi podać konkretny przykład, kiedy należy stosować pozycjonowanie relatywne, absolutne itd?

0

Na przykład elementy, które powinny na siebie nachodzić i nie ma innej możliwości, jak tylko użyć pozycjonowania relatywnego, ustawianie elementów nadrzędnych dla elementów z pozycjonowaniem absolutnym, popupy itp. Przykład z tego forum, lista z powiadomieniami jest na absolucie:
http://prntscr.com/438qmm

0

Wykonałem następujący szablon strony:

<!DOCTYPE html>
<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>Szablon CSS</title>

<style>

body{
	margin:0;
	margin-bottom:10px;
}

#block{
	width:1000px;
	margin:auto;
	margin-top:0px;
	margin-bottom:0px;
	box-shadow:0px 0px 2px 2px gray;
	border-bottom-left-radius:4px;
	border-bottom-right-radius:4px;
}

#header{
	background-color:#EFEFEF;
	height:220px;
	font-size:100px;
	text-align: center;
	vertical-align: middle;
	line-height: 190px; 
	color:white;
}

#left{
	float:left;
	min-height:150px;
	width:25%;
}

#left #menu{
	background-color:white;
	font-size:17px;
	min-height:100px;
	width:75%;
	margin:auto;
	margin-top:20px;
	margin-bottom:20px;
	box-shadow:0px 0px 1px 1px gray;
	border-radius:4px;
	padding:10px;
}

#left #menu ul{
	list-style-position: inside;
	padding:0;
	margin:0;
}

#left #tbox{
	background-color:white;
	font-size:17px;
	min-height:200px;
	width:75%;
	margin:auto;
	box-shadow:0px 0px 1px 1px gray;
	border-radius:4px;
	padding:10px;
}

#center{
	float:left;
	text-align:center;
	min-height:150px;
	width:75%;
}

#center #text{
	background-color:white;
	font-size:17px;
	min-height:200px;
	width:90%;
	margin:auto;
	box-shadow:0px 0px 1px 1px gray;
	border-radius:4px;
	padding:10px;
	margin-top:20px;
	text-align:left;
}

#footer{
	clear:both;
	width:100%;
	text-align:center;
	padding-top:20px;
	padding-bottom:20px;
}

#footer #text{
	background-color:white;
	font-size:17px;
	box-shadow:0px 0px 1px 1px gray;
	border-radius:4px;
	padding:10px;
	margin-left:27.7%;
	margin-right:2.8%;
}

</style>

</head>

<body>

<div id="block">

	<div id="header">BANNER</div>
	
	<div id="left">
		<div id="menu">
			<ul>
			<li>link</li>
			<li>link</li>
			<li>link</li>
			<li>link</li>
			<li>link</li>
			<li>link</li>
			</ul>
		</div>
		
		<div id="tbox">
			To jest przykladowy tekst.
			To jest przykladowy tekst.
			To jest przykladowy tekst.
			To jest przykladowy tekst.
			To jest przykladowy tekst.
			To jest przykladowy tekst.
		</div>
	</div>
	
	<div id="center">
		<div id="text">
			To jest przykladowy tekst.<br>To jest przykladowy tekst.<br>To jest przykladowy tekst.<br>To jest przykladowy tekst.<br>
			To jest przykladowy tekst.<br>To jest przykladowy tekst.<br>To jest przykladowy tekst.<br>To jest przykladowy tekst.<br>
			To jest przykladowy tekst.<br>To jest przykladowy tekst.<br>To jest przykladowy tekst.<br>To jest przykladowy tekst.<br>
			To jest przykladowy tekst.<br>To jest przykladowy tekst.<br>To jest przykladowy tekst.<br>To jest przykladowy tekst.<br>
			To jest przykladowy tekst.<br>To jest przykladowy tekst.<br>To jest przykladowy tekst.<br>To jest przykladowy tekst.<br>
			To jest przykladowy tekst.<br>To jest przykladowy tekst.<br>To jest przykladowy tekst.<br>To jest przykladowy tekst.<br>
		</div>
	</div>
	
	<div id="footer">
		<div id="text">Stopka</div>
	</div>
	
</div>

</body>

</html>

Proszę o jego ocenę pod kątem kodu. Chciałbym wiedzieć, czy na ten moment jest to wykonane poprawnie.

0
  1. Masz dwa elementy o identyfikatorze text. Identyfikator o danej nazwie może wystąpić tylko raz. Jeśli masz dwa lub więcej elementów, które powinny mieć takie same lub podobne style należy użyć klas.

  2. Zamiast tego:

margin:auto;
margin-top:0px;
margin-bottom:0px;

Lepiej zrobić tak:

margin: 0 auto;

Poza tym ogólnie nie jest najgorzej, ale jeszcze długa droga przed Tobą :)

0

Ok, ale co to znaczy "nie jest najgorzej", to co jest jeszcze nie tak oprócz tego, co napisałeś? Poza tym nie uważam, że to z drugiego punktu jest niepoprawne, wiem, że można zrobić taki skrót, ale wolę poprzedni zapis, jeśli piszę to tylko dla siebie, a nie pracuję w zespole. Mało konkretna ta Twoja odpowiedź, długa droga niby z czym? Mam się domyślić? Co tu jest jeszcze źle, co może być lepiej w takim układzie? Jedną rzecz bym zmienił na pewno. Przerzuciłbym stopkę do diva o identyfikatorze "center" w taki sposób, że "center" byłby rodzicem, a na samym dole dodałbym pusty div z atrybutem clear:both, lepiej by się tak stopkę pozycjonowało potem, bez takich cyrków z tymi marginesami.

0

Jeżeli piszesz w wersji HTML 5 można przyczepić się do tagów.

Poczytaj : http://www.w3schools.com/tags/tag_footer.asp ; http://www.w3schools.com/tags/tag_section.asp

0

Rozumiem, ale zaznaczam, czego nie zrobiłem, że wszelkie nazwy i tagi nie są przemyślane. Nazwy itd są wymyślane na szybko, chodzi mi o ocenę ogólnej metody, a różne "kosmetyczne" szczegóły są do poprawy, zdaję sobie z tego sprawę.

0
  1. Nawet jak dla siebie pracujesz i tak lepiej jak wyrabiasz w sobie nawyk pisania tak jak powinno być. Ułatwia to pracę i później nie zastanawiasz się co i jak pisałeś i dlaczego akurat tutaj jest tak, a tam jest inaczej.
  2. Fakt, z tą stopką jak najbardziej powinna być w divie o id center, a tych marginesów nie powinno być.
  3. Tak jak napisał poprzednik tagi HTML5
  4. Wielkości czcionek lepiej podawać w em zamiast px. Łatwiej później kontrolować wielkość czcionki.
  5. Możesz zrobić klasy dla opływania odpowiednio: .left oraz .right, dodatkowo klasa .clear, która czyści opływanie:
.left
{
	float: left;
}
.right
{
	float: right;
}
.clear
{
	clear: both;
}

Te kosmetyczne szczegóły też są ważne. Rekruter patrząc na kod od razu pozna czy ma doczynienia z kimś kto się zna na rzeczy, czy z amatorem, który dopiero zaczyna. Jak wcześniej wyrobisz sobie nawyk zwracania uwagi na takie szczegóły, to później nie będziesz tracił czasu na zastanawianie się jak coś zrobić, tylko będziesz robił to z automatu.

0

@freemp3 W porządku, dzięki za rady, zastosuję je. Mam tylko jeszcze pytanie, tak dla pewności. Odnośnie punktu piątego, mówisz o stworzeniu klasy np "left" z atrybutem opływania, a później dodaniu zapisu class="left" do diva, w którym będę chciał to zastosować tak?

0

Tak, po prostu dodajesz tą klasę i masz opływanie.

0

W takim razie już wszystko jasne, dzięki za pomoc i wprowadzenie mnie na dobrą drogę podczas tworzenia szablonów ;)

0

Ponownie, aby nie zakładać nowego wątku podciągam pytanie tutaj. Mam szablon na 100% szerokości przeglądarki (kontener zawsze tak szeroki, jak okno przeglądarki) i wszystko w porządku, jednak jeśli ktoś zacznie przybliżać stronę np. przez ctrl +, to caly konterer jest wciąż na 100%, "nie ucieka", jednak pewne elementy w nim takie jak tabele z obrazkami, lub pola tekstowe, wychodzą poza niego, bo ich szerokość jest stała. Moje pytanie, w jaki sposób rozszerzać kontener na tyle na ile ktoś przybliża strone? Tzn jeśli mam ustawione width:100%, to żeby ten atrybut wzrastał zgodnie z przybliżeniem, istnieje możliwość aby pobrać w jakiś sposób wartość tego przybliżenia? Od razu mówię, że bez ustawienia width:100% efekt jest taki sam.

0

Możesz javascriptem sprawdzić początkową szerokość okna i taką szerokość ustawić dla diva.

0

@Tomek89Tar Zdecydowałem się na stałą szerokość kontenera (1200px), która ulega małej zmianie w pewnych przypadkach. Myślisz, że można wykonać to w taki sposób? Działa, ale zależy mi na rozwiązaniach na poziomie.


$(document).ready(function(){

 var screen_size=$(window).width();

 if(screen_size<1200 && screen_size>=1000)
 {
   $("#block").width(1000);
 }
 else if(screen_size>=1900)
 {
   $("#block").width(1400);
 }

});

"block" to kontener. Stwierdziłem, że szerokość szablonu powinna wahać się w granicach od 1000 do 1400.
Chodzi mi o ocenę samej metody, bo później umieszczę to w konkretnej funkcji, żeby był porządek.

0

Przepraszam, że dopiero teraz...
Generalnie ok, ale ja jestem zwolennikiem zasady "Jeżeli da się coś zrobić poprzez css to zrób to cssem", a tutaj aż prosi się Media Query (Rozwiązanie nie działa na IE8 i starszych). Tu wyglądałoby to mniej więcej tak:

#block{width:900px}/*Wartość poniżej 1000px*/
@media screen and (min-width:1000px) {
    #block{width:1000px;} /*Szerokość powyżej 1000px*/
}
@media screen and (min-width:1200px) {
    #block{width:1000px;} /*Szerokość powyżej 1200px*/
}
@media screen and (min-width:1400px) {
    #block{width:1000px;} /*Szerokość powyżej 1400px*/
}

Poza tym, nie wiem czy to zamierzone, ale Twój if obsługuje tylko wartości od 1000 do 1200 i powyżej 1900. A co z wartościami mniejszymi niż 1000 i z przedziału 1200 a 1900?

0

@Tomek89Tar Zadałem to pytanie również na innym forum i tam otrzymałem tą samą radę :)
W skrypcie wszystko jest zamierzone. Uważam, że mało kto ma już monitor o szerokości <1000, a na tabletach, smartfonach i tak użytkownicy będą musieli "przesuwać" stronę. Dla wartości z przedziału od <1200;1900) szerokość kontenera wynosi standardowo 1200px.

1 użytkowników online, w tym zalogowanych: 0, gości: 1