afgeronde hoeken

Status
Niet open voor verdere reacties.
tg09492

tg09492

Gebruiker
Lid geworden
26 mei 2007
Berichten
21
ik heb een vraagje,
bestaat er ook een (simpele) code om de hoeken van je web-pagina af te ronden met css?
:D
 
Laatst bewerkt:
Plaatje maken: rond,
vierendelen
Opslaan als gif ivm transparantie.

n_dv000a.gif


Nu heb je voor iedere hoek een plaatje met afgeronde hoek.
Voorbeeld:
http://www.zeepoort.nl/phpupdate/

:cool:
 
Laatst bewerkt:
ik weet niet echt of dat lukt, want ik heb namelijk nogal een beknopte bron code :D

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 
    <head> 
<script language="JavaScript"> 

function blockError(){return true;}

window.onerror = blockError;

</script>
                
<script>  
<!--  
if (window.Event)   
  document.captureEvents(Event.MOUSEUP);   
 function nocontextmenu()    
{  
 event.cancelBubble = true  
 event.returnValue = false;  
  return false;  
}  
 function norightclick(e)   
{  
 if (window.Event)   
 {  
  if (e.which == 2 || e.which == 3)  
   return false;  
 }  
 else  
  if (event.button == 2 || event.button == 3)  
  {  
   event.cancelBubble = true  
   event.returnValue = false;  
   return false;  
  }  
 }  
 document.oncontextmenu = nocontextmenu;   
document.onmousedown = norightclick;   
 function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}

//-->   
</script>     
        <title> 
            Homepage 
        </title> 
<style type="text/css"> 
body {
background-attachment:fixed;
background-image:url("wallpaper1.png");
background-repeat: repeat-y;
background-color: #330000;
text-align: center;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

.container {
text-align: left; 
margin: 0 auto; 
width: 800px;
background-image: url("wallpaper1.png");
background-repeat: repeat-y;
border: solid 1px white;
} 

.header {
background-image:url("bannerr2.bmp");
height:113px;
border-bottom: solid 0px #CC0000;
}


.menu {
background-image:url("b_menu.png");
background-color: #CC0000;
float: left; 
width: 180px;
height: 699px;
}

.content { 
border-right: solid 5px #CC0000;
background-color: #000000;
padding: 4 0 3 180px; 
margin:0px; 
} 

.footer {
background-image:url("bg.png");
background-color: #000000;
clear: left; 
border: solid 0px #CC0000;
}

.linken{ 
border: solid 0px #000000; 
padding:2px; 
background-color: transparent; 
 font-size: 14px; 
  color: #FFFFFF; 
width:124px; 
dispaly:block; 
} 
</style> 
    </head> 
     
    <body> 
             
        <div class="container"> 
                     
            <div class="header">   
            </div> 
                         
            <div class="menu"> 
             

<HEAD> 
<script>

function hidestatus(){
window.status=''
return true
}

if (document.layers)
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT)

document.onmouseover=hidestatus
document.onmouseout=hidestatus
</script>


<TITLE>menu</TITLE> 
</HEAD>
<BODY BACKGROUND="**">  
<BODY BGCOLOR="#CC0000">
<center>
<P><BR>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <style type="text/css">

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	font-size: 80%;
	font-weight: bold;
	background-attachment:fixed;
background-image:url("wallpaper1.png");
	}
	
a:link {
	color: #FFFFFF;
	text-decoration: none;
	}
	
a:visited {
	color: #FFFFFF;
	text-decoration: none;
	}
	
a:hover, a:active {
	color: #CC0000;
	}
		
	
ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}
	
p {
	font-size: .9em;
	}
	
#menu {
	width: 150px;
	border: 0px solid #ccc;
	margin: 10px;
	}
	
#menu li a {
  	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
	}	
	
#menu li a:link, #menu li a:visited {
	color: #FFFFFF;
	display: block;
	background: url(menu.png);
	padding: 4px 0 0 10px;
	}
	
