kan breedte van een div niet aanpassen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mohamed nvt

Mohamed nvt

10/07/2017 13:06:20
Quote Anchor link
Hallo allemaal,

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)
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
#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;
}
Gewijzigd op 10/07/2017 13:10:25 door Mohamed nvt
 
PHP hulp

PHP hulp

29/03/2024 00:15:35
 
Danny von Gaal

Danny von Gaal

10/07/2017 13:57:11
Quote Anchor link
Hallo Mohamed,

Heb je ook de bijhorende html code?
 
Mohamed nvt

Mohamed nvt

10/07/2017 14:55:53
Quote Anchor link
Hi Danny,

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)
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
<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 &raquo;</a>
                        <ul>
                          <li><a href="../medicines.php">Medicines &raquo;</a>
                            <ul>
                              <li><a href="../med_insert.php">Insert Medicines</a></li>
                            </ul>
                          </li>
                          <li id="medcomp"><a href="../medicinescompanies.php">Medicines companies &raquo;</a>
                            <ul>
                              <li><a href="../medcom_insert.php">Insert medicines company</a></li>
                            </ul>
                          </li>
                          <li id="medcount"><a href="../medicinescountries.php">Medicines countries &raquo;</a>
                            <ul>
                              <li><a href="../medcountry_insert.php">Insert medicines countries</a></li>
                            </ul>
                          </li>
                          <li id="medsupplier"><a href="../medsuppliers.php">Medicines suppliers &raquo;</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)
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
#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; }
Gewijzigd op 10/07/2017 14:57:17 door Mohamed nvt
 
- SanThe -

- SanThe -

10/07/2017 15:02:54
Quote Anchor link
Als ik hier bovenstaande code gebruik krijg ik een andere layout dan jij laat zien.
 
Mohamed nvt

Mohamed nvt

10/07/2017 15:12:38
Quote Anchor link
Oh jah? welk lay-out krijg je te zien?
Misschien een print screentje maken?
 
Mitch PHP

Mitch PHP

10/07/2017 19:07:28
Quote Anchor link
het is inderdaad erg rustig hier, maar wie niet waagt wie niet wint. Ik zal bijna zeggen 'eindelijk weer eens iemand die hulp nodig heeft met CSS' :P

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)
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
    #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;
        }
    }


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
<div id="navigation">
    <div id="nav">
        <ul>
            <li id="home"><a href="#">Home</a></li>
            <li id="medicines"><a href="#">Medicines&raquo;</a>
                <ul>
                    <li><a href="#">Medicines&raquo;</a>
                        <ul>
                            <li><a href="#">Insert Medicines</a></li>
                        </ul>
                    </li>
                    <li id="medcomp"><a href="#">Medicines companies &raquo;</a>
                        <ul>
                            <li><a href="#">Insert medicines company</a></li>
                        </ul>
                    </li>
                    <li id="medcount"><a href="#">Medicines countries &raquo;</a>
                        <ul>
                            <li><a href="#">Insert medicines countries</a></li>
                        </ul>
                    </li>
                    <li id="medsupplier"><a href="#">Medicines suppliers &raquo;</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.
 
Mohamed nvt

Mohamed nvt

16/07/2017 10:24:06
Quote Anchor link
Hi Mitch PHP,

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.
 



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.