Door
Mohamed nvt
op 10-07-2017 13:06
gewijzigd op 10-07-2017 13:10
3.257 views
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:
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
#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; }
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:
#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;
}
}
