I am building a comics website, but am having trouble aligning the images the way I want.
I'm going for this:
I'm trying to get the comics in a row like this (blue)
But all the images are coming out on top of each other:
I thought my CSS was correct...
*{
margin: 0;
padding: 0;
}
body {
background: gray;
text-align: center;
}
#wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
background: white;
}
#comics {
/*top, right, bottom, left*/
margin: 50px 100px 50px 100px;
}
.comicBG {
position: absolute;
border: 1px dotted black;
background: #99FF33;
padding: 25px;
}
PHP:
echo '<td>';
echo '<span class="comicBG"><a href="./templates/viewcomic.php?id=' . $row['imgid'] . '">
<img src="' . $thumbpath.$row['imgthumb'] . '"/></a>' .
'<br />' . $row['imgtitle'] . '</span>';
echo '</td>';
Does anyone know the best way to position individual data elements (like the images)?
Should I be using a table, or a list?
Thanks!
I'd use an unordeder list. And you see all the images at the same place because you've set their position to absolute and you haven't set any coordinates.
You can remove position:absolute and the images should be in rows. And if you use an unorderer list, you can float the li's to the left.
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">
I am working on a website in which I want to make a square box around times.
The php code which I have used in order to pull off the times is:
{
echo date('l', strtotime($key)).": ".$value['start']." ".$value['end']."<br/> <br/>";
}
The above php pulls off the following day and times:
Problem Statement:
I am wondering what changes I should make in the php code above so that I can put the square boxes around times, something like this:
PHP has nothing to do with design. And you should definitely not use characters
(like ) to create spaces / margins
Demo: https://www.tehplayground.com/WtTs8Yk0pRw8wHAu
use CSS instead:
* {margin:0; box-sizing:border-box;}
html,body {height:100%; font:14px/1.4 sans-serif;}
.times {
display: inline-flex; /* act as inline */
flex-flow: row wrap; /* wrap into flex rows */
}
.times>* {
flex: 1 0 25%; /* 25%, so subdivision by 4 elements */
text-align: center;
padding: 5px;
margin: 5px 0;
}
.times>*:nth-child(2n) { /* every second child element (time SPAN) */
border: 1px solid #ddd;
border-radius: 3px;
}
<div class="times">
<span>mon:</span>
<span>09:00</span>
<span>to</span>
<span>21:00</span>
<span>tue:</span>
<span>09:00</span>
<span>to</span>
<span>21:00</span>
<span>wed:</span>
<span>09:00</span>
<span>to</span>
<span>21:00</span>
</div>
so inside your PHP foreach simply echo like:
echo '
<span>'. date('l', strtotime($key)) .':</span>
<span>'. $value['start'] .'</span>
<span>to</span>
<span>'. $value['end'] .'</span>
';
I have added the round-cornered box around the time values. Round cornered boxes were created using CSS class called box. Put this code in the header section of your page
<style>
.box{
background-color: #4CAF50;
border-radius: 12px;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
and change the php code as below
echo date('l', strtotime($key)).": <span class='box' >".$value['start']."</span> <span class='box' >".$value['end']."</span><br/> <br/>";
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>
If I hover over the hyperlink, the tooltip shows up but not as it should. It shows up a few inches below the hyperlink. I got the code from a demo of the internet.
How do I get the tooltip right below the hyperlink?
Here is the PHP code I used:
if ($teller == 3) {
echo '<p><a href="#" class="tooltip">...<span>';
foreach ($bericht->datums as $date) {
echo date('d/m/Y', strtotime($date->datum)) . ' om ' . date('H:i', strtotime($date->beginUur)) . '<br />';
}
echo '</span></a></p>';
}
The code above generated this code in HTML:
<p>
<a href="#" class="tooltip">...
<span>
13/04/2013 om 13:49<br />
15/04/2013 om 12:50<br />
29/04/2013 om 16:00<br />
</span>
</a>
</p>
Here is the CSS that belongs to it:
a.tooltip span {
position:absolute;
z-index: 999;
white-space:nowrap;
bottom:9999px;
background:#81b0b0;
color:#e0e0e0;
padding:5px 12px;
line-height: 24px;
height: auto;
opacity: 0;
transition:opacity 0.5s ease-out;
}
a.tooltip span::before {
content: "";
display: block;
border-left: 6px solid #81b0b0;
border-top: 6px solid transparent;
position: absolute;
top: -6px;
left: 0px;
}
a.tooltip:link {
color:#FFF;
}
a.tooltip:visited {
color:#FFF;
}
a.tooltip:hover span {
opacity: 1;
bottom:-35px;
}
Can someone help me out please? Thanks! ;)
when you use
position:absolute;
it positions against the nearest container in the chain that has a position set; so if you don't have a position set on any of the elements that contain it, or its parents, it will position against the body.
try putting position absolute or relative on the containing p tag
How to make left and right float div the same height regardless of much information is in them? The number of the divs is created dynamically alternating left and right as well as the information in them.
<div class="columns">
<?php
$cemp = true;
foreach ( $req_user_emp as $id => $name ) {
echo "<div ".(($cemp = !$cemp)?" class=\"column_right\"":" class=\"column_left\"").">";
echo "<h3>".$req_user_emp[$id]['position']."</h3>";
echo "<h4>".$req_user_emp[$id]['company_name']."</h4>";
echo $req_user_emp[$id]['description'];
echo "<div class=\"column_footer\">".$req_user_emp[$id]['start_date']." → ".$req_user_emp[$id]['end_date']."</div></div>";
}
?>
</div>
and the css
.columns {
width: auto;
margin-left: -10px;
}
.columns:after {
content: "If you can see this, you broke the columns!";
width: auto;
display: block;
text-indent: -10000000px;
height: 1px;
clear: both;
margin-bottom: -20px;
}
.row_level {
display:table-cell;
}
.column_left {
width: 288px;
float: left;
background: #e1e1e1;
padding: 20px;
border: 1px solid #d1d1d1;
margin-bottom: 20px;
}
.column_right {
width: 288px;
float: right;
padding: 20px;
background: #e1e1e1;
border: 1px solid #d1d1d1;
margin-bottom: 20px;
}
Now I have some data in MySQL that I want to arrange into this 2 columns. The code works, but if the data in the columns is not equal the the columns are not arranging correctly.
Do you have any idea on how to fix this?
I was thinking also to use a if in the foreach function:
if ( $i % 2 == 0 ) {
ENTER_MY_CODE_HERE;
}
and like this to use the the .row_level container for the .left and .right but as far as I know this doesn't work in IE (and I have no way to test it now).
Thank you
There's no simple way to make all floated elements 100% height. The best approach would be either height: 100% or top: 0; bottom: x; if the height is known. Otherwise, you're looking at using a visual trick.
you could use 2 solutions:
First JS solution:
//equal heights
//usage : matchCols.init('.yourclass');
var compareVal;
var matchCols = {
init: function(matchClass){
// reset the start compare value
var compareVal = 0;
// get the heightest value
$(matchClass).each(function(){
if($(this).height()>compareVal){compareVal=$(this).height();}
});
/* set the heightest value */
$(matchClass).each(function(){
$(this).height(compareVal);
});
}
};
or CSS faux columns visual fix:
http://www.alistapart.com/articles/fauxcolumns/