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.
Related
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...
So here's a sample I receive from CMS content:
<p>
First Name
<br />
Location
</p>
Is it possible to add styling to specific content from before/after the <br> tags?
For instance, every text before the <br> tag I want color: red and anything afterwards I want color: purple
Just wrap the text in a span with a class name and style it with CSS. You can do this as much as you want to get the desired results.
The HTML
<p>
<span class="name">First Name</span>
<br>
<span class="location">Location</span>
</p>
The CSS Classes
.name{
color:red;
}
.location{
color:purple;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.red {
color: red;
}
.purple {
color: purple;
}
</style>
</head>
<body>
<p>
First Name
<br/>
Location
</p>
<p>
First Name Bis
<br/>
Location Bis
</p>
</body>
<script>
var p = $( "p" ).has( "br" ); /* select all p tag with a br tag inside */
var regex = /<p>([\s\S]*?)<br>([\s\S]*?)<\/p>/g; /* regex, i'm not rly familiar but this one select the part between <p> and <br> (group 1) and <br> to </p> (group 2)*/
var i;
for(i = 0; i < p.length; i++){ /* foreach the selected elt */
var newStr = "";
while ((match = regex.exec("<p>" + p[i].innerHTML + "</p>")) !== null) { /* adding <div class = "red">(group 1 contents)</div> same with purple */
newStr += "<div class = \"red\">" + match[1] + "</div><br>";
newStr += "<div class = \"purple\">" + match[2] + "</div>";
p[i].innerHTML = newStr;
}
}
</script>
</html>
The below would accomplish what you're looking to do but it's not a great answer (very brittle).
<p><br></p>
p::before {
content: "First Name";
color: red;
}
p::after {
content: "Location";
color: purple;
}
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 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;
}
So what I'm trying to accomplish seems like easy CSS etc. Im changing a messaging system and what the conversations to start at the bottom sorta like Facebook or text message where it has one person on the left and the other on the right.
How do I get the divs to go up as new content is added via ajax? I saw this similar question but didn't quite understand what he mean focus on the LI. An example would be great.
Something like this perhaps?
<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function prependChild(parent, element)
{
if (parent.childNodes)
parent.insertBefore(element, parent.childNodes[0]);
else
parent.appendChild(element)
}
window.addEventListener('load', mInit, false);
function mInit()
{
byId('btnAddNew').addEventListener('click', onAddBtnClicked, false);
}
function onAddBtnClicked()
{
var txtInputElem = byId('newMsgTxtInput');
var msgTxt = txtInputElem.value;
var li = newEl('li');
li.appendChild( newTxt( msgTxt ) );
var ulTgt = byId('msgTarget');
var existingLiItems = ulTgt.querySelectorAll('li');
var numItemsExisting = existingLiItems.length;
if (numItemsExisting%2 != 0)
li.className = 'even';
else
li.className = 'odd';
prependChild(ulTgt, li);
}
</script>
<style>
.controls
{
display: inline-block;
padding: 8px;
margin: 8px;
border: solid 1px #555;
border-radius: 4px;
color: #777;
background-color: #ddd;
}
#msgTarget
{
width: 275px;
border: solid 1px #555;
margin: 8px;
border-radius: 4px;
}
/*
Doesn't work 'properly' - since we add items at the top, rather than the bottom
The first item added will be 'even', then the second item gets added and now it's the first child 'even'
so, the item added first is now an 'odd' child. A better way may be to count the number of existing li
items the ul contains, before assigning the new li elements a class of even or odd that will enable css
styling.
#msgTarget li:nth-child(odd)
{
background-color: #CCC;
}
#msgTarget li:nth-child(even)
{
background-color: #5C5;
}
*/
.odd
{
background-color: #CCC;
}
.even
{
background-color: #5C5;
}
</style>
</head>
<body>
<div class='dlg'>
<div class='controls'>
<input id='newMsgTxtInput'/><button id='btnAddNew'>Add message</button>
</div>
<ul id='msgTarget'></ul>
</div>
</body>
</html>