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
Related
I have written a code that works great for me. So I have a (half) border around my picture. like the picture below. But when I add a background-color the line dissapears.
Now I want the oppiste colors but there for I need a background-color. So I did that but now the border isn't showing anymore. So I want a white line with an orange background. There are 3 files. The CSS file, The PHP file u can see here and a file where they get together.
My PHP/HTML
#about {
background-color: #EF7F19;
color: white;
}
#about .about {
flex-direction: column-reverse;
text-align: center;
max-width: 1200px;
margin: 0 auto;
padding: 100px 20px;
}
#about .col-left {
width: 250px;
height: 360px;
}
#about .col-right {
width: 100%;
}
#about .col-right h2 {
font-size: 1.5rem;
font-weight: 500;
letter-spacing: 0.2rem;
margin-bottom: 10px;
}
#about .col-right p {
margin-bottom: 20px;
}
#about .col-left .about-img {
height: 100%;
width: 100%;
position: relative;
border: 10px solid #EF7F19;
}
#about .col-left .about-img::after {
content: '';
position: absolute;
left: -33px;
top: 19px;
height: 98%;
width: 98%;
border: 7px solid white;
z-index: -1;
}
#media only screen
and (min-width:768px) {
#about .about {
flex-direction: row;
}
#about .col-left {
width: 600px;
height: 400px;
padding-left: 60px;
}
#about .about .col-left .about-img::after {
left: -45px;
top: 34px;
height: 98%;
width: 98%;
border: 10px solid white;
}
#about .col-right {
text-align: left;
padding: 30px;
}
#about .col-right h1 {
text-align: left;
}
}
echo ' <section id="about">';
echo ' <div class="about container">';
echo ' <div class="col-left">';
echo ' <div class="about-img">';
echo ' <img src="'. $row[" AboutLocation "].'"
alt="img">';
echo ' </div>';
echo ' </div>';
echo ' <div class="col-right">';
echo ' <h1 class="section-title"
style="color: white;">Over ons</h1>';
echo ' <h2>Adisol</h2>';
echo ' <p>'. $row["AboutUsText"].'</p> ';
echo ' </div>
</div>
</section>';
Like I said already in the comment. The use of box-shadow would be the easier approach to achieve the wanted design. That way you dont need pseudo elements. you can use 2 box shadows with a vertical and horizontal offset.
Lets go through the code and see how it actually works:
1st: you need a border aroudn your image. specifiy the border as white solid with a thickness of your liking.
2nd: We need an orange frame which we'll get by using the box-shadowattribute with 2 values that are seperated with a comma.
3rd: lets start with the second and last value: -30px 30px 0 0 orange the first number is the horizontal offset which will move the frame 30px to the left. The second number is the vertical offset which moves the frame 30px to the bottom. The third number is the blur value. With 0 it will be a solid color. The fourth and last number is the size. With 0 it has the exact same size as the picture.
4th: To prevent that the whole shadow displays as an orange block, we need to put another box shadow value in front of it. We give it the same offset and blur value. The fourth number we change however. We change it to a negative value of the intended "frame" thickness. In this case -10px which will make the "frame" 10px thick.
img {
width: 50%;
float: right;
border: 10px solid white;
box-shadow: -30px 30px 0 -10px white,
-30px 30px 0 0 orange;
}
/* for demonstration only */
img {
margin-bottom: 100px;
}
<img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">
The footer is overlapping one of my webpage. all the others pages are fine but this one its overlapping, i dont really want to edit/update the footer as it is working in other pages, but I would like to see if there is something I can do with the css container for this page.
CSS
#box {
width: 100%;
height: auto;
margin-top: 20px;
position:relative;
padding-right:0.4%;
float:left;
margin-bottom: 10px;
}
.boxChildLeft {
left: 0;
width: 80%;
height: 100px;
border: 1px solid;
margin-bottom: 2px;
position: relative;
float: left;
}
CSS footer/body etc
html,
body {
margin:0 auto;
padding: 0;
max-width: 960px;
height: 100%;
background-color: white;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:white;
padding:10px;
}
#body {
padding:10px;
padding-bottom:40px; /* Height of the footer */
}
#footer {
position: absolute;
bottom:0;
left: 0;
right: 0;
height:40px; /* Height of the footer */
background:#EBEBEB;
border-radius: 5px;
}
PHP/HTML
for($temp = 1; $temp <= $cArray[2]; $temp++)
{
$img .= "<div class='boxChildLeft'>
<div class='img'>
<img src='../ProductImages/$cArray[0].jpg' width='100px' height='100px'>
</div>
<div class='prodInfo'>
<p1>$pName</p1><br>
<span id='sp'><p1>$pPrice<p1>
</span>
</div>
</div>";
}
HTML
<div id="box">
<?php echo $img;?>
</div>
The information you provided is not enough, what I suggest is to use W3school HTML validator it will indicate what's missing from your HTML implementation, it will help you by giving suggestions.
I'm trying to display my database items in rows and i can't go forward on with my project.I suppose it's from my stylesheet,but i don't seem to get what's my error.
I have uploaded some pics for a better understanding of my problem.
http://imgur.com/v256LlC,ILUyBXe,fUthSOn#0
CSS:
#item {
text-align:center;
border: 5px solid #D9D9D9;
height:10px;
list-style: none;
margin-left: 1.5em;
margin-right: 30px;
margin-bottom: 40px;
margin-top: 40px;
width: 140px;
border-radius: 5px;
-moz-border-radius: 10px; /* firefox rounded corners */
-webkit-border-radius: 10px; /* Safari rounded corners */
min-height: 200px;
}
#item li h1 {
text-align:center;
}
#item li#white{
min-height: 10px;
}
Echoing the products via Model:
<?php
include '../controller/produse.php';
$products=Produse::SelectProducts();
for ($key_Number = 0; $key_Number < count($products); $key_Number+=2) {
echo "<div id= 'item'>" .
"<p><img src=../".$products[$key_Number]." height=\"125\"width=\"110\" ></p>";
echo $products[$key_Number+1];
"</div>";
}
?>
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">first cell</div></div>
<div style="display:table-row">
<div style="display:table-cell">second cell</div></div>
<div style="display:table-row">
<div style="display:table-cell">third cell</div></div>
<div style="display:table-row">
<div style="display:table-cell">fourth cell</div></div>
</div>
I am trying to show a lot of results at once (like 25) but my program cut the results around the 5th record having area space still available, the results are in a table
created dynamically but seems that the area doesn't expand accordingly.
<div id="contenido" class="contenido">
<div id="Tabs">
<ul style="cursor:pointer;">
<li id="li_tab1" onclick="tab('tab1')" >
<a>Últimas alertas</a> </li>
<li id="li_tab2" onclick="tab('tab2')"> <a>otras</a> </li>
</ul>
<div id="Content_Area">
<div id="tab1">
<p class="notas">Showing last alerts</p>
<table>
<tr>
<td style="color:blue">Alert</td>
<td style="color:blue">User</td>
</tr>
<?php
while ( $row = $result->fetch_array() ){
echo "<tr><td>".$row['DESCRIPTION']."</td>";
echo "<td>".$row['EMAIL']."</td>";
echo "<td>".$row['SUB_SECCION']."</td></tr>";
}
}
else
echo "error on query: ".$conx->error;
}//else
?>
</table>
</div>
<div id="tab2" style="display: none;">
<!-- We set its display as none because we don’t want to make this
tab visible by default. The only visible/active tab should
be Tab 1 until the visitor clicks on Tab 2. -->
<p>This is the text for tab 2.</p>
</div>
</div> <!-- End of Content_Area Div -->
</div> <!-- End of Tabs Div -->
</div>
CSS creates tabs, but for the moment only the first has the table the other just one line of text, but the table is inside this tab div
archivo css
.contenido {
color: black;/*#333*/
background-color: #F2F2E6;
margin: 0px 0px 5px 0px;
padding: 10px;
border: 1px solid #ccc;
width: 75%;/*678px;*/
height: 480px;
float: right;
display: inline;
}
#Tabs ul {
padding: 0px;
margin: 0px;
margin-left: 10px;
list-style-type: none;
}
#Tabs ul li {
display: inline-block;
clear: none;
float: left;
height: 24px;
}
#Tabs ul li a {
position: relative;
margin-top: 16px;
display: block;
margin-left: 6px;
line-height: 24px;
padding-left: 10px;
background: #f6f6f6;
z-index: 9999;
border: 1px solid #ccc;
border-bottom: 0px;
/* make the top left and top right corners of each tab rounded. */
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
/* end of rounded borders */
width: 130px;
color: #000000;
text-decoration: none;
font-weight: bold;
}
#Tabs ul li a:hover {
text-decoration: underline;
color:red;
}
#Tabs #Content_Area {
/* this is the css class for the content displayed in each tab */
padding: 0 15px;
clear:both;
overflow:hidden;
line-height:19px;
position: relative;
top: 20px;
z-index: 5;
height: 150px;
overflow: hidden;
}
p { padding-left: 15px; }
The problem is inside your CSS.
height: 150px; and overflow: hidden; in #Tabs #Content_Area could be factor.
Since you have overflow: hidden; set to "hidden", it could be a factor.
Try changing it to overflow:scroll; or overflow:visible; to see if that works, and/or changing the heights to a higher number for those IDs.
Try different variations.
I see a two possible causes:
The database query only returns 5 results
the DIV is not large enough, and even though the table ends up in,
say, 25 records, the first 5 are only displayed and the rest are
hidden by the boundaries of DIV.
It would help if you put some more PHP code or even the CSS of the #area.
I have the code below in a site but can't get to center everything within the main div (rightBarItems):
<div class="rightBarItems">
<?php
echo "<div class='similarTitle'>YOU MAY ALSO LIKE</div>";
while ($row3 = $result3->fetch())
{
echo "<div class='similarItems'>";
echo "<a href='items_descr.php?itemId=".$row3[id_item]."'><img class='similarImage' src='images/{$row3[thumb1]}.jpg'></img>";
echo "<div class='similarItemsText'>".$row3[name]."</div></div>";
}
?>
Then, here is my css:
.similarTitle {
font-family:"Century Gothic","Trebuchet MS",Helvetica,Arial,sans-serif;
font-size:15px;
text-transform:uppercase;
color:#3E3E3E;
}
.rightBarItems
{
margin: 0 auto;
width: 168px;
background: #F3EFE2;
padding: 10px;
float: right;
text-align: center;
height: 300px;
}
.similarItems {
float: left;
text-align:center;
margin: 0 auto;
padding: 5px;
}
.similarItemsText {
padding-right: 11px;
margin: 0 auto;
font-family: verdana,Helvetica,Arial,sans-serif;
font-size: 11px;
color: #666;
}
#similarImage {
margin: 0 auto;
border: 1px solid gray;
float: left;
}
Not everything gets centered... Any help? Thanks!!
* Adding some extra CSS I had forgot to put
Use:
text-align:center;
For all of these CSS classes: rightBarItems, similarTitle, similarItemsText, similarImage.
Try This in CSS
.rightBarItems{ text-align:center ; }
or
.rightBarItems > div { margin-left:auto ; margin-right:auto; }
Remove the float:right style from the rightBarItems div.
Well, firstly, you have different padding values for each class so that will first prevent them from aligning.
If you are ok with leaving a paragraph space between the texts then align=center should work with the paragraph tag instead of fixing the whole CSS code.
<p align="center"> Centered Text </p>