Hey I'm trying to get a website for a server I'm hosting and I'm trying to bring the bottom two images up into the open area above them.
Can anyone help me out I can't wrap my head around this, i'm also new to stack overflow so I'm not as fast as some people I'm sorry, it also won't let me post because there was too much code so I took out the css.
So Here is a "JSFiddle" link to the code:
https://jsfiddle.net/4hy7q2ou/2/
<body>
<div class="card1 one" style="margin-top: 40px;">
<img src="css/images/10.png" width="480" height="270"/>
</div>
<div class="card1 two" style="margin-top: 60px;">
<img src="css/images/4.png" width="480" height="270"/>
</div>
<div class="card2 one">
<h2>
Our Server.
</h2>
<p>
</p>
<p>
</p>
</div>
<div class="card3 two">
<h2>
Our Staff Team.
</h2>
<h3>
Owners:
</h3>
<dl>
Inc0gnitoON
IgnitionON
</dl>
<h3>
Admins:
</h3>
<dl>
N/A
</dl>
<h3>
Moderators:
</h3>
<dl>
WitherVoid_
</dl>
</div>
</body>
<body>
<div class="card1 three" style="margin-bottom: 5px;">
<img src="css/images/7.png" width="480" height="270"/>
</div>
<div class="card1 four">
<img src="css/images/9.png" width="480" height="270"/>
</div>
</body>
You should just align all the images into a square, this is good for cleaner and minimal code:
CSS:
img {
width:20%;
display:inline-table;
margin:5px;
}
I just did "img" but you can actually make this a class e.g. ".card"
HTML:
<div>
<img src="https://via.placeholder.com/350x150" />
<img src="https://via.placeholder.com/350x150" />
<br>
<img src="https://via.placeholder.com/350x150" />
<img src="https://via.placeholder.com/350x150" />
</div>
Output:
This link could also help you achieve this, if my post doesn't help or if you don't quite understand.
EDIT: This should align two images, may need to mess around with the numbers in the CSS to get it to fit better:
CSS:
.block {
width:20%;
display:inline-table;
margin:5px;
}
.side {
display:inline;
margin-left: 50%;
margin-top: -20%;
}
.second {
display:inline;
margin-left: 50%;
margin-top: -1%;
}
HTML:
<div>
<img src="https://via.placeholder.com/350x150" class="block"/>
<img src="https://via.placeholder.com/350x150" class="block"/>
<br>
<img src="https://via.placeholder.com/350x150" class="block"/>
<img src="https://via.placeholder.com/350x150" class="block"/>
</div>
<div>
<img src="https://via.placeholder.com/150x300" class="side"/>
<img src="https://via.placeholder.com/150x300" class="second"/>
</div>
Related
This is the site i'm working on. http://elegantcurtainsandblinds.co.uk/
The text at the top with the icons/images (call us, visit our showroom, Watch our video), I can't seem to keep the text align of each other.
So the text should be within the same line of each other. Everytime I put space in the image/icon moves further to the left.
This is the code -
<div class="topSection">
<div class="logo">
<img src="<?php echo $siteURL;?>/images/eg_logo_new.png" alt="Logo">
</div>
<br>
<p style="float:right;"> Call Us: 01924 724848</p>
<img style="float:right;" src="images/mobile.png"/> <br><br>
<p style="float:right;"> Visit Our Showroom</p>
<img style="float:right;" src="images/images.png" height="30px" width="30px;"/><br><br>
<p style="float:right;"> Watch Our Video</p>
<img style="float:right;" src="images/video.png" height="30px" width="30px;"/>
<div class="clear"></div>
</div>
Use display: flex for modern browsers, it's mush easier to work with. Here is a possible solution for your problem (click on Run code snippet to see the result):
.topSection {
display: flex;
justify-content: space-between;
}
.info-container {
display: flex;
flex-direction: column;
}
.info {
display: flex;
align-items: center;
}
.info img {
margin-right: 8px;
}
<div class="topSection">
<div class="logo">
<img src="http://www.elegantcurtainsandblinds.co.uk/images/eg_logo_new.png" alt="Logo">
</div>
<div class="info-container">
<div class="info">
<img src="http://elegantcurtainsandblinds.co.uk/images/mobile.png" height="30px" width="30px;" />
<p>Call Us: 01924 724848</p>
</div>
<div class="info">
<img src="http://elegantcurtainsandblinds.co.uk/images/images.png" height="30px" width="30px;">
<p>Visit Our Showroom</p>
</div>
<div class="info">
<img src="http://elegantcurtainsandblinds.co.uk/images/video.png" height="30px" width="30px;">
<p>Watch Our Video</p>
</div>
</div>
</div>
More info on flexbox
Why is my text not centered & why is my is my floats not stacked evenly:
https://jsfiddle.net/t5mLm8p6/2/
<H1 class="header-text"> SPECIAL COLORSHIFTING RED/CYAN INLAY FROM REDA </H1>
<div class="images-on-left-side" >
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_02_1.jpg" width="577" height="417" />
</div>
<div class="images-on-right-side" >
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_03.jpg" width="623" height="417" />
</div>
<H1 class="header-text"> FUNKY URBAN INLAY FROM ZEGNA REDA</H1>
<div class="images-on-left-side" >
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_06_1.jpg" width="623" height="416" />
</div>
<div class="images-on-right-side" >
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_05.jpg" width="577" height="416" />
</div>
<H1 class="header-text"> CLASSIC BLUE PATTERN FROM VITALE BARBERIS</H1>
<div class="images-on-left-side" >
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_08.jpg" width="575" height="416" />
</div>
<div class="images-on-right-side" >
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_09.jpg" width="625" height="417" />
</div>
I try to make the divs 6 divs/images stand side by side:
Like here: http://postimg.org/image/urstgg0s7/
But the next text a margin options makes it uneven for some reason.
Wrap your divs in a row. It should be like this--
.row {
border: 1px solid red
}
.row h1 {
text-align: center
}
.row div {
display: inline-block;
width: 290px;
}
.row div > img {
width: 100%
}
<div class="row">
<H1 class="header-text"> SPECIAL COLORSHIFTING RED/CYAN INLAY FROM REDA </H1>
<div class="images-on-left-side">
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_02_1.jpg" width="577" height="417" />
</div>
<div class="images-on-right-side">
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_03.jpg" width="623" height="417" />
</div>
</div>
<div class="row">
<H1 class="header-text"> FUNKY URBAN INLAY FROM ZEGNA REDA</H1>
<div class="images-on-left-side">
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_06_1.jpg" width="623" height="416" />
</div>
<div class="images-on-right-side">
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_05.jpg" width="577" height="416" />
</div>
</div>
<div class="row">
<H1 class="header-text"> CLASSIC BLUE PATTERN FROM VITALE BARBERIS</H1>
<div class="images-on-left-side">
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_08.jpg" width="575" height="416" />
</div>
<div class="images-on-right-side">
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_09.jpg" width="625" height="417" />
</div>
</div>
\
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>
trying to align two images horizontally but it's not working:
HTML
<div data-role="page" id="development">
<div data-role="header">
<h1>Develop</h1>
</div>
<div id="images">
<p><img src="../../images/screen1.png" width="250" height="444" alt="Start Screen" </p>
<p><img src="../../images/screen2.png" width="250" height="444" alt="Search Screen"</p>
</div>
<div data-role="main" class="ui-content">
Back
</div>
</div>
CSS
#images {
display: block;
margin: 0 auto;
clear: right;
}
I've found other answers online but couldn't implement them to work. Any help please?
<p> are block level elements. To get the images to sit next to each other horizontally, use:
p {
display:inline;
}
jsFiddle example
Try this
<div data-role="page" id="development">
<div data-role="header">
<h1>Develop</h1>
</div>
<div id="images">
<img src="../../images/screen1.png" width="250" height="444" alt="Start Screen" />
<img src="../../images/screen2.png" width="250" height="444" alt="Search Screen"
</div>
<div data-role="main" class="ui-content">
Back
</div>
</div>
CSS
#images {
display: inline-block;
margin: 0 auto;
clear: right;
}
I am a newb. I have finally figured out how to get images aligned on my main page in my index.html along with code in my default.css.
Now I would like to add text under each image. I know this should be easy, but am not able to find anything that seems to work.
Here is my HTML Code:
<div id="random">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
</div>
Here is my CSS code:
#random{
max-width: 650px
}
#random img{
display:inline-block;
width:80px;
}
Wrap your images in a container, and put the text under them. Something like this:
http://jsfiddle.net/8xf2N/1/
<div id="random">
<div class='img-container'>
<img src="1.jpg" />
<p>Image One</p>
</div>
<div class='img-container'>
<img src="2.jpg" />
<p>Image Two</p>
</div>
<div class='img-container'>
<img src="3.jpg" />
<p> Image Three</p>
</div>
</div>
CSS:
#random{
max-width: 650px
}
#random img{
width:80px;
}
.img-container{
display: inline-block;
}
You can always use the HTML 5 figure tag. (Assuming your website is follwoing HTML 5 standards). That way, you can nest a tag and style them.
<div id="random>
<figure>
<img src="1.jpg"/>
<figcaption>Your Caption</figcaption>
</figure>
</div>
That way you have selectors to style them with CSS as well.
Try:
#random{
max-width: 650px
}
#random .image-wrap{
display:inline-block;
width:80px;
}
<div id="random">
<div class="image-wrap">
<img src="1.jpg" />
<p>Text for image 1</p>
</div>
<div class="image-wrap">
<img src="2.jpg" />
<p>Text for image 2</p>
</div>
<div class="image-wrap">
<img src="2.jpg" />
<p>Text for image 2</p>
</div>
</div>
You should wrap the images in a div. Here is a fiddle http://jsfiddle.net/a6pNw/
CSS:
#random{
max-width: 650px
}
#random div{
display:inline-block;
width:80px;
text-align:center;
}
HTML:
<div id="random">
<div>
<img src="http://placehold.it/80x80" />
<p>Some text</p>
</div>
<div>
<img src="http://placehold.it/80x80" />
<p>Some text</p>
</div>
<div>
<img src="http://placehold.it/80x80" />
<p>Some text</p>
</div>