Tijden veranderen
Automatisch CSS
Hoe zorg ik ervoor dat ik automatisch ervoor kan zorgen dat er een lijst wordt gemaakt van bepaalde elementen?
Dit is namelijk wat ik wil:
Ik ben bezig met een sociaal netwerkje. Ik ben nu bezig met het vrienden toevoegen. Als je een vriend toevoegt, gaat er een request naar degene met wie je bevriend wilt worden. Dit kennen jullie wel. Nu heb ik een requests pagina, maar hoe zorg ik ervoor dat alle requests die zijn aangekomen netjes onder elkaar komen te staan van nieuw naar oud. Hetzelfde heb ik ook nodig voor het berichten systeem van mijn site.
Bij elke request moet er een gebruikersnaam van de zender komen en twee buttons achter elke username, accept en decline.
Hoe kan ik dit doen?
Groet,
Piet
Een ORDER BY in de query?
Ik heb twee voorbeeld requests neergezet met twee verschillende divs. Er zijn twee onderdelen, username en twee buttons. Ik heb een div genaamd request1. Binnen deze div heb ik de username en de buttons gezet. In de div request 2 heb ik hetzelfde gedaan. Wat ik wil is dat ik één div maak, deze noem ik requests. Binnen deze div moeten alle requests keurig worden weergegeven.
De HTML:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!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="en" lang="en">
<head>
<title>Scrapll | Buddy Requests</title>
<link href="style_requests.css" type="text/css" rel="stylesheet"/>
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<meta name="description" content="Scrapll connects you to your friends! Join us today and share your most amazing moments with your friends and the world!" />
<meta name="revisit-after" content="1 day" />
<meta name="googlebot" content="noarchive" />
<meta name="google" content="notranslate" />
</head>
<body>
<div id="header"></div>
<div id="container" align="center">
<div id="logo_small"><a href="index.php"><img src="logo_small.png" border="0" alt="logo"></img></a></div>
<form action="search.php" method="post">
<div class="textfield_search">
<input type="text" name="search" class="textinput_search" value="search for friends" onblur="if (this.value == '') {this.value = 'search for friends';}" onfocus="if (this.value == 'search for friends') {this.value = '';}" />
</div>
<div id="search_button">
<input type="image" src="search_button.png" border="0" alt="search">
</div>
</form>
<div id="requests_text">Buddy Requests (<!-- here should come the number of requests -->2) </div>
<div id="username1"><a href="profile.php?uid=">Example</a></div>
<div id="accept1"><a href="accept.php"><img src="accept.png"></img></a></div>
<div id="decline1"><a href="decline.php"><img src="decline.png"></img></a></div>
<div id="username2"><a href="profile.php?uid=">Example</a></div>
<div id="accept2"><a href="accept.php"><img src="accept.png"></img></a></div>
<div id="decline2"><a href="decline.php"><img src="decline.png"></img></a></div>
<div id="links">
<a href="profile.php?uid=<br />
<b>Notice</b>: Undefined variable: _SESSION in <b>D:\Program Files\xampp\htdocs\scrapll\requests.php</b> on line <b>51</b><br />
">Profile</a>     
<a href="buddy_list.php">Buddies</a>     
<a href="logout.php">Logout</a>     
<a href="requests.php">Buddy Requests (<!-- here comes the number of requests -->0)</a>
</div>
<div id="footer">
<a href="about_us.html">About Us</a>     
<a href="help.html">Help</a>     
<a href="faq.html">FAQ</a>     
<a href="contact.html">Contact</a>     
<a href="http://www.sfinxnet.com/member/scrapll">Blog</a>     
<a href="jobs.html">Jobs</a>     
<a href="terms.html">Terms</a>     
<a href="privacy.html">Privacy</a>     
<a href="advertise.html">Advertise</a>     
<a href="developers.html">Developers</a>     
<a href="about_us.html"> 2011 Scrapll</a>     
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Scrapll | Buddy Requests</title>
<link href="style_requests.css" type="text/css" rel="stylesheet"/>
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<meta name="description" content="Scrapll connects you to your friends! Join us today and share your most amazing moments with your friends and the world!" />
<meta name="revisit-after" content="1 day" />
<meta name="googlebot" content="noarchive" />
<meta name="google" content="notranslate" />
</head>
<body>
<div id="header"></div>
<div id="container" align="center">
<div id="logo_small"><a href="index.php"><img src="logo_small.png" border="0" alt="logo"></img></a></div>
<form action="search.php" method="post">
<div class="textfield_search">
<input type="text" name="search" class="textinput_search" value="search for friends" onblur="if (this.value == '') {this.value = 'search for friends';}" onfocus="if (this.value == 'search for friends') {this.value = '';}" />
</div>
<div id="search_button">
<input type="image" src="search_button.png" border="0" alt="search">
</div>
</form>
<div id="requests_text">Buddy Requests (<!-- here should come the number of requests -->2) </div>
<div id="username1"><a href="profile.php?uid=">Example</a></div>
<div id="accept1"><a href="accept.php"><img src="accept.png"></img></a></div>
<div id="decline1"><a href="decline.php"><img src="decline.png"></img></a></div>
<div id="username2"><a href="profile.php?uid=">Example</a></div>
<div id="accept2"><a href="accept.php"><img src="accept.png"></img></a></div>
<div id="decline2"><a href="decline.php"><img src="decline.png"></img></a></div>
<div id="links">
<a href="profile.php?uid=<br />
<b>Notice</b>: Undefined variable: _SESSION in <b>D:\Program Files\xampp\htdocs\scrapll\requests.php</b> on line <b>51</b><br />
">Profile</a>     
<a href="buddy_list.php">Buddies</a>     
<a href="logout.php">Logout</a>     
<a href="requests.php">Buddy Requests (<!-- here comes the number of requests -->0)</a>
</div>
<div id="footer">
<a href="about_us.html">About Us</a>     
<a href="help.html">Help</a>     
<a href="faq.html">FAQ</a>     
<a href="contact.html">Contact</a>     
<a href="http://www.sfinxnet.com/member/scrapll">Blog</a>     
<a href="jobs.html">Jobs</a>     
<a href="terms.html">Terms</a>     
<a href="privacy.html">Privacy</a>     
<a href="advertise.html">Advertise</a>     
<a href="developers.html">Developers</a>     
<a href="about_us.html"> 2011 Scrapll</a>     
</div>
</body>
</html>
Mijn CSS:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
body {
margin: 0px;
background-color: #004962;
}
#header {
height: 71px;
position: absolute;
padding-top: 0px;
margin-left: 0px;
background-color: white;
margin-left: auto;
margin-right: auto;
width: 100%;
/* for IE */
filter:alpha(opacity=25);
/* CSS3 standard */
opacity:0.25;
}
#logo_small {
width: 142px;
height: 44px;
position: absolute;
margin-top: 17px;
margin-left: 0px;
}
#container {
width: 960px;
height: 800px;
padding-top: 0px;
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
height: 100%;
text-align: center;
}
.textfield_search
{
width: 196px;
height: 55px;
background: url(search_form.png) no-repeat;
float: left;
position: absolute;
margin-left: 187px;
margin-top: 13px;
}
.textinput_search
{
width: 174px;
height: 27px;
background: none;
border: none;
color: #000000;
font: Arial;
font-size: 14px;
color: grey;
margin-top: 7px;
margin-left: 10px;
margin-right: 10px;
}
#search_button {
height: 60px;
width: 60;
position: absolute;
margin-left: 388px;
margin-top: 13px;
}
#requests_text {
font-family: Arial;
font-size: 30px;
color: #FFFFFF;
position: absolute;
margin-left: 239px;
margin-top: 120px;
text-shadow: 0px 0px 3px#fff;
}
#username1{
font-family: Arial;
font-size: 22px;
color: #FFFFFF;
position: absolute;
margin-left: 239px;
margin-top: 185px;
}
#accept1 {
position: absolute;
margin-left: 470px;
margin-top: 180px;
}
#decline1 {
position: absolute;
margin-left: 556px;
margin-top: 180px;
}
#username2{
font-family: Arial;
font-size: 22px;
color: #FFFFFF;
position: absolute;
margin-left: 239px;
margin-top: 243px;
}
#accept2 {
position: absolute;
margin-left: 470px;
margin-top: 238px;
}
#decline2 {
position: absolute;
margin-left: 556px;
margin-top: 238px;
}
#links {
position: absolute;
margin-top: 25px;
margin-left: 498px;
font: Arial;
font-size: 16px;
color: white;
text-shadow: 0px 0px 3px#fff;
}
a:link {color: white; font-family: arial; font-size: 13; text-decoration: none; }
a:active {color: white; font-family: arial; font-size: 13; text-decoration: underline; }
a:visited {color: white; font-family: arial; font-size: 13; text-decoration: none; }
a:hover {color: white; font-family: arial; font-size: 13; text-decoration: underline; }
#footer {
width: 960px;
height: 22px;
position: absolute;
margin-top: 1300px;
margin-left: 0px;
font: Arial;
font-size: 16px;
color: white;
padding-bottom: 50px;
text-shadow: 2px 2px 3px #000;
}
#mobile {
margin-top: 71px;
float: right;
position: relative;
z-index: 999;
}
margin: 0px;
background-color: #004962;
}
#header {
height: 71px;
position: absolute;
padding-top: 0px;
margin-left: 0px;
background-color: white;
margin-left: auto;
margin-right: auto;
width: 100%;
/* for IE */
filter:alpha(opacity=25);
/* CSS3 standard */
opacity:0.25;
}
#logo_small {
width: 142px;
height: 44px;
position: absolute;
margin-top: 17px;
margin-left: 0px;
}
#container {
width: 960px;
height: 800px;
padding-top: 0px;
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
height: 100%;
text-align: center;
}
.textfield_search
{
width: 196px;
height: 55px;
background: url(search_form.png) no-repeat;
float: left;
position: absolute;
margin-left: 187px;
margin-top: 13px;
}
.textinput_search
{
width: 174px;
height: 27px;
background: none;
border: none;
color: #000000;
font: Arial;
font-size: 14px;
color: grey;
margin-top: 7px;
margin-left: 10px;
margin-right: 10px;
}
#search_button {
height: 60px;
width: 60;
position: absolute;
margin-left: 388px;
margin-top: 13px;
}
#requests_text {
font-family: Arial;
font-size: 30px;
color: #FFFFFF;
position: absolute;
margin-left: 239px;
margin-top: 120px;
text-shadow: 0px 0px 3px#fff;
}
#username1{
font-family: Arial;
font-size: 22px;
color: #FFFFFF;
position: absolute;
margin-left: 239px;
margin-top: 185px;
}
#accept1 {
position: absolute;
margin-left: 470px;
margin-top: 180px;
}
#decline1 {
position: absolute;
margin-left: 556px;
margin-top: 180px;
}
#username2{
font-family: Arial;
font-size: 22px;
color: #FFFFFF;
position: absolute;
margin-left: 239px;
margin-top: 243px;
}
#accept2 {
position: absolute;
margin-left: 470px;
margin-top: 238px;
}
#decline2 {
position: absolute;
margin-left: 556px;
margin-top: 238px;
}
#links {
position: absolute;
margin-top: 25px;
margin-left: 498px;
font: Arial;
font-size: 16px;
color: white;
text-shadow: 0px 0px 3px#fff;
}
a:link {color: white; font-family: arial; font-size: 13; text-decoration: none; }
a:active {color: white; font-family: arial; font-size: 13; text-decoration: underline; }
a:visited {color: white; font-family: arial; font-size: 13; text-decoration: none; }
a:hover {color: white; font-family: arial; font-size: 13; text-decoration: underline; }
#footer {
width: 960px;
height: 22px;
position: absolute;
margin-top: 1300px;
margin-left: 0px;
font: Arial;
font-size: 16px;
color: white;
padding-bottom: 50px;
text-shadow: 2px 2px 3px #000;
}
#mobile {
margin-top: 71px;
float: right;
position: relative;
z-index: 999;
}
Piet Jansen op 21/10/2011 14:35:22:
Nu heb ik een requests pagina, maar hoe zorg ik ervoor dat alle requests die zijn aangekomen netjes onder elkaar komen te staan van nieuw naar oud. Hetzelfde heb ik ook nodig voor het berichten systeem van mijn site.
Hoe bewaar je die requests / berichten? Ik neem aan in een database?
Kwestie van uitlezen en tonen.
Staat <b>Notice</b>: Undefined variable: _SESSION in <b>D:\Program Files\xampp\htdocs\scrapll\requests.php</b> on line <b>51</b><br />
">Profile</a>      echt in je html-code (of is dit de broncode van je pagina)?
Misschien dat het handiger is om (relevante!) code te plaatsen (requests.php, want daarin lijkt iets niet goed te gaan).
Het tonen lukt niet? Dat is toch in een while-loop de zaak echo-en? Daar heb je, op zich, geen css voor nodig, maar is gewoon php.
Die foutmelding in mijn vorige reactie: heb je daar al een verklaring/oplossing voor?
Gewijzigd op 21/10/2011 19:38:14 door Obelix Idefix
De code die ik gaf is slechts een html/css bestand. Het bevat geen PHP, dus het is nog inactief. Wat ik wil zeggen is dit:
Als je user generated content hebt, worden er dingen door gebruikers geplaatst. Het is aan de site om het te ontvangen, te selecteren uit een database en vervolgens in beeld te brengen. Het in beeld brengen gaat uiteraard met echo, maar het moet ook mooi vormgegeven zijn. Kijk maar naar dit forum. Als ik iets plaats, dan komt mijn avatar en de datum van plaatsing keurig aan de linkerkant in beeld. Daarnaast staat mijn bericht keurig tussen twee scheidingslijnen. Daarnaast hebben de berichten om en om een achtergrond kleur.
Wat er dus gebeurt is dat er met PHP content wordt opgehaald en het wordt netjes door html en css op beeld gezet. Ik wil dus dat er een gebruikersnaam, en keurig daarachter twee buttons komen, geordend van nieuw naar oud (oude verzoeken en nieuwe verzoeken). De verzoeken moeten een eindje van elkaar afstaan (100px).
Zo krijg je een mooi vormgegeven lijstje.
Hoe doe ik dit? Ervoor zorgen dat er een lijstje wordt gemaakt.
Hoe ziet het eruit?
http://i283.photobucket.com/albums/kk294/erols/resuests.png
Sorry dat ik eest zo onduidelijk was;)
Groeten,
Piet
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?php
$query= mysql_query("");
if($query){
echo '<ul>';
while($row = mysql_fetch_assoc($query)){
echo '<li class="request">'.$row['request'].'</li>';
}
echo '</ul>';
}
?>
$query= mysql_query("");
if($query){
echo '<ul>';
while($row = mysql_fetch_assoc($query)){
echo '<li class="request">'.$row['request'].'</li>';
}
echo '</ul>';
}
?>
En de rest css werk..
Gewijzigd op 22/10/2011 12:51:14 door gerhard l