CCS zijkant voor een gedeelte wit

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ed Jeurissen

Ed Jeurissen

07/09/2022 18:25:30
Quote Anchor link
IK heb een site gemaakt die naar meerdere sub-tites verwijst. Bij voldoende verwijzigingen wordt het groen (dat is wat ik wil). Als er te weinig zijn blijft het wit. Is er een oplossing voor?

Plaatje:

Afbeelding

Code:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
html {
    height: 100%;
}

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

#container {
    height: 100%;
}

#sidebar {
    background-image: url(backgroundgreen.png);
    display: inline-block;
    vertical-align: top;
    height: 100%;
    width: 18%;
    overflow: auto;
}

#content {
    background-image: url(backgroundgreen.png);
    display: inline-block;
    vertical-align: top;
    height: 100%;
    width: 82%;
    overflow: auto;
}

ul
{
    list-style: none;
    width: 100%;
    background-color: #f1f1f1;
    margin: 0;
    padding: 0;
    height: 100%;
}
    
li a
{
    text-decoration: none;
    color: white;
    background-color: #1ebb90;
    font-size: 18px;
    display: block;
    padding: 10px 20px;
    border-bottom: 1px solid black;
}
.active
{
    background-color: blue;
}
li a: :hover
{
    background-color: yellow;
}


Toevoeging op 07/09/2022 18:25:59:

https://ibb.co/RSTg3K0
Gewijzigd op 08/09/2022 13:45:49 door - Ariën -
 
PHP hulp

PHP hulp

01/11/2024 02:00:58
 
- Ariën  -
Beheerder

- Ariën -

07/09/2022 22:14:15
Quote Anchor link
je plaatje werkt niet. Ik vermoed dat je een website-URL gebruikt ipv een afbeelding-URL.
 
Ed Jeurissen

Ed Jeurissen

08/09/2022 13:37:21
Quote Anchor link
Plaatje zou opgelost moeten zijn. Mijn PHP werkt om een heel boek op mijn website zetten!
 
- Ariën  -
Beheerder

- Ariën -

08/09/2022 13:46:08
Quote Anchor link
Nu werkt het plaatje wel. Je moet niet linken naar een website die het plaatje toont.
Het lijkt erop dat je een wit veld er tussen hebt zitten, want eronder is het weer groen?

Ik denk dat het zinvoller is om een mock-up te tonen in JSfiddle? Dan kunnen de situatie makkelijker zien.
Gewijzigd op 08/09/2022 13:47:48 door - Ariën -
 
Ed Jeurissen

Ed Jeurissen

08/09/2022 14:10:26
 
- Ariën  -
Beheerder

- Ariën -

08/09/2022 14:25:13
Quote Anchor link
Ed Jeurissen op 08/09/2022 14:10:26:


Lees anders deze handleiding even.

PHP heeft hier niks mee te maken, de header-section is niet van belang, CSS kan in het CSS vak, eventuele Javascript kan in het Javasscript-vak. Voor de rest gaat het in deze JSFiddle sandbox goed, dus ik zie tot nu toe geen probleem.
Gewijzigd op 08/09/2022 14:27:51 door - Ariën -
 
Ed Jeurissen

Ed Jeurissen

08/09/2022 15:49:51
Quote Anchor link
Klopt ,in de sandbox gaat het goed. In het echt niet. Iemand wel een oplossing?
 
- Ariën  -
Beheerder

- Ariën -

08/09/2022 16:02:41
Quote Anchor link
Dat is heel gek, want een sandbox in JS Fiddle moet een gelijke representatie zijn van je probleem. Je zou dus kunnen concluderen dat er verschil in de code is.
 
Ed Jeurissen

Ed Jeurissen

08/09/2022 16:33:17
Quote Anchor link
Dat is het niet. Ik heb gewoon del hele css gekopieerd. Echter omdat ik de browser die ik normaal gebruik (Vivaldi) heb ik dit ook even in Firefox geprobeerd. Ook daar krijg ik dezelfde problemen. Echter als ik inzoopm dan verdwijnt het witte vlak en wordt weer groen.

