hi i have one image enter.jpg this is not coming in the middle of the i want it to come in the middle .how it will come to the middle .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#layout {
background:url("images/background/login_page.jpg") no-repeat scroll 0 0 #EEEEEE;
height:700px;
margin:0 auto;
padding:0;
width:1024px;
}
#gib_holder {
height:690px;
padding:5px;
}
.ui-corner-all {
-moz-border-radius:4px 4px 4px 4px !important;
}
.gib {
background-color:#EEEEEE;
height:624px;
overflow:hidden;
width:1014px;
}
#tb_navigate {
background:url("arrow.png") no-repeat scroll 0 0 transparent !important;
border:1px solid #FFFFFF;
float:right;
height:40px;
margin-top:-300px;
position:relative;
width:13px;
}
#gib_enterleave {
background:none repeat scroll 0 0 #000000;
display:none;
float:right;
margin-top:-628px;
opacity:0.4;
width:25px;
}
#tb_leave{
background-image:url(leave.png)!important;
}
#tb_enter{
background-image:url(enter.png)!important;
}
#tb_lock{
background-image:url(icon_lock.png)!important;
}
.gib_nav {
background-color:transparent;
background-repeat:repeat-x;
border:medium none;
cursor:pointer;
display:table-cell;
float:right;
height:624px;
position:relative;
top:50%;
vertical-align:middle;
width:25px;
}
</style>
</head>
<body>
<div id="layout">
<div id="gib_holder"><div id="gib_container"> <div id="gib_titlebar"></div>
<div class="gib-O gib" id="gib1">
<div id="title"><br></div>
<div style="float: left; width: 100px;" id="img"></div>
</div></div> </div>
<div style="display: block;" class="toolbar" id="toolbar">
<div id="tb_navigate" style="display: block;"></div>
<div id="gib_enterleave" style="display: block;">
<div class="gib_nav" id="tb_enter" style="display: block;"></div>
<div class="gib_nav" id="tb_leave" style="display: none;"></div>
<div class="gib_nav" id="tb_knock" style="display: none;"></div>
</div>
</div>
</div>
</div>
</body>
</html>
<script type='text/javascript'>
$(document).ready(function() {
});
</script>
Your html is a bit malformed. In particular, there are a bunch of </div> that don't seem to fit in.
Anyway, to center a background image, you can use background-position:
#tb_enter {
background-image: url(enter.png) !important;
background-position: center center;
}
Related
I referred CSS align that refers suggests to use auto margin for center align. I used it but it is not aligning on the center. I checked and verified that doctype is specified.
What is the missing point here?
Note: I am using relative positioning.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.headerAlert
{
float:left;
width: 100%;
/*border: 1px solid blue;*/
display: inline;
}
.logoContainer
{
float:left;
width: 50px;
/*height:250px;*/
display: inline;
}
.vrContainer
{
float:right;
/*border: 2px solid yellow;*/
display: inline;
}
.underlineHeader
{
clear:both;
display: block;
height:10px;
width:100%;
float:left;
background-color:#632C5A;
}
.alert
{
padding:50px 0 0 0px;
/*border:1px solid red;*/
clear:both;
display: block;
}
.messageContainer
{
width:400px;
border: 1px solid red;
float: left;
display: block;
margin: auto;
align: center;
}
.message
{
padding:10px 0 0 0px;
clear:both;
display: block;
font-weight:bold;
font-size:20px;
color:#632C5A;
}
.options
{
padding:20px 0 0 0px;
font-size:14px;
}
</style>
</head>
<body>
<form name="_ctl0" method="post" action="RedirectAlert.aspx" id="_ctl0">
<input type="hidden" name="__VIEWSTATE" value="dDw5NjYas=" />
<div id="header" class="headerAlert">
<div id="mainLogo" class="logoContainer">
<IMG alt="My Inc" src="images/logo.png">
</div>
<div id="vcontainer" class="vrContainer">
<IMG alt="VIT" src="images/logo_v.jpg">
</div>
<div id="underline" class="underlineHeader">
</div>
</div>
<div class="alert">
<div class="messageContainer">
<div class="message">
AVC Lts
</div>
<div class="options">
If you still want to use
<input type="submit" name="btnContinue" value="Continue" id="btnContinue" />
</div>
</div>
</div>
</form>
</body>
</html>
The problem is
.messageContainer {
float: left;
align: center;
}
Just remove those lines: float: left prevents margin: auto centering, and align: center is invalid.
Demo
".messageContainer" has all kinds of problems.
You're floating it left, which is why its off to the left
'align:center' isn't a thing. Use 'margin: 0 auto" instead
.messageContainer { margin: 0 auto; }
`align: center;` in CSS doesn't exist.
it is : text-align: center; to center text inside
or margin:auto; for a block element that has a width and do not : float , or be in absolute or fixed position
hi guys i am creating a website for one of my projects for college and i need some help as i have no idea of how i have done this haha. Basically i have two of the boxes are touching where i want a small gap in between them. Any help is appreciated.
Cheers in advance here is my code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style_sheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="top">
<div class="logo"> </div>
</div>
<div id="menu">
<div class="button"> Home </div>
<div class="button"> Destinations </div>
<div class="button"> Make A Booking </div>
<div class="button"> Things To Do </div>
<div class="button"> Contact Us </div>
</div>
<div id="box">
content here
</div>
<div id="deal_one">
</div>
</body>
</html>
CSS
#wrapper
{
width: 80%;
position:relative;
margin: 0 auto;
}
#top
{
width:100% ;
height:200px;
background-color:rgba(0, 95, 160, 1);
border:solid 2px black;
position:relative;
}
#menu {
width: 100%;
height: 150px;
background-color: #fff;
border: solid 2px black;
text-align:center;
position: relative;
display: inline-block;
}
#box {
width:100% ;
min-height:500px;
background-color:rgba(0, 95, 160, 1);
margin-top:0;
border:solid 2px black;
position:relative;
}
.button {
font-family:Verdana, Geneva, sans-serif;
font-size:15pt;
display:inline-block;
margin: 0 auto;
margin-left:5%;
margin-right:5%;
margin-top:4.5%;
}
.logo {
position:relative;
background-image:url(../Images/Logo%203.png);
background-size:650px;
width:500px;
height:900px;
top:-30%;
display:inline-block;
z-index:500;
margin: 0 auto;
background-repeat:no-repeat;
margin-left:-10%;
}
#deal_one {
width:350px;
height:300px;
background-color:rgba(0, 95, 160, 1);
border: solid 2px black;
position:relative;
}
Margin is the space outside of an element. You probably want to set that. You may also want to look into the box model:
When logged out, my page wrapper which is the very light grey background, expands 100% of the page, but once you log in it gets smaller and resizes to the width of the member bar...
TO TEST USER ACCOUNT BELOW:
http://creatorsparadise.herobo.com/
USERNAME: TEST
PASSWORD: TEST123
HTML FOR LOGGED OUT...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Creator's Paradise - Home</title>
<style type="text/css">
.auto-style1 {
text-decoration: none;
}
.auto-style2 {
border-width: 0px;
}
</style>
</head>
<body>
<div id="header">
<div id="logo" style="height: 75px">
<img src="images/logo.png" />
</div>
<div id="links1">
<ul id="topbar">
<li>home</li>
<li>forums</li>
<li>themes</li>
<li>codes</li>
<li>learn</li>
<li>more</li>
</ul>
</div>
<div id="member">
<center><div id="login">
<form action="" method="post">
<table cellpadding="2" cellspacing="2" style="height: 18px; width: 1000px;">
<tr>
<td colspan="2" style="height: 24px"><? if(!isset($_POST['login'])){?>
<? }else{ echo "".$final_report."";}?> </td>
<td width="80" style="height: 24px"><a class="userandpass">Username:</a></td>
<td width="180" style="height: 24px"><input type="text" name="username" size="25" maxlength="25"></td>
<td style="height: 24px"></td>
<td width="80" style="height: 24px"><a class="userandpass">Password:</a></td>
<td width="180" style="height: 24px"><input type="password" name="password" size="25" maxlength="25"></td>
<td style="height: 24px"> </td>
<td style="height: 24px"><input type="submit" name="login" value="Login" width="25px"/></td>
</tr>
<tr>
<td><br></td>
</tr>
</table>
</form>
</div>
</center>
</div>
</div>
<div id="wrapper">
<div id="core">
<div id="leftsend">
<div id="leftside">
</div>
<div id="rightside">
<a class="advertise">Partners</a>
<div class="clickable">
</div>
<div class="clickable1">
</div>
<div class="clickable2">
</div>
<div id="vertical_line_1">
</div>
</div>
</div>
</div>
<div id="barone">
</div>
</div>
<div id="footer">
<div id="infooter">
</div>
</div>
<div id="copyright">
<div id="incopyright">
<a class="copy">Copyright © 2013 CreatorsParadise.com</a>
</div>
</div>
</body>
</html>
HTML FOR LOGGED IN...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Creator's Paradise - Home</title>
<style type="text/css">
.auto-style1 {
text-decoration: none;
}
.auto-style2 {
border-width: 0px;
}
</style>
</head>
<body>
<div id="header">
<div id="logo" style="height: 75px">
<img src="images/logo.png" />
</div>
<div id="links1">
<ul id="topbar">
<li>home</li>
<li>forums</li>
<li>themes</li>
<li>codes</li>
<li>learn</li>
<li>more</li>
</ul>
</div>
<div id="member">
<ul id="loggedin">
<li>Members Area</li>
<li>Settings</li>
<li>Logout</li>
</ul>
</div>
<div id="wrapper">
<div id="core">
<div id="leftsend">
<div id="leftside">
</div>
<div id="rightside">
<a class="advertise">Partners</a>
<div class="clickable">
</div>
<div class="clickable1">
</div>
<div class="clickable2">
</div>
<div id="vertical_line_1">
</div>
</div>
</div>
</div>
<div id="barone">
</div>
</div>
<div id="footer">
<div id="infooter">
</div>
</div>
<div id="copyright">
<div id="incopyright">
<a class="copy">Copyright © 2013 CreatorsParadise.com</a>
</div>
</div>
</body>
</html>
BOTH USE THE SAME CSS FILE...
body{
background:#333333;
width:100%;
margin: 0 auto;
}
#header{
width:1100px;
height:110px;
margin:0 auto;
margin-bottom:20px;
}
#member{
width:100%;
height:32px;
margin:0 auto;
margin-top:21px;
border-top:2px solid #999999;
border-right:2px solid #999999;
border-left:2px solid #999999;
background-color:#575757;
}
.userandpass{
color:white;
font-family: "Arial";
font-size:15px;
}
.yep{
color:white;
font-family: "Arial";
text-decoration: none;
}
a{
color:red;
font-family: "Arial";
text-decoration: none;
}
#loggedin{
float:right;
margin-right:30px;
margin-top:5px;
}
#loggedin li{
display:inline;
margin-right:20px;
}
#loggedin li a{
display:inline;
color:white;
font-family: "Arial";
font-size:17px;
}
#loggedin a:hover{
display:inline;
color:#6ad5f1;
font-family: "Arial";
font-size:17px;
}
#logo{
margin-left:30px;
margin-top:25px;
}
#topbar{
float:right;
margin-right:30px;
}
#topbar li{
display:inline;
margin-right:20px;
}
#topbar li a{
display:inline;
color:white;
font-family: "Berlin Sans FB Demi";
font-size:22px;
}
#topbar a:hover{
display:inline;
color:#6ad5f1;
font-family: "Berlin Sans FB Demi";
font-size:22px;
}
#links1{
width:700px;
height:60px;
float:right;
margin-top:-65px;
}
#wrapper{
width:100%;
height:800px;
background-color:#F8F8F8;
border-top:2px solid #999999;
margin: 0 auto;
border-bottom:1px solid #999999;
}
#barone{
width:100%;
height:20px;
background: rgb(214,214,214); /* Old browsers */
background: -moz-linear-gradient(top, rgb(214,214,214) 86%, rgb(201,201,201) 96%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(86%,rgb(214,214,214)), color-stop(96%,rgb(201,201,201))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* IE10+ */
background: linear-gradient(to bottom, rgb(214,214,214) 86%,rgb(201,201,201) 96%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#c9c9c9',GradientType=0 ); /* IE6-9 */
border-bottom:1px solid #999999;
margin: 0 auto;
}
#footer{
width:100%;
height:250px;
background-color:#575757;
border-top:5px solid #999999;
border-bottom:1px solid #999999;
margin: 0 auto;
}
#copyright{
background:#333333;
width:100%;
height:4px;
margin: 0 auto;
}
#incopyright{
width:1050px;
height:4px;
margin:0 auto;
margin-bottom:20px;
}
.copy{
text-align:center;
color:white;
font-family: "Berlin Sans FB Demi";
font-size:15px;
margin-left:385px;
}
#core{
width:1120px;
height: 780px;
margin:0 auto;
margin-top:15px;
margin-bottom:25px;
}
div.clickable {
position:relative;
margin-left:35px;
margin-top:65px;
}
div.clickable a {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_1.png);
}
div.clickable a:hover {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_2.png);
}
div.clickable1 {
position:relative;
margin-left:35px;
margin-top:290px;
}
div.clickable1 a {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_1.png);
}
div.clickable1 a:hover {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_2.png);
}
div.clickable2 {
position:relative;
margin-left:35px;
margin-top:515px;
}
div.clickable2 a {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_1.png);
}
div.clickable2 a:hover {
position:absolute;
width:150px;
height:150px;
text-decoration:none;
background:url(images/square_advert_2.png);
}
#leftsend{
width:1080px;
height:760px;
margin:0 auto;
}
#rightside{
width:220px;
height:760px;
background:#EBEBEB;
float:right;
border: 1px solid #CFCFCF;
}
#vertical_line_1{
width:1px;
height:800px;
background:#B5B5B5;
float:right;
margin-right:240px;
margin-top:-530px;
}
.advertise{
font-family: Arial;
font-size: 18px;
font-weight: bolder;
color:#838383;
float:right;
margin-right:75px;
margin-top:20px;
text-decoration: underline;
}
#leftside{
width:815px;
height:770px;
float:left;
}
#premium{
margin-left:50px;
}
#login{
margin:0 auto;
margin-bottom:21px;
}
I DOUBT YOU WILL NEED THE PHP BUT HERE IT IS FOR LOGGED OUT
<? ob_start();session_start();include_once"config.php";
if(isset($_SESSION['username']) || isset($_SESSION['password'])){
header("Location: http://creatorsparadise.herobo.com/index_logged.php");
}else{
if(isset($_POST['login'])){
$username= trim($_POST['username']);
$password = trim($_POST['password']);
if($username == NULL OR $password == NULL){
$final_report.="<a class='yep'>Please fill out all fields or </a><a href='www.http://creatorsparadise.herobo.com/index_logged.php'>Register Here</a>";
}else{
$check_user_data = mysql_query("SELECT * FROM `members` WHERE `username` = '$username'") or die(mysql_error());
if(mysql_num_rows($check_user_data) == 0){
$final_report.="<a class='yep'>This username does not exist. </a><a href='http://creatorsparadise.herobo.com/index_logged.php'>Register Here</a>";
}else{
$get_user_data = mysql_fetch_array($check_user_data);
if($get_user_data['password'] != $password){
$final_report.="<a class='yep'>Your password is incorrect. </a><a href='http://creatorsparadise.herobo.com/index_logged.php'>Register Here</a>";
}else{
$start_idsess = $_SESSION['username'] = "".$get_user_data['username']."";
$start_passsess = $_SESSION['password'] = "".$get_user_data['password']."";
$final_report.="<a class='yep'>Wait one moment...</a> <meta http-equiv='Refresh' content='2; URL=http://creatorsparadise.herobo.com/index_logged.php'/>";
}}}}}
?>
PHP FOR LOGGED IN
<? ob_start(); session_start();include_once"config.php";
if(!isset($_SESSION['username']) || !isset($_SESSION['password'])){
header("Location: http://http://creatorsparadise.herobo.com/");
}else{
$user_data = "".$_SESSION['username']."";
$fetch_users_data = mysql_fetch_object(mysql_query("SELECT * FROM `members` WHERE `username`='".$user_data."'"));
}
?>
The problem is that you don't close #header, so #wrapper becomes its child instead of a sibling.
Then, add </div> just before <div id="wrapper"> to close <div id="header">
As stated by Oriol, you need to insert a closing DIV for your #header.
Here is where you will need to close the #header:
<div id="member">
<ul id="loggedin">
................
</ul>
</div>
</div> /*--------Missing closing div--------*/
<div id="wrapper">
<div id="core">
<div id="leftsend">
<div id="leftside"></div>
<div id="rightside">
http://jsfiddle.net/PRAPc/
I want a search icon like this rendered in the beginning of the textbox and I can't get the following to work. Please help.
html:
<body class="claro" data-maq-flow-layout="true" data-maq-comptype="desktop" data-maq-ws="collapse" style="margin-top:0" id="myapp" data-maq-appstates="{}">
<div id="top_bar">
<div style="width: 900px; height:50px; margin-left: auto; margin-right: auto;">
<a href="/" class="logo logo_a">
<div class="logo">
</div>
</a>
<div class="midArea_div">
<div class="searchBox_div">
<input type="text" data-dojo-type="dijit.form.TextBox" class="searchBox"></input>
</div>
</div>
</div>
</div>
<div id="top_bar_divider"></div>
<div data-dojo-type="dijit.layout.BorderContainer" persist="false" gutters="true" style="min-width: 1em; min-height: 1px; z-index: 0; width: 600px; height: 687px; margin-left: auto; margin-right: auto;" design="headline">
<div data-dojo-type="dijit.layout.ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity">
</div>
</div>
</body>
js:
require([
"dijit/dijit",
"dojo/parser",
"maqetta/space",
"maqetta/AppStates",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/TextBox"
]);
css:
html,body {
height: 100%;
width: 100%;
}
.logo_a{
background:url("icon1.png");
}
.logo{
width:60px;
height:50px;
display:inline-block;
vertical-align:middle;
}
.logo_a:active{
background-position:0 1px;
}
#top_bar{
padding:0px;
background: -webkit-linear-gradient(#464646, #121212);
background: -moz-linear-gradient(#464646, #121212);
background: -ms-linear-gradient(#464646, #121212);
background: -o-linear-gradient(#464646, #121212);
background: linear-gradient(#464646, #121212);
color: #ccc;
text-shadow:none;
height:50px;
width:100%;
}
#top_bar_divider{
background-color:#1ba0e1;
height:4px;
width:100%;
}
.searchBox{
height: 30px;
width: 400px;
padding-left:30px;
font-size:20px;
}
.searchBox_div{
display:inline-block;
verticle-align:middle;
background: #FFF url("http://app.maqetta.org/maqetta/user/CoQ/ws/workspace/project1/search_icon.png") no-repeat scroll 5px 6px;
}
.midArea_div{
margin-left: 100px;
verticle-align:middle;
display:inline-block;
}
.searchIcon{
}
Your current method doesn't work because the textbox is on top of its background so it isn't visible. You can do this using a pseudo-element on .searchBox_div (doesn't work in <= IE8).
jsFiddle
.searchBox_div {
position:relative;
}
.searchBox_div:before {
content:"";
display:block;
position:absolute;
background: url(http://app.maqetta.org/maqetta/user/CoQ/ws/workspace/project1/search_icon.png) no-repeat center center;
width:24px;
height:24px;
left:4px;
top:50%;
margin-top:-12px;
z-index:1;
}
Alternatively you could apply these styles to another div inside .searchBox_div to get around the IE8 issue at the cost of more markup.
jsFiddle
HTML
<div class="midArea_div">
<div class="searchBox_div">
<input type="text" data-dojo-type="dijit.form.TextBox" class="searchBox"></input>
<div class="overlay"></div>
</div>
</div>
CSS
.searchBox_div {
position:relative;
}
.overlay {
position:absolute;
background: url(http://app.maqetta.org/maqetta/user/CoQ/ws/workspace/project1/search_icon.png) no-repeat center center;
width:24px;
height:24px;
left:4px;
top:50%;
margin-top:-12px;
z-index:1;
}
I am having troubles aligning one of my divs in the center (horizontally), and another one of my divs in the center (vertically).
The Horizontal div, is the the wrapper for the middle section of the website (the buttons).
The vertical div is the wrapper for the "Eller" in between the buttons.
Http://wwww.vilduhelst.dk
I have already tried using the
"Margin: 0px auto;" property, without any result at all.
This is my CSS code:
body{
background: url(media/pattern.png);
}
.headerdiv{
text-align:center;
margin-top:50px;
width:223px;
height:121px;
background: url(media/logo.png) no-repeat bottom;
margin-left:auto;
margin-right:auto;
}
.topbardiv{
padding-top:60px;
text-align:center;
background: url(media/HeaderDepression_shadow.png) no-repeat bottom;
}
#buttons{
margin-top:100px;
width:100%;
height:227px;
text-align:center;
}
.buttonscontent{
width:90%;
margin: 0px auto;
}
.reddiv{
float:left;
display:inline;
background: url(media/RedButtonShadow.png) no-repeat bottom;
}
.redbutton{
background: url(media/RedButton.png) no-repeat bottom;
width:387px;
height:227px;
border:none;
display:inline;
margin-bottom:25px;
}
.redbutton:hover{
background: url(media/RedButtonHover.png) no-repeat bottom;
}
.redbutton:active{
background: url(media/RedButtonOnclick.png) no-repeat bottom;
}
.textdiv{
text-align:center;
float:left;
padding-left:30px;
padding-right:30px;
height:200px;
}
.textdivcontent{
background: url(media/Eller.png) no-repeat;
height:95px;
width:129px;
}
.bluediv{
display:inline;
float:left;
background: url(media/RedButtonShadow.png) no-repeat bottom;
}
.bluebutton{
background: url(media/BlueButton.png) no-repeat bottom;
width:387px;
height:227px;
border:none;
display:inline;
margin-bottom:25px;
}
.bluebutton:hover{
background: url(media/BlueButtonHover.png) no-repeat bottom;
}
.bluebutton:active{
background: url(media/BlueButtonOnclick.png) no-repeat bottom;
}
.footerseperation{
padding-top:175px;
text-align:center;
background: url(media/FooterSeperation.png) no-repeat bottom;
}
.copyright{
background: url(media/copyright.png) no-repeat bottom;
margin-left:auto;
margin-right:auto;
width:205px;
height:24px;
}
This is my HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title> Hvad vil du helst? - Dilemma</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="headerdiv">
</div>
<div class="topbardiv">
</div>
<div id="buttons">
<div class="buttonscontent">
<div class="reddiv">
<input type="button" class="redbutton" />
</div>
<div class="textdiv">
<div class="textdivcontent">
</div>
</div>
<div class="bluediv">
<input type="button" class="bluebutton" />
</div>
</div>
</div>
<div class="footerseperation">
</div>
<div class="copyright">
</div>
</body>
</html>