I'm trying to put borders in my code with "float: left" to try to obtain this solution:
But when I put in the CSS the "border" style, I obtain this:
My code and solution:
php code:
<?php
function pinta($n,$m){
$cadena="";
for($i=0;$i<$n;$i++){
for($j=0;$j<$m;$j++){
$x = 0+$i*10;
$y = 0+$j*10;
$cadena.="<div style='background-color:rgb(0,$x,$y); '> </div>";
}
$cadena.="<br/>";
}
return $cadena;
}
?>
<!DOCTYPE HTML>
<!-- start static html -->
<html>
<head>
<title>cursor</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<script src="script.js"></script>
</head>
<body>
<?php
echo pinta(9,9);
?>
<script>
</script>
</body>
</html>
css code:
div{
width:40px;
float: left;
}
Try this:
div{
width: 40px;
border: 1px solid black;
display: inline-block;
}
Example
Related
I am still kind of new to HTML and CSS, so I wanted to ask if this is a good way to make my footer always stick to the bottom without overlapping with anything. I also included some PHP to make my work easier and just require the header and footer on each webpage.
Here is what I have:
index.php
<!DOCTYPE html>
<html>
<head>
<title>Начало - Гравиране Провадия</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<?php
require_once 'requires/header.html';
?>
SAMPLE CONTENT, blah blah.
<?php
require_once 'requires/footer.html';
?>
</body>
</html>
footer.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
footer {
background: #A6FF46;
font-family: 'Roboto';
text-align: center;
padding: 0.5rem;
margin-top: auto;
}
</style>
</head>
<body>
<footer>
Copyright © 2022, Gravirane Provadia. All rights reserved.
</footer>
</body>
</html>
Did you try position: fixed;? That creates it so that the element will always 'stick' to the position you set it to using left: position;,bottom: position;,etc.
I have this php page that rungs its script.
From the index page the user clicks a button and this page, after 10 seconds or so, shows the final result.
I would like to show a progress bar while the user waits.
This is the actual page:
<!DOCTYPE html>
<html>
<head>
<title>METAR LIRN</title>
<style>
h1 {
text-align: center;
}
.table {
display: table;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
border: 1px solid #808080;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div class="table">
<div>
<h1>METAR LIRN<h1>
</div>
<div>
<?php
$output = shell_exec('sh /var/www/html/weather.sh');
echo "<pre>$output</pre>";
?>
</div>
</body>
</html>
I had a look to other similar posts with no luck...
Thanks in advance!
Sure, here's a quick example:
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* Just some styles for the bar */
.loading-bar {
background: blue;
width: 300px;
height: 20px;
display: none;
}
.loading-bar.active {
display: block;
}
</style>
</head>
<body>
<button class="myBtn">Execute code!</button>
<div class="response"></div>
<div class="loading-bar"></div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
// Handle button click
$('.myBtn').on('click', function(){
$('input').val( "" );
// Inmediatly show your bar
var $loadingBar = $('.loading-bar');
$loadingBar.addClass('active');
// Then execute Ajax
$.ajax({
url: "test.php",
method: 'GET'
})
.done(function(data) {
// Display response data
$('div.response').html(data);
})
.fail(function(error) {
// Display error if fails
$('div.response').html(error);
})
.always(function() {
// Always hide loading bar when finish
$loadingBar.removeClass('active');
});
});
</script>
</body>
</html>
test.php:
<?php
sleep(2);
echo 'OK';
I am trying to include an external css into my PHP file:
<head>
<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
my CSS File:
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
display: block;
margin-top:50px;
}
body {
font: 20px Montserrat, sans-serif;
line-height: 1.8;
overflow-y:hidden;
}
.container-fluid {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAWklEQVQoU2P8P5PhPwMDAwNjOgMjiMYFGIlWiM2E1oMvwbZU24vDbUFYN/P/f4Z0RjAfv0J8DgT5AUM3ksnIejEV4jAZa5B8mhkH9gxf+iIsnkEyiWiF2GwHAGuiJAtmjT1hAAAAAElFTkSuQmCC);
repeat;
position: relative;
padding-bottom: 70px;
}
p{
}
.btn-success {
background-color: #85C1E9;
border:0;
}
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.bg-2 {
background-color: #474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff; /* White */
color: #555555;
}
.navbar {
padding-top: 0px;
padding-bottom: 0px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 15px;
letter-spacing: 4px;
}
col-sm-4:hover {
color:#85C1E9;
}
.navbar-nav li a:hover {
color: #85C1E9 !important;
}
.helper {
margin:auto;
padding-top: 50px;
}
.col-sm-4:hover {
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJklEQVQYV2OMq7zlw4ADMIIkF7WrbUGX/3+G4f+ASS4MVtuMzcEAiGEnwSwsT0sAAAAASUVORK5CYII=")
repeat;
}
The stylesheet is obviously used, but the plaintext is also seen in the PHP file. If tried adding type or leave it away, href as /css/base.css and without leading /, but somehow I won't get rid of the plain text in my file. Any Idea whats causing it?
The PHP File:
<html>
<head>
<title>Awesome Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/my.js"></script>
<script>
...
</script>
<header id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
...
</head>
</header>
<body>
..
</body>
EDIT:
Found the error, there was a sneaky include(css/base.css)
I tried to validate your css using the W3 Css validator and it told me there's a parse error in your css. Namely you're closing the background-image: with a semicolon while on the line below theres a repeat;. This is a syntax error, and I think because it can't parse the css, it's just displayed as plain text.
You should know if you want to give styles to php output commands, like echo or print you have to type all of your html codes .
And type your php codes middle of body tags in HTML format . Like this :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<?php
$text = "Hello World !";
echo "<p>" . $text . "</p>";
?>
</body>
</html>
But another problem that your code has is you typed a header tag inside head tags and close it after head closing tag and this will break the html programming grammar .
It's me again - The code is working now, but I can't seem to be able to add a link to the '$info['name']' in the alt.
I want to be able to add links to the picture and the name. The picture link works, but the link does not appear in the name.
I may have some mistakes in the code below.
The link works on the picture but now in the alt.
Here's the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>JQuery Cycle Plugin - Pager Demo with Prev/Next Controls</title>
<link rel="stylesheet" type="text/css" media="screen" href="../jq.css" />
<link rel="stylesheet" type="text/css" media="screen" href="cycle.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<style type="text/css">
#main { margin: 20px }
#nav { margin: 10px; position: relative }
#nav li { float: left; list-style: none}
#nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }
#nav li.activeSlide a { background: #faa; color: black }
#nav a:focus { outline: none; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').cycle({
prev: '.prev', // Setup prev links
next: '.next', // Setup next links
pager: '.nav', // Setup pager navs
before: function () {
$("#name").html($(this).children("img").attr("alt"));
}
});
});
</script>
<style type="text/css">
#left, #slideshow, #right { float: left; width: 200px; }
</style>
</head>
<body>
<!-- left nav bar -->
<div id="left">
<span class="prev">Prev</span>
<span class="next">Next</span>
<ul class="nav"></ul>
</div>
<!-- slideshow -->
<div id="slideshow">
<?php
mysql_connect("localhost", "root", "")or die("cannot connect");
mysql_select_db($db_name)or die("cannot select DB");
$data = mysql_query("SELECT * FROM people") or die(mysql_error());
while($info = mysql_fetch_array( $data )){
<!--THIS CODE BELOW -->
echo "<img src=\"uploads/".$info['pic'] . "\" alt=\"<b><a href=\"display.php?id=".$info['id']."\">".$info['name']."</b><br />".$info['sex']. "<br />".$info['location'].
"<br />".$info['age']."</a>";
}
?>
</div>
<div id="name">
</div>
<!-- right nav bar -->
<div id="right">
<span class="prev">Prev</span>
<span class="next">Next</span>
<ul class="nav"></ul>
</div>
</div>
</body>
</html>
I would appreciate your help folks to be able to add link to the name dynamically.
instead of echo-ing the string, why not read it into a variable and echo the variable inside you html at the appropriate location <?php echo $myString; ?> also looks like you are using HTML inside the alt attribute. You can't do that. Even if you can do that, you are using double quotes inside double quotes, which will end the double quote and break the string.
Try changing your echo command to:
echo "<img src=\"uploads/".$info['pic'] . "\" alt=\"<b><a href='display.php?id=".$info['id']."'>".$info['name']."</b><br />".$info['sex']. "<br />".$info['location'].
"<br />".$info['age']."</a>";
The only thing Ive changed is the anchor link (i.e. the part below I replace " with '
<a href='display.php?id=".$info['id']."'>
I have been learning to use a slideshow code I saw on a website somewhere. Although I have managed to get it working with the images showing well, but I can't figure out how to show the image name in another table alongside the images when the slide changes.
I have provided the code here. so I need your help. What I'm looking for s that whenever the slideshow changes with another picture, I want the picture name displayed next to it.
Thanks for your asisstance.
Update - Here's the updated code based on Gilly3's suggestion, but I'm still confused on how to get the name displayed
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>JQuery Cycle Plugin - Pager Demo with Prev/Next Controls</title>
<link rel="stylesheet" type="text/css" media="screen" href="../jq.css" />
<link rel="stylesheet" type="text/css" media="screen" href="cycle.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<style type="text/css">
#main { margin: 20px }
#nav { margin: 10px; position: relative }
#nav li { float: left; list-style: none}
#nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }
#nav li.activeSlide a { background: #faa; color: black }
#nav a:focus { outline: none; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').cycle({
prev: '.prev', // Setup prev links
next: '.next', // Setup next links
pager: '.nav', // Setup pager navs
before: function () {
$("#name").text(this.alt);
}
});
});
</script>
<style type="text/css">
#left, #slideshow, #right { float: left; width: 200px; }
</style>
</head>
<body>
<!-- left nav bar -->
<div id="left">
<span class="prev">Prev</span>
<span class="next">Next</span>
<ul class="nav"></ul>
</div>
<!-- slideshow -->
<div id="slideshow">
<?php
mysql_connect("localhost", "root", "")or die("cannot connect");
mysql_select_db($db_name)or die("cannot select DB");
$data = mysql_query("SELECT * FROM people") or die(mysql_error());
while($info = mysql_fetch_array( $data )){
echo "<img src=\"http://localhost:8080/about/images/".$info['photo'] . "\" alt=\"".$info['name'] ."\"/>";
}
?>
</div>
<div id="name">
HELP ME PRINT THE NAME HERE
</div>
<!-- right nav bar -->
<div id="right">
<span class="prev">Prev</span>
<span class="next">Next</span>
<ul class="nav"></ul>
</div>
</div>
</body>
</html>
Use either of the before or after events, depending on when you want the name to change.
$('#slideshow').cycle({
prev: '.prev',
next: '.next',
pager: '.nav',
before: function () {
$("#name").text(this.alt);
}
});
You'll need to populate alt with the name in your php. If you don't want to add a tooltip, also add title="".
echo "<img src=\"http://localhost:8080/people/uploads/".$info['pic'] . "\" alt=\"".$info['name'] . "\" title=\"\" />";
Here is what I think should work:
Add a 'data-name' attribute to each image. Something like:
echo "<img src='http://localhost:8080/people/uploads/".$info['pic']."' data-name='".$info['name']."'/>";
In the jquery.cycle plugin set an option for the 'onPrevNextEvent'. Probably something like:
$('#slideshow').cycle({
prev: '.prev',
next: '.next',
pager: '.nav',
onPrevNextEvent: function(isNext, zeroBasedSlideIndex, slideElement){
var name = slideElement.data('name');
$("#name").html(name);
}
});
Hope that helps.
Bob