I have a php file called shtype_porosine.php and also an external css file style.css. The php file I use to login to the web site and it has three different div tags. For the first one (div id="container_dyte") the body backgraound color must be white, but for the two others that are included include('include/administrator_index_nsp.php'); and include('include/login_forma.php'); the body color must be black.
I am not sure if a can use the body tag three times in the same php document, if so than the problem is solved (with body class="" i founded in the previous question "how-to-css-if-else-to-change-body-background-color"), but if not than which would be the solution?
Below is the code of the php file shtype_porosine.php
Thank you
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>website</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
session_start();
// this is for an administrator
if(isset($_SESSION['auser'])){
?>
<div id="container_dyte">
<span>Something here...</span>
</div>
<?php
}else{
// these is for a user
if(isset($_SESSION['p_user'])){
include('include/administrator_index_nsp.php');
}else{
// this is the login form to apear if fails the adminstrator and the user
include('include/login_forma.php');
}
}
?>
</body>
</html>
Check if $_SESSION[ 'auser'] is set, if it is, make a body with a white background-color.
Otherwise make a body with a black background-color.
Like this:
<?php
session_start();
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>website</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<?php
if(isset($_SESSION['auser'])){ ?>
<body style='background-color:white'>
<?php } else { ?>
<body style='background-color:black'>
<?php }
if(isset($_SESSION['auser'])){
?>
<div id="container_dyte">
<span>Something here...</span>
</div>
<?php
}else{
// these is for a user
if(isset($_SESSION['p_user'])){
include('include/administrator_index_nsp.php');
}else{
// this is the login form to apear if fails the adminstrator and the user
include('include/login_forma.php');
}
}
?>
</body>
</html>
<body class="<?= isset($_SESSION['auser']) ? 'white' : 'black';?>">
<body style="background-color:<?= isset($_SESSION['auser']) ? 'white' : 'black';?>">
You don't have to change any "body". Just set the background-color css property for each of the div:
<div id="container_dyte" style="background-color:white">
In file include/administrator_index_nsp.php
<div style="background-color:black">
In file include/login_forma.php
<div style="background-color:black">
Easy way:
Give the divs diferent ID names and use CSS.
HTML
<div id="the_id">
CSS
#the_id {
background-color:white;
}
Medium way:
Make a container div with a specyfic ID or CLASS and set up a CSS.
CSS
#container div {
background-color: black;
}
#container:first-child {
background-color: red;
}
#container:last-child {
background-color: white;
}
Hard way:
If you have a css specyfic for this page you can select the div number by style property.
body:nth-child(1) { background-color: black; };
body:nth-child(2) { background-color: red; };
body:nth-child(3) { background-color: white; };
If the css is ment for other pages do not use this answer.
In order to solve this issue, include a custom css, which will apply a required background color to the <body> tag. For example:
if (mode=='mode1')
{
echo "<div id='div1'></div>";
echo "<style type='text/css'> body { background-color:red } </style>";
}
if (mode=='mode2')
{
echo "<div id='div2'></div>";
echo "<style type='text/css'> body { background-color:yellow } </style>";
}
if (mode=='mode3')
{
echo "<div id='div3'></div>";
echo "<style type='text/css'> body { background-color:blue } </style>";
}
So using this logic, you can set the background color of the body, according to the divs showed
Related
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body >
<?php
echo '<ul id="menu">
<li>first</li>
<li>second</li>
<li>third</li>
</ul>';
?>
</body>
</html>
This list.php is separate file.i have included this in my pages and trying to highlight the currentpage clicked using a:active but it is not working..help me out in this
<div class= "main-menu" id= "main-menu">
<?php include 'includes/list.php';?>
</div>
a:active is the state when you click on the link. (http://www.w3schools.com/cssref/sel_active.asp)
a:visited is the state if you clicked on the link before. (http://www.w3schools.com/cssref/sel_visited.asp)
You can add a class ("current" in this example) to highlight your current link
<li>first</li>
And with css:
.current {
color: yellow;
}
If you can use jquery, then you can use this solution:
The js script should be common in all the pages i.e. first.php, second.php,etc.
Below is the code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<style>
.active{ color:yellow; }
</style>
<body >
<?php
echo '<ul id="menu">
<li>first</li>
<li>second</li>
<li>third</li>
</ul>';
?>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul#menu li a').click(function() {
$('ul#menu li a').removeClass('active');
$(this).addClass('active');
});
});
</script>
</body>
</html>
Hope, this will help you.
i found your problem
in your li tag you should check anchor tag and check first.php page actually exists or not
it means : href="../first.php" that is your solution
but your code is like this means first.php not exists thats why the css not working properly
first
i hope you understand what i actually told you
Pdf fuction*
This function is call from ajax after getting data from this function it's call anothe file here I am display data which is coming from data base.That file all css part in style tag using then as it is style tag prind in pdf as a text and if this all css file include in css folder then pdf is not create in proper format
public function actionInvoicespacking(){
$pdf = Yii::$app->pdf;
$modelShipment = Shipment::find()->orderBy('ship_id DESC')->one();
if(count($modelShipment) == 0) {
$shipid= 1;
} else
{
$shipid= $modelShipment->ship_id;
}
$htmlContent = file_get_contents('http://localhost/shepherdlogistics_v1.0/backend/views/shipment/invoicespackingdata.php');
$pdf->content = $htmlContent;
return $pdf->render();
}
invoicespackingdata.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Invoice</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.fontawesome.min.css">
<link rel="stylesheet" href="css/stylepdf.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
body {
font-size: 18px;
font-family: cambria;
}
.nopadd {
padding: 0px;
}
</style>
</head>
<body>
<div class="container">
<br>
<br>
<div class="">
<div class="col-lg-2 nopadd">
<img src="logopdf.png" alt="logo" width="100%">
</div>
<div class="col-lg-10">
<h1 style="font-size: 55px;font-weight: bold; padding: 23px 0px;">
SHEPHERD LOGISTICS CO. W.L.L.</h1>
</div>
</div>
</div>
</div>
As the demo states:
Any <style> tag will be skipped (you must use cssInline property for this)
If you have just a few styles to add to the pdf, you can pass it like this:
$pdf->content = $htmlContent;
$pdf->cssInline = '.class1 {color: red} .class2 {color:blue}';
But if you have alot of styles, you can also consider change the default cssFile to any file you want with the correct css. (by default, this property is #vendor/kartik-v/yii2-mpdf/assets/bootstrap.min.css
the problem is, i know i can center all the three objects in the list correctly using 3 while loops with CSS, but i also know than use 3 whiles loops for something like that is a waste of resources
Also i love if the solution includes order them relative to the "white page" too, which, 3 while loops aproach seems to archieve too
so the question is, how will be the best CSS aproach to do that without the need of call three While loops?
(saving responsiveness)
UPDATE: The thing is, the products, types & Price are all almacenated in a database so to make an easy control and administration of all of them at once, and show them on the list to the people who visit them easier.
The Other stuff, the Styles and the "hidden" is because that divs are the black & white squares, which will actualy be white if there is some of the product remaining, and will be black if's not the case.
The Code related are this ones:
Style.CSS
#TextTitl {
font: 38px/1.1em "Fredericka the Great",fantasy;
color: #5D463E;
}
#stylProdct {
background-color:#fff;
width:75%;
}
.whiteAvbly
{
display:hidden;
background-color:#ffffff;
border: 3px solid #333333;
height:15px;
width:15px;
float:left;
left:12.5%;
position:relative;
}
.blackAvbly
{
display:hidden;
background-color:#380807;
border: 3px solid #333333;
height:15px;
width:15px;
float:left;
left:12.5%;
position:relative;
}
#doscinco {
float:left;
left:25%;
position:relative;
}
#cincuenta {
float:left;
left:50%;
position:relative;
}
#sietecinco {
float:left;
left:75%;
position:relative;
}
verduras.php
<?php
include('conection.php');
echo '<center><section id="stylProdct">';
$Verd = 'Verduras';
$smt = $con->prepare("select * from prodcts WHERE Type = :Verduras Order by PrdName ASC");
$smt->bindParam(':Verduras', $Verd, PDO::PARAM_STR);
$smt->execute();
echo '<br /><br /><H2 id="TextTitl">VERDURAS</H2><br />';
while ($smr = $smt->fetch(PDO::FETCH_ASSOC, PDO::FETCH_ORI_NEXT))
{
$idf = $smr['Availblty'];
$ids = (int) $idf;
echo'<p>';
if($ids > 0)
{
echo '<style>.whiteAvbly{display:show;}</style><div class="whiteAvbly"></div>';
}
else
{
echo '<style>.blackAvbly{display:show;}</style><div class="blackAvbly"></div>';
}
echo '<div id="doscinco">'.nl2br($smr['PrdName']).'</div><div id="cincuenta">'.nl2br($smr['SellType']).'</div><div id="sietecinco">$'.nl2br($smr['Cost']).'</div></p><br />
------------------------------------------------------------------------<br />';
}
echo '</section></center>';
?>
Html
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Clone Dinka</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<link href='http://fonts.googleapis.com/css?family=Chelsea+Market' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jqwdinka.js"></script>
</head>
<body>
<div class="mullet"></div>
<header>
<div id="BigSist"><img id="hermana" src="imago/upper_logo.png"/><p class="white">tel</p><p class="black">(+56 9) 65637350</p></div>
<img id="logoc" src="imago/logo.png"/>
<nav>
<div class="container">
<p class="white" id="Tralala">DESPACHO DIRECTO A TU PUERTA</p>
<span>Haz tu pedido / Cotiza</span>
</div>
<ul id="cont">
<li id="than">INICIO</li>
<li class="menuHead">PRODUCTOS
<ul id="cont">
<li>Verduras</li>
<li>Frutas</li>
<li>Mote con Huesillo</li>
</ul>
</li>
<li>¿COMO COMPRAR?</li>
<li>CONTACTO</li>
</ul>
</nav>
</header>
<!--"http://lorempixel.com/g/470/300"-->
<div id="content"></div>
</body>
</html>
Javascript
$(document).ready(function(){
//initial
$('#content').load('main.php');
$('body').load().css('background-image', 'url(' + 'imago_tesla/fondo0.jpg' + ')');
//handle menu clicks
$('ul#cont li a').click(function(e) {
e.preventDefault()
var page = $(this).attr('href');
$('#content').load(page + '.php');
var pageImages = {
'main': 'imago_tesla/fondo0.jpg',
'verduras': 'imago_tesla/fondo4.jpg',
'Frutas': 'imago_tesla/fondo4.jpg',
'MoteconHuesillo': 'imago_tesla/fondo4.jpg',
'ComoComprar': 'imago_tesla/fondo2.jpg',
'Contacto': 'imago_tesla/fondo.jpg'
}
$('body').css('background-image', 'url(' + pageImages[page] + ')');
});
});
That must be
Please, feel free to ask for clarification, comment, answer, suggest, etc... all the help feedback wherever's the nature of this would be most welcome.
Thanks in advance!
Best use with <table>s, but if must use <div> either you set specific sizes (is not the best option) or, you surround each column in a separate <div> example:
<!-- Column products -->
<div>
<!-- Product lines -->
<div>Product 1</div>
<div>Product 2</div>
<div>Product 3</div>
<div>...</div>
</div>
<!-- Column units -->
<div>
<!-- Product lines -->
<div>kg</div>
<div>l</div>
<div>2/kg</div>
<div>...</div>
</div>
<!-- Column prices -->
<div>
<!-- Product lines -->
<div>800$</div>
<div>200$</div>
<div>342$</div>
<div>...</div>
</div>
And set your formatings to make them inline
As I already said, I suggest using a table, after all this is the type of data tables are meant for.
If changing your markup is not a solution, here's a quick hack, based on the fact that apparently you want every field occupying 25% of the total width. Just change the last part of your CSS to:
#doscinco {
float:left;
left:25%;
width:25%;
position:relative;
}
#cincuenta {
float:left;
width:25%;
}
#sietecinco {
float:left;
width:25%;
}
But there are still other problems in there:
Your HTML will have several tags with the same ID, because you're using IDs in a loop.
You are repeating style definitions that you could put in a separate class and reuse that class to keep your definitions easier to maintain
You're using <center>. It's better to put all style information in your CSS.
Last but not least: display:show is not valid CSS and making those 2 classes hidden hidden just to unhide them is superfluous anyway.
I have created PHP files which accept data from $_GET method.
After that I use all the data I get to create HTML pages. Nothing is wrong with the data but in CSS I cannot style HTML elements. Except when it comes to inline styling, that works but it is not good to maintain.
I try to use like this but it doesn't work , Please Help
THANK IN ADVANCE
Example.php
<?php
$dataCover = $_GET['dataCover'];
$dataTitle = $_GET['dataTitle'];
$dataTag = $_GET['dataTag'];
$dataDir = $_GET['dataDir'];
$dataYear = $_GET['dataYear'];
$dataCreated = $_GET['dataCreated'];
$dataModified = $_GET['dataModified'];
$userAUID = $_GET['userAUID'];
$galleryID = $_GET['galleryID'];
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" media="all">
#container img{
height: 230px;
width: 200px;
}
#container .center{
display: block;
margin: 0 auto;
}
</style>
<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/jquery.mobile-1.3.1.min.js"></script>
<script src="../lib/se.js"></script>
</head>
<body>
<div data-role ="page" id ="page1">
<div data-role ="header">
<h1> header </h1>
</div>
<div data-role="content">
<div id="container">
<img class="center" src="<?echo $dataCover?>" alt=""/>
<p id="title"><?echo $dataTitle;?></p>
<p id="tag"><?echo $dataTag;?></p>
<p id="created">Created : <?echo $dataCreated?></p>
<p id="modified">modified : <?echo $dataModified?></p>
View Ebook-Gallery
Bookmark
</div>
</div>
</div>
</body>
</html>
When you move your css from inline to style sheet file, you have to refresh your page with Ctrl+F5. Maybe it's coming from the cache.
Also you can assign your css to the image by jquery.
I dont see any reference to any external stylesheet, so it seems like you have forgotten to do this.
Put this line
<link rel="stylesheet" type="text/css" href="/css/style.css" />
Somewhere in the head. Maybe before the script tags.
Make sure you adjust the path to your stylesheet.
Yes When you want to apply external css you have to give the path after the <title> tags within the <head> tags .just follow the html code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--Here css is the folder name where you have keep the style.css file -->
<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/jquery.mobile-1.3.1.min.js"></script>
<script src="../lib/se.js"></script>
</head>
I'm a newbie on css and html and even coding. I'm currently making my own start page with a local path, which loads my bookmark on an html file. The background-image control passes through the style.css file. I've googled some solutions as to creating a php script to load random pictures over css and html, and I've tried various solutions, however it doesn't seem to work for me. So here we go:
the index.html file for passing the background-image:
<link rel="stylesheet" href="style.css" type="text/css" />
and the style.css:
body {
background-image: url("Wallpaper01.jpg") ;
}
I don't know how to change it since I downloaded the code. Also the .jpg file is in the same directory as the html and css.
Can someone please help me out to have a random image with this?
Please provide the code to do it, place to insert it, or whatever I need to, that will help a lot more than just telling me what to do.
Many, many thanks if someone can help me. Thanks!
You can try something like:
<?php
$bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg' ); // array of filenames
$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>
CSS (in the head)
<html>
<head>
<title></title>
<style type="text/css">
<!--
body{
background: url(images/<?php echo $selectedBg; ?>) no-repeat;
}
-->
</style>
</head>
<body>
<!-- website -->
</body>
</html>
Edit (user's comments)
<?php
$bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg' ); // array of filenames
$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>
<html lang="en">
<head>
<meta charset=utf-8>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Start Page</title>
<style type="text/css">
<!--
body{
background: url(images/<?php echo $selectedBg; ?>) no-repeat;
}
-->
</style>
</head>
<body>
<div id="one">01 <div class="title">General</div>
<div class="links"> Google
</div>
</div>
</body>
</html>