Avatar billede jansangill Nybegynder
24. juni 2007 - 17:29 Der er 15 kommentarer og
1 løsning

Runde hjørner.

Okay jeg har dette CSS:


.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;

}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
    display: block;
    width: 100px; /*Width of top level menu link items*/
    padding: 5px 10px;
    text-decoration: none;
    background: #000000 center center repeat-x;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-align: center;
    font-weight:800;
    border: 1px solid #FFFFFF;
    border-left-width:0px;
}
   
/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px solid #000000;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}

/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}


/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 160px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
background: #e3f1bd;
border-width: 0 1px 1px 1px;
}

.horizontalcssmenu ul li a:hover{
background: #C0BBBB center center repeat-x;
color:#FFFFFF;
font-weight:800;

}

.horizontalcssmenu ul li ul li a:hover{
background: #C0BBBB;
color:#FFFFFF;
font-weight:800;

}

.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
background: transparent url(menuarrow.gif) no-repeat center left;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
   
/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */



Mit problem er at jeg gerne vil have runde hjørner, men enhver forsøg af mig har fejlet.

Måske er der en der hurtigt kan give mig en hånd?

Alt hjælp vil være værtsat
Avatar billede mikkelk Nybegynder
24. juni 2007 - 17:33 #1
Prøv at søg lidt på google. Der er tonsvis af artikler om det.
Eks: http://www.html.it/articoli/nifty/index.html
Avatar billede Slettet bruger
24. juni 2007 - 17:33 #2
Her er hvordan det skal gøres, i ren CSS, som også kan valideres korrekt:
http://www.cssplay.co.uk/boxes/curves.html
:-)
Avatar billede jansangill Nybegynder
24. juni 2007 - 18:10 #3
jaa har søgt på google, men jeg syntes bare ikke det blev som det skulle. Men nu har jeg da muligheden for at prøve lidt frem og tilbage, selv om det ikke lige av den effekt jeg ville.
Avatar billede sibbelone Nybegynder
24. juni 2007 - 20:16 #4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Curved Corners</title>


<style type="text/css">

