These are the css codes of my div, I'm making a slothead class div first and horizontally few slots.
div.slotshead{
z-index:3;
position:relative;
border: 1px solid #5f92d2;
width: 130px;
height: 50px;
color: #003366;
font-size:15px;
text-align:center;
font-family:'arial';
}
div.slots{
z-index:3;
position:relative;
border: 1px solid #d0d0fe;
width: 45px;
height: 50px;
color: #003366;
font-size:10px;
text-align:center;
font-family:'arial';
}
This is the code in them
echo '<h3>';
for ($i = 0; $i < 31; $i++) {
echo "<div class=slotshead id=$i>";
If($i==0){
echo 'TIME';
}
echo "</div>";
for ($j=0;$j < 23;$j++) {
echo " <div class=slots>";
If(($i==0)){
$start = strtotime('8am');
$k++;
$tod = $start + ($k * 15 * 60);
echo date('H:i A', $tod);
}
echo "</div>";
}
echo '<br>';
}
echo '</h3>';
here is the example jsfiddle
Here, The slots works fine but slothead(div with 'TIME') moves a bit down, why is that?
FYI, I tried vertical-align=top; But of no use...
Ok I feel this is what you are asking
in css add
h3{margin:0;padding:0;}
example
DEMO
Still you want to reduce mean see the following
html,body,h3{margin:0;padding:0}
DEMO
Related
I'm trying to create a square, created of smaller red and blue squares. The problem is, when i want to use something wierd happens, every new line is off by 20 px.
<style>
.box{
background-color: red;
position: relative;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
float:left;
}
.box1{
background-color: blue;
position: relative;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
float:left;
}
</style>
<?php
for($a=0;$a<4;$a++){
for($i = 0; $i < 4; $i++)
{
echo "<div class= box> </div>";
echo "<div class= box1> </div>";
}
echo "<br />";
for($i = 0; $i < 4; $i++)
{
echo "<div class= box> </div>";
echo "<div class= box1> </div>";
}
echo "<br />";
}
?>
How it looks like
Using relative position is the problem. Use display:inline-block instead.
Also you can accomplish this only using 2 for loops.
<style>
.box{
background-color: red;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
display: inline-block;
}
.box1{
background-color: blue;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
display: inline-block;
}
</style>
<?php
for($a=0;$a<8;$a++){
for($i = 0; $i < 4; $i++)
{
echo "<div class= box> </div>";
echo "<div class= box1> </div>";
}
echo "<br />";
}
?>
The proper way to break float is to use clear style attribute. For example add this to your styles:
br{
clear:both;
}
<br /> will now reset the float of the divs after it, so the next ones will be in new line.
Example in here.
Please note that class attribute should be in quotes, your code is not a valid HTML. To make it valid use one of these:
echo "<div class='box'> </div>";
or
echo '<div class="box"> </div>';
From my point of view you have to add one main div as like below code and have to add float left and width to 100%;
<style>
.box{
background-color: red;
position: relative;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
float:left;
}
.box1{
background-color: blue;
position: relative;
width: 20px;
height: 20px;
margin-left: 3px;
margin-top: 3px;
float:left;
}
.main {
float:left;
width:100%;
}
</style>
<?php
for($a=0;$a<4;$a++){
echo "<div class='main'>";
for($i = 0; $i < 4; $i++)
{
echo "<div class= box> </div>";
echo "<div class= box1> </div>";
}
echo "</div>";
echo "<br />";
echo "<div class='main'>";
for($i = 0; $i < 4; $i++)
{
echo "<div class= box> </div>";
echo "<div class= box1> </div>";
}
echo "</div>";
echo "<br />";
}
?>
`echo '<div class="col-sm-4">';
echo '<div class="product-image-wrapper">';
echo'<div class="single-products">';
echo'<div class="productinfo text-center">';
echo'<a href="product-detail.php id='.$row[9].'&item='.$_REQUEST['item'].'&product='.$row[2].'&pro=2">';
echo '<img src="image/thumb_images/'.$row['6'].'" />'; // image
$thumb='image/thumb_images/'.$row[6];
echo '<h6>Rs. ' .ROUND($row['SellingPrice']).'/-';
if($row['discount']>0){;
echo ' <span>MRP. ' .$row[4].' /-</span>';
}else{}
echo '</h6>';
echo'<h6>'.$row[2].'</h6>';
$name=$row[2];`
echo' </div>';
echo '</div>';
echo '</div>';
echo '</div>';
CSS
.single-products {
position: relative;
}
.new, .sale {
position: absolute;
top: 0;
right: 0;
}
.productinfo h6{
color:#fff;
}
.productinfo h5{
font-size: 70%;
text-decoration: line-through;
font-weight:bold;
color:#999;
}
.product-overlay h2{
margin-top:250px;
color: red;
}
.single-products h6{
color:#fff;
font-size: 90%;
vertical-align: top;
text-decoration: none;
line-height: 1;
}
.single-products span{
font-size:12px;
text-decoration: line-through;
font-weight:300;
color:#Fff;
}
.productinfo p{
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 400;
color: #696763;
}
here i have write my bootstrap code and below i have attach my screenshot when i fixed size then it work fine but i want to fill up this gap by image... i have attach css also please read out the above code and give me answer related to problem..
please suggest me
With reference to Akhil try the following solution Kuldeep. Hope it works.
<?php
while($row = mysql_fetch_array($result)){
$product_count++ ;
echo '<div class="col-sm-4" style="text-overflow:ellipsis;">';
//put your code here
//put your code here
//put your code here
echo'</div>';
if($product_count % 3 == 0){
echo'<div style="clear: both;"></div>';
}
}
?>
kuldeep, either fix the height of the box and if there is more text you can use text-overflow: ellipsis; for showing more text is there. And one other option is You need to put a clear:both tag after each 3 boxes. You can make it in condition loop I think.
I'm developing an application that contains a table made by div. The divs are filled according to the results database.
As you can see in the image below.
However, if I put one more item on the bench, just disrupting the entire table. What I would do is to put a rod horizontally so that it could rotate it and so see the other items in the database without messing up the structure.
CODE
CSS
#fundo {
display: block;
height: 550px;
margin-left: -3%;
overflow: scroll;
overflow-y: hidden;
width: 1150px;
}
.vacina, .dose, .aplicacao {
background-color: #D3D3D3;
border-radius: 5px;
float: left;
height: 90px;
margin-top: 6px;
margin-left: 6px;
position: relative;
width: 100px;
}
.vacina {
height: 50px;
}
PHP
include_once ("db.php");
$sql = "SELECT nomeVacina FROM vacina ORDER BY cod";
$ds1=mysql_query($sql);
if ($ds1) {
if (mysql_num_rows($ds1) > 0) {
$x = 0;
///////////////////////////////////////////////
////////////////// DIV VACINA /////////////////
while($linha=mysql_fetch_assoc($ds1)) {
$x++;
if(!($linha['nomeVacina'] == "Outras")) {
echo "<div class='vacina' id='".$x."'>";
echo "<br>".$linha['nomeVacina'];
echo "</div>";
}
}
}
///////////////////////////////////////////////
////////////////// FIM DIV VACINA /////////////
///////////////////////////////////////////////
////////////////// DIV DOSE ///////////////////
for($i = 1; $i < 6; $i++) {
echo "<br><br><br><br><br><br>";
echo "<div class='dose'>";
if($i == 4 || $i == 5) {
echo "<br>Reforco";
}
else {
echo "<br>Dose ".$i;
}
echo "</div>";
///////////////////////////////////////////////
////////////////// FIM DIV DOSE ///////////////
///////////////////////////////////////////////
////////////////// DIV APLICACAO //////////////
$z=0;
for($j = 1; $j <= $x; $j++) {
$sql2 = "SELECT DATE_FORMAT(dataAplicacao, '%d/%m/%Y') AS dataAplicacao, loteVacina, descricaoVacina FROM vacinaaplicada WHERE dose = ".$i." AND codigoVacina = ".$j." AND codPaciente = '".$cns."'";
$ds2=mysql_query($sql2);
$linha2=mysql_fetch_assoc($ds2);
$z++;
echo "<div class='aplicacao' id='".$z.$i."'>";
if($linha2 == "") {
echo "";
}
else {
echo "<div style='margin-top:10px;'>". $linha2['descricaoVacina']."<div class='fonte'><b>Data</b><br></div>". $linha2['dataAplicacao'] . "<div class='fonte'><b>Lote</b><br></div>".$linha2['loteVacina']."</div>" ;
}
echo "</div>";
}
///////////////////////////////////////////////
////////////////// FIM DIV APLICACAO /////////////
}
As you can see in the previous image, has 9 div class Vacina.
If I add a div class Vacina the most, will mess up the table.
What I'd like is to insert more than 9 div class Vacina causing the background div (div class includes all div) increase in width, but leaving it the same way the image, just putting a scroll bar horizontally to display whole div.
If I understood you correctly, I'd try this:
To #fundo, add
white-space: nowrap;
And I replaced float: left; with:
display: inline-block;
Maybe that's what you're looking for.
EDIT:
Okay, I've built an example from scratch (but using javascript, not php, I can't test php atm): JSFiddle.
It's a bit messy but you should be able to code it in PHP if you like to.
Let me know if you've got trouble with this.
EDIT 2:
Just to have it in the answer (not just in its comments), the final solution is: this JSFiddle.
HTML + PHP
<?php
include_once("sessao.php");
if (!isset($_SESSION['funcionario']['cpfFuncionario'])) {
header("Location:index.html");
}
else if($_SESSION['funcionario']['adicionarDireito'] == 0) {
header("Location:funcionario.php");
}
?>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<title>Vacina Digital - Cadastrar Vacinação</title>
<script type="text/javascript" src="template/js/script.js"></script>
<link rel="stylesheet" href="template/css/reset.css">
<link rel="stylesheet" href="template/css/fonts.css">
<style>
body {
background-color: #fdfdfd;
overflow-y: auto;
}
#form {
margin-left: 50px;
padding-left: 7%;
padding-top: 50px;
padding-bottom: 10px;
margin-right: 50px;
border: 1px solid #0F935A;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;
}
#form h1 {
text-align: center;
margin-right: 150px;
font-family: "RobotoCondensed";
font-size: 30px;
}
</style>
</head>
<body>
<?php
include_once 'menufuncionario.php';
?>
<div id="form">
<fieldset>
<?php
include_once("db.php");
if(isset($_POST['cns'])) {
$cns = $_POST['cns'];
$_SESSION['paciente'] = $cns;
}
else{
$cns = $_SESSION['paciente'];
}
$sql = "SELECT *, DATE_FORMAT(dataNascimento, '%d/%m/%Y') AS 'data' FROM populacao WHERE codigoCns = ".$cns;
$ds1=mysql_query($sql);
if ($ds1) {
if (mysql_num_rows($ds1) > 0) {
$sql2 = "SELECT * FROM vacinaaplicada WHERE codPaciente = ".$cns;
$ds2 = mysql_query($sql2);
$linha=mysql_fetch_assoc($ds2);
$linha2=mysql_fetch_assoc($ds1);
$data_nasc = $linha2['data'];
$data_nasc=explode("/",$data_nasc);
$data=date("d/m/Y");
$data=explode("/",$data);
$anos=$data[2]-$data_nasc[2];
if ($data_nasc[1] > $data[1]) {
$anos = $anos-1;
} if ($data_nasc[1] == $data[1]) {
if ($data_nasc[0] <= $data[0]) {
$anos = $anos;
} else {
$anos = $anos-1;
}
} if ($data_nasc[1] < $data[1]) {
$anos = $anos;
}
$data2=date("d/m/Y");
echo "<h1>Carteira de Vacinação - ".$linha2['nomeCrianca']."</h1>";
/*echo "
<div id='caderneta' style='margin-left:-6%'>
";*/
include_once 'caderneta.php';
echo "
</div>";
} else {
echo "<h1>CNS Inválido</h1><br><br>
<center><a href='javascript:window.history.go(-1)'><button style='margin-left:-150px' class='button button-red' href='javascript:window.history.go(-1)'>Voltar</button></a></center>
";
}
}
?>
</div>
</body>
</html>
Caderneta
<html>
<head>
<link rel="stylesheet" href="template/css/fonts.css">
<style type="text/css">
#fundo {
min-width: 800px;
display: block;
overflow: scroll;
overflow-y: hidden;
margin-left: -3%;
height: 550px;
white-space: nowrap;
}
#pinguim, .vacina, .dose, .aplicacao {
width: 100px;
height: 90px;
background-color: #D3D3D3;
margin-top: 6px;
margin-left: 6px;
border-radius: 5px;
position: relative;
float: left;
}
#pinguim, .vacina {
height: 50px;
}
.vacina, .dose{
background: green;
font-family: RobotoCondensed;
font-size: 14pt;
text-align: center;
color: #ffffff;
}
.vacina{
padding-top: -14px;
line-height: 15px;
}
.dose, .aplicacao{
margin-top: -32px;
}
.dose{
line-height: 29px;
}
.aplicacao, .fonte {
font-family: "RobotoLight";
text-align: center;
}
</style>
</head>
<body>
<div id = "fundo">
<div id = "pinguim">
</div>
<?php
include_once ("db.php");
$sql = "SELECT nomeVacina FROM vacina ORDER BY cod";
$ds1=mysql_query($sql);
if ($ds1) {
if (mysql_num_rows($ds1) > 0) {
$x = 0;
$k = 0;
while($linha=mysql_fetch_assoc($ds1)) {
$x++;
if(!($linha['nomeVacina'] == "Outras")) {
echo "<div class='vacina' id='".$x."'>";
echo "<br>".$linha['nomeVacina'];
echo "</div>";
}
}
for($i = 1; $i < 6; $i++) {
echo "<br><br><br><br><br><br>";
echo "<div class='dose'>";
if($i == 4 || $i == 5) {
echo "<br>Reforco";
}
else {
echo "<br>Dose ".$i;
}
echo "</div>";
$z=0;
for($j = 1; $j <= $x; $j++) {
$sql2 = "SELECT DATE_FORMAT(dataAplicacao, '%d/%m/%Y') AS dataAplicacao, loteVacina, descricaoVacina FROM vacinaaplicada WHERE dose = ".$i." AND codigoVacina = ".$j." AND codPaciente = '".$cns."'";
$ds2=mysql_query($sql2);
$linha2=mysql_fetch_assoc($ds2);
$z++;
echo "<div class='aplicacao' id='".$z.$i."'>";
if($linha2 == "") {
echo "";
}
else {
echo "<div style='margin-top:10px;'>". $linha2['descricaoVacina']."<div class='fonte'><b>Data</b><br></div>". $linha2['dataAplicacao'] . "<div class='fonte'><b>Lote</b><br></div>".$linha2['loteVacina']."</div>" ;
}
echo "</div>";
}
}
echo"</div>";
}
}
?>
</div>
</div>
</body>
</html>
I am making a small chat and I am having issues making the div's appear below each other. This is what I have:
$i = 0;
while($i < 5)
{
echo "<div class='MyChatholders'>";
echo "<div class='pro_pic'>";
//my image
echo "</div>";
echo "<div class='ChatInfo'>";
//my information
echo "</div>";
echo "</div>";
echo "<br />";
$i++;
}
MY CSS:
div.MyChatholders
{
left: 5px;
color: black;
width: 290px;
height: 100px;
border-radius: 10px;
}
div.pro_pic
{
left: 5px;
width: 30px;
height: 30px;
border: solid black 1px;
}
div.ChatInfo
{
color: black;
font-size: 14px;
left: 40px;
width: 245px;
}
Please note that the (while function) is just to simulate the information drawn from the DBase.
Now my issues is that all the div's are in one position. I would like them to fall below each other. I do not understand why this is happening. Can someone help me with my code and explain why?
I have looked at this solution but it is not working for me Check here
Add position:relative; to your divs.
Working fiddle based on your code: http://jsfiddle.net/MmGyU/1/
Note: Borders in the fiddle are for demonstration purposes.
div.MyChatholders {
position: relative;
left: 5px;
color: black;
width: 290px;
height: 100px;
border-radius: 10px;
}
div.pro_pic {
position:relative;
left: 5px;
width: 30px;
height: 30px;
}
div.ChatInfo {
position:relative;
color: black;
font-size: 14px;
left: 40px;
width: 245px;
}
Make it print your <div> tags to a new line in your loop using \n
$i = 0;
while($i < 5)
{
echo "<div class='MyChatholders'>\n";
echo "<div class='pro_pic'>\n";
//my image
echo "</div>\n";
echo "<div class='ChatInfo'>\n";
//my information
echo "</div>\n";
echo "</div>\n";
echo "<br />\n";
$i++;
}
EDIT Syntax was wrong, the \n needs to be within quotes
2nd EDIT My mistake, \n is not HTML and it won't work. You could use <br /> instead according to this post
Add clear:both; to your chat divs.
Hello i am following this tutorial to make a php calendar
http://www.youtube.com/watch?v=l76uglZBjpk
I have three files
show_calendar.php
<!DOCTYPE html>
<html>
<head>
<link href="calCss.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<?php include ("calendar_start.php"); ?>
</body>
</html>
calendar start.php
<?php
//$showmonth = $_POST['showmonth'];
//$showyear = $_POST['showyear'];
$showmonth = 11;
$showyear = 2012;
$day_count = cal_days_in_month(CAL_GREGORIAN, $showmonth, $showyear);
$pre_days = date('w', mktime(0,0,0, $showmonth, 1, $showyear));
$post_days = (6 - (date('w', mktime(0,0,0, $showmonth, $day_count,$showyear))));
echo '<div id="calendar_wrap">';
echo '<div class="title_bar">';
echo '<div class="previous_month"></div>';
echo 'div class="show_month">' . $showmonth . '/' . $showyear . '</div>';
echo '<div class="next_month"></div>';
echo '</div>';
echo '<div class="week_days">';
echo '<div class="days_of_the_week">Sun</div>';
echo '<div class="days_of_the_week">Mon</div>';
echo '<div class="days_of_the_week">Tue</div>';
echo '<div class="days_of_the_week">Wed</div>';
echo '<div class="days_of_the_week">Thur</div>';
echo '<div class="days_of_the_week">Fri</div>';
echo '<div class="days_of_the_week">Sat</div>';
echo '<div class="clear"></div>';
echo '</div>';
/* Previous Month Filler Days */
if ($pre_days != 0) {
for($i = 1 ; $i<=$pre_days;$i++) {
echo '<div class="non_cal_day"></div>';
}
}
/* Current Month */
for($i=1; $i<= $day_count; $i++) {
echo '<div class="cal_day">';
echo '<div class="day_heading">' . $i . '</div>';
echo '</div>';
}
/* Next Month Filler Days */
if ($post_days != 0) {
for ($i=1; $i<=$post_days; $i++) {
echo '<div class="non_cal_day"></div>';
}
}
echo '</div>';
?>
and the css file calCss.css
#calendar_wrap {
width: 924px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.title_bar {
width: 100%;
height: 30px;
}
.previous_month {
float: left;
width: 308px;
height: 30px;
text-align: left;
}
.show_month {
float: left;
width: 308px;
height: 30px;
text-align: center;
}
.next_month {
float: left;
width: 308px;
height: 30px;
text-align: right;
}
.week_days {
width: 100%;
}
.days_of_week {
float: left;
width: 14%;
text-align: center;
}
.cal_day {
position: relative;
float: left;
margin-right: 4px;
margin-bottom: 4px;
width: 128px;
height: 95px;
background-color: #9C9;
}
.day_heading {
position: relative;
float: left;
width: 40px;
height: 16px;
padding: 6px;
color: #000;
font-family: Arial;
font-size: 14px;
}
.openings {
width: 100%;
clear:left;
text-align: center;
}
.non_cal_day {
position: relative;
float: left;
margin-right: 4px;
margin-bottom: 4px;
width: 128px;
height: 95px;
background-color: #CCC;
}
.clear {
clear: both;
}
my problem is show_calendar.php is not showing any css only text of the days of teh week and numbers in the month. Im not sure what i could be doing wrong, does anyone have any ideas? Im using xampp local server to view the php file. Thanks
I see just one small mistake:
you forgot one < here:
echo 'div class="show_month">' . $showmonth . '/' . $showyear . '</div>';
I tested it like that and works fine for me..
If you are using an IDE like ( dreamweaver ) for example , make sure that you set the Web URL for your localhost to (localhost/myProject) not (localhost/myProject/index.php) .. because it sometimes makes error , reaching the css directory .. I had that error , and that fixed it , hope it works for you :)
I've checked everything and found no reason why this shouldn't work. Probably your css file could not be loaded. You should check what you browser console says.
This is how you can debug this problem:
start the script in your browser
press shift + strg + j to start the developer tools (this shortcut works vor Forefox and Chrome f12 if you got IE)
select 'console'
check if there is an a loading error for your css
If you're on windows then the second problem source could be hidden file extensions. Maybe your filename isn't calCss.css but calCss.css.txt or simmilar. This is only a guess but I had this type of problem before. If it applies to your problem this is how you can display hidden file extensions