Im trying to create a header with different images and their deiscription. I want their description to be shown when we mouseOver the content using jQuery. I'm only posting my HTML and CSS as i think thats where the problem lies.
jQuery works but the problem is that even after using overflow hidden the div with class headerCont wraps around to next line. Can someone help me with this. Thanks.
Im not allowed to post images so this is the link to image that will help you in understanding me ->
http://image.bayimg.com/cabjpaaeg.jpg
http://img145.imageshack.us/img145/3236/cabjpaaeg.jpg
PS in the above image i've mouseOver one of the div with class headerCont. I want the TEXT to be placed next to the image. Also the last div wraps over to next line whenever one of the div is expanded (dont know the correct word to explain that!) instead of its original place
The HTML CODE:
<html>
<head>
<title>Silder</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
</head>
<body>
<div class="header">
<div style="margin: 5px; width:1300px; overflow: hidden;">
<div class="headerCont" style="background-color: #cdcdcd; ">
<div><img src="image/1.jpg" style="height: 317px; width: 214px; float:left; " /></div>
<div style="float:left;margin-left:214px; width: 200px; overflow: hidden;">Discription </div>
</div>
<div class="headerCont" style="background-color: #719501; ">
<div><img src="image/2.jpg" style="height: 317px; width: 214px;" /></div>
<div style="float:left; position:absolute ;margin-left:214px; width: 200px; overflow: hidden;">Discription </div>
</div>
<div class="headerCont" style="background-color: #f3f3f3; ">
<div><img src="image/3.jpg" style="height: 317px; width: 214px;" /></div>
<div style="float:left; position:absolute ;margin-left:214px; width: 200px; overflow: hidden;">Discription </div>
</div>
<div class="headerCont" style="background-color: #719501; ">
<div><img src="image/4.jpg" style="height: 317px; width: 214px;" /></div>
<div style="float:left; position:absolute ;margin-left:186px; width: 200px; overflow: hidden;">Discription </div>
</div>
<div class="headerCont" style="background-color: #f3f3f3;">
<div><img src="image/5.jpg" style="height: 317px; width: 214px;" /></div>
<div style="float:left; position:absolute ;margin-left:214px; width: 200px; overflow: hidden;">Discription </div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jQuery.js" ></script>
<script type="text/javascript" src="js/home.js" ></script>
</body>
CSS CODE:
#content{
margin-left: auto;
margin-right: auto;
width: 90%;
border: 2px solid;
border-color: #272727;}
.outter{
border:2px solid #000000;
margin:4px;
position: relative;
}
.header{
width:1300px;
height:400px;
margin-left:auto;
margin-right:auto;
border: 1px solid #000;
margin-bottom:20px;
overflow:hidden;
position: relative;
}
.headerCont{
height: 100%;
width:214px;
padding:5px;
float:left;
overflow:hidden;
position:relative;
}
.header img{
border-color:#000000;
}
JavaScript:
$(".headerCont").mouseover(function(){
$(this).animate({
width:400,
}, 300 );
});
$(".headerCont").mouseout(function(){
$(this).animate({
width: 214,
}, 200 );
});
Finally i found out the solution. thanks everyone else. all i did was add another wrapper div after my header div. Here the code:
<div class="header">
<div style="width:10000px; height: 317px;">
<div class="outter">
<div style="float:left;"><img src="image1.jpg" height="317px" width="217px"/></div>
<div style="float:left;">Description</div>
</div>
<div class="outter">
<div style="float:left;"><img src="image1.jpg" height="317px" width="217px"/></div>
<div style="float:left;">Description</div>
</div>
<div class="outter">
<div style="float:left;"><img src="image1.jpg" height="317px" width="217px"/></div>
<div style="float:left;">Description</div>
</div>
<div class="outter">
<div style="float:left;"><img src="image1.jpg" height="317px" width="217px"/></div>
<div style="float:left;">Description</div>
</div>
<div class="outter">
<div style="float:left;"><img src="image1.jpg" height="317px" width="217px"/></div>
<div style="float:left;">Description</div>
</div>
<div class="outter">
<div style="float:left;"><img src="image1.jpg" height="317px" width="217px"/></div>
<div style="float:left;">Description</div>
</div>
<div class="outter">
<div style="float:left;"><img src="image1.jpg" height="317px" width="217px"/></div>
<div style="float:left;">Description</div>
</div>
</div>
</div>
Related
I would like to figure out how to get a series of images to be vertically aligned on the page so people can scroll left to right and view them. I have tried 'vertical-align: middle'as well as adjusting the top % to no avail, here's the current set-up
.page {
position: absolute;
width: 2400px;
vertical-align: middle;
}
.column {
float: left;
width: 400px;
padding: 5px;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="page">
<div class="row">
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/icymi_03.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/moving_01.png" width="100%" />
</div>
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/image082.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/image257.png" width="100%" />
</div>
</div>
</div>
You may use the table-layout , so you get a single line and can use vertical-align:middle from the parent container .
here is an example without float and okay for browsers as old as FF 1 or IE8 . today, grid and flex can do a similar job in that case. Play snippet in full page to check out vertical-align behavior
body {
margin: 0;
padding: 0;
}
.page {
overflow-x: auto;
overflow-y: hidden;
height: 100vh;
box-sizing: border-box;
}
.row {
display: table;
height: 100%;
}
.column {
padding: 5px;
display: table-cell;
vertical-align: middle;
}
.column img {
width: 400px;
}
<div class="page">
<div class="row">
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/icymi_03.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/moving_01.png" width="100%" />
</div>
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/image082.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/image257.png" width="100%" />
</div>
</div>
</div>
with flex it could be :
body {
margin: 0;
padding: 0;
}
.row {
display: flex;
align-items:center;
min-height:100vh;
box-sizing:border-box;
}
.column {
padding: 5px;
min-width: 400px;
}
<div class="page">
<div class="row">
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/icymi_03.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/moving_01.png" width="100%" />
</div>
<div class="column">
<img src="https://68.media.tumblr.com/94a2f217cbd0e1d3ae663764bfa3bef3/tumblr_oazuptRyRh1uz08p6o1_1280.jpg" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/gRAo4t8mm/image082.png" width="100%" />
</div>
<div class="column">
<img src="http://static.tumblr.com/vbfmte2/QNbo4t8mh/image257.png" width="100%" />
</div>
</div>
</div>
My code is here: https://jsfiddle.net/tewbaLnc/
HTML:
<div class="fields">
<div class="block" >
<img class="fieldsvg" src="documentfields-icon.svg" alt="Document Fields"
style="padding-top:10px">
<br><br><br><br><h3 style="text-align:left;color:#525252;padding-left:10px;" >Div1</h3>
<p style="color:#656565;text-align:left;padding-left:10px">Guide.</p>
</div>
<div class="block">
<img class="fieldsvg" src="templates-list-icon.svg" alt="Templates List"
style="padding-top:20px">
<br>
<br><br>
<br><h3 style="text-align:left;color:#525252;padding-left:10px;padding-top:20px;" >Div2</h3>
<p style="color:#656565;text-align:left;padding-left:10px">clicks.</p>
</div>
<div class="block">
<img class="fieldsvg" src="tracking-icon.svg" alt="Tracking Icon"
style="padding-top:20px">
<br><br><br><br><h3 style="text-align:left;color:#525252;padding-left:10px;padding-top:20px;" >Div3</h3>
<p style="color:#656565;text-align:left;padding-left:10px">Track.</p>
</div>
<div class="block">
<img class="fieldsvg" src="routing-icon.svg" alt="Routing Icon"
style="padding-top:20px">
<br><br><br><br><h3 style="text-align:left;color:#525252;padding-left:10px;padding-top:20px;" >Div5</h3>
<p style="color:#656565;text-align:left;padding-left:10px"> once.</p>
</div>
<div class="block">5. name of the company</div>
<div class="block">6. name of the company</div>
</div>
CSS used:
img.fieldsvg{
padding-left:10px;
width:80px;
height:80px;
float:left;}
div.fields{
width: 100%;
background: #f8f8f8;
margin: 10px;
position: relative;
text-align:center;}
.block {
background-color:white;
height: 300px;
width: 300px;
display:inline-block;
margin: 25px;
}
The HTML is a little messy but easy to understand. Having a hard time figuring out what to do. I have tried adding margin-top:-20px to move the Div1 up, but to no avail.
Is there anything else I could try? Since I am unable to find my mistake.
`
I have amended your fiddle here
What you need to do is add vertical-align: top; to the .block element like so:
.block {
background-color: white;
height: 300px;
width: 300px;
display: inline-block;
margin: 25px;
vertical-align: top;
}
Just use vertical-align: middle; (for example middle) on your inline-block items (.block). Here is the fiddle: https://jsfiddle.net/tewbaLnc/2/
And a snippet:
img.fieldsvg{
padding-left:10px;
width:80px;
height:80px;
float:left;}
div.fields{
width: 100%;
background: #f8f8f8;
margin: 10px;
position: relative;
text-align:center;}
.block {
background-color:white;
height: 300px;
width: 300px;
display:inline-block;
margin: 25px;
vertical-align: middle;
}
<div class="fields">
<div class="block" >
<img class="fieldsvg" src="documentfields-icon.svg" alt="Document Fields"
style="padding-top:10px">
<br><br><br><br><h3 style="text-align:left;color:#525252;padding-left:10px;" >Div1</h3>
<p style="color:#656565;text-align:left;padding-left:10px">Guide.</p>
</div>
<div class="block">
<img class="fieldsvg" src="templates-list-icon.svg" alt="Templates List"
style="padding-top:20px">
<br>
<br><br>
<br><h3 style="text-align:left;color:#525252;padding-left:10px;padding-top:20px;" >Div2</h3>
<p style="color:#656565;text-align:left;padding-left:10px">clicks.</p>
</div>
<div class="block">
<img class="fieldsvg" src="tracking-icon.svg" alt="Tracking Icon"
style="padding-top:20px">
<br><br><br><br><h3 style="text-align:left;color:#525252;padding-left:10px;padding-top:20px;" >Div3</h3>
<p style="color:#656565;text-align:left;padding-left:10px">Track.</p>
</div>
<div class="block">
<img class="fieldsvg" src="routing-icon.svg" alt="Routing Icon"
style="padding-top:20px">
<br><br><br><br><h3 style="text-align:left;color:#525252;padding-left:10px;padding-top:20px;" >Div5</h3>
<p style="color:#656565;text-align:left;padding-left:10px"> once.</p>
</div>
<div class="block">5. name of the company</div>
<div class="block">6. name of the company</div>
</div>
For more info about vertical-align: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
I'm trying to get the images on both of divs below to act as a left-column while the accompanying text acts as a right column, both in the same row.
Each row should have the other images and texts along with it. Somewhere in the shuffle, I've got my divs mixed up and they aren't working properly. I need the text to stay within the container on the right. What am I missing?
.toplinks {
width: 300px;
padding: 20px;
overflow: hidden;
}
.icon {
width: 30%;
float: left;
}
.hlbox {
width: 300px;
border: 1px solid;
border-radius: 9px 9px 9px 9px;
border-color: #999999;
background-image: url(http://ejgh.org/templates/ejgh/images/HLHeader.png), url(http://ejgh.org/templates/ejgh/images/healthyLifestyles_bottom.gif);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: top, bottom;
padding: 100px 20px 25px;
overflow: hidden;
}
.HLrow {
display: block;
border: 1px solid;
border-color: green;
width: 100%;
}
.HLicon {
width: 30%;
border: 1px solid;
border-color: red;
display: table-cell;
float: left;
height: inherit;
}
.HLtext {
width: inherit;
border: 1px solid;
border-color: purple;
}
<div class="toplinks">
<div class="rTableRow">
<div class="icon"><img src="http://ejgh.org/images/stories/homepage/findphysicianicon.jpg" alt="Find a Physician Icon" /></div>
<div class="text">
<h3>Find a Physician</h3>
<hr />Let us help you pick a doctor that fits your needs</div>
</div>
<div class="rTableRow">
<div class="icon"><img src="http://ejgh.org/images/stories/homepage/paymybillicon.jpg" alt="Pay my Bill Icon" /></div>
<div class="text">
<h3>Pay My Bill</h3>
<hr />Conveniently pay your EJGH bill</div>
</div>
<div class="rTableRow">
<div class="icon"><img src="http://ejgh.org/images/stories/homepage/myejghicon.jpg" alt="myEJGH.Org Icon" /></div>
<div class="text">
<h3>My EJGH.Org</h3>
<hr />See your up-to-date medical information</div>
</div>
<div class="rTableRow">
<div class="icon"><img src="http://ejgh.org/images/stories/homepage/edocicon.jpg" alt="eDoc icon" width="75" /></div>
<div class="text">
<h3>eDoc</h3>
<hr />$49 Doctor visits via smartphone or online</div>
</div>
<div class="rTableRow">
<div class="icon"><img src="http://ejgh.org/images/stories/homepage/mdportalicon.jpg" alt="" width="75" /></div>
<div class="text">
<h3>EJGH MD Portal</h3>
<hr />Physician login for portal access</div>
</div>
</div>
<p></p>
<!--Start HL Table-->
<div class="hlbox">
<div class="HLrow">
<div class="HLicon"><img src="http://ejgh.org/templates/ejgh/images/hl_memberbutton.png" alt="Image of Apple and Weights for homepage" width="100%"/></div>
<div class="HLtext">
<h3>Become a Member</h3>
<hr />
<p>Join Healthy Lifestyles and enjoy the benefits of membership.</p>
</div>
</div>
<div class="HLrow">
<div class="HLicon"><img src="http://ejgh.org/templates/ejgh/images/hl_communitybutton.png" alt="Image of elderly couple at hospital in New Orleans Louisiana" width="100%" /></div>
<div class="HLtext">
<h3>Community Events</h3>
<hr />
<p>Learn more about the classes, events, support groups, and health screenings we offer.</p>
</div>
</div>
<div class="HLrow">
<div class="HLicon"><img src="http://ejgh.org/templates/ejgh/images/hl_tvbutton.png" alt="Image of Liz Delsa Healthy Lifestyles Host" width="100%" /></div>
<div class="HLtext">
<h3>Watch TV Segments</h3>
<hr />
<p>Watch Healthy Lifestyles TV segments as seen on WWL-TV.</p>
</div>
</div>
<div class="HLrow">
<div class="HLicon"><img src="http://ejgh.org/templates/ejgh/images/hl_magbutton.png" alt="Summer 2016 Healthy Lifestyles Cover" width="100%" /></div>
<div class="HLtext">
<h3>Read the Magazine</h3>
<hr />
<p>Read the latest Healthy Lifestyles Magazine as included in the Times-Picayune newspaper.</p>
</div>
<!--End HL Table-->
</div></div>
<!--End Box Div—>
Also, the boxes around the HLdiv can go away - I just was using those to try to get an eye for what's pulling where.
Thanks again.
If I understood correctly, all you have to do is add display: table-cell; to the HLtextclass.
So I have that html code with images+title:
<div class="container">
<div class="box"><img src="image1.jpg" class="thumb"><p>Title 1</p></div>
<div class="box"><img src="image2.jpg" class="thumb"><p>Title 2</p></div>
<div class="box"><img src="image3.jpg" class="thumb"><p>Title 3</p></div>
<div class="box"><img src="image4.jpg" class="thumb"><p>Title 4</p></div>
...
<div class="box"><img src="image49.jpg" class="thumb"><p>Title</p></div>
<div class="box"><img src="image50.jpg" class="thumb"><p>Title</p></div>
</div>
And css:
.container {
width:80%;
margin: 0 auto;
}
.box {
display:inline-block;
width:150px;
margin-right:5px;
float:left;
}
With that code I have more "white" space on right, I want to have these pictures in the center for different browser size without setting up width for container.
Is it possible with css?
add to your container class text-align: center; and remove float:left; from box class.
That's what you call a centered, widthless float.
#outer {
/* This is just so you can see that they're centered */
width: 400px;
border: 1px solid black;
overflow: hidden;
}
.centered {
position: relative;
float: left;
left: 50%;
/* This and below is just because I have them stacked */
height: 100px;
padding-bottom: 10px;
clear: left;
}
.centered div {
position: relative;
float: left;
left: -50%;
}
<div id="outer">
<div class="centered">
<div>
<img src="http://placehold.it/200x100" alt="" />
</div>
</div>
<div class="centered">
<div>
<img src="http://placehold.it/300x100" alt="" />
</div>
</div>
<div class="centered">
<div>
<img src="http://placehold.it/50x100" alt="" />
<img src="http://placehold.it/50x100" alt="" />
<img src="http://placehold.it/50x100" alt="" />
<img src="http://placehold.it/50x100" alt="" />
<img src="http://placehold.it/50x100" alt="" />
</div>
</div>
</div>
What is the correct way to structure (html) on a page based on the image I have attached. I am trying but I keep getting overflow issues with the name for the second section appearing directly under the text section instead of on top of the photo. I have built my structure like this:
<div style="width:100%; padding-bottom:30px;">
<strong>Name1</strong>
<div style="float:left; padding-right:30px; width:20%">
PHOTO
</div>
<div style="float:left; width:70%">
TEXT SECTION
</div>
</div>
<div style="width:100%; padding-bottom:30px;">
<strong>Name2</strong>
<div style="float:left; padding-right:30px; width:20%">
PHOTO
</div>
<div style="float:left; width:70%">
TEXT SECTION
</div>
</div>
Move you <strong> outside the <div>-s and apply overflow: hidden to <div>s
.panel { width:100%; padding-bottom:30px; overflow: hidden }
.photo { float:left; padding-right:30px; width:20%; height: 80px; border: 3px solid #000 }
.text { float:right; width:70%; height: 80px; border: 3px solid #000 }
<strong>Name1</strong>
<div class="panel">
<div class="photo">
PHOTO
</div>
<div class="text">
TEXT SECTION
</div>
</div>
<strong>Name1</strong>
<div class="panel">
<div class="photo">
PHOTO
</div>
<div class="text">
TEXT SECTION
</div>
</div>
<strong>Name1</strong>
<div class="panel">
<div class="photo">
PHOTO
</div>
<div class="text">
TEXT SECTION
</div>
</div>
HTML
<div class="pick_group">
<h2>Name 1</h2>
<img class="photo" />
<p class="text"></p>
</div>
<div class="pick_group">
<h2>Name 2</h2>
<img class="photo" />
<p class="text"></p>
</div>
The CSS
place this in between just before the
.pick_group {
width: 800px;
margin: 0 auto;
clear: both;
}
.pick_group h2{
style if you want
}
.photo {
width: 200px;
float: left;
margin: 10px 25px;
}
.text {
width: 500px;
float: left;
margin: 10px 25px;
}