.curvy {position:relative; width:250px; background:#9caf9c; color:#000; margin:5em auto;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#9caf9c; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#9caf9c; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy p {position:relative; z-index:100; padding:5px 10px;}

</style>
</head>
<body>

<div class="curvy">
<em id="ctl"><b>&bull;</b></em>
<em id="cbl"><b>&bull;</b></em>
<em id="ctr"><b>&bull;</b></em>
<em id="cbr"><b>&bull;</b></em>
<p>I know it's been done before, but not this way!<br />A box with curved corners into which you can put text that goes right up to the corners.<br />
Again, no graphics were used in the making of this demonstration.<br />All it takes is four quadrants of a bullet point positioned absolutely in each corner (arial font this time as it's the safest one to use).</p>
</div>

</body>
</html>

Prøv at lege med ovenstående
Avatar billede sibbelone Nybegynder
24. juni 2007 - 20:17 #5
http://www.cssplay.co.uk/boxes/curves.html

der har de mange gode ting inde men man skal selv hente det ved at vise kode og så plugge det ud

så god fornøjelse
Avatar billede sibbelone Nybegynder
24. juni 2007 - 21:17 #6
siden gemmes som what ever

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Eksamen wi7 6 juni 2007</title>
<meta http-equiv="Content-Language" content="da" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="style/alink.css" />
<!--<link rel="stylesheet" type="text/css" href="style/round.css" />
<link rel="stylesheet" type="text/css" href="style/fieldset.css" />
-->



</head>
<body>



<div class="holder">



<!--indhold starter her og denne div er den der udvider -->
<div class="indhold">

<!--Toplogo starter herunder-->
<div class="toplogo">Toplogo</div>

<!--Vandrette menu starter her-->
<div class="menu"></div>


<!--Left starter her og kan bruges til alt mulig indhold-->
<div class="left">Venstre

</div><!--Left slutter her-->



<!--Contente starter her-->

<div class="content">


Indhold på siden sættes ind her
<div class="curvy">
<em id="ctl"><b>&bull;</b></em>
<em id="cbl"><b>&bull;</b></em>
<em id="ctr"><b>&bull;</b></em>
<em id="cbr"><b>&bull;</b></em>
<p>I know it's been done before, but not this way!<br />A box with curved corners into which you can put text that goes right up to the corners.<br />
Again, no graphics were used in the making of this demonstration.<br />All it takes is four quadrants of a bullet point positioned absolutely in each corner (arial font this time as it's the safest one to use).</p>
</div>


</div><!--Content slutter her-->




</div><!--Indhold slutter her-->



<div class="bund">Bund bjælke</div>


</div>
</body>
</html>
Avatar billede sibbelone Nybegynder
24. juni 2007 - 21:18 #7
så har du en sider der udvider sig hvis du sætte indold i og der er runde hjørner
Avatar billede sibbelone Nybegynder
24. juni 2007 - 21:19 #8
glemte css gemmes som style.css


body {
    Font-family: verdana;
    font-size: 11px;
    color: #000;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    background-color: #fff;}


   
   
/*Starter selv sideindelingen med de forskellige div boxe*/

/*heunder den box som centrere indholdet på siden*/
.holder {
    position: relative;
    width: 963px;
    height: 20px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    /*background-color: #fff;*/
   
    }
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .holder {
    min-height: 200px;
    height: auto;
    }

   
   
/*heunder den indhold hvor både left og content er inde i dette gør at siden udvider sig*/
.indhold {
    position: relative;
    float: left; 
    width: 957px;
    height: 300px;
    border: 3px solid #94aec4;
    background-color: #fff;
    background-color: #fff;}
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/   
html>body .indhold {
    min-height: 300px;
    height: auto;
    }

   
   
/*heunder den conten  hvor indhold på siden skal sættes ind*/
.content {
    position: relative;
    float: right;  /*skift right ud med left og divboxen vil stå i højre side men kræver at du også ændre .left, der skal float ændres til right*/
    width: 740px;
    height: 10px;
    padding: 10px;
    margin-top: 20px;
    background-color: #fff;}
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .content {
    min-height: 10px;
    height: auto;}   


/*heunder toplogo hvor du kan indsætte et bagrundsbilled*/   
.toplogo {
    position: relative;
    float: left;
    width: 957px;
    height: 90px;
    background-color: #fff;
    border-top: 1px solid #94aec4;
    /*herunder kan du indsætte toplogo
    background: url(../image/toplogo.jpg);
    background-repeat: repeat-y;*/}

/*heunder den menu der går på tværs af hele side, hvis du ikke vil have menuen der kan du bare undlade den på siden*/
.menu {
    position: relative;
    font-size: 11px;
    float: left;
    padding: 0px 0px 0px 10px;
    width: 947px;
    height: 20px;
    color: #fff;
    border-top: 1px solid #94aec4;
    background-color: #435a6e;
    display: inline;
    z-index: 200;}

/*heunder left indhold , her kan du evt lave menu*/   
.left {
    position: relative;
    float: left; /*skift left ud med right og divboxen vil stå i højre side men kræver at du også ændre content, der skal float ændres til left*/
    width: 155px;
    height: 500px;
    margin-right: 0px;
    padding: 5px;
    background-color: #bbb;*/}
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .left {
    min-height: 500px;
    height: auto;}
   

   
   
   
   
   
.bund {
    position: relative;
    font-size: 11px;
    float: left;
    width: 960px;
    height: 20px;
    text-align: center;
    margin-top: 10px; /*styre afstanden op til indhold sættes til 0 hvis man ikke ønsker afstand*/
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #94aec4;
    }
   
    .curvy {position:relative; width:250px; background:#9caf9c; color:#000; margin:5em auto;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#9caf9c; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy em b {position:absolute; font-size:150px; font-family:arial; color:#9caf9c; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy p {position:relative; z-index:100; padding:5px 10px;}
Avatar billede Slettet bruger
24. juni 2007 - 22:04 #9
jansangill:
Takker for points - jeg håber at du kan bruge koden, og få den justeret ind til netop dit behov/ønske. :-)

sibbelone:
Det var netop det link, jeg henviste til her: @24/06-2007 17:33:47
Avatar billede jansangill Nybegynder
24. juni 2007 - 22:09 #10
ja har fået det hele til at virke, men har ikke ovrbevist mig selv om at det fremmer et bedre layout endnu - det kommer vel:)
Avatar billede Slettet bruger
25. juni 2007 - 09:50 #11
jansangill:
Tja, det er jo en smagssag. Men det var jo det du ville?

sibbelone:
Synd at du har lavet al det arbejde med at poste koderne herind, uden at have set, at jeg allerede havde lagt samme svar.
Ide: Hvad med at vi deler points?
Avatar billede sibbelone Nybegynder
25. juni 2007 - 12:02 #12
ligeglad med point og jeg har det hele til at ligge copy paste,
så tage du bare alle point.
Avatar billede Slettet bruger
25. juni 2007 - 12:21 #13
sibbelone:
Ok, men så kan det jo være, at jeg hjælper dig en anden gang. :-)
Avatar billede Slettet bruger
25. juni 2007 - 12:22 #14
jansangill:
Forresten, så er der også denne her: http://www.cssplay.co.uk/boxes/chunky
Avatar billede kurdo Novice
25. juni 2007 - 12:57 #15
undskyld, jeg skriver lige herind. er det mig der er blend eller er der ikke nogen kode i http://www.cssplay.co.uk/boxes/chunky ?
Avatar billede sibbelone Nybegynder
26. juni 2007 - 14:03 #16
der er ikke noge kode du skal vis kilde og så selv finde det
men du kan også låne de koder som jeg har sat på denne side
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester