I am making an image gallery, and I need to display images in a grid like layout. I don't want to use any frameworks, and would prefer to do things from scratch. Also, I would prefer not to use tables for the layout, since it will be a pain to add images to the table dynamically.
The layout consists of divs, like:
<div id="gallery">
<div class="uPic">
<img src="1.png">
<p> description </p>
</div>
<div class="uPic">
<img src="2.png">
<p> description </p>
</div>
....
......
....
</div>
to achieve the grid look, I simply "float"-ed all .uPics to left....and given some padding and margin to the #gallery. So far everything works great.
The PROBLEM starts, when I try to give a hover effect to the images. initially the <p> is hidden, and I use jQuery to show it on hover. but on doing so, the images below the one I am hovering over, shifts towards the right instead of moving down. Any ideas?
If the height of your divs is variable then I would recommend either using clear:both on the first element of each new row OR putting each row in its own container div. Otherwise, as you've noticed, the divs under the selected one will probably be pushed to the side of the higher div instead of shifting down.
I'd also consider Matt's solution as divs moving around on mouseover imho gives a very chaotic look to a page.
But if you're set on doing it this way, check out this example:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#gallery .image p').hide();
$('#gallery .image').hover(
function() { $(this).find('p').show() },
function() { $(this).find('p').hide() }
);
});
</script>
<style>
#gallery {
width: 800px;
}
#gallery .image {
width: 200px;
float: left;
background: #eee;
margin-bottom: 10px;
}
#gallery .image.newline {
clear: both;
}
#gallery .image .placeholder {
width: 180px;
height: 200px;
margin: 10px;
background: #ccf;
}
#gallery .image p {
margin: 10px;
background: #fcc;
}
</style>
</head>
<body>
<div id="gallery">
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
<!-- NOTE the added "newline" class where the new line starts! -->
<div class="image newline">
<div class="placeholder"></div>
<p>My description</p>
</div>
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
<div class="image">
<div class="placeholder"></div>
<p>My description</p>
</div>
</div>
</body>
</html>
The w3schools has a sample image gallery all in CSS. They add a border on hover of the image.
I would maybe set the width and height of the paragraph, and fix it using absolute positioning relative to the enclosing uPic div. That way you can have the paragraph of description appear "above" the image on hover without disturbing the flow. So, add position: relative; to the uPic, add something along the lines of position: absolute; left: 0px; top: 0px; to the <p>, and then adjust other things to suit.
I suggest that you choose a fixed height and width for your div :
It may fix your problem
It is not convenient for the user when a whole part of the grid is moving just to show up a little description, whether it is downward or to the right
I think this may be helpful
<style type="text/css" ><!--
#gallery_box{
width:728px;
height:545px;
border:solid #cccccc 1px;
margin:20px auto 0px;
padding:5px;
-moz-box-shadow:0px 18px 40px #ccc;
-webkit-box-shadow:0px 14px 40px
#ccc;
box-shadow:0px 5px 30px #ccc;
}
#thumbnail{
width:160px;
height:160px;
background:#f6f6f6;
border:solid #cccccc 1px;
border:solid #cccccc 1px;
margin:5px;
padding:5px;
float:left;
text-align:center;
position: relative;
line-height: 156px;
-moz-box-shadow:4px 4px 4px
#ccc;n-webkit-box-shadow:4px 4px 4px #ccc; box-shadow: 4px 4px 4px #ccc; } img {
border:none;
-moz-box-shadow:0px 8px 10px #ccc;
-webkit-box-shadow:0px 8px 10px #ccc; box-shadow: 0px 8px 10px #ccc; }
a{
color:#0066FF; text-decoration:none;
} a:hover{
color:#0099FF; }
--></style><pre>
<div id="gallery_box" >
<div id="thumbnail">
<a href="" ></a>
</div>
</div>
Related
I am very new to web development(.NET). Maybe this question asked earlier but I didn't find proper solution for my requirement. I have a master page with a banner and a right sidebar that could inherit by all child page. here is my master page design code:
<div id="topContent">.......</div>
<div>
<div id="rightContent" style="position: relative; float: right !important;">......</div>
<div id="mainContent" style="position: static;">
<asp:ContentPlaceHolder id="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
But this code for design not work perfectly exactly what I want. Here is my require design:
image of master page design
How could I achieve this using bootstrap and css? any suggestion or link appreciable. Thanks
1.You can use bootstrap grid system classes as well as.
Here is the link: https://getbootstrap.com/docs/3.3/examples/grid/
2.Added a snippet where I have made the same without bootstrap. Note: I have assumed the height and width based on the attachment. However, you can specify your own height and width.
#topContent {
width:100%;
background:blue;
padding:10px 10px;
text-align: center;
border: 2px solid black;
}
#rightContent {
position: absolute;
right: 0px;
width: 20%;
display: inline-block;
background: blue;
min-height: 104px;
top: 50px;
text-align: center;
vertical-align: middle;
border: 2px solid black;
}
#MainContent {
background: orange;
display:inline-block;
width:100%;
border:2px solid black;
min-height:204px;
text-align:center;
}
<div id="topContent">Master page banner</div>
<div>
<div id="rightContent">Mater page sidebar</div>
<div id="mainContent">
<asp:ContentPlaceHolder id="MainContent" runat="server">
<p>Child page content</p>
</asp:ContentPlaceHolder>
</div>
</div>
1.Bootstrap implementation
You can use the grid layout provided by the bootstrap for this.This will give you a responsive design too.
<div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<header>Master page banner</header>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8">
<article>child page content</article>
</div>
<div class="col-sm-4">
<aside>Master page sidebar</aside>
</div>
</div>
</div>
<div>
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
https://getbootstrap.com/docs/4.0/layout/grid/
and as for the "...a banner and a right sidebar that could inherit by all child page" I hope you mean a single page application.To achieve this you could use JSON/XML files to populate your child page content block(which is the article tab in the example that I have given above) while your side page and banner elements remains the untouched.
https://tutorialzine.com/2015/02/single-page-app-without-a-framework
I hope this helps: )
CSS implementation(easy&simple)
header {
height: 20px;
border: 1px solid black;
}
div {
height: 500px;
border: 1px solid black;
width: 100%;
}
aside {
height: 200px;
width: 25%;
border: 1px solid black;
float: right;
}
<header>Master Page banner</header>
<div>
Child Page content
<aside>Master Page sidebar</aside>
</div>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
.div1 {
border: 1px solid red;
float: left;
width: 20px;
}
.div2 {
border: 1px solid green;
width: 100%;
}
Please look at my code at JS Fiddle
I'm wanting to get div 1 to stretch the height of both divs 2 and 3, like you would do with table's rowspan.
I'm not proficient enough with understanding how to do table stuff in divs to figure this one out.
Thanks!
You can use the table/table-cell display css options.
UPDATED Fixed stretching issue.
<div style="display:table">
<div style="display:table-cell;height:100%;" class="div1">
1
</div>
<div style="display:table-cell;width:100%">
<div class="div2">2</div>
<div class="div2">3</div>
</div>
</div>
Link to JSFiddle: https://jsfiddle.net/pho5p7cc/8/
Here's what I would do. Create a div around all of your current div, then use css positioning to edit the lengths within the div.
Here's an example,
http://jsfiddle.net/tjgerot/v2469Leu/
<div class="table">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>
</div>
I would use a container to hold your DIV 2,3. Then margin the left of the container to allow space for your DIV 1.
Im not sure it's the smoothest way to code, but it works.
https://jsfiddle.net/pho5p7cc/3/
html
<div class="div1">1</div>
<div class="container">
<div class="div2">2</div>
div class="div2">3</div>
</div>
css
.div1 {
border: 1px solid red;
float: left;
width: 20px;
}
.div2 {
border: 1px solid green;
width: 50px;
margin-left:20px;
}
.container{
}
In this fiddle : http://jsfiddle.net/H4F8H/16/
I'm attempting to center two divs by wrapping an outer div and centering it :
<div style="margin-left:auto;margin-right:auto;">
But the divs are remaining left aligned. How can I center these divs on page ?
fiddle code :
HTML :
<div style="margin-left:auto;margin-right:auto;">
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
CSS :
*{
margin:0;
padding:0;
}
#block {
margin-right:100px;
border-width: 2px;
border-color: #4682B4;
background-color: WHITE;
width: 100px;
text-align: center;
line-height:30px;
padding:3px 0;
float:left;
}
img{
float:left;
}
#block:hover {
background-color: #C2DFFF ;
}
div is a block level element by default so it will take up 100% of horizontal space if you do not assign some width to it, so you need to assign some width to your container
<div style="margin-left:auto;margin-right:auto; width: 300px;">
Here, you can just set the width accordingly. Also avoid using inline CSS.
Your CSS is lil sloppy, for example margin-right:100px; is not required, also, you can use shorthand like
margin: 0 auto; = margin-left:auto; margin-right:auto;
Demo (Added a red border just to show the boundaries)
Note: You are floating your elements, so make sure you clear your floats either by using <div style="clear: both;"></div> which I've already done in the demo provided, else you can also use the snippet below to self clear the parent like
.clear:after {
display: table;
clear: both;
content: "";
}
A couple things I want to point out in this post:
You have set Id="block" in two different instances. Id's are meant to be unique. If you want a reusable identifier you should be using classes.
Inline styling should be avoided when possible. In this case there is no need to set inline styling on the parent div.
There is more then one way to center div's
I am going to leave this link here: http://thenewcode.com/723/Seven-Ways-of-Centering-With-CSS
This would be my solution:
html:
<div class="container">
<div class="block">
<span>Test</span>
</div>
<div class="block">
<span>Test 2</span>
</div>
</div>
css:
.container {
display: flex;
justify-content: center;
align-items: center;
}
.block {
display: flex;
background: grey;
width: 30%;
height: 200px;
border: 1px solid #777;
margin: 5px;
}
Give a width to that container.
#outerdiv{
margin-left:auto;margin-right:auto;
width:500px;
}
<div align="center">
<!-- -staff ->
</div>
margin:auto; doesn't work unless the width is specified...
<div style="margin:auto;width:100px;">
your content here. [Replace the width with your choice]
</div>
Giving width and margin auto will centralise the content in specified width.
<div style="margin-left:auto;margin-right:auto;width:400px;">//give variable width here..Normally 1000 to 1018..
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
<div id="block">
<img height="50" style="max-width: 50px;background-position: top left;" src="http://socialmediababe.com/wp-content/uploads/2010/12/administrator.jpg" />
<div style="font-size:20px;font-weight:bold;">
Test
</div>
<div>
Google
</div>
</div>
</div>
Like this
DEMO
CSS
.container{
width:960px;
margin:0 auto;
text-align:center;
border:1px solid red;
}
Currently having issues trying to get these bordered text boxed to stay aligned with the above images in a way that when I re-size the page they stick with their prospective images. Currently I have them forced to stick under the images with margin css but once I re-size the boxes, the boxes all flee under the images.
EDIT: Updated code - still having similar issues but this looks more promising - attaching photo of current state.
<body>
<div id="container">
<div id="header">
<img class="leaf" src="images/freshleaf.png" height="150px" alt="freshtext"/>
<!--<button class="navbutton"> <strong> TEST </strong> </button>-->
</div>
<div id="body">
<div id="main" class="">
<div class="column">
<img class="smart" src="images/phone1.png" height="500px" alt="phone1"/>
<div class="box1"> <h3>Pie is tasty Mmmmm...</h3> </div>
</div>
<div class="column">
<img class="smart" src="images/phone2.png" height="500px" alt="phone2"/>
<div class="box2"> <h3>Pie is tasty Mmmmm...</h3> </div>
</div>
<div class="column">
<img class="smart" src="images/phone3.png" height="500px" alt="phone3"/>
<div class="box3"> <h3>Pie is tasty Mmmmm...</h3> </div>
</div>
</div>
</div>
</div>
#body{
text-align: center;
}
#header {
padding-bottom: 50px;
text-align: center;
}
#main{
margin: 0 auto;
text-align:left;
width: 770px;
}
.column{
float:left;
padding-left: 10px;
}
.column:first-child {
padding-left: 0px;
}
.box1{
border: dotted;
border-color: gray;
padding: 2px 5px 2px 5px;
max-width: 250px;
text-align: center;
}
img.smart{
margin-left: auto;
margin-right: auto;
}
wrap each image and the coresponding text in one container and set float:left in the css. get rid of the #textboxes div. then center your #main div by setting it to the width of all the images (plus padding - if desired).
see example fiddle with all the code:
http://jsfiddle.net/QLvt7/4/
Is there an elegant way to align 3 elements left, center, and right on the same line?
Right now I'm using 3 <div>'s all with width:33%;float:left; and it's not working too well.
that works for me:
<html>
<head>
<style>
div.fl {
float: left;
width: 33%;
}
div.fr {
float: right;
width: 33%;
}
</style>
</head>
<body>
<div class="fl">
A
</div>
<div class="fl">
B
</div>
<div class="fr">
C
</div>
</body>
</html>
do you mean the same?
You may get strange results if there is any margin in the element you are adding it to. This is where width: 33% may not work because you will need to factor in the amount of margin that element has.
<html>
<head>
<title></title>
<style type="text/css">
div { float: left; width: 33%; margin: 4px; }
</style>
</head>
<body>
<div style="border: 1px solid #ff0000;">1</div>
<div style="border: 1px solid #00ff00;">2</div>
<div style="border: 1px solid #0000ff;">3</div>
</body>
</html>
This will cause it not work as expected because of the margin added to each div. Similarly, if you add too much of a border to each div you will get a similar result border: 5px solid !important;
As soon as you take away the margin from the above code, it should work as expected.
Try this:
<div style="float: left; width: 100px;">
left
</div>
<div style="float: right; width: 100px;">
right
</div>
<div style="width: 100px; margin: 0 auto;">
center
</div>
You need to take into account that the left and right divs do not push the container box (a div around the code above) height down, even if they have more content than the center div, the only one not floated. A clearfix will take care of this.
I created a page with all three methods for comparison at http://www.salestime.com/Ref/LeftCenterRight.html.
Float the first two left and float the third one right, while ensuring the widths will fit the line you are placing them on.
Use pixel widths if your design allows for it.
Float LeftBlock 'left', CenterBlock 'none' and RightBlock 'right'. But make sure the Center element appears last on your HTML page, otherwise it wont work.
Here is yet another varition of the theme:-
<html>
<head>
<style type="text/css">
div div {border:1px solid black}
div.Center {width:34%; float:left; text-align:center}
div.Left {float:left; width:33%; text-align:left}
div.Right {float:right; width:33%; text-align:right}
</style>
</head>
<body>
<div class="Left"><div>Left</div></div><div class="Center"><div>Center</div></div><div class="Right"><div>Right</div></div>
</body>
</html>
Note that the border is possible by using an inner div for each of the 'panel' divs. Also gives the center the remain 1% of pixels.
This works for me. I don't know if it's the most elegant, but it does do the work: it reacts well to the "cell" contents and resizing.
<html>
<head>
<style>
.a {
border: 1px dotted grey;
padding: 2px;
margin: 2px;
}
.l {
border: 1px solid red;
background-color: #fee;
float:left;
}
.c {
border: 1px solid green;
background-color: #efe;
text-align:center;
}
.r {
border: 1px solid blue;
background-color: #eef;
float:right;
}
</style>
</head>
<body>
<div class="a">
<div class="l">
</div>
<div class="r">
toto v.2 adfsdfasdfa sdfa dfas asdf
</div>
<div class="c">
item 1 | tiem 2 | asdf 3 | asdfad asd | aasdfadfadfads
</div>
</div>
</body>
</html>