Benim index.php CSS biçimlendirilmiş bir php ve javascript kodu demet, ve html içerir. CSS ile çok deneyimli değilim, ama bu html formun kullanılabilirliğini etkilemez sanmıyorum. İşte endeksi kodu:
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Untitled</title>
<meta name="description" content="Choose"/>
<meta name="keywords" content="choose "/>
<link rel="shortcut icon" href="http://i/favicon.ico">
<!--[if lt IE 7]>
<script type="text/javascript" src="FullPageBackgroundImage/js/mootools.js"></script>
<script type="text/javascript" src="FullPageBackgroundImage/js/core.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="content">
<div id="poll">
<form>
<input id="ch1" type="radio" name="choice" value="0" />
<label for="ch1">
<?php echo $current['choice1']; ?>
</label>
<br />
<input id="ch2" type="radio" name="choice" value="1" />
<label for="ch2">
<?php echo $current['choice2']; ?>
</label>
</form>
</div>
hello
</div>
</body>
</html>
And this is the CSS:
body {
background-color:#000;
background:#fff;
background-repeat: repeat-x;
background-attachment:fixed;
}
#top_header{
width:100%;
height:52px;
background:#FFF;
position:fixed;
left:0px;
top:0px;
z-index:-1;
}
#logo{
background-image:url('Images/web_buttons.jpg');
position:fixed;
top:3px;
left:0px;
width:366px;
height:45px;
}
#display{
background-image:url('Images/web_buttons.jpg');
background-position: 0px -40px;
position:fixed;
top:0px;
left:420px;
width:57px;
height:19px;
}
#display_divider{
background-image:url('Images/web_buttons.jpg');
background-position: -100px -45px;
position:fixed;
top:0px;
left:477px;
width:8px;
height:50px;
}
a.display_single{
background-image:url('Images/web_buttons.jpg');
background-position: 0px -80px;
position:fixed;
top:0px;
left:485px;
width:67px;
height:26px;
}
a:hover.display_single{
background-image:url('Images/web_buttons.jpg');
background-position: 0px -104px;
position:fixed;
top:0px;
left:485px;
width:67px;
height:26px;
}
a.display_multiple{
background-image:url('Images/web_buttons.jpg');
background-position: 0px -128px;
position:fixed;
top:26px;
left:485px;
width:86px;
height:26px;
}
a:hover.display_multiple{
background-image:url('Images/web_buttons.jpg');
background-position: 0px -152px;
position:fixed;
top:26px;
left:485px;
width:86px;
height:26px;
}
#view{
background-image:url('Images/web_buttons.jpg');
background-position: 0px -58px;
position:fixed;
top:0px;
left:620px;
width:37px;
height:19px;
}
#view_divider{
background-image:url('Images/web_buttons.jpg');
background-position: -100px -45px;
position:fixed;
top:0px;
left:657px;
width:8px;
height:50px;
}
a.view_WTFest{
background-image:url('Images/web_buttons.jpg');
background-position: 0px -178px;
position:fixed;
top:0px;
left:665px;
width:69px;
height:26px;
}
a:hover.view_WTFest{
background-image:url('Images/web_buttons.jpg');
background-position: 0px -204px;
position:fixed;
top:0px;
left:665px;
width:69px;
height:26px;
}
a.view_lamest{
background-image:url('Images/web_buttons.jpg');
background-position: 0px -228px;
position:fixed;
top:26px;
left:665px;
width:69px;
height:25px;
}
a:hover.view_lamest{
background-image:url('Images/web_buttons.jpg');
background-position: 0px -253px;
position:fixed;
top:26px;
left:665px;
width:69px;
height:25px;
}
a.view_latest{
background-image:url('Images/web_buttons.jpg');
background-position: 0px -275px;
position:fixed;
top:0px;
left:734px;
width:69px;
height:25px;
}
a:hover.view_latest{
background-image:url('Images/web_buttons.jpg');
background-position: 0px -300px;
position:fixed;
top:0px;
left:734px;
width:69px;
height:25px;
}
a.view_oldest{
background-image:url('Images/web_buttons.jpg');
background-position: 0px -323px;
position:fixed;
top:26px;
left:734px;
width:69px;
height:26px;
}
a:hover.view_oldest{
background-image:url('Images/web_buttons.jpg');
background-position: 0px -348px;
position:fixed;
top:26px;
left:734px;
width:69px;
height:25px;
}
a.submit_choices{
background-image:url('Images/web_buttons.jpg');
background-position: 0px -373px;
position:fixed;
top:3px;
right:3px;
width:164px;
height:41px;
}
a:hover.submit_choices{
background-image:url('Images/web_buttons.jpg');
background-position: -162px -373px;
position:fixed;
top:3px;
right:3px;
width:164px;
height:41px;
}
a.navigation_left{
background-image:url('Images/web_buttons.jpg');
background-position: 0px -413px;
position:fixed;
bottom:6px;
left:3px;
width:134px;
height:19px;
}
a:hover.navigation_left{
background-image:url('Images/web_buttons.jpg');
background-position: -134px -413px;
position:fixed;
bottom:6px;
left:3px;
width:134px;
height:19px;
}
a.navigation_right{
background-image:url('Images/web_buttons.jpg');
background-position: 0px -435px;
position:fixed;
bottom:6px;
right:3px;
width:104px;
height:19px;
}
a:hover.navigation_right{
background-image:url('Images/web_buttons.jpg');
background-position: -134px -435px;
position:fixed;
bottom:6px;
right:3px;
width:104px;
height:19px;
}
/*conten*/
#content{
position:relative;
top:55px;
z-index:-3;
}
Bu, ben sadece ikinci radyo düğmesini seçebilirsiniz, ilki seçilemez. Garip şey girişler arasında mola kaldırırsanız, mükemmel çalışıyor, olduğunu. Yoksa orada mola bırakın ve formdan sonra 'helloWorld kaldırmak', ve çok çalışıyor olabilir.
Herkes herhangi bir fikir ya da yanlış bir şey gördün mü? Ben birbirlerinin üstüne düğmeleri istiyorum ve ben altında başka bir metin olması gerekir ..
CSS kodu burada