So I want to put the two divs next to each other and the one below in the code gets put into the one above and I have no idea why.
HTML:
<body>
<div id="links">
<h1 id="title">Webcam</h1>
<?php
$dateinamen = 'pictures/Live.jpg';
$timestamp = filemtime($dateinamen);
$time = time();
$diff = $time -$timestamp;
// Wenn Bild jünger als 10sec
if ($diff < 10){
echo "<img src='pictures/Live.jpg'";
}
else {
echo "<img src='pictures/oops.jpg'";
}
?>
</div>
<div id="rechts">
<h2>Ping</h2>
<?php
$host1="192.168.1.1";
exec("ping -c 1 -w 1 " . $host1, $output1, $result1);
if ($result1 == 0) {
echo "<h3 id='sw1'style='background-color: green';>Router</h3></br>";
}else {
echo "<h3 id='sw1'style='background-color: red';>Router</h3></br>";
}
?>
</div>
</body>
CSS:
#links{
float: left;
width: 50%;
}
#rechts{
float: right;
width: 50%;
margin-top: 7%;
}
Haven't found any cases like these so I don't know if it's a problem with xampp or something else.
EDIT
Photo in inspection mode in Google Chrome
You didn't close the img tag used in the PHP code.
use <img src='pictures/Live.jpg'>
Try to check by removing margin-top:7%; form this class
#rechts {
float: right;
width: 50%;
// margin-top: 7%; remove this line
}
Try using flexbox instead.
#container {
display: flex;
}
#links{
flex: 1;
background-color: blue;
height: 500px;
}
#rechts{
flex: 1;
background-color: red;
height: 500px;
}
<body>
<div id="container">
<div id="links">
<h1 id="title">Webcam</h1>
</div>
<div id="rechts">
<h2>Ping</h2>
</div>
</div>
</body>
Seems like I just got trolled...
I just switched the two divs around (using the Flexbox solution proposed by Michał Drabik) and it worked...
Related
I just have a quick question as I've run into a problem I am unable to solve. I just need a logo to be on the left of the container and navigation links (top-bar) on the left. Where is the problem in my code?
HTML:
<header>
<div class="container">
<?php
$custom_logo_id = get_theme_mod('custom_logo');
$logo = wp_get_attachment_image_src($custom_logo_id, 'full');
if (has_custom_logo()) {
echo ' <img class="site-logo" src="' . esc_url($logo[0]) . '" alt="' . get_bloginfo('name') . '"> ';
} else {
echo '<h1 class="site-logo">' . get_bloginfo('name') . '</h1>';
}
?>
<?php
wp_nav_menu(
array(
'theme_location' => 'top-menu',
'menu_class' => 'top-bar'
)
);
?>
</div>
</header>
CSS:
header .container {
height: 20%;
z-index: 99;
display: flex;
align-items: center;
}
header .container .site-logo {
align-items: flex-start;
}
header .container .top-bar {
list-style-type: none;
display: flex;
align-self: flex-end;
}
When there is a logo image, it is wrapped in an <a> tag. So the margin needs to be applied to the <a>. When there is no logo image, the margin should be applied to the <h1>.
Try:
.site-link, .site-logo {
margin-right: auto;
}
Hello everyone and happy Friday night,
I would like to have the following sentence in the same line and not in two lines:
echo "- About $foundnum results - <div class='feedback-search'><a href=''>Give us Feedback about this result</a></div><p><br>";
The problem is that by applying the css div class='feedback-search' it creates a new line and put the text below. How can I make everything in one line?
Below you find the entire code of my page:
Thank you so much in advance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CLIHELP - Help for Command Line Interface</title>
<meta name="description" content="Help for Command Line Interface">
<meta name="author" content="clihelp.org">
<style>
.navmenu {
background-color: #FFFFFF;
}
.navmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
align-items: center;
}
.navmenu li:last-child {
margin-left: auto;
}
.navmenu ul li a {
text-decoration: none;
margin: 4px;
padding: 5px 20px 5px 20px;
color: #FFFFFF;
background: #4285F4;
display: inline-block;
}
.main-content {
padding: 5px 20px 5px 20px;
}
.feedback-search {
font-size: 13px;
}
.title {
font-size: 20px;
}
.title a {
text-decoration: none;
}
.title a:hover {
text-decoration: underline;
}
.tags {
color: #006621;
}
</style>
</head>
<body>
<div class="navmenu">
<ul id=menu>
<li>Clihelp</li>
<li>GitHub</li>
<li><form action='q.php' method='GET'>
<input type='text' size='25' name='search'>
<input type='submit' name='submit' value='Search' >
</form></li>
</ul>
</div>
<div class="main-content">
<?php
$button = $_GET ['submit'];
$search = $_GET ['search'];
if (!$button)
echo "you didn't submit a keyword";
else {
if (strlen($search) <= 1)
echo "Search term too short";
else {
echo "<p>Your search - <b>$search</b> ";
mysql_connect("localhost", "username", "password");
mysql_select_db("dbname");
$search_exploded = explode(" ", $search);
foreach ($search_exploded as $search_each) {
$x++;
if ($x == 1)
$construct .= "(CONCAT(code,cliCommandId) LIKE '%$search_each%' OR os LIKE '%$search_each%' OR title LIKE '%$search_each%' OR tags LIKE '%$search_each%' OR script LIKE '%$search_each%') ";
else
$construct .= "AND (CONCAT(code,cliCommandId) LIKE '%$search_each%' OR os LIKE '%$search_each%' OR title LIKE '%$search_each%' OR tags LIKE '%$search_each%' OR script LIKE '%$search_each%')";
}
$construct = "SELECT * FROM cliCommand WHERE $construct";
$run = mysql_query($construct);
$foundnum = mysql_num_rows($run);
if ($foundnum == 0)
echo "- did not match any documents.</br></br>Suggestions:</br></br>- Make sure all words are spelled correctly.</br>- Try different keywords.</br>- Try more general keywords.</br>- Search by id.";
else {
echo "- About $foundnum results - <div class='feedback-search'><a href=''>Give us Feedback about this result</a></div><p>";
while ($runrows = mysql_fetch_assoc($run)) {
$cliCommandId = $runrows ['cliCommandId'];
$code = $runrows ['code'];
$os = $runrows ['os'];
$title = $runrows ['title'];
$tags = $runrows ['tags'];
$script = $runrows ['script'];
echo "
<div class='title'><a href=''>$title</a></div>
<div class='tags'>$tags</div>
$script<br>
<p>
";
}
}
}
}
?>
</div>
</body>
</html>
Change the div to span:
echo "- About $foundnum results - <span class='feedback-search'><a href=''>Give us Feedback about this result</a></span><p><br>";
^ ^
//Notice the span instead of div --| (here) ------------------------------------------------------------------------| (and here)
The reason that this happens:
The reason why this splits onto two lines is that a <div> is a block level element by default which means that its display value is block.
Block level elements by default expand to fit the width of their container, which in your case is the width of the line. This pushes the following content down to the next line.
A <span> element is an inline element, which by default expands in width to fit its contents.
See this post for a visual explanation on the difference between inline, block and inline-block elements.
I am trying to create two columns. One column is on the left and the other column is on the right. These two columns have an image and text to go along with it. Instead of having each image and text turn into a block of its own on a separate line, the images and text stack up on top of each other for both columns. How can I solve this?
PHP/HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="test.css"?parameter="3"/>
</head>
<?php
$resultSet = $db->query("SELECT * FROM Articles");
if ($resultSet->num_rows != 0)
{
while ($rows = $resultSet->fetch_assoc())
{
$id = $rows["id"];
$images = $rows["image"];
$text = $rows["text"];
echo "<div id=body>";
if ($id > 3 && $id < 8)
{
echo "<div id=left>";
echo "<img src=$images>";
echo "<p>$text</p>";
echo "</div>";
}
if ($id > 8)
{
echo "<div id=right>";
echo "<img src=$images>";
echo "<p>$text</p>";
echo "</div>";
}
echo "</div>";
}
}
?>
CSS
#body{
position: relative;
margin: 0 auto;
width: 85%;
height: auto;
}
#left{
position: absolute;
left: 0%;
width: 28.33%;
display: block;
}
#left img{
width: 100%;
}
#right{
position: absolute;
right: 0%;
width: 28.33%;
}
#right img{
width: 100%;
}
First off there are a lot of things are added that don't need to be. That said, try this:
#left{
width: 28.33%;
display: inline-block;
float: left;
}
#right{
width: 28.33%;
display: inline-block;
float: left;
}
1.) Add singular ' quotes around you attribute values in the echo statements.
echo "<img src='path-to-img'>";
2.) If its only 2 columns, then the css for left box should be
`{position:relative; float:left;width:50%} ,
{position:relative; float:right;width:50%}`
for right box. From there you can choose to absolute position the images or text-align:center the boxes or whatever you want from there.
3.) Naming a id='body' is bad practice, you should rename it.
4.) Set CSS to display:block for both, not just one of those divs (left/right)
I'm (finally) starting to learn how to write web pages. I have this little issue:
I'm putting a <div> with some images (it's a simple slideshow, and it works great), and below it a paragraph inside another <div> (the relevant code is below). But when I open the page in the browser, sometimes the paragraph appears behind the images, but once I refresh the page, it appears on it's right place.
The sometimes is the thing that bothers me most. If it always appeared behind the immages, I'd know I was doing something wrong... but that's not the case... so, am I missing something?
So, the specific question is: How to ensure that the second <div> always appears below the first one?
The code:
index.php
<head>
<script type="text/javascript" src="js/libs/jquery/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/scripts/script_main.js"></script>
</head>
<body>
<div id="mainpanel">
<div id="slideshow">
<?php
/*
This will simply add the images to the slideshow, and it works great
*/
$dir = "img/index";
$files = scandir($dir);
$i = 0;
foreach($files as $img) {
if(substr($img, 0, 5) == "slide" && substr($img, -4) == ".jpg") {
$i++;
if($i == 1) {
echo "\n" . '<img alt="" class="active" src="' . $dir .'/' . $img . '" />';
} else {
echo "\n" . '<img alt="" src="' . $dir .'/' . $img . '" />';
}
}
}
?>
</div>
<!--
This is the place where the problem seems to be:
This second div sometimes appears behind the first one.
-->
<div class="slideshow_text">
<p>
Suspendisse eu nibh ac ex interdum auctor.
Curabitur in nisi a libero tempor volutpat.
Praesent ornare tortor quis tempus aliquam.
</p>
</div>
</div>
</body>
css/index.css
#mainpanel {
min-height: 50em;
}
#mainpanel #slideshow {
min-height: 430px;
position: relative;
height: auto;
width: 80%;
margin-left: 10%;
margin-right: 10%;
}
#mainpanel #slideshow img {
display: block;
margin-left: 2em;
max-width: 80%;
width: 480px;
position: absolute;
top: 0;
left: 0;
z-index: 8;
}
#mainpanel #slideshow img.active {
z-index: 10;
}
#mainpanel #slideshow img.last-active {
z-index: 9;
}
#mainpanel .slideshow_text {
display: block;
margin-left: 10%;
margin-right: 10%;
padding-left: 2em;
padding-right: 2em;
font-family: serif;
font-size: 0.9em;
clear:both;
}
js/scripts/script_main.js (Just in case the problem is here)
function slideSwitch() {
var $active = $('#slideshow img.active');
if($active.length === 0) {
$active = $('#slideshow img:last');
}
var $next = $active.next().length ? $active.next() : $('#slideshow img:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval('slideSwitch()', 5000) ;
});
$(document).ready(function() {
var $slideshow_height = $('#slideshow img:first').height();
$('#slideshow').css('min-height', $slideshow_height);
});
$(window).resize(function() {
var $slideshow_height = $('#slideshow img:first').height();
$('#slideshow').css('min-height', $slideshow_height);
});
Good day :) I would suggest you to force your text element to be over slideshow elements with z-index, maybe you should try adding something like:
#mainpanel .slideshow_text {
z-index: 12;
}
I am using PHP to loop through an array and return results, each result is being displayed along with some html code. Right now, to achieve the indent I am using a DIV tag and setting the margin like so:
For output 1:
<div style='height: 20px;margin-left: 60px;'>
For output 2:
<div style='height: 20px;margin-left: 110px;'>
The issue with this method of setting the margin for each output is it relies on the criteria to always match but sometimes the criteria doesnt match and the indentation is ruined.
So basically is there another way using CSS or some other way to increase the indent for each output rather than having to specify a fixed one ?
Apologies if I am not being clear enough but hoping you can understand what I am asking, otherwise let me know and I will try clarify some more.
Here is a sample code:
foreach ($data[0] as $data) {
if ($data == a) {
echo "<div style='margin-left: 0px; '><img src='img/server_s.png' style='float: left;'></div>";
} elseif ($data == b) {
echo "<div style='margin-left: 60px;'><img src='img/link.png' style='clear: left;'></div>";
} elseif ($data == c) {
echo "<div style='margin-left: 110px;'><img src='img/link.png' style='clear: left;'></div>";
}
}
You can achieve it through simple list tags of HTML.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul li {
list-style: none;
margin: 15px 0px;
}
span {
border: 1px solid #000;
padding: 5px;
}
</style>
</head>
<body>
<h2>A Nested List</h2>
<ul>
<li><span>Milk</span>
<ul>
<li><span>Tea</span></li>
<ul>
<li><span>Black Tea</span></li>
</ul>
</ul>
</li>
</ul>
</body>
</html>
Reference URL for sample: http://www.w3schools.com/Html/tryit.asp?filename=tryhtml_lists_nested
Thanks & Regards,
Vivek
hope this work for you
$a=0;
foreach ($data[0] as $data) {
if ($data == a) {
echo "<div style='margin-left: ".$a."px; '><img src='img/server_s.png' style='float: left;'></div>";
} elseif ($data == b) {
echo "<div style='margin-left: ".$a."px;'><img src='img/link.png' style='clear: left;'></div>";
} elseif ($data == c) {
echo "<div style='margin-left: ".$a."px;'><img src='img/link.png' style='clear: left;'></div>";
}
$a=$a+60;
}