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)
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;
}
I have designed a two column display using table.
I want to align image to the bottom inside td. I used vertical-align: top property in td to show the text from top but here is another problem, I want to show image with the text as well but sometimes when text get larger then some td boxes looks larger than another td boxes, I want to show equal td boxes.
There is free space in bottom of some td boxes, I think if I show the image from bottom then free space will shift from bottom to mid so these boxes will look attractive.
I do not want to show the image from top but bottom for that purpose i used another div for the image inside td but all in vain.
Note:- I have tried different positions properties like relative, absolute but none of them working (and sorry for my English).
$rows = $result->num_rows; // Find total rows returned by database
if($rows > 0) {
//if ($result->num_rows > 0) {
// output data of each row
$cols = 2; // Define number of columns
$counter = 1; //
$nbsp = $cols - ($rows % $cols); // Calculate t
echo '<table width="100%" align="center" cellpadding="4"
cellspacing="10" border= 1px solid white>';
while($row = $result->fetch_assoc()) {
$ads = $row['ads_id'];
$id = $row['user_id'];
if(($counter % $cols) == 1) { // Check if it's new row
echo '<tr>';
}
echo "<td>";
echo "<a href='welcome.php?user_id=$id&&ads_id=$ads'>";
echo "Book title - ". $row["title"] ."<br>";
echo "Book author - " . $row["author"] . "<br>";
echo "Price - " . $row["price"]. "<br>";
echo "Grade - " . $row["grade"]. "<br>";
echo "Description - " . $row["descrip"]. "<br>";
$img = $row['pic'];
echo "<div class=csc>";
echo '<img src="'.$img.'">';
echo"</div>";
echo "</a>";
echo "</td>";
if(($counter % $cols) == 0) {
echo "</tr>";
}
$counter++;
//echo "</table>";
}
if($nbsp > 0) { // Add unused column in last row
for ($i = 0; $i < $nbsp; $i++) {
echo '<td> </td>';
}
echo '</tr>';
}
echo '</table>';
} else {
echo "0 results";
}
$conn->close();
?>
This is the CSS part
table {
width: 100%;
text-align:center;
}
th, td {
vertical-align: top;
text-align: left;
padding: 8px;
background: #D9E4F5;
width: 50%;
font-family: georgia;
.csc{
bottom:1000px;
}
.csc img{
display: inline-block;
width: 100%;
height: 100px;
margin-top: 100px;
bottom:2000px;
}
First of all you've missed a } in your css.
This may solve your problem:
table {
width: 100%;
text-align: center;
}
th, td {
vertical-align: bottom; /* This is what you need */
text-align: left;
padding: 8px;
background: #D9E4F5;
width: 50%;
font-family: georgia;
}
.csc{
bottom: 1000px;
}
.csc img{
display: inline-block;
width: 100%;
height: 100px;
margin-top: 100px;
bottom: 2000px;
}
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...
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 have to fit my div size is height=250px and width=1000px and want to fit image automatically in this size. but when i upload image it not fits in div.
My code is here:
css
#main {
width:1000px;
margin:0 auto;
background: #fff;
position:relative;
z-index:1;
}
.promo-image {
margin:0 0 8px;
}
.promo-image img {
vertical-align:top;
}
html:
<main id="main" role="main">
<div class="promo-img">
<?php
$sql4 = "SELECT * FROM adverts_top ORDER BY id DESC LIMIT 1";
$query4 = $conn->query($sql4);
$row4 = $query4->fetch(PDO::FETCH_ASSOC);
$link4 = $row4['link_url'];
$images4 = $row4['imagepath'];
$immg4 = basename($images4);
$imagee4 = "adverts"."/".$immg4;
$rowc = $query4->rowCount(PDO::FETCH_ASSOC);
if ($rowc>=1) {
echo "
<a href='$link4'; target='_blank'><img src='$imagee4';></a>
";
}
else {
echo "";
}
?>
</div>
</main>
You need to use width:100% in <img> you can use inline css as well as you can write it in external file
Inline
External
Pass a class in <img> and write css according to that
.fullWidth{
width:100%;
}
I think he means this
.promo-image {
position: absolute;
top: 0;
right: 0;
bottom: 8px;
left: 0;
}
seeing how he set #main's position to relative without setting any other values (like top or left) for #main