Rounded Corners CSS
Momenteel heb 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
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
.header{
position: fixed;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:5px solid #FF6600;
width:1340px;
background-color:#666;
color:#FFF;
display:block;
}
.header2{
position: fixed;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:5px solid #FF6600;
background-color:#666;
color:#FFF;
}
</style>
<div class="header">Test<div class="header2">Tekst</div></div>
.header{
position: fixed;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:5px solid #FF6600;
width:1340px;
background-color:#666;
color:#FFF;
display:block;
}
.header2{
position: fixed;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:5px solid #FF6600;
background-color:#666;
color:#FFF;
}
</style>
<div class="header">Test<div class="header2">Tekst</div></div>
De bedoeling is dat dit een vaste balk word met linkjes naar delen van de pagina (Daarom ook die posision). Echter is het de bedoeling dat het woord "Tekst" IN het andere gedeelte komt, zodat je dus een ronde hoek hebt met daarin een ronde hoek. Echter komt het nu onder elkaar te staan. Wat moet ik doen?
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
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 960px;
height: 35px;
margin: 20px auto;
list-style: none;
border-radius: 10px;
background-color: #666666;
}
ul li {
margin: 0;
padding: 0;
}
ul li a {
height: 35px;
float: left;
padding: 0 8px;
line-height: 35px;
border-radius: 10px;
}
ul li a:hover {
background-color: #CCCCCC;
}
</style>
* {
margin: 0;
padding: 0;
}
ul {
width: 960px;
height: 35px;
margin: 20px auto;
list-style: none;
border-radius: 10px;
background-color: #666666;
}
ul li {
margin: 0;
padding: 0;
}
ul li a {
height: 35px;
float: left;
padding: 0 8px;
line-height: 35px;
border-radius: 10px;
}
ul li a:hover {
background-color: #CCCCCC;
}
</style>
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<ul>
<li><a href="">Sample</a></li>
<li><a href="">Sample</a></li>
<li><a href="">Sample</a></li>
<li><a href="">Sample</a></li>
</ul>
<li><a href="">Sample</a></li>
<li><a href="">Sample</a></li>
<li><a href="">Sample</a></li>
<li><a href="">Sample</a></li>
</ul>
Gewijzigd op 17/02/2014 19:17:38 door Milo S
Dat is wat ik bedoel, bedankt!
Je weet bijvoorbeeld dat je een menu wilt maken, maar ook dat dat moet gaan gebeuren met HTML en CSS. Probeer die 3 zaken eens bij google "html css menu"? Dan krijg je echt duizende items die jou hadden kunnen helpen.
Want weet jij nu waarom hij nu wel werkt en bij jou niet? En waarom het nu een ongeordende lijst is i.p.v een div?
Probeer dat eens allemaal eens uit te zoeken en je kunt het de volgende keer zelf!
Het ging er vooral om dat er een round corner in een round corner kwam. Dit kon ik niet vinden waarna ik het hier heb gevraagd. Ik zal er even mee gaan puzzelen om te kijken hoe het in elkaar zit zodat ik het voortaan zelf kan. Nogmaals Bedankt!
De twee rounded corners had je natuurlijk al. Het geen wat ontbrak was de correcte HTML en de juiste CSS elementen om het horizontaal goed te krijgen...