#menu li a:hover, #menu3 li a:active {
	color: #000000;
	background: url(menu.png) 0 -32px;
	padding: 4px 0 0 10px;
	}	

</style>
</head>
<body>
<CENTER>
<IMG SRC="menu1.gif" WIDTH=78 HEIGHT=23><BR>
</CENTER>
<BR>

<div id="menu">
		<ul>
			<li><a href="home.html" title="Home">Home</a></li><BR>
			<li><a href="overmij.html" title="alles Over Mij enz.">Over Mij</a></li><BR>
			<li><a href="school.html" title="alles over mijn School, resultaten enz.">School</a></li><BR>
			<li><a href="lol.html" title="voor leuke filmpjes en plaatjes">lol</a></li><BR>
<P><BR><P><BR>
<CENTER>
<IMG SRC="CONTACT.png" WIDTH=125 HEIGHT=23><BR>
</CENTER>
<BR>
			<li><a href="links.html" title="wat Links naar andere sites">Links</a></li><BR>
			<li><a href="MAILTO:tim_gortworst@hotmail.com" title="Mail mij">Mail Tim</a></li><BR>
			<li><a href="gastenboek.html" title="laat een berichtje achter">Gastenboek</a></li><BR>

<P><BR><P><BR>
<CENTER>
<IMG SRC="info.gif" WIDTH=66 HEIGHT=21><BR>
</CENTER>
<BR>

			<li><a href="sitemap.html" title="Sitemap van deze site">Sitemap</a></li><BR>
			<li><a href="website.html" title="Website credits">Website</a></li><BR>	
			
<P><BR><P><BR><P><BR><P><BR>





		</ul>
	</div>
</body>
</html>

       <BODY>
<a href="http://www.hotmail.com" class="link" title="hotmail" onmouseover="image1.src='vista21.png';"
onmouseout="image1.src='vista2.png';">
<img name="image1" src="vista2.png" border=0></a>
</BODY>                   
                             
            </div> 
                             
            <div class="content"> 
             
<STYLE type="text/css">
    BODY {scrollbar-3dlight-color:#CC0000;
           scrollbar-arrow-color:#FFFFFF;
           scrollbar-track-color:#CC0000;
           scrollbar-darkshadow-color:#FFFFFF;
           scrollbar-face-color:#000000;
           scrollbar-highlight-color:#FFFFFF;
           scrollbar-shadow-color:#CC0000}
  </STYLE>

<style>
<!--
BODY{
CURSOR: url(cursor3.cur);
}
-->
</style> 



<IMG SRC="home.png" WIDTH=300 HEIGHT=150></FONT>
            </B><FONT FACE=NORMAL><FONT FACE=Verdana><FONT SIZE=2><FONT COLOR="#FFFFFF"><BR>
                Welkom iedereen op mijn Homepage! Deze Site is in opdracht gemaakt van Informatica. Er staan een heleboel dingen op. 
je kunt onder andere mijn cijfers en rooster bekijken, maar ook nog wat vakantie foto's en grappige filmpjes. 
kijk gerust maar even rond.<P>
<CENTER>En als je opmerkingen hebt over mijn site, wat er bijvoorbeeld beter kan of mag. Laat dan een berichtje achter in het gastenboek of stuur me een mail.</CENTER>
                <br> <P><BR><BR><P><BR><P><br> <P><BR><BR><P><BR><P><br> <P><BR><BR><P><BR><P>
		<br> <P><BR><BR><P><BR><P><br> <P><BR><BR><P><BR><P>
                 <P><BR><P><BR><P><BR><BR><P><BR><P><BR>
                                 
            </div> 
                         
            <div class="footer"> <CENTER>
                
<script language="JavaScript1.2">
copyright=new Date();
update=copyright.getYear();

document.write("Copyright © 2006-"+ update + "    Tgortworst.nl.tt    All rights Reserved.");
</script>
                             
            </div> 
                 
        </div> 
         
    </body> 
</html>
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan