kan breedte van een div niet aanpassen
Ik merk dat het erg rustig is hier, maar ik probeer het toch. Ik kom helaas niet uit.
In een div heb ik 3 divs naast elkaar staan en dit gaat goed.
Alleen de breedte van de eerste div kan ik op geen enkele mogelijke manier aanpassen.
Link: http://hawarco.co/includes/applicatie8.PNG
Voor CSS gebruik ik de volgende 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#navigation {
float: left;
height: 50px;
width: 100%;
background: #FFCC33;
}
#nav{
float: left;
width: 100px;
border: 1px solid;
}
#search {
float: left;
width: 100px;
border: 1px solid;
}
#profile{
float: left;
width: 200px;
border: 1px solid;
}
float: left;
height: 50px;
width: 100%;
background: #FFCC33;
}
#nav{
float: left;
width: 100px;
border: 1px solid;
}
#search {
float: left;
width: 100px;
border: 1px solid;
}
#profile{
float: left;
width: 200px;
border: 1px solid;
}
Gewijzigd op 10/07/2017 13:10:25 door Mohamed nvt
Heb je ook de bijhorende html code?
Het initiële probleem heb ikzelf opgelost, want onderaan de CSS code stond nog een waarde en die heb ik aangepast.
En eigenlijk wil ik dat de eerste div automatisch groeit wanneer het nodig is. Momenteel heb ik 4 links in, maar het worden er uiteindelijk 6 links en de nav div mag andere divs niet overschrijden.
Tevens zou ik het fijn vinden als het vakje van een link mee groeit naarmate de grote van een tekst en dat gebeurt nu niet helaas..
Huidige lay-out: Link: http://hawarco.co/includes/applicatie9.PNG
HTML 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
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
<div id="navigation">
<div id="nav">
<ul>
<li id="home"><a href="../index.php">Home</a></li>
<li id="medicines"><a href="../medicines.php">Medicines »</a>
<ul>
<li><a href="../medicines.php">Medicines »</a>
<ul>
<li><a href="../med_insert.php">Insert Medicines</a></li>
</ul>
</li>
<li id="medcomp"><a href="../medicinescompanies.php">Medicines companies »</a>
<ul>
<li><a href="../medcom_insert.php">Insert medicines company</a></li>
</ul>
</li>
<li id="medcount"><a href="../medicinescountries.php">Medicines countries »</a>
<ul>
<li><a href="../medcountry_insert.php">Insert medicines countries</a></li>
</ul>
</li>
<li id="medsupplier"><a href="../medsuppliers.php">Medicines suppliers »</a>
<ul>
<li><a href="../medsuppliers_insert.php">Insert medicines supplier</a></li>
</ul>
</li>
</ul>
</li>
<li id="finance"><a href="../medicinesfinance.php">Finance</a></li>
<li id="reports"><a href="../medicinesreports.php">Reports</a></li>
</ul></div><div id="search">
<form action="medicinesreports.php" method="get">
<input type="text" name="search" placeholder="Search..."><button type="submit">Search</button>
</form></div>
<div id="profile"><p><?php
if(isset($_SESSION['user_id'])){
echo "Welcome " . $_SESSION['firstname'];
echo " ";
echo '<a href="logout.php">Logout</a>';
} else {
echo '<a href="login.php">Login</a>';
}
?>
</p></div>
</div>
<div id="nav">
<ul>
<li id="home"><a href="../index.php">Home</a></li>
<li id="medicines"><a href="../medicines.php">Medicines »</a>
<ul>
<li><a href="../medicines.php">Medicines »</a>
<ul>
<li><a href="../med_insert.php">Insert Medicines</a></li>
</ul>
</li>
<li id="medcomp"><a href="../medicinescompanies.php">Medicines companies »</a>
<ul>
<li><a href="../medcom_insert.php">Insert medicines company</a></li>
</ul>
</li>
<li id="medcount"><a href="../medicinescountries.php">Medicines countries »</a>
<ul>
<li><a href="../medcountry_insert.php">Insert medicines countries</a></li>
</ul>
</li>
<li id="medsupplier"><a href="../medsuppliers.php">Medicines suppliers »</a>
<ul>
<li><a href="../medsuppliers_insert.php">Insert medicines supplier</a></li>
</ul>
</li>
</ul>
</li>
<li id="finance"><a href="../medicinesfinance.php">Finance</a></li>
<li id="reports"><a href="../medicinesreports.php">Reports</a></li>
</ul></div><div id="search">
<form action="medicinesreports.php" method="get">
<input type="text" name="search" placeholder="Search..."><button type="submit">Search</button>
</form></div>
<div id="profile"><p><?php
if(isset($_SESSION['user_id'])){
echo "Welcome " . $_SESSION['firstname'];
echo " ";
echo '<a href="logout.php">Logout</a>';
} else {
echo '<a href="login.php">Login</a>';
}
?>
</p></div>
</div>
CSS 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
70
71
72
73
74
75
76
77
78
79
80
81
82
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
#navigation {
float: left;
height: 50px;
width: 100%;
background: #FFCC33;
}
#nav{
float: left;
width: 100px;
}
#search {
float: left;
width: 215px;
white-space:nowrap;
}
.search{
display:inline-block;
padding-top: 10px;
}
#profile{
float: right;
width: 200px;
border: 1px solid;
}
ul {
list-style: none;
}
ul li {
float: left;
padding-right: 1px;
position: relative;
}
ul a {
display: table-cell;
vertical-align: middle;
width: 150px;
height: 50px;
text-align: center;
background: #69C;
color: #fff;
text-decoration: none;
}
ul a:hover {
background: #09C;
font-weight: bold;
text-decoration: underline;
width:150px;
}
li > ul {
display: none;
position: absolute;
left: 0;
top: 100%;
}
li:hover > ul {
display: block;
opacity: 0.8;
}
li > ul li {
padding: 0;
padding-top: 1px;
}
li > ul li > ul {
left: 100%;
top: 0px;
padding-left: 1px;
}
li > ul li > ul li {
width: 100px;
}
li:hover > a {
background: #09C; }
/*
1. Get & set the width of your nav (inc. 1px padding-left)
2. Set the margin to auto (automatically centering the div to the parent, in this case, <body>)
3. Set overflow to visible (not needed, just a precaution to stop scrolling)
*/
#nav { width: 50%; overflow: visible; }
float: left;
height: 50px;
width: 100%;
background: #FFCC33;
}
#nav{
float: left;
width: 100px;
}
#search {
float: left;
width: 215px;
white-space:nowrap;
}
.search{
display:inline-block;
padding-top: 10px;
}
#profile{
float: right;
width: 200px;
border: 1px solid;
}
ul {
list-style: none;
}
ul li {
float: left;
padding-right: 1px;
position: relative;
}
ul a {
display: table-cell;
vertical-align: middle;
width: 150px;
height: 50px;
text-align: center;
background: #69C;
color: #fff;
text-decoration: none;
}
ul a:hover {
background: #09C;
font-weight: bold;
text-decoration: underline;
width:150px;
}
li > ul {
display: none;
position: absolute;
left: 0;
top: 100%;
}
li:hover > ul {
display: block;
opacity: 0.8;
}
li > ul li {
padding: 0;
padding-top: 1px;
}
li > ul li > ul {
left: 100%;
top: 0px;
padding-left: 1px;
}
li > ul li > ul li {
width: 100px;
}
li:hover > a {
background: #09C; }
/*
1. Get & set the width of your nav (inc. 1px padding-left)
2. Set the margin to auto (automatically centering the div to the parent, in this case, <body>)
3. Set overflow to visible (not needed, just a precaution to stop scrolling)
*/
#nav { width: 50%; overflow: visible; }
Gewijzigd op 10/07/2017 14:57:17 door Mohamed nvt
Misschien een print screentje maken?
Het probleem is dat je 'width' gebruikt waardoor alle elementen een vaste breedte krijgen. Je moet hier padding gebruiken. Ik heb je CSS volledig aangepast om ervoor te zorgen dat dit gebeurt en hier en daar wat optimalisatie gedaan zodat alles ook in zijn container blijft.
Hieronder mijn aangepaste 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
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
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
#navigation #nav, #profile {
background: #FFCC33;
}
#nav{
float: left;
width: 90%;
box-sizing: border-box; /*Maakt de #nav 90% breed en negeert hierbij de padding/border*/
}
#profile{
float: left;
width: 10%; /*10% + 90% van de #nav = 100%*/
box-sizing: border-box; /*Maakt #profile 10% breed en negeert hierbij de border*/
border: 1px solid;
}
#profile p {
margin:0;
}
#profile p a {
padding: 12.5px 25px; /*Maakt de breedte van het element dynamisch (eerder gebruikte je hier width)*/
text-align: center;
display: block;
}
li form {
margin-bottom: 0px;
}
li form input[type='text'], li form button {
padding: 13px;
}
ul {
list-style: none;
margin-top: 0px;
overflow: inherit;
}
ul li {
float: left;
padding-right: 1px;
position: relative;
}
ul li a {
padding: 12.5px 25px;
background: #69C;
color: #fff;
text-decoration: none;
display: inline-block;
}
ul li a:hover {
background: #09C;
}
li > ul {
display: none;
position: absolute;
padding-left: 0px;
}
li:hover > ul {
display: block;
}
li > ul li {
padding: 0;
padding-top: 1px;
}
li > ul li > ul {
left: 100%;
top: 0px;
padding-left: 1px;
}
li > ul li > ul li {
width: 100px;
}
li:hover > a {
background: #09C;
}
/*Maak het menu toegankelijk voor mobiel (je kunt geen hover gebruiken op een mobiel, het mooiste zou een javascript click event zijn voor de dropdowns) */
@media screen and (max-width: 768px){
#nav {
float: none;
}
ul {
padding-left: 0px;
}
ul > li {
float: none;
}
ul > li a {
padding: 12.5px;
width: 100%;
}
li > ul, li > ul > li {
position: relative;
}
li > ul li > ul {
left: auto;
}
#profile {
float: none;
width: 100%;
border: none;
}
}
background: #FFCC33;
}
#nav{
float: left;
width: 90%;
box-sizing: border-box; /*Maakt de #nav 90% breed en negeert hierbij de padding/border*/
}
#profile{
float: left;
width: 10%; /*10% + 90% van de #nav = 100%*/
box-sizing: border-box; /*Maakt #profile 10% breed en negeert hierbij de border*/
border: 1px solid;
}
#profile p {
margin:0;
}
#profile p a {
padding: 12.5px 25px; /*Maakt de breedte van het element dynamisch (eerder gebruikte je hier width)*/
text-align: center;
display: block;
}
li form {
margin-bottom: 0px;
}
li form input[type='text'], li form button {
padding: 13px;
}
ul {
list-style: none;
margin-top: 0px;
overflow: inherit;
}
ul li {
float: left;
padding-right: 1px;
position: relative;
}
ul li a {
padding: 12.5px 25px;
background: #69C;
color: #fff;
text-decoration: none;
display: inline-block;
}
ul li a:hover {
background: #09C;
}
li > ul {
display: none;
position: absolute;
padding-left: 0px;
}
li:hover > ul {
display: block;
}
li > ul li {
padding: 0;
padding-top: 1px;
}
li > ul li > ul {
left: 100%;
top: 0px;
padding-left: 1px;
}
li > ul li > ul li {
width: 100px;
}
li:hover > a {
background: #09C;
}
/*Maak het menu toegankelijk voor mobiel (je kunt geen hover gebruiken op een mobiel, het mooiste zou een javascript click event zijn voor de dropdowns) */
@media screen and (max-width: 768px){
#nav {
float: none;
}
ul {
padding-left: 0px;
}
ul > li {
float: none;
}
ul > li a {
padding: 12.5px;
width: 100%;
}
li > ul, li > ul > li {
position: relative;
}
li > ul li > ul {
left: auto;
}
#profile {
float: none;
width: 100%;
border: none;
}
}
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
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
<div id="navigation">
<div id="nav">
<ul>
<li id="home"><a href="#">Home</a></li>
<li id="medicines"><a href="#">Medicines»</a>
<ul>
<li><a href="#">Medicines»</a>
<ul>
<li><a href="#">Insert Medicines</a></li>
</ul>
</li>
<li id="medcomp"><a href="#">Medicines companies »</a>
<ul>
<li><a href="#">Insert medicines company</a></li>
</ul>
</li>
<li id="medcount"><a href="#">Medicines countries »</a>
<ul>
<li><a href="#">Insert medicines countries</a></li>
</ul>
</li>
<li id="medsupplier"><a href="#">Medicines suppliers »</a>
<ul>
<li><a href="#">Insert medicines supplier</a></li>
</ul>
</li>
</ul>
</li>
<li id="finance"><a href="#">Finance</a></li>
<li id="reports"><a href="#">Reports</a></li>
<li>
<form action="#" method="get">
<input type="text" name="search" placeholder="Search...">
<button type="submit">Search</button>
</form>
</li>
</ul>
</div>
<div id="profile">
<p>
<?php
if(isset($_SESSION['user_id'])){
echo "Welcome " . $_SESSION['firstname'];
echo " ";
echo '<a href="logout.php">Logout</a>';
} else {
echo '<a href="login.php">Login</a>';
}
?>
</p>
</div>
</div>
<div id="nav">
<ul>
<li id="home"><a href="#">Home</a></li>
<li id="medicines"><a href="#">Medicines»</a>
<ul>
<li><a href="#">Medicines»</a>
<ul>
<li><a href="#">Insert Medicines</a></li>
</ul>
</li>
<li id="medcomp"><a href="#">Medicines companies »</a>
<ul>
<li><a href="#">Insert medicines company</a></li>
</ul>
</li>
<li id="medcount"><a href="#">Medicines countries »</a>
<ul>
<li><a href="#">Insert medicines countries</a></li>
</ul>
</li>
<li id="medsupplier"><a href="#">Medicines suppliers »</a>
<ul>
<li><a href="#">Insert medicines supplier</a></li>
</ul>
</li>
</ul>
</li>
<li id="finance"><a href="#">Finance</a></li>
<li id="reports"><a href="#">Reports</a></li>
<li>
<form action="#" method="get">
<input type="text" name="search" placeholder="Search...">
<button type="submit">Search</button>
</form>
</li>
</ul>
</div>
<div id="profile">
<p>
<?php
if(isset($_SESSION['user_id'])){
echo "Welcome " . $_SESSION['firstname'];
echo " ";
echo '<a href="logout.php">Logout</a>';
} else {
echo '<a href="login.php">Login</a>';
}
?>
</p>
</div>
</div>
Het is het mooist als je voor mobile devices een jQuery .click() functie gebruikt omdat je op een mobiel device geen hover kan gebruiken.
Hopelijk helpt dit je een beetje op weg.
Sorry voor mijn late reactie, maar ik had het erg druk met andere dingen.
Heel erg bedankt voor je feedback en het probleem is opgelost.