I used the following code for simple image gallery (actual code found in http://w3schools.com, it works perfectly). After editing css the alignment of text has been changed. I want to align the text at centre. Anybody knows the answer please help me.
My HTML Code:
<html>
<body>
<div id="d">
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
Add a description of the image here </div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
<p>
Add a description of the image here</p>
</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
<p>
Add a description of the image here</P>
</div>
</div>
<div class="img">
<a target="_blank" href="klematis_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm">
<img src="a.jpg">
</a>
<div class="desc">
Add a description of the image here</div>
</div>
</div>
</body>
</html>
My CSS Code:
#d
{
width : 660;
border:1px;
}
.img
{
margin:3px;
border:1px solid #0000ff;
height:200;
width:200;
float:left;
text-align:center;
}
.img img
{
display:inline;
margin:3px;
border:1px solid #ffffff;
width:100;
height : auto;
}
.img a:hover img
{
border:2px solid #0000ff;
}
.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
Screenshot:
Remove the width of the div.
.desc {
text-align: center;
font-weight: normal;
margin: 2px;
}
And also change it to text-align. The attribute align does not exist.
Try this:
.desc{
margin: 0 auto;
}
you have to modify the value of the margin property:
.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px auto;
}
also the hash sign is missing in this part:
<style>
d
{
width : 660;
border:1px;
}
it has to be modified like this:
<style>
#d {
width : 660;
border:1px;
}
Change css to
.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:2px;
}
change align:center; to text-align:center;
.detail
{
text-align: center;
font-weight: normal;
margin: 0 auto;
}
Related
I'm trying to make clickable image inside div and it's being placed under divs header. I want that this image would be in the same level as Header.
Thanks.
Html:
<div class="One"> <h1> One </h1>
<div <a href="One.html">
<img alt="One" src="One.jpg" width="200" height="200"> </a></div>
</div>
Css:
.One{
position:absolute;
top:10%;
left:10%;
height: 35%;
width: 50%;
border: 1px solid;
}
.One h1{
text-align: center;
}
You forgot to close one of the opening div tags.You also may need to use the whole URL in the hyperlink. Instead of using
<a href="One.html">
You might want to use
<a href="http://mywebsite.com/One.html">
Are you expecting the following output?
.One{
position:absolute;
top:10%;
left:10%;
height: 35%;
width: 50%;
border: 1px solid;
}
.One h1{
position:absolute;
left:35%;
}
.One a img {
width:100%;
height:100%;
}
<div class="One"> <h1> One </h1>
<a href="One.html">
<img alt="One" src="https://image.freepik.com/free-vector/prairie-house-with-fowers-and-sunrays-background_293-152.jpg" > </a></div>
So this is my markup, it's basically an image gallery.
<div class="img">
<div class="cont"><img src="logo.jpg" alt="logo" /></div>
<div class="desc">This is the awesome logo</div>
</div>
<div class="img">
<div class="cont"><img src="logo.jpg" alt="logo" /></div>
<div class="desc">This is the awesome logo</div>
</div>
<div class="img">
<div class="cont"><img src="logo.jpg" alt="logo" /></div>
<div class="desc">This is the awesome logo</div>
</div>
<div class="img">
<div class="cont"><img src="logo.jpg" alt="logo" /></div>
<div class="desc">This is the awesome logo</div>
</div>
And here's my CSS
div.img {position:relative;
margin:5px;
border:1px solid #000;
padding:0;
width:300px;
height:300px;
float:left;
}
div.cont {
position:absolute;
left:50%;
margin-left:-125px;
}
div.img img {
margin-top:5px;
border:1px solid white;
padding:0;
width:250px;
height:250px;
}
div.desc {
text-align:center;
color:black;
}
div.img a:hover img {
border:1px solid #666;
}
Basically my problem is I want the "img" element to behave as if it's in the normal flow, so that my "desc" div can acknowledge it as a block-level element and position itself below the image (which is a logo, by the way) exactly the way I want it, I know that absolute-positioned elements are taken away from the normal document flow, that's why my "desc" div is behind the image because it behaves as if the "img" element isn't there at all, which is not what I want.
I know this can be solved by changing the "cont" div to position-relative, but I want answers for position-absolute only because I feel like it's really important to tackle this specific problem and the specific situation, thanks.
try it DEMO
div.img {position:relative; margin:5px; border:1px solid #000; padding:0; width:300px; height:300px; float:left; text-align:center; }
/*div.cont {position:absolute; left:50%; margin-left:-125px;}*/
div.img img {margin-top:5px; border:1px solid white; padding:0; width:250px; height:250px;}
div.desc {text-align:center; color:black;}
div.img a:hover img {border:1px solid #666;}
How about positioning the desc div by giving it bottom 0; position:absolute;
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/360/
CSS:
div.desc {
text-align:center;
color:black;
position:absolute;
bottom:10px; //Can be any value depending on your design.
}
This is my first time trying an overlay. It is somewhat working however, hovering the first image would overlay below.. I tried making the position absolute, but that means that overlay would stay at top.
<div class="galleryContainer">
<div class="row">
<div class="galleryItem">
<img src="http://upload.wikimedia.org/wikipedia/commons/d/da/Gold-jewellery-jewel-henry-designs-terabass.jpg"/>
<div class="imgCaption">
<p>lulz</p>
</div>
</div>
<div class="galleryItem">
<img src="http://3.bp.blogspot.com/_HEjoNp_qRz8/TSsQZNyVFUI/AAAAAAAAJhI/xc7MCnnNYZY/s1600/World%2527s+Most+Funniest+Animals+Photos+%25288%2529.jpg"/>
<div class="imgCaption">
<p>lulz</p>
</div>
</div>
</div>
<div class="row">
<div class="galleryItem">
<img src="http://funny-pics-fun.com/wp-content/uploads/Very-Funny-And-Creative-Ads-Using-Animals-19.jpg"/>
<div class="imgCaption">
<p>lulz</p>
</div>
</div>
<div class="galleryItem">
<img src="http://funny-pics-fun.com/wp-content/uploads/Very-Funny-And-Creative-Ads-Using-Animals-18.jpg"/>
<div class="imgCaption">
<p>yaw</p>
</div>
</div>
</div>
</div>
css:
.row {
margin:2%;
}
.row .galleryItem {
float: left;
padding-right: 5%;
width:300px;
height:350px;
}
.row .galleryItem img {
width:280px;
height:330px;
padding:0;
margin:0;
}
.row .galleryItem .imgCaption {
top: 0px;
width:300px;
height:350px;
background:#FF2400;
opacity:0;
}
.row .galleryItem .imgCaption p {
color:white;
font-weight: 400;
font-size:16px;
text-align: center;
}
.row .galleryItem:hover .imgCaption {
opacity: 0.7;
}
.galleryContainer {
margin: auto;
max-width: 900px;
}
Here is a jsfiddle I made that demonstrates the issue. Any help would be appreciated.
Your problem is that your caption is positioned wrongly. It can be finished by adding float:left; to your img.
Here's a fiddle.
EDIT:
Other changes:
The caption div didn't fade properly so I switched the show up method from, opacity:0 -> opacity: 0.7;, to display:none -> display: block.
I removed the margins and paddings from the <p> element since it appeared displaced.
Making a single page website. The HTML is as follows
<!-- Landing Page-->
<div id="landing">
<img src="front.png" alt="Cover Page">
</div>
<!-- About -->
<div id="page1">
<a id="about"></a>
<img src="Who.png" alt="About Me">
<p>
xxx
</p>
</div>
<!-- Work -->
<div id="page2">
<a id="portfolio"></a>
<div id="container">
<a class="fancybox" href="portfolio1.jpg" title="'Consumed' </br>Digital/Print Work"><img src="portfolio1s.png"/></a>
</div>
</div>
<!-- Contact -->
<div id="page3">
<a id="contact"></a>
<img src="Contact.png" alt="Contact Information">
<p>
xxx
</p>
</div>
</body>
I removed the image links from the div #container, but altogether there are more than 10. My issue is when I make the window narrow (to see how it will be viewed on a mobile device), the images in div #container overlap with my image on my contact page. I would like it such that when it expands, it pushes the contact page down. I've tried doing this with position:relative, but doesn't seem to work.
Relevant CSS:
#container
{
padding:50px;
display:table-cell;
vertical-align:center;
width:auto;
}
#container a img
{
padding:10px;
opacity:1.0;
filter:alpha (opacity=100); /*for >IE8 */
}
#page1 img
{
display:block;
margin-left:auto;
margin-right:auto;
width:400px;
position:relative;
top:15px;
}
#page2 {
height:1200px;
font-family: Arial, sans-serif;
font-weight: bold;
color:purple;
}
#page3 {
height:1200px;
font-family: Arial, sans-serif;
font-weight: bold;
color:red;
}
#page3 img
{
display:block;
margin-left:auto;
margin-right:auto;
margin-bottom:-20px;
width:400px;
position:relative;
top:15px;
}
I have some divs floating inside another one and I want to align them to the bottom.
This is the HTML:
<div class="magazinebookcase">
<div class="books">
<a title="Mag1" style="height:286px;width:16px;" href="">
</a>
</div>
<div class="books">
<a title="Mag2" style="height:258px;width:48px;" href="">
</a>
</div>
<div class="books">
<a title="Mag3" style="height:252px;width:38px;" href="">
</a>
</div>
<div class="books">
<a title="Mag4" style="height:258px;width:50px;" href="">
</a>
</div>
<div class="books">
<a title="Mag5" style="height:284px;width:14px;" href="">
</a>
</div>
<div class="clearfix"></div>
</div>
And the CSS:
.magazinebookcase {
width: 100%;
padding: 3px;
vertical-align:bottom;
}
.magazinebookcase .clearfix {
clear:both;
}
.magazinebookcase .books {
text-align:center;
float:left;
position: relative;
vertical-align:bottom;
}
.magazinebookcase a {
border: 1px solid #000;
display: block;
word-break: break-all;
}
.magazinebookcase a:hover {
background-color: #ccc;
}
I've tried many ways, changing the positions from absolutes to relatives and other things but I can't do it properly. Any help?
You should not use tables for your layout. But the vertical alignment features are very powerful. You could do something like that:
display: table-cell;
vertical-align: bottom;
I made a jsFiddle that demonstrates how it works.
CSS should be like this:
.left {
display:block;
position:relative;
height:200px;
float:left;
}
.bottom {
position:absolute;
bottom:0;
}
.clear {
clear:both;
}
HTML
<div class="left">
<div class="bottom"></div>
</div>
<div class="left">
</div>
<div class="clear"></div>
Use tables instead. It's my recommendation. On each td use valign:bottom.