Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
casa verde 2024

Intrerupator cu N - doza doar cu ...

Incalzire casa fara gaz/lemne

Incalzire in pardoseala etapizata
 Suprataxa card energie?!

Cum era nivelul de trai cam din a...

probleme cu ochelarii

Impozite pe proprietati de anul v...
 teava rezistenta panou apa calda

Acces in Curte din Drum National

Sub mobila de bucatarie si sub fr...

Rezultat RMN
 Numar circuite IPAT si prindere t...

Pareri brgimportchina.ro - teapa ...

Lucruri inaintea vremurilor lor

Discuții despre TVR Sport HD.
 

"Containere" cu un continut dinamic CSS HTML PHP MySQL

- - - - -
  • Please log in to reply
13 replies to this topic

#1
RpgBoy

RpgBoy

    Member

  • Grup: Members
  • Posts: 771
  • Înscris: 27.05.2011
Salut,

Dupa cum spune si titlul, vreau sa fac niste 'containere' / 'pozitii' pe site care sa aiba un continut dinamic.

De exemplu, daca extrag din baza de date, din coloana "nume", primele 3 randuri si le arat un browser, intr-un <p> </p> va arata asa:
Nume1
Nume2
Nume3

Dar vreau un fel de 'cutii', de ex (cele verzi):
[ http://s3.postimg.org/fqygffey7/containere.jpg - Pentru incarcare in pagina (embed) Click aici ]

Iar acestea sa contina fiecare cate un rand din baza de date.
Singura idee pe care o am este sa pun echo $var_nume; intr-un <div>, dar atunci imi afiseaza toate 3 randurile in acelasi div,

Va rog sa imi spuneti daca pot face asta cu HTML, CSS, PHP si MySQL, adica fara Ajax si Javascript...
Si sa imi dati o idee despre cum ar trebui sa gandesc toata chestia asta...

#2
yoshumi

yoshumi

    Junior Member

  • Grup: Members
  • Posts: 151
  • Înscris: 27.02.2009
Daca am inteles bine ce vrei, se poate face, gandestete ca la randuri si coloane, si folosestete de float in CSS.

#3
RpgBoy

RpgBoy

    Member

  • Grup: Members
  • Posts: 771
  • Înscris: 27.05.2011

 yoshumi, on 01 februarie 2014 - 17:57, said:

Daca am inteles bine ce vrei, se poate face, gandestete ca la randuri si coloane, si folosestete de float in CSS.
.container
{
float: left;
width: 200px;
}

.....
echo '<div class="container"> '.$nume.'</div>';


Dar se muta pe randul urmator daca nu are loc...nu vreau asta.. Si daca trebuie sa folosesc position: fixed, le afiseaza una peste alta...

Edited by RpgBoy, 01 February 2014 - 18:48.


#4
yoshumi

yoshumi

    Junior Member

  • Grup: Members
  • Posts: 151
  • Înscris: 27.02.2009
Atunci trebuie sa folosesti javascript, sa detectezi cat e fereastra de mare si sa pui la fiecare width diferit sau sa pui width-ul total al tuturor containerelor pe tag-ul care le tine pe toate.

#5
RpgBoy

RpgBoy

    Member

  • Grup: Members
  • Posts: 771
  • Înscris: 27.05.2011

 yoshumi, on 01 februarie 2014 - 18:51, said:

Atunci trebuie sa folosesti javascript, sa detectezi cat e fereastra de mare si sa pui la fiecare width diferit sau sa pui width-ul total al tuturor containerelor pe tag-ul care le tine pe toate.
Chiar nu se poate fara javascript?
Asa http://www.w3schools...ss3_column-rule este o solutie viabila?

Off.. o sa ma joc un pic cu mai multe optiuni, nu pot sa ma apuc de inca un limbaj pana nu ma descurc cu ce stiu momentan...Posted Image

Ince ceva: Cum se numeste ce imi trebuie? Ca sa stiu ce caut..Posted Image

Edited by RpgBoy, 01 February 2014 - 19:43.


#6
RpgBoy

RpgBoy

    Member

  • Grup: Members
  • Posts: 771
  • Înscris: 27.05.2011
.pagina {
  width: 500px ;
  margin-left: auto ;
  margin-right: auto ;
}
.nume{
	float: left;
	margin-right: 20px;
}


<div class = "pagina"><div class = "nume"> Nume </div></div>


Merge si cu CSS. Dar mai trebuie sa-l aranjez un pic...

#7
OriginalCopy

OriginalCopy

    I'm harmful, fear me please! :))

  • Grup: Senior Members
  • Posts: 27,268
  • Înscris: 10.08.2006

 RpgBoy, on 01 februarie 2014 - 20:28, said:

Merge si cu CSS. Dar mai trebuie sa-l aranjez un pic...
Asa. Nu te mai lua dupa sfaturi tampite gen recurgerea la javascript pentru toate nimicurile.

Dar de acum incolo vei folosi ariile corespunzatoare de pe aria Programming, nu vei indesa totul off-topic pe PHP.

#8
RpgBoy

RpgBoy

    Member

  • Grup: Members
  • Posts: 771
  • Înscris: 27.05.2011

 OriginalCopy, on 01 februarie 2014 - 20:36, said:

Asa. Nu te mai lua dupa sfaturi tampite gen recurgerea la javascript pentru toate nimicurile.

Dar de acum incolo vei folosi ariile corespunzatoare de pe aria Programming, nu vei indesa totul off-topic pe PHP.
Pff Posted Image  imi pare rau, ma tot gandeam la php (pentru ca am index.php si pentru inceput am crezut ca se rezolva din PHP tot ce am scris mai sus...)
De fapt.. Stiu ca probabil Javascript este cel mai indicat, dar ma grabesc cu un proiect si nu stiu JS Posted Image

Iar codul de mai sus, inca are o problema: float.
Daca il scot, nu mai le pune pe aceiasi linie. Daca il bag, nu pune continutul exact pe mijloc... Mai incerc..

Edited by RpgBoy, 01 February 2014 - 21:51.


#9
danutz0501

danutz0501

    Member

  • Grup: Members
  • Posts: 437
  • Înscris: 22.04.2008
Float e raspunsul. Cauta pe net ce inseamna un "grid" in css. Atasez un mic exemplu. Te joci cu el si vezi ce si cum.
<!DOCTYPE html>
<html>
<head>
<title>'containere' / 'pozitii'</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
section, header, footer, article, aside{
display: block;
}
#page{
width: 800px;
margin: 0px auto;
}
header, footer{
background-color: #ccc;
color: #fff;
height: 150px;
margin: 0px;
}
header h1{
font-size: 20px;
display: inline-block;
line-height: 22px;
margin: 25px 150px;
}
footer p{
padding: 50px;
}
.main{
background-color: #343434;
width: 100%;
margin: 0px auto;
position: relative;
border: 0px;
outline: 0px;
overflow: hidden;
z-index: 1;
}
.box{
margin:1%;
padding:5px;
display:inline-block;
float:left;
min-height:1px;
border:0px;
outline:0px;
text-align:left;
z-index:2;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing:border-box;
background-color: #fff;
width: 18%;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
		 .clearfix {
		 display: inline-block;
		 }
</style>
</head>
<body>
<section id="page">
<header><h1>Headerul sitului</h1></header>
<div class="main clearfix">
<div class="box">
	 Lorem Ipsum este pur şi simplu o machetă pentru text a industriei tipografice. Lorem Ipsum a fost macheta standard a
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
	 Lorem Ipsum este pur şi simplu o machetă pentru text a industriei tipografice.
</div>
<div class="box">
	 Lorem Ipsum este pur şi simplu o machetă pentru text a industriei tipografice. Lorem Ipsum a fost macheta
</div>
<div class="box">
	 Lorem Ipsum este pur şi simplu o machetă pentru text a industriei tipografice. Lorem Ipsum a
</div>
<div class="box">
	 Lorem Ipsum este pur şi simplu o machetă pentru text a industriei tipografice.
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<footer>
<p>Fooooooooooooooooooooooter :D</p>
</footer>
</section>
</body>
</html>


Edited by danutz0501, 02 February 2014 - 00:50.


#10
RpgBoy

RpgBoy

    Member

  • Grup: Members
  • Posts: 771
  • Înscris: 27.05.2011

 danutz0501, on 02 februarie 2014 - 00:48, said:

Cauta pe net ce inseamna un "grid" in css.
Multumesc mult, mult mult..
http://thisisdallas....io/Simple-Grid/ -> pentru cine mai are nevoie.

Edited by RpgBoy, 02 February 2014 - 15:49.


#11
MooF2010

MooF2010

    Senior Member

  • Grup: Senior Members
  • Posts: 5,306
  • Înscris: 24.05.2010
nu mai simplu

$data = array();
$query= mysql_query("bla bla bla'");
while($row = mysql_fetch_array($query))
{
$data[] = row['coloana'];
}
$de_afisat = implode(" ", $data);


iar in partea html sa ai doar

<p><?=$de_afisat?></p>



#12
RpgBoy

RpgBoy

    Member

  • Grup: Members
  • Posts: 771
  • Înscris: 27.05.2011

 MooF2010, on 04 februarie 2014 - 15:54, said:

nu mai simplu

$data = array();
$query= mysql_query("bla bla bla'");
while($row = mysql_fetch_array($query))
{
$data[] = row['coloana'];
}
$de_afisat = implode(" ", $data);


iar in partea html sa ai doar

<p><?=$de_afisat?></p>


Te referi sa pun automat x valori pe primul rand, dupa care sa mearga pe al doilea?
Problema e ca am mai multe pagini, pe prima pagina intra (de ex) 20 de iteme, 5 x 4. Pe a doua pagina intra de la 21 la 40...

Scuze..sunt cam incepator si nu prea am inteles codul tau Posted Image

Edited by RpgBoy, 04 February 2014 - 20:11.


#13
MooF2010

MooF2010

    Senior Member

  • Grup: Senior Members
  • Posts: 5,306
  • Înscris: 24.05.2010
cauti metoda de paginare unde selectezi din baza de date atatea elemente cate vrei sa afisezi.

apoi la afisare pui de exemplu

<div class="rand1"><div class="celula1"><?=$de_afisat[0]?></div><div class="celula2"><?=$de_afisat[1]?></div><div class="celula3"><?=$$de_afisat[2]?></div><div class="celula4"><?=$de_afisat[3]?></div><div class="celula5"><?=$de_afisat[4]?></div></div>
<div class="rand2"><div class="celula1"><?=$de_afisat[5]?></div><div class="celula2"><?=$de_afisat[6]?></div><div class="celula3"><?=$de_afisat[7]?></div><div class="celula4"><?=$de_afisat[8]?></div><div class="celula5"><?=$de_afisat[9]?></div></div>
<div class="rand3"><div class="celula1"><?=$de_afisat[10]?></div><div class="celula2"><?=$de_afisat[11]?></div><div class="celula3"><?=$de_afisat[12]?></div><div class="celula4"><?=$de_afisat[13]?></div><div class="celula5"><?=$de_afisat[14]?></div></div>
<div class="rand4"><div class="celula1"><?=$de_afisat[15]?></div><div class="celula2"><?=$de_afisat[16]?></div><div class="celula3"><?=$de_afisat[17]?></div><div class="celula4"><?=$de_afisat[18]?></div><div class="celula5"><?=$de_afisat[19]?></div></div>


toate astea pui intr-un div mare la modu <div id="content" ></div> unde ii dai pozitionare tot
celelalte rand1-4 si celula 1-5 le dai distante intre ele doar positionarea o lasi dupa elementul principal

alta metoda care nu prea este agreata pe aici ar fi cea cu tabele unde scapi de hoarda din css

Nu te mai gandi cum sa asezi totul pe mai multe pagini ci incearca sa te gandesti la o interogare care sa iti dea exact rezultatele necesare pe o pagina, iar acea interogare sa isi schimbe parametrii in functie de pagina pe care te afli.

Banuesc ca paginile la care te referi nu sunt reale(create manual)... ci sunt pagini la modul news.php?pag=1 , news.php?pag=2....

Edited by MooF2010, 04 February 2014 - 22:54.


#14
danutz0501

danutz0501

    Member

  • Grup: Members
  • Posts: 437
  • Înscris: 22.04.2008
Nu mai bine ai aratai sintaxa HEREDOC, decat sa ai arati cum sa dea 20 de echo.
http://www.tuxradar....cticalphp/2/6/3
Tabelele au fost gandite pt a afisa date tabelare, si nu pt a realiza layout-ul unei pagini.Daca pt asta le foloseste si el, nu cred ca cineva ar avea ceva impotriva lor. Si diferenta e ca div-urile pot fi mutate in pagina usor. Cu un tabel (table), nu ai optiunea asta de a aranja din css cum vrei tu.
Div class 1-4 poate fi doar o clasa si celula 1-5 tot o clasa in css, in exemplul tau:
.rand{
width: 100%;
}
.celula{
width 20%;
display:inline-block;
}

La asta se referea el, paginatie in php: http://code.tutsplus...h-php--net-2928

Anunturi

Bun venit pe Forumul Softpedia!

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate