Can anyone advise and perhaps sample code to arrange the images below please ? It's for a html signature with linked images but i'm unsure whether tables or CSS would be best.
Image Far Left should align with the other 4 horizontally and the two top images need to be centered above the larger images below.
Any help appreciated.
enter image description here
using css is better than table.I think you want something like this. but you should scale your images by width and height properties:
<!DOCTYPE html>
<head>
<title>goodarzi</title>
</head>
<style>
.first{
float:left;
width:30%;
text-align:center;
}
</style>
<body>
<div class="wrapper">
<div class="first">
<a href="" ><img src="" title="" /></a>
</div>
<div class="first">
<div>
<img src="" title="" />
</div>
<div><img src="" title="" />
</div>
</div>
<div class="first">
<div>
<img src="" title="" />
</div>
<div><img src="" title="" />
</div>
</div>
</div>
</body>
</html>
Related
Here's my code in html:
<div id="pictures">
<div class="pic1">
<img src="something.jpg" width=200px; height=200px"
</div>
<div class="pic2">
<img src="something.jpg" width=200px; height=200px"
</div>
</div>
I want to put these two pictures on the same line.
The only thing that worked was when i changed 'div' class into 'span' class, then the two pics appeared next to each other, but then i couldn't put any space in between them no matter what i tried.
Can somebody please tell me what is wrong with my code?
Just get rid of the inner <div>s. <div>s (and their contents) always appear in different lines because they are block-level elements.
<!DOCTYPE html>
<html>
<head>
<title>nanda</title>
<link rel="stylesheet" type="text/css" href="nandacss.css" />
</head>
<body>
<p style="color: red;">Pick one</p>
<div id="pictures">
<img src="//via.placeholder.com/200" width="200px" height="200px">
<img src="//via.placeholder.com/200" width="200px" height="200px">
</div>
</body>
</html>
Try using single div for both image
<!DOCTYPE html>
<HTML>
<head>
<title>nanda</title>
<link rel="stylesheet" type="text/css" href="nandacss.css" />
</head>
<body>
<br>
<p style="color:red">Pick one</p>
<div id="pictures">
<div class="pic1"> <img src="//via.placeholder.com/200" alt="Trulli" width=200px; height=200px />
<img src="//via.placeholder.com/200" alt="Trulli" width=200px; height=200px> </div>
</div>
</body>
</html>
.pic1,
.pic2 {
display: inline-block;
}
You can then add your spacing between the elements too.
Run Code Snippet to see CSS aligning the two images:
.pic1,
.pic2 {
display: inline-block;
}
<p style="color:red">Pick one</p>
<div id="pictures">
<div class="pic1"> <img src="something.jpg" width=200px; height=200px" /> </div>
<div class="pic2"> <img src="something.jpg" width=200px; height=200px" /> </div>
</div>
This is the image that im trying to center, ive tryed different ways to do this but to no success i think its to do with bootstrap pre determining the position and if so i dont know how to disable it can anyone help me with this issue many thanks.
<div class="container">
<div class="row">
<div class="col-md-5">
<!-- <img src="../images/4uSupportLogo.png" class="" height="250px"/> -->
<br> </br>
<!-- <img src="../images/4uSupportLogo.png" alt="Logo" align="top" width="300" height="200" </br> -->
<!-- <img src="../images/4uSupportLogo.png" width="300" height="200" style="display:block; margin-left:auto;
margin-right: auto;" align="center" /> -->
<center> <img src="../images/4uSupportLogo.png" class="img-responsive" width="300" height="200"> </center>
<br> </br>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class=" col-md-12 well text-center">
<h4><i><strong>The Username or Password is incorrect please try again.</strong></i></h4>
<p>
If you have forgot your password and would like to reset it please contact Jack </p>
<input type="button"
value="Request New Password"
onclick="location='../forgot_password/forgot.php'" />
</div>
</div>
</div>
It looks like that the row is just positioning the image wrongly.. <center><img></center> should work fine.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Image</h2>
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<center><img src="https://media.giphy.com/media/l0HlSYVgZLQ1Y4GdO/giphy.gif" class="img-responsive" alt="Cinque Terre" width="304" height="236"></center><br><br>
<img src="https://media.giphy.com/media/l0HlSYVgZLQ1Y4GdO/giphy.gif" class="img-responsive" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>
Source
The img-responsive isn't doing anything to fix it left. Content flows left to right normally, so it's positioned normally. You can center it by adding text-align: center; on its parent element or by adding some rules directly to the image. This is better done on a class, but here's an example:
img {
display: block;
margin: 0 auto;
}
http://codepen.io/paulcredmond/pen/RGOKwr
I have a trouble making website. I can't make 3 photos align in one line.
<div>
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
float: left is used
div is inherently display:block
you need to use something like a span which has display:inline-block
https://jsfiddle.net/7daffjh8/2/
See this fiddle
Change the display property of div to inline-block instead of block
Add the below given to your CSS
div{
display:inline-block;
}
Try this
add float:left on div
div {
float:left
}
<div>
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
I hope this would help.
See the Example on Fiddle
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<style>
div.container {
display:inline-block;
}
</style>
</head>
<body>
<div class="container">
<img src="http://placehold.it/300x180" height="300" width="180" />
</div>
<div class="container">
<img src="http://placehold.it/300x180"/ height="300" width="180" />
</div>
<div class="container">
<img src="http://placehold.it/300x180" height="300" width="180" />
</div>
</div>
</body>
</html>
Try this:
You had used multiple . After closing of next tag content always displayed in next line.
<div>
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
<img src="Images/cilipica.jpg" width="300px" height="180px">
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
you have to make the divs display inline. under CSS
div{
display:inline;
}
or
<div style="display:inline;">
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div style="display:inline;">
<img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div style="display:inline;">
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
div.minihalf-width{
width:30%;
float:left
}
div.minihalf-width img{
width: 100%;
}
<section>
<div class="minihalf-width">
<img src="latest-work/work-1.png" alt="">
</div>
<div class="minihalf-width">
<img src="latest-work/work-2.jpg" alt="">
</div>
<div class="minihalf-width">
<img src="latest-work/work-3.jpg" alt="">
</div>
</section>
EDIT: This might make more sense, check this image. http://puu.sh/rt8M
The image just goes through the padding. I want the title div to expand vertically to accommodate the image. While keeping the text centered and the center of the image should intersect the line the text is on.
I want to align an img to the left (and then another after the text to the right). I've tried various properties but none seem to do it right. Can anyone help?
To clarify, I want the image against the left side of the screen or browser window. The div stretches from the left to the right of screen, as you would expect of a header/title div.
Float;left seems to make the img drop out of the div tag. I should mention there is a text-align:center; property on the tag. But it doesn't fix the problem when removed so I'm not sure it's that.
The HTML
<div id="header">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" alt="" width="86" height="98" />
Page Header Title
</h1>
</div>
</div>
I created a little dabblet code example for you. I think this is what you are trying to do?
http://dabblet.com/gist/2492793
CSS:
.logo{
float:left;
width: 86px;
height:98px;
display:block;
}
.img2{
float:right;
display:block;
}
.clear{
clear:both;
}
HTML:
<div id="header">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" alt="" />
Page Header Title
<img class="img2" src="images/img2.png" alt="" />
<div class="clear"></div>
</h1>
</div>
</div>
The reason the logo is dropping out of the div is because it is not cleared.
This should fix things up.
Use this
<div id="header" style="float:left">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" width="86" height="98" />
Page Header Title
</h1>
</div>
#logo{
display: flex;
justify-content: space-evenly;
}
<div id="logo">
<img src="https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="something" width="100" height="100"/>
<h1>Hello World</h1>
</div>
i am using the following code to create a small web gallery. right now the thumbnails are placed vertically, and id like them to run horizontally below the main image. does anyone have any suggestions for how to do so?
<div id="content">
<script type="text/javascript">
function myshowImages(id) {
/**$(".bigPic").hide();
$("#pic-"+id).show();*/
$('.bigPic').css({'display':'none'});
$("#pic-"+id).fadeIn('slow');
}
</script>
<script>
$(document).ready(function () {
$('.email-sign-up').css({'marginBottom':'0px'});
})
</script>
<div class="product">
<div class="galerie">
<div class="bigPics">
<a href="insert" target="_blank">
<img src="insert" title="" alt="" id="pic-0" width="450" height="450" class="bigPic" name="bigPic" />
</a>
<a href="insert" target="_blank">
<img src="insert" title="" alt="" id="pic-1" width="450" height="450" class="bigPic" name="bigPic" style="display:none;" />
</a>
</div>
<div class="thumbnails">
<div class="mini-thumb">
<a href="javascript:myshowImages(0)" >
<img src="insert" title="" alt="" />
</a>
</div>
<div class="mini-thumb">
<a href="javascript:myshowImages(1)" >
<img src="insert" title="" alt="" />
</a>
</div>
The div elements wrapping your thumbs have a default CSS style of display: block, which causes an element to take up 100% of the horizontal space available to it. You could change this with the following rule:
.mini-thumb {
display: inline-block;
}
display property
DEMO
As a side note, well-indented markup can help you identify problems such as missing closing </div> tags, which may contribute to formatting issues.