I have a php to echo three variable fields :
<li>
<mark> <?php while( $toprow2 = sqlsrv_fetch_array( $stmt3) ) {
echo $toprow2['overallRank'] ." ".$toprow2['EmployeeName'] ." ".$toprow2['Total_points_Rewarded']."<br/>";} ?>
</mark>
</li>
Among these three variables of the list,I want to align the first field "overallRank " to left ,"EmployeeName " to centre and "Total_points_Rewarded" to extreme right.
Below is the code I tried for the first field:
<li>
<mark> <?php while( $toprow2 = sqlsrv_fetch_array( $stmt3) ) {
echo "<div style = "text-align=left" ."$toprow2['overallRank'] "</div>"." ".$toprow2['EmployeeName'] ." ".$toprow2['Total_points_Rewarded']."<br/>";} ?>
</mark>
</li>
when I use three divs :
echo "<div style ='text-align:left'>" . $toprow2['overallRank'] . "</div><div style ='text-align:centre'>" . $toprow2['EmployeeName'] . "</div><div style ='text-align:right'>" . $toprow2['Total_points_Rewarded'] . "</div>";
I am not able to align them :Current scenario :
the first block is the rank,then name and last points - the three fields that I am trying to echo here.
css used for above situation:
li mark {
display: inline-block;
justify-content: space-between;
}
li mark div {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: grey;
}
#Abhay has a great solution :css aint working here,though
current situation:
Use flex:
echo "<div class='parent-div'><div class='rank'>" . $toprow2['overallRank'] . "</div><div class='name'>" . $toprow2['EmployeeName'] . "</div><div class='points'>" . $toprow2['Total_points_Rewarded'] . "</div></div>";
Your CSS:
.parent-div{
display: -webkit-flex; /* Safari */
display: flex;
}
.rank,.name,.points{
width:33%;
}
.name{
text-align: center;
}
.points{
text-align: right;
}
Small working ex:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
.parent-div{
display: -webkit-flex; /* Safari */
display: flex;
}
.rank,.name,.points{
width:33%;
}
.name{
text-align: center;
}
.points{
text-align: right;
}
</style>
</head>
<body>
<div class="parent-div">
<div class='rank'>Rank</div>
<div class='name'>Name</div>
<div class='points'>Points</div>
</div>
<div class="parent-div">
<div class='rank'>Rank</div>
<div class='name'>Name</div>
<div class='points'>Points</div>
</div>
<div class="parent-div">
<div class='rank'>Rank</div>
<div class='name'>Name</div>
<div class='points'>Points</div>
</div>
</body>
</html>
If continuing with span :
echo "<div class='parent-div'><span class='rank'>" . $toprow2['overallRank'] . "</span><span class='name'>" . $toprow2['EmployeeName'] . "</span><span class='points'>" . $toprow2['Total_points_Rewarded'] . "</span></div>";
Try this CSS:
.parent-div{
display: -webkit-flex; /* Safari */
display: flex;
}
.rank,.name,.points{
display:block;
width:33%;
}
.name{
text-align: center;
}
.points{
text-align: right;
}
Please mind that I have given class: parent-div to all three spans container div.
I hope it helps
Why don't you use
li mark {
display: inline; /* don't use inline-block */
justify-content: space-between;
}
li mark div {
float: left; /* here you put the float so it can be after the first li mark */
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: grey;
}
li mark div:first-child {
float: left; /* it will put your first div in left side */
}
li mark div:last-child {
float: right; /* it will be in the right side */
}
Also why not remove a width. For example instead being without it in the classes above, this means the width is 100% you could adjust it to width: 50% to half.
Related
I'm trying to make the hamburger icon clickable, so that it opens the .top-bar nav menu. But it doesn't work, am I not targeting it correctly? It does hide the .top-bar and display hamburger icon when I resize the window, but on click, nothing happens. I've tried playing with multiple classes in order to target the top-bar, all without any success. Does the problem lay in how I display the top bar?
Please find the code below.
HTML (header)
<header class="header" id="myHeader">
<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>';
}
?>
<label for="toggle">☰</label>
<input type="checkbox" class="toggle">
<?php
wp_nav_menu(
array(
'theme_location' => 'top-menu',
'menu_class' => 'top-bar'
)
);
?>
</div>
</header>
CSS
header .container {
height: 100%;
z-index: 10;
display: flex;
align-items: center;
position: relative;
}
header .container .top-bar {
list-style-type: none;
display: flex;
}
header .container .site-link,
.site-logo {
margin-right: auto;
}
header .top-bar li a {
padding: 0 2rem;
color: var(--off_white);
font-size: 1.3rem;
text-decoration: none;
z-index: 1000;
}
header .top-bar li.current-menu-item a {
background: var(--secondary);
padding: 2.5rem 2rem 2.5rem 2rem;
}
header label {
cursor: pointer;
font-size: 2rem;
color: var(--off_white);
display: none;
}
.toggle {
display: none;
}
#media (max-width: 992px) {
header label {
display: block;
}
.top-bar li {
display: none;
}
.toggle:checked~li {
display: block;
}
}
As you can see in the picture, there is a box to the right with some text and a lot of white space.
My goal is to have the text under the pictures while I have 3 pictures in a row that are nicely aligned.
When I try this either the pictures aren't aligned anymore or the pictures aren't cropped anymore.
I wanted every picture with the same size and still sharp but, then this issue came up.
#content {
width: 100%;
max-width: 100%;
margin: 20px auto;
}
form {
width: 50%;
margin: 20px auto;
}
form div {
margin-top: 5px;
}
#img_div {
width: 30%;
margin-left: 2%;
margin-right: 1%;
margin-bottom: 3%;
border: 2px solid #d8680c;
float: left;
}
#img_div:after {
content: "";
display: block;
clear: both;
}
img {
float: left;
object-fit: cover;
width: 250px;
height: 250px;
}
#pictext {
word-wrap: break-word;
}
<div id="content">
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<div id='img_div'>";
echo "<img src='fotopage\images/" . $row['image'] . "' >";
echo "<p id='pictext'>" . $row['image_text'] . "</p>";
echo "</div>";
}
?>
</div>
use class instead of using ID
ID must be unique and when you do the loop there will be some other divs with same ID
add it like this
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<div class='img_div'>";
echo "<img src='fotopage\images/" . $row['image'] . "' >";
echo "<p class='pictext'>" . $row['image_text'] . "</p>";
echo "</div>";
}
?>
make sure to reflect them via JS or JQuery depends on what your are using
I want to make some formatting within html with css to make my data presentable.
My php code is,
echo '<br><div class="items">' . "id" .'</div>';
echo '<div class="colon"> : </div>';
echo '<div class="details">' . "12" . '</div>';
My css is,
.items,.details,.colon {
display: inline-block;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.colon {
position: fixed;
left: 200;
}
.items {
position: relative;
margin-top: 5px;
padding: 3px 2px 0 8px;
width: auto;
display: block;
text-align: right;
margin : 0 auto;
font-size: 12px;
font-weight: bold;
}
.details {
font-size: 12px;
font-weight: normal;
text-align: left;
}
The output i am getting is,
And the output i want is,
Can anybody please suggest ?
Your looking for display:flex; "The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning."
Source # https://www.w3schools.com/css/css3_flexbox.asp
Html
<div class="flex-container">
<div class="item auto">auto</div>
<div class="item initial">initial</div>
<div class="item initial">initial</div>
</div>
Css:
.flex-container{background-color:#f4f7f8;overflow:hidden;display:flex;margin:1em}
.item{margin:1em;padding:.5em;width:110px;min-width:0;background-color:#1b5385;color:#fff;font-family:monospace}
.initial{flex:initial}
.auto{flex:auto}
Working codepen version https://codepen.io/amarinediary/pen/VwaVMza
Here is my problem i want to use scrollbar but it is only showing scrollbar but that scrollbar is not working. I am using CSS to style the scrollbar and other layouts and Html to use that styling.
here is my Styling Code
#sub_menu, #content{
display: inline-block;
}
#sub_menu{
width:23%;
height: 10%;
background-color: #999999;
padding: 1%;
vertical-align: top;
border: 1px solid;
}
#content{
width: 73%;
margin-right: 1%;
}
#media screen and (max-width: 600px), sreen\0{
#sub_menu{
height: initial;
font-size: 15px;
margin-bottom: 2%;
}
#content, #sub_menu{
display: block;
width: 95%
} }
.contentt {
height: 100%;
overflow-y: scroll;
margin-bottom: 1%;
}
.contentt::-webkit-scrollbar {
display: none;
}
And Here is my HTML CODE
<div id="sub_menu">
<h3 style="border-bottom: 3px solid rgb(135, 31, 139);">Related Videos</h3>
<div class="contentt" style="width:100%;height:40%; margin-bottom:3%;padding:2%" >
<?php
$con = new mysqli('localhost','','','');
$sql = "SELECT ID, Title, Link FROM that where Category like 'this'";
$result = $con->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$url = $row["Link"];
$title = $row["Title"];
$id = $row["ID"];
$path="http://domain/Song.php";
echo "<h5>$title'</h5>";
echo '<img src="http://domain/images/' . $id .'.jpg" alt="HTML tutorial" style="width:75%;height:95%;border:0;"class="btnn songpicc">';
echo '<hr>';
}
} else {
echo "0 results";
}
$con->close();
?>
</div>
</div>
Thanks in Advance
You need to fix the height of the container (not in %, but in px or em for example) with overflow-y: scroll;
your scrollbar is not working or it is hidden ?
remove below css and it should work for you
.contentt::-webkit-scrollbar {
display: none;
}
and instead
.contentt {
overflow-y: scroll;
}
just apply below code and check
.contentt {
height: 400px;
overflow-y: auto;
}
Just remove below code of css
.contentt::-webkit-scrollbar {
display: none;
}
Add below code of css
.contentt {
overflow-y:auto;
height:/* give here height in px as you need */
}
if you use webkit-scrollbar it will hide the scroll bar in chrome. But Firefox still alive with default scrollbar.
I'm researching all I can. And I am sure it is a dumb mistake, but...
I cannot for the life of me center the dynamic output displayed in a div.
All traditional methodologies seem to alter the divs themselves, not the content in the middle of the .input_des div.
The Goal: Center the dynamic content in .input_des without affecting anything else.
For background the CSS of the trouble spot looks like this:
.input_left{
position: relative;
left: 11%;
}
.input_img{
float: left;
width: 30%;
height: 100%;
margin-right: 25%;
top: 25%;
}
.input_des{
float: right;
width: 70%;
display: inline-block;
vertical-align: middle;
}
My HTML is:
<div class="input_left">
<div class="input_img">
<a href="product.php?id=' . $id . '">
<img style="border:#666 1px solid;" src="inventory_images/' . $id . '.jpg" alt="' .
$product_name . '" width="95%" height="16%" border="1"/>
</a>
</div>
<div class="input_des">' . $product_name . '<br />
$' . $price . '<br />
View Product Details
</div>
</div>
Any suggestions would be well received and much appreciated.
Gracias...
UPDATE: After taking a trying a few suggestions I finally found something that moved the text. It isn't perfect but at the moment I found adding to .input_des { margin-top: -20%;} that the dynamic content stays in the 'right lane' and adjusts upward. Each set of dynamic outputs (4 in total) aren't exactly aligned to their 'left lane' .input_img counterpart but they have moved upwards and look better than they did.
I will keep checking back for any additional info.
Thanks for taking the time to look at this and comment.
<div class="input_des">
<p>your content goes here</p>
</div>
.input_des p {
margin:5px auto;
}
You just need to add text-align: center; on the part that you want to center in your CSS or HTML code.
Or you may use <center> tag to each header that you want to center.
<script type="text/javascript">
$(document).ready(function()(){
$('.input_des').css('text-align','center');
});
</script>
try to put this line of code to the
I am not sure it works because I cant get the whole scene (I could if you have provided a fiddle), so I try to guess.
CSS
.input_des > * { display: inline-block; }
.input_des { text-align: center; float: right; width: 70%; display: block; vertical-align: middle; box-sizing: border-box; }
.input_img { box-sizing: border-box; float: left; width: 30%; height: 100%; padding-right: 25%; top: 25%; }
.input_left { position: relative; left: 11%; }
HTML
<div class="input_left">
<div class="input_img">
<a href="product.php?id=' . $id . '">
<img style="border:#666 1px solid;" src="inventory_images/' . $id . '.jpg" alt="' .
$product_name . '" width="95%" height="16%" border="1"/>
</a>
</div>
<div class="input_des"><span>' . $product_name . '<br />
$' . $price . '<br /></span>
View Product Details
</div>
</div>
Place an element inside the element with .input_des and assign the second element the css:
margin-left:auto;
margin-right:auto;
Place the dynamic info in the second element.
Edit - the second element inside the .input_des - element might have to have a fixed width also.
Also - did you check this?: How to horizontally center a <div> in another <div>?
Might inspire. Same principle I think, where the first div is your floating div.
Here is an example where the content inside the "centered" div is centered inside the "input_des"-div:
<style type="text/css">
.input_left
{
position: relative;
left: 11%;
}
.input_img
{
float: left;
width: 30%;
height: 100%;
margin-right: 25%;
top: 25%;
}
.input_des
{
float: right;
width: 70%;
display: inline-block;
vertical-align: middle;
border: 1px solid black;
}
.centered
{
width: 75%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: maroon;
}
</style>
<div class="input_left">
<div class="input_img">
I AM CONTENT
</div>
<div class="input_des">
<div class="centered">
I AM CONTENT
</div>
</div>
</div>