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>
\
Related
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>
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>
HTML CODE
<div class="header" style="float:left">
<div class="logo">
<img src="some image" height="200px" width="200px"/>
</div>
<div class="name">company name</div>
<div class="pic">
<img src="some image" height="200" width="200"/>
</div>
</div>
CSS styling
header{background-color:red;width:1200px;height:400px;float:;}
.logo{width:17%;}
.name{color:#ADFF2F;font-size:48pt;margin-left:250px;width:38%}
.pic{;margin-left:950px;}
.header > div {
float: left;
}
Also, your header class in the CSS needs to have a . in front of it.
You also need to remove the margin-left from .pic
http://jsfiddle.net/samliew/DAC7p
OK, so I have this image slider that slides images at the left side of the page. They keep scrolling from bottom to top. But I wanted the images to have a reflection as well using CSS. So I wrote another div consisting of same images in reverse direction and less opacity so it looks like reflection but the complete image is reflecting which ruins the appearance of the whole thing. so I wrote another div below each reflection which would mask the image reflection to a certain extent and gave it higher z-index as compared to image reflection but anyways this doesn't seem to work. No matter what I try the image reflection comes above the added div. So is there a way the reflection image could be cropped without disturbing the scale of the image or so that the added div "overlay" in my case comes above the reflection? And also the main div that consists of all the images in my case "imagesRow" I want to give it some styling so that it looks like a glass. But whatever style I give to that div it automatically gets applied to child components. So is there a way I can change the main div's(imagesRow) style without affecting the images inside it? This link might be of any help I hope. http://jsfiddle.net/659Na/
Html code:
<div id="imagesRow" style="position: absolute;top:5px;">
<marquee behavior="scroll" direction="up" onmouseover="this.stop();" onmouseout="this.start();" height="725" >
<div id="l1" class="father">
<img class="messagesOne" src="images/images.png">
<div class="reflection">
<img src="images/images.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l2" class="father">
<img class="messagesOne" src="images/image3.png">
<div class="reflection">
<img src="images/image3.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l3" class="father">
<img class="messagesOne" src="images/image5.png">
<div class="reflection">
<img src="images/image5.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l4" class="father">
<img class="messagesOne" src="images/image7.png">
<div class="reflection">
<img src="images/image7.png" />
<div class="overlay"></div>
</div>
</div>
</br>
</br>
<div id="l5" class="father">
<img class="messagesOne" src="images/image9.png">
<div class="reflection">
<img src="images/image9.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l6" class="father">
<img class="messagesOne" src="images/image11.png">
<div class="reflection">
<img src="images/image11.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l7" class="father">
<img class="messagesOne" src="images/image12.png">
<div class="reflection">
<img src="images/image12.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l8" class="father">
<img class="messagesOne" src="images/image14.png">
<div class="reflection">
<img src="images/image14.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l9" class="father">
<img class="messagesOne" src="images/image15.png">
<div class="reflection">
<img src="images/image15.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l10" class="father">
<img class="messagesOne" src="images/image16.png">
<div class="reflection">
<img src="images/image16.png" />
<div class="overlay"></div>
</div>
</div>
<div id="l11" class="father">
<img class="messagesOne" src="images/image17.png">
<div class="reflection">
<img src="images/image17.png" />
<div class="overlay"></div>
</div>
</div>
</marquee>
</div>
css file:
.messagesOne{
height: 60px;
width: auto;
margin-left: 56px;
}
.reflection img {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
filter: flipv; opacity:0.20;
filter: alpha(opacity='20');
height: 60px;
width: auto;
margin-left: 56px;
z-index: -1100;
}
.overlay {
margin-top: -44px;z-index: 1000; width:auto; height:60px;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Gradient( gradientType=0, startColor=0, EndColorStr=#ffffff);
}
I think you can get the effect by simplifying your code. The overlay isn't necessary.
Style the .reflection something like this:
.reflection {height:20px; overflow:hidden; margin:-10px 0 10px 0;}
See this example at jsfiddle