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">
Related
My Divs are aligned perfectly. I am trying to add an image in the center div but as soon as I add the image the divs disappear and the image is not showing.
I am having the issue with adding the image, can someone please assist. Why is my image not showing whats wrong with my code?
<style>
.div_parent{
display:inline;
background-image: url('../images/image.jpg') top center no-repeat;"
}
.div_center {
width:300px;
float:left;
border-color:black;
border-style:solid;
border-width:3px;
height :700px
}
.div_right
{
background-color:#edeeef;
border-color:black;
border-style:solid;
border-width:3px;
width: 150px;
float:left;
height:100%
}
.div_left
{
background-color:#edeeef;
border-color:black;
border-style:solid;
border-width:3px;
width: 150px;
float:left;
height:100%
}
</style>
<div class="div_parent">
<div class="div_left">
<br /><br /><br /><br /><br /><br />
<FONT size="3" style="font-family:sans-serif ; color:red; text-align:center;" > <STRONG>Welcome to the Reporting Portal! </STRONG> </font><br />
<br />
<FONT size="2" style="font-family:sans-serif; text-align: left;">
Reports on this site are available as view-only or as an Excel download. </font>
</div>
<div class="div_center">
</div>
<div class="div_right">
<br /><br /><br /><br /><br /><br />
<FONT size="3" style="font-family:sans-serif ; color:red; text-align:center;" > <STRONG> We're Here to Help! </STRONG> </font><br /><br />
<FONT size="2" style="font-family:sans-serif; text-align:left;">
We're friendly and available to chat. Reach out to us anytime and we'll happily answer your questions.</br><br />
Supervisors should submit requests including specific fields and search criteria to us at Report Manager</a></font>
</div>
</div>
Have you tried something like this out?
.container {
width: 100%;
height: 50px;
display: inline-block;
}
.element__left,
.element__right,
.element__center {
height: 50px;
}
.element__left, .element__right {
width: 25%;
float: left;
background-color: grey;
}
.element__center {
width: 50%;
float: left;
background-color: green;
}
<div class="container">
<div class="element__left">
<div class="element__center">
<div class="element__right">
</div>
.divOuter{
display:inline;
text-align:center;
}
.divInner1{
border: 1px solid;
float:left;
width:150px;
height:150px;
margin-left:3px;
margin-right:3px;
}
.divInner2{
border: 1px solid;
float:left;
width:250px;
height:150px;
margin-left:3px;
margin-right:3px;
}
.divInner3{
border: 1px solid;
float:left;
width:150px;
height:150px;
margin-left:3px;
margin-right:3px;
}
<body>
<div class='divOuter'>
<div class='divInner1'>First DIV</div>
<div class='divInner2'>Second DIV</div>
<div class='divInner3'>Third DIV</div>
</div>
</body>
Lets try following way:
<!DOCTYPE html>
<html class="not-ie" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>aligning 3 divs with different widthst</title>
<style type="text/css">
* { padding:0; margin:0;}
body { font-family:Arial, Helvetica, sans-serif; color:#fff; font- size:16px;}
.div_parent { position:relative; width:100%; height:300px; overflow:auto; line-height:300px; text-align:center;}
.div_left { position:absolute; left:0; top:0; height:100%; background-color:#900; width:150px;}
.div_middle { position:absolute; left:150px; right:150px; top:0; height:100%; overflow:auto; background-color:#00F;}
.div_right { position:absolute; right:0; top:0; height:100%; background-color:#900; width:150px;}
</style>
</head>
<body>
<div class="div_parent">
<div class="div_left">width: 100px;</div>
<div class="div_middle">width: screen - 200px;</div>
<div class="div_right">width: 100px;</div>
</div>
</body>
</html>
I already make a form consist of two inputs (input text and input date) and a button. I design the form in Google Chrome.
Here it is :
After I finished the form, I'm trying to open the page in Mozilla Firefox Browser and I see that the date input is not date-formatted.
Like this :
This is my code
<!DOCTYPE HTML><HTML>
<body>
<!--NAVIBAR-->
<div class="container">
<div class="row">
<div class="col-md-3 no-float"><br>
<img src="img/logo-pln-persero.png" style="height:150px; margin-top:-40px;" ><hr>
<p class="navbar-font-gold">
<?php
$tgl_hari_ini = date('D, d M Y ');
echo $tgl_hari_ini;
?>
</p>
<div role="navigation">
<div class="navbar-main-collapsed">
<ul class="nav li navbar-stacked">
<li>
<a class="page-scroll" href="home.php">
<p class="navbar-font">HOME</p>
</a>
</li>
<li>
<a class="page-scroll" href="home.php?cek=logout">
<p class="navbar-font">LOG OUT</p>
</a>
</li>
</ul>
</div>
</div><hr>
<!-- Footer Starts -->
<div class="footer">
© Copyright 2015
</div>
<!-- # Footer Ends -->
</div>
<div class="col-md-9 no-float">
<div class="span">
<header><p class="font-header br1" align="center" style="padding-top:10px;">SISTEM PENGADAAN BARANG/JASA <br>UPT SULSELRABAR </p><hr></header>
<div class="form-thumbnail">
<form method="post">
<h3 style="font-weight:bold" align="center">Surat Kuasa Kerja</h3>
<div class="form-group">
Nomor SKK:
<input type="text" class="form-control" name="no_skk" placeholder="NO SKK" style="width:300px;"></input>
</div>
<div class="form-group">
Tanggal Masuk:
<input type="date" class="form-control" name="tgl_skk" style="width:200px;"></input>
</div>
<div class="form-group" align="center">
<button type="submit" class="btn btn-custom btn-default" name="btn_submit_skk" style="border-radius:0px"> Simpan </button>
</div>
</form>
<a class="page-scroll" href="kontrak-home.php?id=<?php echo $id;?>">
<span class="glyphicon glyphicon-arrow-left"></span> Back
</a>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</HTML>
and my head tag is :
<head>
<title>Edit Surat Kuasa Kerja</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
*
{
margin:0;padding:0;
}
html,body,.container
{
height:100%;
}
.container
{
display:table;
width: 100%;
margin-top: -50px;
padding-top: 50px;
padding-left:0px;
padding-right:0px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.font-header{
font-weight:bold;
color:gold;
font-size:48px;
line-height:50px;
}
.font-kontrak{
font-weight:bold;
color:black;
}
.font-progress>a:hover{
}
.thumbnail{
border-radius:0px 0px 0px 0px;
}
.footer {
position:absolute;
bottom:0px;
background-color: #3E4095;
height: 50px;/* or however high you would like */
color:gold;
font-weight:bold;
}
header
{
background:#820404;
height: 130px;
margin-left:-15px;
margin-right:-15px;
}
#br1
{
line-height:25px;
}
.col-md-3.no-float, .col-md-9.no-float {
float: none;
}
.col-md-3
{
display: table-cell;
background: #3E4095;
width: 25%;
}
.col-md-9
{
display: table-cell;
width: 75%;
height:100vh;
}
input[type=text]
{
border-radius:0px 0px 0px 0px;
}
input[type=password]
{
border-radius:0px 0px 0px 0px;
}
input[type=date]
{
border-radius:0px 0px 0px 0px;
}
.navbar-font
{
font-size:16px;
font-weight:bold;
color:white;
}
.navbar-font-gold{
font-size:16px;
font-weight:bold;
color:gold;
}
.nav li
{
line-height:15px;
}
.nav>li>a:hover
{
background-color:gold;
width:100%;
margin:0;
}
.p1{
line-height: 20px;
font-weight:bold;
font-size:24px;
}
.row
{
height: 100%;
display: table-row;
}
.col-special{
column-count:2;
-webkit-columns:2;
-moz-columns:2;
margin-left:6px;
}
.thumbnail{
border-radius:0px 0px 0px 0px;
border:none;
}
.form-thumbnail{
display: table;
background:#EEEEEE;
margin-top:10vh;
margin-left:40vh;
padding-bottom:30px;
padding-top:30px;
padding-left:70px;
padding-right:70px;
}
</style>
</head>
Can I Use: Date and time input types. Simply put, this is not widely supported. Using the native input type will currently not have a consistent behavior across browsers.
As far as I'm aware, input date types aren't supported by Firefox.
so I'm making linkboxes on a page, and they have to be grouped 2 by 2. This is what I've come up with so far. Now I want the linkboxes to auto center when the page stretches, but I still need them to float (so they jump into 1 line when the page is wide enough). Is there a way to do this with html/css?
I posted my wholed code so you can see everything (have no idea if some other display or float is causing the problem?)
body{
/*ozadje strani*/
background-image:url("images/background_test.jpg");
background-size:80%;
background-repeat:no-repeat;
background-position:50% 0%;
margin-top:5%;
/*krčenje strani*/
min-width:49.5em;
max-width:101em;
font-family:verdana;
color:#000000;
}
/*splošno linki*/
a:link {
text-decoration:none;
}
a:hover {
text-decoration:none;
font-weight:bold;
}
a:active {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
/*velikost celotne vsebine*/
.layout {
width:70%;
margin-left:15%;
margin-right:15%;
}
.bannerlayout {
text-align:center;
}
#ijs_logo {
display:inline-block;
}
#headersign {
display:inline-block;
vertical-align:top;
font-weight:bolder;
font-size:200%;
}
.topmenulayout{
text-align:center;
}
#topmenu {
width:100%;
display:inline-block;
background-color:#330033;
border-radius:10px;
opacity:0.8;
filter: alpha(opacity=40);
}
.menutext {
display:inline-block;
}
#linkijs {
float:left;
margin-left:5%;
color:#ffffff;
}
#linkeng {
float:right;
margin-right:5%;
color:#ffffff;
}
.content{
height:100%;
}
/*container za linkboxe*/
#linkpanel{
display:inline-block;
float:left;;
width:100%;
height:100%;
border-radius:10px;
}
.linkboxdivider {
margin:0 auto;
padding:0;
float:left;
display:inline-block;
width:35em;
height:17em;
}
.linkbox{
/*linkbox positinoning*/
margin:2%;
float:left;
display:inline-block;
/*style*/
border-radius:30px;
background-color:#ffcc99;
padding:1%;
width:15em;
height:15em;
opacity:0.7;
filter: alpha(opacity=40);
}
.linkboxtitle{
font-weight:bold;
font-size:120%;
margin-left:5%;
}
.linkboxlink {
color:#000000;
margin-left:5%;
}
.footerlayout{
text-align:center;
}
.footer {
width:100%;
display:inline-block;
background-color:#330033;
border-radius:10px;
opacity:0.8;
filter: alpha(opacity=40);
}
#tel{
float:left;
margin-left:5%;
display:inline-block;
color:#ffffff;
}
#delovnicas{
float:right;
margin-right:5%;
display:inline-block;
color:#ffffff;
}
/*napis pod footerjem*/
.underfooter {
width:100%;
padding:0;
font-size:90%;
}
#copyright {
float:left;
margin-left:5%;
display:inline-block;
padding:0;
margin-top:0;
}
#adminmail {
vertical-align:top;
float:right;
margin-right:5%;
display:inline-block;
padding:0;
margin-top:0;
}
#adminmaillink{
color:#000000;
padding:0;
margin-top:0;
}
<html>
<head>
<title>//</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="defsi.css"/>
</head>
<body>
<table class="layout">
<tr class="bannerlayout">
<td>
<img id="logo" src="images/ijs_logo.gif" alt="IJSlogo" />
<p id="headersign">//</p>
</td>
</tr>
<tr class="topmenulayout">
<td>
<div id="topmenu">
<p class="menutext" id="linkijs">//</p>
<p class ="menutext" id="linkeng">//</p>
</div>
</td>
</tr>
<tr class="content">
<td>
<div id="linkpanel">
<div class='linkboxdivider'>
<div class="linkbox" id="novosti">
<p class="linkboxtitle">NOVOSTI</p>
<p class="linkboxlink">e-knjige založbe Springer</p>
<p class="linkboxlink">nove elektronske revije</p>
<p class="linkboxlink">novi izvodi tiskanih revij</p>
<p class="linkboxlink">Science Classic</p>
</div>
<div class="linkbox" id="knjižnica">
<p class="linkboxtitle">KNJIŽNICA</p>
<p class="linkboxlink">predstavitev</p>
<p class="linkboxlink">COBISS</p>
<p class="linkboxlink">medknjižnična izposoja</p>
<p class="linkboxlink">bibliografije raziskovalcev</p>
</div>
</div>
<div class='linkboxdivider'>
<div class="linkbox" id="čitalnica">
<p class="linkboxtitle">ČITALNICA</p>
<p class=linkboxlink>elektronske revije</p>
<p class="linkboxlink">CD ROM-i</p>
</div>
<div class="linkbox" id="servisi">
<p class="linkboxtitle">SERVISI</p>
<p class=linkboxlink>splošno zanimivi</p>
<p class=linkboxlink>samo za lokalne uporabnike</p>
</div>
</div>
</div>
</td>
</tr>
<tr class="footerlayout">
<td>
<div class="footer">
<p id="tel">// <br />// </p>
<p id="delovnicas">// <br/> // </p>
</div>
</td>
</tr>
<tr class="underfooter">
<td>
<div class ="underfooter">
<p id="copyright">//</p>
<p id="adminmail">spletni mojster:<a id="adminmaillink" href = "mailto://#ijs.si"> av</a></p>
</div>
</td>
</tr>
</table>
</body>
</html>
.linkboxdivider {
margin: 0px auto;
padding: 0px;
float: left; //remove
display: inline-block; //remove
width: 35em;
height: 17em;
margin-left: auto; //add
margin-right: auto; //add
}
You must remove float: left and display: inline-block lines.
And you must add margin-left: auto and margin-right: auto;
i added all code.
<style>
body{
/*ozadje strani*/
background-image:url("images/background_test.jpg");
background-size:80%;
background-repeat:no-repeat;
background-position:50% 0%;
margin-top:5%;
/*krcenje strani*/
min-width:49.5em;
max-width:101em;
font-family:verdana;
color:#000000;
}
/*splošno linki*/
a:link {
text-decoration:none;
}
a:hover {
text-decoration:none;
font-weight:bold;
}
a:active {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
/*velikost celotne vsebine*/
.layout {
width:70%;
margin-left:15%;
margin-right:15%;
}
.bannerlayout {
text-align:center;
}
#ijs_logo {
display:inline-block;
}
#headersign {
display:inline-block;
vertical-align:top;
font-weight:bolder;
font-size:200%;
}
.topmenulayout{
text-align:center;
}
#topmenu {
width:100%;
display:inline-block;
background-color:#330033;
border-radius:10px;
opacity:0.8;
filter: alpha(opacity=40);
}
.menutext {
display:inline-block;
}
#linkijs {
float:left;
margin-left:5%;
color:#ffffff;
}
#linkeng {
float:right;
margin-right:5%;
color:#ffffff;
}
.content{
height:100%;
}
/*container za linkboxe*/
#linkpanel{
display:inline-block;
float:left;;
width:100%;
height:100%;
border-radius:10px;
}
.linkboxdivider {
margin:0 auto;
padding:0;
width:100%;
height:17em;
}
.linkbox{
/*linkbox positinoning*/
margin:2%;
float:left;
display:inline-block;
/*style*/
border-radius:30px;
background-color:#ffcc99;
padding:1%;
width:18%;
height:15em;
opacity:0.7;
filter: alpha(opacity=40);
}
.linkboxtitle{
font-weight:bold;
font-size:120%;
margin-left:5%;
}
.linkboxlink {
color:#000000;
margin-left:5%;
}
.footerlayout{
text-align:center;
}
.footer {
width:100%;
display:inline-block;
background-color:#330033;
border-radius:10px;
opacity:0.8;
filter: alpha(opacity=40);
}
#tel{
float:left;
margin-left:5%;
display:inline-block;
color:#ffffff;
}
#delovnicas{
float:right;
margin-right:5%;
display:inline-block;
color:#ffffff;
}
/*napis pod footerjem*/
.underfooter {
width:100%;
padding:0;
font-size:90%;
}
#copyright {
float:left;
margin-left:5%;
display:inline-block;
padding:0;
margin-top:0;
}
#adminmail {
vertical-align:top;
float:right;
margin-right:5%;
display:inline-block;
padding:0;
margin-top:0;
}
#adminmaillink{
color:#000000;
padding:0;
margin-top:0;
}
</style>
<html>
<head>
<title>//</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="defsi.css"/>
</head>
<body>
<table class="layout">
<tr class="bannerlayout">
<td>
<img id="logo" src="images/ijs_logo.gif" alt="IJSlogo" />
<p id="headersign">//</p>
</td>
</tr>
<tr class="topmenulayout">
<td>
<div id="topmenu">
<p class="menutext" id="linkijs">//</p>
<p class ="menutext" id="linkeng">//</p>
</div>
</td>
</tr>
<tr class="content">
<td>
<div id="linkpanel">
<div class='linkboxdivider'>
<div class="linkbox" id="novosti">
<p class="linkboxtitle">NOVOSTI</p>
<p class="linkboxlink">e-knjige zalozbe Springer</p>
<p class="linkboxlink">nove elektronske revije</p>
<p class="linkboxlink">novi izvodi tiskanih revij</p>
<p class="linkboxlink">Science Classic</p>
</div>
<div class="linkbox" id="knjiznica">
<p class="linkboxtitle">KNJIZNICA</p>
<p class="linkboxlink">predstavitev</p>
<p class="linkboxlink">COBISS</p>
<p class="linkboxlink">medknjiznicna izposoja</p>
<p class="linkboxlink">bibliografije raziskovalcev</p>
</div>
<div class="linkbox" id="citalnica">
<p class="linkboxtitle">CITALNICA</p>
<p class=linkboxlink>elektronske revije</p>
<p class="linkboxlink">CD ROM-i</p>
</div>
<div class="linkbox" id="servisi">
<p class="linkboxtitle">SERVISI</p>
<p class=linkboxlink>splošno zanimivi</p>
<p class=linkboxlink>samo za lokalne uporabnike</p>
</div>
</div>
</div>
</td>
</tr>
<tr class="footerlayout">
<td>
<div class="footer">
<p id="tel">// <br />// </p>
<p id="delovnicas">// <br/> // </p>
</div>
</td>
</tr>
<tr class="underfooter">
<td>
<div class ="underfooter">
<p id="copyright">//</p>
<p id="adminmail">spletni mojster:<a id="adminmaillink" href = "mailto://#ijs.si"> av</a></p>
</div>
</td>
</tr>
</table>
</body>
</html>
Am working on making a copy of the BBC site and want to make two horizontal bars (part of the header) butt up against each other. Right now, there is a space between the two which I want to remove.
Here is the image I am getting:
Here is the HTML and CSS:
<!doctype html>
<html>
<head>
<title>BBC_Copy</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0;
font-family: arial, helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height:40px;
color:white;
}
.fixedwidth {
width:1050px;
margin:0 auto;
}
#logodiv {
padding-top:5px;
float:left;
border-right:1px solid #770000;
padding-right: 10px;
}
#signindiv {
font-weight: bold;
padding:2px 80px 12px 20px;
font-size: 0.9em;
float:left;
border-right:1px solid #770000;
}
#signindiv img {
position:relative;
top:3px;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
margin:0;
padding:0;
}
#topmenudiv li {
list-style: none;
font-wieght:bold;
font-size:0.9em;
border-right:1px solid #770000;
height:100%;
padding:10px 20px 12px 20px;
float:left;
}
#searchdiv {
float:left;
padding:5px 0 0 10px;
}
#searchdiv input {
height:25px;
border:none;
font-size:0.9em;
padding-left: 10px;
background-image: url("images/magnify.png");
background-repeat: no-repeat;
background-position:center right;
}
.break {
clear:both;
}
#newsbar {
background-color:#7A0000;
width: 100%;
height:40px;
color:white;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbc_logo.png" />
</div>
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search" />
</div>
</div>
<div class="break">
</div>
<div id="newsbar">
</div>
</div>
</body>
</html>
Your problem is in:
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
The <p> tags are adding extra margin on top and bottom. I would recommend getting rid of the p tags... they don't add any semantic advantage.
Replace this:
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
with this:
<div id="signindiv">
<img src="images/signin.png" />Sign In
</div>
Result: http://jsfiddle.net/ru7zzc1w/1/
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;
}