Achtergrond in DIV
Zoals de titel zegt, probeer ik een achtergrond in een DIV in te stellen. De text word uit een database gehaald die in de DIV komt en we moeten informatie over opleidingen doen en elke opleiding moet een andere achtergrondkleur hebben. Als je bijvoorbeeld <BODY BACKGROUND"bla.jpg"> erbij in de database zet verandert echt heel de pagina naar die achtergrond en niet alleen in die DIV. Ik weet wel hoe het komt, maar heb geen idee hoe ik moet fixen dat de achtergrond enkel in die DIV komt.
Iemand enig idee?
Alvast bedankt.
wat is je code tot nu toe..?
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?html
<html>
<head></head>
<body>
<div id="pagewrapper">
// je pagina hier
</div>
</body>
</html>
?>
<html>
<head></head>
<body>
<div id="pagewrapper">
// je pagina hier
</div>
</body>
</html>
?>
maak een div aan zoals id="pagewrapper" met bepaalde width en height. En daar werk je in. geef vervolgens de div met je CSS een
background-color of
background-image
of
andere methoden
Gewijzigd op 15/10/2010 16:34:00 door Karizma Yusuf
@karizma
Dat weet ik maar dan zit je vast aan een achtergrond en ik moet verschillende achtergronden hebben in een div. Als je bijvoorbeeld naar Informatica gaat ene rode achtergrond en naar bouwkunde een oranje. En alle tekst word uit een database gehaald.
Dit is mijn code tot nu toe:
Dit is mijn index.php
Code (php)
Dit is mijn css file
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
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
#websiteopm
{
border: 2px solid #000000;
width: 900px ;
height: 610px;
position: absolute;
left: 50%;
margin-left: -450px;
top: 0px;
}
.zoek
{
height: 80px;
width: 102px;
left: 738px;
top: 0px;
position: absolute;
background: #b7b721;
}
.banner
{
width: 740px;
height: 80px;
position: absolute;
top:0px;
left:50px;
background: #FFFFFF;
}
.mainscreen
{
top:115px;
position: absolute;
height: 475px;
width: 896px;
z-index: 500;
overflow: auto;
}
.dropdown
{
border: 3px groove #85b602;
width: 896px;
height: 30px;
position: absolute;
top:80px;
left: 0px;
z-index: 15000;
background: #b7b721;
}
.foot
{
width: 896px;
bottom: 0px;
position: absolute;
height: 17px;
left: 0px;
z-index: 1500;
background: #b7b721;
}
{
border: 2px solid #000000;
width: 900px ;
height: 610px;
position: absolute;
left: 50%;
margin-left: -450px;
top: 0px;
}
.zoek
{
height: 80px;
width: 102px;
left: 738px;
top: 0px;
position: absolute;
background: #b7b721;
}
.banner
{
width: 740px;
height: 80px;
position: absolute;
top:0px;
left:50px;
background: #FFFFFF;
}
.mainscreen
{
top:115px;
position: absolute;
height: 475px;
width: 896px;
z-index: 500;
overflow: auto;
}
.dropdown
{
border: 3px groove #85b602;
width: 896px;
height: 30px;
position: absolute;
top:80px;
left: 0px;
z-index: 15000;
background: #b7b721;
}
.foot
{
width: 896px;
bottom: 0px;
position: absolute;
height: 17px;
left: 0px;
z-index: 1500;
background: #b7b721;
}
en dit is mainscreen.php
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="mainscreen">
<?php
$var1 = $_GET['page'];
if(isset($_GET['page']))
{
$db = mysql_connect($host, $gebruiker, $wachtwoord );
mysql_select_db( $databasenaam );
$query = ' select tekst
FROM tekst
where naam = "'.mysql_real_escape_string($var1).'"';
$result = mysql_query( $query );
while ( $regel = mysql_fetch_array( $result ))
{
echo $regel['tekst'];
}
mysql_close($db);
}
?>
</div>
<?php
$var1 = $_GET['page'];
if(isset($_GET['page']))
{
$db = mysql_connect($host, $gebruiker, $wachtwoord );
mysql_select_db( $databasenaam );
$query = ' select tekst
FROM tekst
where naam = "'.mysql_real_escape_string($var1).'"';
$result = mysql_query( $query );
while ( $regel = mysql_fetch_array( $result ))
{
echo $regel['tekst'];
}
mysql_close($db);
}
?>
</div>
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
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
<?php
$achtergrondkleur = 0; // Div zetten
if(isset($_GET['page'])){
if($_GET['page'] == "home"){
$achtergrondkleur = "#000";
}
elseif($_GET['page'] == "info"){
$achtergrondkleur = "#FFF";
}
// en dan telkens doorgaan todat je alle kleurtjes van alle pagina's gezet hebt
}
else // de $_GET['page'] is onbekend
{
$achtergrondkleur = "#FFF"
}
}
else
{
// $_GET['page'] is niet gezet
$achtergrondkleur = "#FFF";
}
[/code]
en dan in je div:
[code]
<div style="background-color:<?php echo $achtergrondkleur; ?>">
// Inhoud van div
</div>
[/code]
$achtergrondkleur = 0; // Div zetten
if(isset($_GET['page'])){
if($_GET['page'] == "home"){
$achtergrondkleur = "#000";
}
elseif($_GET['page'] == "info"){
$achtergrondkleur = "#FFF";
}
// en dan telkens doorgaan todat je alle kleurtjes van alle pagina's gezet hebt
}
else // de $_GET['page'] is onbekend
{
$achtergrondkleur = "#FFF"
}
}
else
{
// $_GET['page'] is niet gezet
$achtergrondkleur = "#FFF";
}
[/code]
en dan in je div:
[code]
<div style="background-color:<?php echo $achtergrondkleur; ?>">
// Inhoud van div
</div>
[/code]
Karizma Yusuf op 15/10/2010 16:33:38:
andere methoden
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?html
<html>
<head></head>
<body>
<div id="pagewrapper">
// je pagina hier
</div>
</body>
</html>
?>
<html>
<head></head>
<body>
<div id="pagewrapper">
// je pagina hier
</div>
</body>
</html>
?>
andere methoden
Oeps!
Gewijzigd op 19/10/2010 14:46:00 door Dalando De Zuil
Edit:
Code (php)
1
2
3
4
5
2
3
4
5
<?php
header('Content-type: text/css');
# Dan kan je volgens mij hier je css bouwen... als ik mij niet vergis.
?>
header('Content-type: text/css');
# Dan kan je volgens mij hier je css bouwen... als ik mij niet vergis.
?>
Gewijzigd op 19/10/2010 15:13:31 door Milo S
Deel van mijn code
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
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
<div class="mainscreen">
<?php
$achtergrond = "";
if(isset($_GET['page'])) //voor alle pagina's kijken wat de GET is en daar doet die een bepaalde achtergrond bij.
{
if($_GET['page'] == "Welkom")
{
$achtergrond = "bg_school.jpg";
}
//informatica
elseif($_GET['page'] == "ialgemeen")
{
$achtergrond = "background_I.jpg";
}
elseif($_GET['page'] == "iopleiding")
{
$achtergrond = "background_I.jpg";
}
elseif($_GET['page'] == "iToekomst")
{
$achtergrond = "background_I.jpg";
}
elseif($_GET['page'] == "ilesvorm")
{
$achtergrond = "background_I.jpg";
}
elseif($_GET['page'] == "itabel")
{
$achtergrond = "background_I.jpg";
}
elseif($_GET['page'] == "iberoepen")
{
$achtergrond = "background_I.jpg";
}
else
{
$achtergrond = "bg_school.jpg"
}
else
{
//als er geen $_GET['page'] is
$achtergrond = "bg_school.jpg";
}
$var1 = $_GET['page'];
if(isset($_GET['page']))
{
$db = mysql_connect($host, $gebruiker, $wachtwoord );
mysql_select_db( $databasenaam );
$query = ' select tekst
FROM tekst
where naam = "'.mysql_real_escape_string($var1).'"';
$result = mysql_query( $query );
while ( $regel = mysql_fetch_array( $result ))
{
echo $regel['tekst'];
}
mysql_close($db);
}
?>
</div>
<?php
$achtergrond = "";
if(isset($_GET['page'])) //voor alle pagina's kijken wat de GET is en daar doet die een bepaalde achtergrond bij.
{
if($_GET['page'] == "Welkom")
{
$achtergrond = "bg_school.jpg";
}
//informatica
elseif($_GET['page'] == "ialgemeen")
{
$achtergrond = "background_I.jpg";
}
elseif($_GET['page'] == "iopleiding")
{
$achtergrond = "background_I.jpg";
}
elseif($_GET['page'] == "iToekomst")
{
$achtergrond = "background_I.jpg";
}
elseif($_GET['page'] == "ilesvorm")
{
$achtergrond = "background_I.jpg";
}
elseif($_GET['page'] == "itabel")
{
$achtergrond = "background_I.jpg";
}
elseif($_GET['page'] == "iberoepen")
{
$achtergrond = "background_I.jpg";
}
else
{
$achtergrond = "bg_school.jpg"
}
else
{
//als er geen $_GET['page'] is
$achtergrond = "bg_school.jpg";
}
$var1 = $_GET['page'];
if(isset($_GET['page']))
{
$db = mysql_connect($host, $gebruiker, $wachtwoord );
mysql_select_db( $databasenaam );
$query = ' select tekst
FROM tekst
where naam = "'.mysql_real_escape_string($var1).'"';
$result = mysql_query( $query );
while ( $regel = mysql_fetch_array( $result ))
{
echo $regel['tekst'];
}
mysql_close($db);
}
?>
</div>
en in mijn css heb ik nu:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
.mainscreen
{
top:115px;
position: absolute;
height: 475px;
width: 896px;
z-index: 500;
overflow: auto;
background-image:url(<?php echo $achtergrond ?>);
{
top:115px;
position: absolute;
height: 475px;
width: 896px;
z-index: 500;
overflow: auto;
background-image:url(<?php echo $achtergrond ?>);
het probleem is nu heb ik zelfde geen tekst meer en zie ik in die div niks anders dan wit....
iemand die mij kan helpen, ik begrijp er niks van ><.
Gewijzigd op 20/10/2010 15:00:54 door Bastiaan Kl
je sluit de echo niet af in de background image url, misschien dat daar de fout ligt...
lol... zulke dingen zie ik nooit >.< maar nee daar lag het niet aan :(.
w3 schools moet de url tussen single quotes die probeer is $pagina tussen quotes te gooien.
Toevoeging op 20/10/2010 15:58:43:
word niet afgesloten quotje te veel
volgens Toevoeging op 20/10/2010 15:58:43:
word niet afgesloten quotje te veel
Ik zat te denken is het omdat die kijkt of de GET wat is alleen later word de GET in een variabele gestopt (dat was werk van iemand anders :p). Dus moet ik niet gewoon overal:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
if($var1 == "Welkom")
{
$achtergrond = "bg_school.jpg";
}
elseif($var1 == "ialgemeen")
{
$achtergrond = "background_I.jpg";
// ga zo maar door
else
{
$achtergrond = "bg_school.jpg"
}
{
$achtergrond = "bg_school.jpg";
}
elseif($var1 == "ialgemeen")
{
$achtergrond = "background_I.jpg";
// ga zo maar door
else
{
$achtergrond = "bg_school.jpg"
}
Het is maar suggestie :).
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
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
<?php
// Database connectie importeren
require_once 'db_connect.php';
// Controleer of page gezet is
if( isset( $_GET['page'] ) ) {
// Query
$query =
"
SELECT
bg_color,
bg_image
pg_text
FROM
page
WHERE
pg_name = '" .mysql_real_escape_string( $_GET['page'] ). "'
";
// Resultaat van de query
$result = mysql_query( $query );
// Controleer of query gelukt is
if( !$result ) {
// Er is een fout opgetreden bij het uitvoeren van de query
echo 'Er is een fout opgetreden bij het selecteren van de pagina';
}
else {
// Controleer of er resultaat is
if( mysql_num_rows( $result ) != 0 ) {
// While loopje
while( $row = mysql_fetch_assoc( $result ) ) {
// Controleren of er een background kleur in de database is opgenomen
if( is_null( $row['bg_color'] ) ) {
// Geen achtrgrond kleur, kijken of er eventueel een achtergrond kleurtje in de database is opgenomen
if( is_null( $row['bg_image'] ) ) {
// Geen specifieke informatie over de achtergrond in de database gevonden. Standaard kleur instellen
$background = '#FF000'; // Standaard kleurtje ( rood )
// Controleren of er tekst in de database is opgenomen
if( !is_null( $row['pg_text']) ) {
// Weergeven van de tekst
echo $row['pg_text'];
}
else {
// Er is geen tekst gevonden
echo 'Geen tekst in de database gevonden';
}
}
else {
// Background instellen aan de hand van het plaatje wat is opgenomen in de database
$background = 'url(' .$row['bg_image']. ')'; // Repeat endergelijke zelf even regelen
}
}
else {
// Background instellen aan de hand van de kleur die in de database is opgenomen
$background = $row['bg_color'];
}
}
}
else {
// Er is geen resultaat voor deze pagina in de database gevonden
echo 'Er is geen resultaat in de database gevonden';
}
}
}
?>
// Database connectie importeren
require_once 'db_connect.php';
// Controleer of page gezet is
if( isset( $_GET['page'] ) ) {
// Query
$query =
"
SELECT
bg_color,
bg_image
pg_text
FROM
page
WHERE
pg_name = '" .mysql_real_escape_string( $_GET['page'] ). "'
";
// Resultaat van de query
$result = mysql_query( $query );
// Controleer of query gelukt is
if( !$result ) {
// Er is een fout opgetreden bij het uitvoeren van de query
echo 'Er is een fout opgetreden bij het selecteren van de pagina';
}
else {
// Controleer of er resultaat is
if( mysql_num_rows( $result ) != 0 ) {
// While loopje
while( $row = mysql_fetch_assoc( $result ) ) {
// Controleren of er een background kleur in de database is opgenomen
if( is_null( $row['bg_color'] ) ) {
// Geen achtrgrond kleur, kijken of er eventueel een achtergrond kleurtje in de database is opgenomen
if( is_null( $row['bg_image'] ) ) {
// Geen specifieke informatie over de achtergrond in de database gevonden. Standaard kleur instellen
$background = '#FF000'; // Standaard kleurtje ( rood )
// Controleren of er tekst in de database is opgenomen
if( !is_null( $row['pg_text']) ) {
// Weergeven van de tekst
echo $row['pg_text'];
}
else {
// Er is geen tekst gevonden
echo 'Geen tekst in de database gevonden';
}
}
else {
// Background instellen aan de hand van het plaatje wat is opgenomen in de database
$background = 'url(' .$row['bg_image']. ')'; // Repeat endergelijke zelf even regelen
}
}
else {
// Background instellen aan de hand van de kleur die in de database is opgenomen
$background = $row['bg_color'];
}
}
}
else {
// Er is geen resultaat voor deze pagina in de database gevonden
echo 'Er is geen resultaat in de database gevonden';
}
}
}
?>
Gewijzigd op 20/10/2010 16:33:43 door Niels K