Zie de plaatjes


Niet gezoomd:
https://ibb.co/RSTg3K0

Gezoomd:
https://ibb.co/C9bGgSn
 
- Ariën  -
Beheerder

- Ariën -

08/09/2022 16:57:37
Quote Anchor link
Heb je anders een mock-up in HTML?
Eigenlijk zou dit dan niet moeten afwijken van je mock-up in JSFiddle.
Ik blijf van mening dat er gewoon ergens iets mist. Want ik heb nog nooit meegemaakt dat beiden verschillend zijn.

Maar over zoomen gesproken:
Voor zover ik weet levert zoomen vaak problemen op omdat niet alles op een website vectorbased is.
Als je een zoom wilt aanbieden met toegankelijkheid als oogpunt, dan zou ik dit niet aanbevelen om dit via de browser te doen. Een mooie javascript-oplossing die de tekst vergroot is dan een beter alternatief.
Gewijzigd op 08/09/2022 16:59:40 door - Ariën -
 
Ed Jeurissen

Ed Jeurissen

08/09/2022 18:17:23
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
154
155
156
157
            <?php
            session_start();

            if(isset($_SESSION['username']))
            {

              echo '
            <!DOCTYPE html>
            <html>
            <head>
            <link rel="stylesheet" href="../../sidebar3.css">
            <link rel="icon" href="../../../../favicon.ico" type="image/x-icon"/>
            <title>Cartografie</title>
            </head>
            <body>
            <body>

            <div id="container">
              <div id="sidebar">
                
            <ul>

              <li><a href= "../../../../userhome.php">Home</a></li>
              <li><a href= "cartografieh0.php">Hoofdstuk 0 Preface</a></li>
              <li><a href= "cartografieh1.php">Chapter 1 Geographical Information Science and maps</a></li>
              <li><a href= "cartografieh2.php">Chapter 2 Data acquisition</a></li>
              <li><a href= "cartografieh3.php">Chapter 3 Map characteristis</a></li>
              <li><a href= "cartografieh4.php">Chapter 4 GIS applica?ons: which map to use?</a></li>
              <li><a href= "cartografieh5.php">Chapter 5 Map design and production</a></li>
              <li><a href= "cartografieh6.php">Chapter 6 Topography</a></li>
              <li><a href= "cartografieh7.php">Chapter 7 Sta?stical mapping</a></li>
              <li><a href= "cartografieh8.php">Chapter 8 Mapping time</a></li>
              <li><a href= "cartografieh9.php">Chapter 9 Maps at work: presen?ng and using geospatial data in maps and atlases</a></li>
              <li><a href= "cartografieh10.php">Chapter 10 Maps at work: analysis and geovisualization</a></li>
              <li><a href= "cartografieh11.php">Chapter 11 Cartography at work: maps as decision tools</a></li>

            </ul>
            <div id="sidebar-content" style="height: 50px"></div>
            </div><!--
            --><div id="content">
            <br>
            <h1>Preface</h1><br>
            <br>                                        
            <h2>Premises and objectives</h2><br>                              
            <br>                              
            This book explains how geospatial data can be visualized and analysed, and shows the background against which the provision and visualization of<br>                              
            geospatial information takes place. It provides awareness of the web both as a spatial data source and as a means for distributing the results of visualizing<br>                              
            this spatial information. As such the contents of this book have changed over time, in order to reflect IT developments: in the preface of the second edi-<br>                              
            tion, written at the beginning of 2002, we signalled the emergence of the World Wide Web as a prime geo-information source and dissemination<br>                              
            medium. Consequently we changed the focus of the book, and that proved to be a good move since the position of the web has strengthened and stabilized<br>                              
            itself. It also stimulated a more integrative approach to problem solving with geo-information (GIScience). Another development stimulated by the web<br>                              
            was the increased use of Spatial Data Infrastructures, for sharing national and global geodata with the professional and general public (under the motto<br>                              
            ‘collect once, use many times’). But the largest impact since the second edition of the book was published in 2002 probably has been the advent of<br>                              
            online mapping systems like Google Earth/Maps and Microsoft Virtual Earth. It is their worldwide detailed coverage and the ability for users to add<br>                              
            their own data that form the success factors of these products and that addicted so many people to maps.<br>                              
            The objective of the first edition ( 1996) of this book was to provide sufficient relevant knowledge of cartography for GIS users for the production and<br>                              
            use of effective visualizations of geospatial information. The further development of the Internet since 1996 has boosted the possibilities for interaction and<br>                              
            for querying the databases behind the maps presented there. The number of databases available via the web has increased dramatically and so has the abil-<br>                              
            ity to interact with them (query, process, etc.) online. Maps have acquired an important interface function in this new cyberspace geo-information distribu-<br>                              
            tion environment. If map-making with GIS mainly involved geo-professionals, the World Wide Web potentially allows everyone having access to this new<br>                              
            medium to create maps. The focus of the second edition changed into the provision of sufficient rel-<br>                              
            evant knowledge of cartography/geovisualization concepts and techniques to those accessing the World Wide Web for the production and use of effective vi-<br>                              
            sualizations of geospatial infonnation. Since the World Wide Web is highly interactive, and since it allows one to integrate data files, and to link distributed<br>                              
            databases, this makes maps suitable instruments for exploring these databases. In this third edition we have restructured the content soithat it re?ects the new<br>                              
            status of the web from the start and especially in the main theoretical chapters of the book.<br>                              
            <br>                              
            <h2>Book history and acknowlegdements</h2><br>                              
            <br>                              
            Much of the design processes advocated in this book are still based on the inspiration provided by Jacques Bertin’s book Semiology of Graphics (1983). He<br>                              
            wrote the original French version in 1967 in order to improve the printed maps he was confronted with in the media. The media have changed, and the web is<br>                              
            our new medium now, but the basic cartographic design rules still apply in the new interactive visualization of geospatial data for the World Wide Web.<br>                              
            The first, 1996, edition of this book was developed from a textbook (Cartography: Design, Production and Use of Maps) for cartography students<br>                              
            in the Netherlands, published by Delft University Press in 1993. Since then a Polish edition has been published (1998) and a second edition of the Dutch ver-<br>                              
            sion (1999). Each of these editions in?uenced the subsequent editions in other languages; a Russian translation was published in 2005, followed by an<br>                              
            Indonesian translation in 2007; a digital Japanese edition is planned as well. An inexpensive English edition for the South East Asian market is already in its<br>                              
            second printing. The illustrations in these books were produced by practical cartographers from Del? and Utrecht Universities; the illustrations of the pres-<br>                              
            ent edition have been based on them but have been re-processed and updated by Wim Feringa of ITC, the International Institute for Geolnformation Science<br>                              
            and Earth Observation in Enschede, the Netherlands. Though the book has many references to developments outside the European<br>                              
            Union, most of the cartographic examples refer to Maastricht, the municipality where the treaties were signed in 1992 that led to the introduction of the euro<br>                              
            a decade later. The colour illustrations have a more international outlook. In order not to break the line of thought in the text ovennuch, some coloured<br>                              
            illustrations in the colour sections have also been rendered in black and white in their proper place in the text.<br>                              
            <br>                              
            <h2>Structure</h2><br>                              
            <br>                              
            The book has three distinctive parts. The first five chapters offer the context and basics of maps. The second three (Chapters 6, 7 and 8) each deal with the<br>                              
            components of geospatial data: location, attribute and time. The last three chapters deal with ‘maps at work’ and demonstrate how maps can assist in<br>                              
            problem solving and decision making. These parts are structured as follows: we first discuss in Chapter 1 the place of the map and mapping in the geo-<br>                              
            information enviromnent (GIS, GIScience, and the geospatial data infrastructure, of which the World Wide Web fomis an ever more important part). Then<br>                              
            we show how data are collected (Chapter 2) and present the concepts that are valid in mapping and GIScience (Chapters 3 and 4), Chapter 5 deals with the<br>                              
            necessary analysis of geospatial data prior to their visualization and also offers some basics of map production.<br>                              
            Location is the focus of Chapter 6. It deals with the characteristics of the base map (reference system, projection, relief portrayal and generalization).<br>                              
            Chapter 7 shows the visualization options of attribute data (thematic map types). Chapter 8 discusses the temporal component of geospatial data. From<br>                              
            Chapter 9 onwards the subject matter becomes more advanced: at work with maps and atlases (Chapter 9), at work with maps in a highly interactive geovi-<br>                              
            sualization environment (Chapter 10), and finally in Chapter 1 1 at work with maps for decision-making in a wider context.<br>                              
            <br>                              
            <h2>Updating and access</h2><br>                              
            <br>                              
            As we have rewritten the text in order to accommodate new generations of web browsers, we also use the prime function of the web to keep this book up to<br>                              
            date. Apart from the web, every chapter has its section on books for further reading, while all the references to printed literature are grouped together at the back.<br>                              
            From a society that was used to having free access to printed maps we have evolved to a society used to having free access to geospatial data and maps on<br>                              
            the World Wide Web. Everyone can process and visualize the geospatial data available there and put the resulting maps on the World Wide Web in turn<br>                              
            there is no quality standard against which the material is checked first, before incorporation is permitted, which is acceptable because the very impact of the<br>                              
            web stems from the fact that it is a free medium. But geo-professionals — and cartographers belong to this group » have the responsibility of convincing as<br>                              
            many as possible to keep the tenets of good and responsible design while visualizing the geospatial data, in order to support the process of spatial decision-<br>                              
            making; this refers to a large part of all the cybernetic processes. The decisions based on visualized geospatial data are only as good as the data and the visualizations themselves.<br>                              
            <br>                              
            Menno-Jan Kraak<br>                              
            Ferjan Orrneling<br>                              
            July 2009<br>                              
            <br>                              
            <h1>Acknowledgments</h1><br>                              
            <br>                              
            We are grateful to the following for permission to reproduce copyright material:<br>                              
            <br>                              
            <b>Figures</b><br>                              
            <br>                              
            Figure l.2 adapted from Visualization in Modern Cartography: Setting the Agenda, Pergamon (MacEachren, A. and Taylor, D.R.F. (eds) 1994), copyright<br>                              
            © Elsevier Limited, 1994; Figure 1.9 after ‘GIS Cartography: visual decision support for spatio-temporal data handling’, International Journal of Geo-<br>                              
            graphic Information Systems, 9(6), pp. 637%45 (Kraak, M.J., Muller, J.C. and Ormeling, F.J. 1995), copyright © Taylor & Francis, http://wwwinformaworld.<br>                              
            com; Figure 2.2 after ‘Designing interactive cartographic systems using the concepts of real and virtual maps’, Proceedings of the Sixth International Sym-<br>                              
            posium on Automated Cartography, Auto-Carto 6 paper. Vol II, pp. 53-64 (Moellering, H. 1983), copyright © Auto Carto Six Organising Committee and<br>                              
            Professor Fraser Taylor, Carleton University in Ottawa, Ontario, Canada; Figure 2.4 from Figure 2 ‘British Isles’ and 2675 ‘English Channel’ Admiralty<br>                              
            Charts. UKI-IO (A00) e United Kingdom Hydrographic Office and Service Hydrographique et Océanographique de la Marine copyright © British Crown<br>                              
            copyright, reproduced by permission of the Controller of Her Majesty’s Stationery Office, the UK Hydrographic Off ice (www.ukho.gov.uk) and Service<br>                              
            Hydrographique et Océanographique de la Marine (not to be used for navigation); Figures 2.15 and 2.17 after ‘Klwaliteitsinformatie ter ondersteuning van<br>                              
            de integratie van ruimtelijke gegevens’, Geo-Informatie Nederland (formally Kartogra?sche Tijdschrift), 18(2), pp. 49-55 (I-lootsmans, R.M. and van der<br>                              
            Wel, F.J.M 1992), Dutch Cartographic Society (NVK); Figure 5.7 adapted from Semiology of Graphics (Bertin, Jacques) copyright © 1983 by the Re-<br>                              
            gents of the University of Wisconsin System, reprinted by permission of the University of Wisconsin Press; Figure 6.25 after Muller, J.C., Rybaczuk, K.<br>                              
            and Blakemore, M. (eds), 1991, 15th International Cartographic Conference Proceedings, Boumemouth, International Cartographic Association, Building<br>                              
            knowledge tanks for rule-based generalization, pp. 257—266, copyright © Intemational Cartographic Association; Figure 7.13 from ‘Een model voor de<br>                              
            keuze van vlaksymbolen, I, Geo-lnformatie Nederland (formally Kartogra?sche Tijdschrift), 13(4), pp. 22—27 (Geels, J.H. 1987), Dutch Society of Cartog-<br>                              
            raphy (NVK); Figure 7.16 from International Yearbook of Cartography, "Towards the improvement of the dot map", International Cartographic Associ-<br>                              
            ation (Dahlberg, R.E. 1967) pp.157-167, VII, copyright © International Cartographic Association; Figure 7.21 after Maps and Diagrams, Methuen<br>                              
            (Monkhouse, F.J. and Wilkinson, H.R. 1971), copyright © Taylor and Francis Books UK 1971; Figure 7.25 from Cartographic Relief Representation, W de<br>                              
            Gruyter (Imhof, E. 1982), copyright © Walter de Gruyter GmbH & C0. KG with K. G. Saur Verlag and Max Niemeyer Verlag; Figure 9.5 adapted from<br>                              
            ‘GIS cartography: visual decision support for spatio-temporal data handling’, International Journal of Geographic In?armation Systems, 9(6), pp. 637-645<br>                              
            <br>                              
            <br>
            <div id="main-content" style="height: 1800px"></div><br><br>
            








            <div id="main-content" style="height: 1800px"></div><br><br>


'
;
}

