Ronde border

Gestart doorJorzwa4 reacties33 weergaven

5 berichten · pagina 1 van 1

Jorzwa

Lid · Topicstarter

Berichten
1.644
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Ik heb een vraag hoe doe ik dat me content vak enzo ronde kantjes krijgen van plaats vierkant? mijn hele layout is in css bijna

style.css
Spoiler tonen
* {
    outline: none;
    border: 0;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

body {
    background: #dcf0f5 url( images/background.png ) repeat-x;
    text-align: center;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Arial, sans-serif;
    font-size: 12px;
    margin-bottom: 20px;
}

#container {
    width: 800px;
    text-align: left;
    margin: 0 auto;
}

#header {
    background: url( images/header.png ) no-repeat;
    width: 800px;
    height: 90px;
}

#top_menu {
    border-left: 1px solid #e6e6e6;
}

#top_menu ul {
    list-style-type: none;
}

#top_menu li {
    float: left;
    color: #737373;
    background: #FFFFFF url( images/menu_bg.png ) repeat-x;
    padding: 15px;
    padding-bottom: 14px;
    border-right: 1px solid #e6e6e6;
    border-left: 1px solid #FFFFFF;
    font-size: 13px;
}

#top_menu li:hover {
    background: #FFFFFF url( images/menu_bg_hover.png ) repeat-x;
}

#top_menu a, #top_menu a:hover, #top_menu a:visited {
    color: #737373;
}

#mid {
    margin-top: 10px;
    height: 200px;
    width: 800px;
}

#mid_text {
    margin-top: 10px;
    width: 535px;
    float: left;
}

#mid_text h3 {
    font-size: 36px;
    color: #1c88a4;
}

#mid_text p {
    font-size: 15px;
    color: #a1a1a1;
    margin-top: 10px;
    line-height: 25px;
}

#mid_img {
    float: right;
}

#content {
    background: #dcf0f5;
    padding-bottom: 12px;
}

#content_left {
    width: 215px;
    float: left;
}

.box {
    width: 190px;
    padding: 12px;
    padding-bottom: 0;
}

.box h3 {
    padding-left: 10px;
    line-height: 28px;
    font-size: 15px;
    color: #167b95;
    border-bottom: 1px solid #dcf0f5;
    background: #FFFFFF;
}

.box_text {
    font-size: 11px;
    color: #737373;
    line-height: 19px;
    background: #FFFFFF;
    padding: 10px;
}

select {
    background: url( images/input.png ) repeat-x;
    border-left: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 11px;
    color: #8a8a8a;
}

input[type="text"], input[type="password"] {
    background: url( images/input.png ) repeat-x;
    border-left: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 11px;
    color: #8a8a8a;
}

input[type="submit"], input[type="button"] {
    background: url( images/button.png ) repeat-x;
    border-left: 1px solid #1b809b;
    border-right: 1px solid #1b809b;
    padding: 4px;
    font-size: 11px;
    color: #FFFFFF;
}

textarea {
    border: 1px solid #d9d9d9;
}

a, a:hover, a:visited {
    color: #1c88a4;
}

a:hover {
    text-decoration: underline;
}

#content_right {
    float: left;
    width: 573px;
}

.box_c {
    width: 573px;
    margin-top: 12px;
}

.box_c h2 {
    padding-left: 10px;
    line-height: 28px;
    font-size: 15px;
    color: #167b95;
    border-bottom: 1px solid #dcf0f5;
    background: #FFFFFF;
}

.box_c_text {
    font-size: 11px;
    color: #737373;
    line-height: 19px;
    background: #FFFFFF;
    padding: 10px;
}

td.kop {
    background: #2f92ad;
    padding: 7px;
    color: #FFFFFF;
}

td.lb {
    background: #edf7f9;
    padding: 7px;
}

td.db {
    background: #dcf0f5;
    padding: 7px;
}
0
Berichten
832
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
deze 4 dingen toevoegen:
border-radius: xxpx;
-moz-border-radius: xxpx;
-khtml-border-radius: xxpx;
-webkit-border-radius: xxpx;
Merk wel op dat dit alleen in browsers met CSS3 werkt. Hierdoor zal het dus niet werken in IE(pukey).
Als je het echt wilt zodat het in elke browser werkt zul je toch met images moeten werken.
0
Berichten
93.699
Reputatie
0
Punten
1,27
Lid sinds
Laatst gezien
Je kan ook naar:
http://border-radius.com/

Daar kan je bij de hoeken invullen en krijg je de CSS biggrin
0
Jorzwa

Lid · Topicstarter

Berichten
1.644
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Ik had het al gevonden maar het werkt inderdaad niet in internet explorer. Ik zal toch maar even een nieuwe layout maken toch bedankt. Is er geen manier om het goed te laten werken in internet explorer zonder images?
0
Berichten
7.681
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Hoezo geen images??
Pakt een png. Is 100kb ofzo.
0

Jouw reactie

Deel je idee, stel een vraag of help een ander verder.

Editor laden…

Praat mee met de One2xs-community.

Inloggen om te reageren