I am new to web dev, so please bear with me. I have to create a block with a set of images like this:
I tried using a table to do this, but the image propotions of the last columns aren't correct. I believe that coz of the height of the rows. I managed to get the center image correctly by using rowspan. I looked up numerous tutorials online but couldn't find one where the middle image is like this. I tried using li too. But failed. This is the code of the table I have
<table class="home" align="center">
<tr>
<td><img src="http://localhost/sty_partners/img/main_top_left.jpg" alt="" class="img-responsive center-block" >
</td>
<td rowspan ="2"><img src="http://localhost/sty_partners/img/main_center.jpg" alt="" class="img-responsive center-block">
<!--<div class="center" > <p> SPEND MORE <br> time doing what <br> you love</p> </div>-->
</td>
<td><img src="http://localhost/sty_partners/img/main_top_right.jpg" alt="" class="img-responsive center-block"></td>
</tr>
<tr>
<td><img src="http://localhost/sty_partners/img/main_bottom_left.jpg" alt="" class="img-responsive center-block"></td>
<td><img src="http://localhost/sty_partners/img/main_bottom_right.jpg" alt="" class="img-responsive center-block"></td>
</tr>
</table>
This is the CSS for the table:
table.home img{
width:100%; height:100%;}
Can someone please tell me what to do?
You should use the bootstrap grid system for this.
http://getbootstrap.com/css/#grid
You'll probably need to add some custom css classes to adjust the padding the way you want and to make all columns the same height. Lots of tutorials online for this (do a quick google search).
You should be able to do most of this with Bootstrap columns alone. If you're unfamiliar with the grid system or need clarification, I would go to W3C: http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp.
If that alone won't work, you'll probably need to use your own CSS as well. W3C has great info on CSS as well:http://www.w3schools.com/css/default.asp. Without further details I can't tell you much else. Perhaps using the background-image property would work?
Related
Not exactly an issue since I can easily achieve the desired effects using a margin, but just curious: why does specifying the padding left or right for a div also create a space at the bottom of the div?
<div class="col-md-12 row" style="margin:0px;padding:0px">
<div class="col-md-4" style="padding-bottom: 0px;padding-left:0px">
<img src="/images/1.jpg">
</div>
<div class="col-md-4" style="padding-bottom: 0px;padding-left:10px">
<img src="/images/2.jpg">
</div>
<div class="col-md-4" style="padding-bottom: 0px;padding-right:0px">
<img src="/images/3.jpg">
</div>
</div>
I expected this code to line up the three images perfectly. But as you can see in the picture: the middle image, having padding-left:10px is also creating some padding at the bottom despite it specifying 0px. I resolved the issue by using margin in the img tag and avoiding padding, but it made me curious: why would padding-left create space at the bottom?
why would padding-left create space at the bottom?
Probably because the image is set to scale with the available width - which just got reduced due to your additional sideways padding. And so, since it resizes proportionally, keeping its aspect ratio, the height also gets reduced.
You have two options
Add a fixed width and height for the pictures and use object-fit: cover like this:
<img src="/images/3.jpg" width="200" height="80" style="object-fit: cover">
Do the same thing but with the images as a background and use background-size:cover
Keep in mind that this will crop your picture to fit the size.
I'm working on a Gallery Web page and I have different size images stored in local server. What I want is to make my gallery look like this. Simply saying I want to keep Division size same for all image sizes. Also image should cover whole area.
What I tried
I suppose to use PHP to get image locations and do this task. So I'll paste PHP file.
<?php
$itemNum =$_POST["itemNum"] ;
$folderName = $_POST["folderName"];
echo '<div class="col-md-4 mix category-a" style="margin:10px;height:300px;width:400px">
<div class="single-portfolio" style="height:300px;width:400px;overflow: hidden;">
<a class="gallery-item" href="gallery/'.$folderName.'/'.$itemNum.'.jpg"><img class="img-responsive" src="gallery/'.$folderName.'/'.$itemNum.'.jpg" alt="One" /></a>
</div>
</div>';
die();
?>?>
My Problem
This code doesn't do what I want. I tried every way I know to make this possible. Can someone help me to get what I want? Thanks.
EDIT:
This is what I got. Can see that size changes according to image size
Set max-height and max-width of div and also fix height of image :
<div class="single-portfolio" style="max-height:300px;max-width:400px;overflow: hidden;">
<img style="height:300px;width:400px;" class="img-responsive" src="gallery/'.$folderName.'/'.$itemNum.'.jpg" alt="One" />
All you have to do is playing with css and its so easy to apply. You have fixed height of image and that is 400px.
So css for the div will be
.category-a {
height: 400px;
}
.img-responsive {
display: block;
max-width: 90%;
max-height: 400px;
margin: 0 auto;
}
And your HTML will be like this. Please don't apply inline css as its always bad practice to use like this. instead use class.
<div class="col-md-4 mix category-a">
<div class="single-portfolio">
<a class="gallery-item" href="gallery/'.$folderName.'/'.$itemNum.'.jpg"><img class="img-responsive" src="gallery/'.$folderName.'/'.$itemNum.'.jpg" alt="One" /></a>
</div>
</div>
I am a beginner here so please ELI5.
I am trying to upload photos and have a set size for when they display. The photos will more than likely be larger than the settings - which makes me think this is possible. I have tried CSS and the width works, but the height does not. I have given the images their own class and have only been using CSS. This is what I have tried:
.img-list{
max-height: 175px;
max-width: 263px;
}
I have also tried
.img-list{
max-height: 100%
max-width: 100%
}
I feel like I could put something in the .php files of the theme, but I am not sure where.
With my CSS, the image will resize, but only to the width and the height will not stretch. I understand that the images will stretch and not look like the originals, but the images are going to be small in size and little detail so the stretch would not be significant (I believe). I know this has to be possible. I have been scouting the internet and see others talking about it. A lot of the other threads mention HTML. I don't know where I would put the HTML. When I put the HTML in the image itself it doesn't change anything. The CSS still takes over and does not properly work. This is the HTML I have tried.
<p style="text-align: center;"><span class="img-list"><img class="alignnone size-full wp-image-801" src="URL" alt="image name" width="512" height="512" /></span></p>
<p style="text-align: center;"><span class="img-list"><img class="alignnone size-full wp-image-801" src="URL" alt="img name" width="100%" height="100%" /></span></p>
<p style="text-align: center;"><span class="img-list"><img class="alignnone size-full wp-image-801" src="URL" alt="image name" width="300" height="200" /></span></p>
All HTML codes result in the same image - CSS is active. This leads me to believe I need to put some HTML in my .php files... but where and what would it be?
All help is appreciated!
I'm by no means an expert, but I manage to get by, more or less.
I have created a "box" on my website with a specific size.
Lets just call it
<div class="newsbox" style="size, width etc.">
Inside that class, I have placed an image like this (the $this-getThemePath is CMS-specific):
<div class="image" style="position:fixed; top:15%; left:20%; padding-top: 3px; padding-left:3px; float:left;">
<img src="<?php echo $this->getThemePath()?>/images/postit_today.png"></div>
After that, I have a loop writing out content from my database like this:
<div class="newsstyling" style="font-size: 16px;"><?php echo nl2br($news .= "\n");?></div>
Lastly, I close the -tag for my "newsbox"
In my, admittedly newbie, mind, any text being written out via the loop, should float around the image above. It doesn't. It ignores the image and writes the text underneath it.
Any tips, hints, links or guides would be deeply appreciated.
Thanks,
Thomas
that's because you're using position:fixed , positioned elements are outside the normal flow of a web page, try this instead:
<img style="float:left" /><div>my text, foo, bar, etc.....</div>
change
<img src="<?php echo $this->getThemePath()?>/images/postit_today.png">
to
<img src="<?php echo $this->getThemePath()?>/images/postit_today.png" style="float:right" hspace=10 vspace=10>
I am trying to achieve a custom layout for my featured article page on Joomla in order to make a nice blog layout with my custom design made on Photoshop.
This is the look I am trying to achieve: http://i48.tinypic.com/2ztbx54.png
This is the look I am getting at the moment: http://i49.tinypic.com/1ibn5w.png
Rest of the layout would not be a problem since it's pretty easily modifiable, however, the problem where I am stuck at the moment is the intro image. I want it to be on the left from the article title, some information and intro text like shown in the first image.
Is it possible to extract the image out of intro text in order to place it where needed?
Help will be appreciated, thanks!
Firstly, my comment was just a joke.
Now, for the question: your image is sitting in the div item column-1 when it should be sitting in the the div above that (the container of item column-1) which is items-row cols-1 row-0.
So this:
<img src="/images/Articles/macbookpro-review-01-top.jpg" width="200" height="200" alt="macbookpro-review-01-top" style="float: left;">
Cannot go in <div class="items-row cols-1 row-0"> or <dl class="article-info"> which is what you are currently doing.
It needs to be sitting in the outer div. So it should be in <div class="items-row cols-1 row-0">. So like this:
<div class="items-row cols-1 row-0">
<img src="/images/Articles/macbookpro-review-01-top.jpg" width="200" height="200" alt="macbookpro-review-01-top" style="float: left;">
//...and the rest of your stuff
In your css file add the following code to get you started off:
.article-info {
float:right;
}
h2 {
text-align: right;
}
.item.column-1 img {
margin-top: -50px;
}
.article-info-term {
padding-left: 40px;
}
Also, take away the margin: 0px; you have added to the images.
This is what the result will be:
http://i735.photobucket.com/albums/ww355/lodder16/stack_image.png
Hope this helps