else
{
    echo "<script>location.href='inlog.php'</script>";
}

?>
<br>


Bedoel je dit?
 
- Ariën  -
Beheerder

- Ariën -

08/09/2022 18:52:56
Quote Anchor link
Heb je een link om dit te testen?
De PHP-code kan je hierin achterwege laten. Die is hier niet van toepassing op.
 
Jan Koehoorn

Jan Koehoorn

08/09/2022 19:46:20
Quote Anchor link
Dit is gek:
Ed Jeurissen op 08/09/2022 18:17:23:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
            <body>
            <body>


en dit ook (geen sluit-tags voor body en html):
Ed Jeurissen op 08/09/2022 18:17:23:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
            <div id="main-content" style="height: 1800px"></div><br><br>


Ik zou dit:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
ul
{
    list-style: none;
    width: 100%;
    background-color: #f1f1f1;
    margin: 0;
    padding: 0;
    height: 100%;
}
    
li a
{
    text-decoration: none;
    color: white;
    background-color: #1ebb90;
    font-size: 18px;
    display: block;
    padding: 10px 20px;
    border-bottom: 1px solid black;
}


veranderen in dit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
ul
{
    list-style: none;
    width: 100%;
    background-color: #1ebb90;
    margin: 0;
    padding: 0;
    height: 100%;
}
    
li a
{
    text-decoration: none;
    color: white;
    background-color: #1ebb90;
    font-size: 18px;
    display: block;
    padding: 10px 20px;
    border-bottom: 1px solid black;
}
Gewijzigd op 08/09/2022 19:50:55 door Jan Koehoorn
 

09/09/2022 15:54:07
Quote Anchor link
Een idee is om in de browser de developer tools open te trekken (met de F12 toets in de meeste browsers), en het element te selecteren dat verkeerd op het scherm wordt getekend. Dan kan je bij de CSS eigenschappen zien hoe dat komt, en je kan de eigenschappen live veranderen en meteen zien of wat je doet resultaat heeft.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.