I'm having lots of problem aligning an image on CSS.
Here is the thing, I have a div called "toggle" inside this div I have a list ul - li on each li I have text and then 3 images, but I want to have the Images aligned some how the alignment of the images are relative to the text not to the left padding.
http://aluna.webdcg.com/visistat/
Maybe this is what you need. See code in action at: http://jsfiddle.net/67VWe/
CSS:
* { font-family: Tahoma; }
ul { width: 200px; margin: 20px; border: 1px solid #777; }
li { padding: 2px; border-bottom: 1px dotted #777; }
li label { width: 120px; float: left; }
HTML:
<div id="toggle">
<ul>
<li><label>Text 1</label> <img src="http://admin.visistat.com/sales/img/icon-pulse-dot-red.png" width="22" height="22" /></li>
<li><label>Text 1234</label> <img src="http://admin.visistat.com/sales/img/icon-pulse-dot-red.png" width="22" height="22" /></li>
<li><label>Text 1234567</label> <img src="http://admin.visistat.com/sales/img/icon-pulse-dot-red.png" width="22" height="22" /></li>
</ul>
</div>
--
The label tag, width, and float values did the trick.
Related
To start off here is an image to illustrate what I'm dealing with:
I have seen a few other instances of people dealing with this where a border of sorts is applied to the bottom of an image. A solution was to set the images to display: block, but there was no explanation as to why this fixes it. I'm trying to understand why an image must have a display value of block when applying a box shadow property.
HTML
<div id="showcase">
<section>
<ul id="gallery">
<li><img src="img/img1.png" alt="One"></li>
<li><img src="img/img2.png" alt="Two"></li>
<li><img src="img/img3.png" alt="Three"></li>
<li><img src="img/img4.png" alt="Four"></li>
<li><img src="img/img5.png" alt="Five"></li>
<li><img src="img/img6.png" alt="Six"></li>
<li><img src="img/img7.png" alt="Seven"></li>
</ul>
</section>
<footer>
</footer>
</div>
CSS
#showcase {
max-width: 850px;
border: 2px dotted;
margin: 0 auto;
background: silver;
}
#gallery {
list-style: none;
padding: 0;
margin: 0;
}
#gallery li {
width: 45%;
float: left;
margin: 2.5%;
box-shadow: 0 8px 10px -5px;
}
Actually you're just missing to properly position your inline-block images using
#gallery img{
vertical-align: top; /* or any other value from */
}
https://developer.mozilla.org/en/docs/Web/CSS/vertical-align
Example with issue:
#gallery li{
display:inline-block;
box-shadow: 0 8px 10px -5px;
}
<ul id="gallery">
<li>
<img src="//placehold.it/60x60">
</li>
</ul>
Example with vertical-align on images
#gallery li{
display:inline-block;
box-shadow: 0 8px 10px -5px;
}
#gallery li img{
vertical-align: top;
}
<ul id="gallery">
<li>
<img src="//placehold.it/60x60">
</li>
</ul>
https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align
Phrasing HTML elements like img are subject to typographical line-boxes unless set (overridden) to a block-level display state.
I have a list with images in. The list is a centered column in foundation.
Fiddle
I need it so that the list elements images are all aligned in the same 'row' rather than going down the page.
How can I do this? I've tried:
li{
display: inline;
}
But no luck.
Add display: inline-flex to your ul
ul {
list-style: none;
display: inline-flex;
}
img {
border: 1px solid black;
}
<div class="row">
<ul class="small-4 medium-6 small-centered columns">
<li>
<img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare" />
</li>
<li>
<img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare" />
</li>
<li>
<img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare" />
</li>
</ul>
</div>
You can give the ul and li a fixed size or % based width and use for lists a display:inline-block
#myUL{
list-style: none;
width: 100%;
position: relative;
display:block;
float:none;
padding: 0;
margin: 0;
}
li{
width: 32.5%;
position: relative;
margin: 0px;
line-height: 14px;
display: inline-block;
}
}
img{
border: 1px solid black;
position:relative;
width:100%;
}
Jsfiddle
Firstly - you need to remove "li" css being nested inside ul.
Then, having li width set to some certain size, and adding display: inline-block; to li's css should do the job.
It has greater universal browser support in opposition to inline-flex (if you're about to have a support for IE9 and below):
HTML:
<div class="row">
<ul class="small-4 medium-6 small-centered columns">
<li><img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare"/></li>
<li><img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare"/></li>
<li><img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare"/></li>
</ul>
</div>
CSS:
ul {
list-style: none;
}
li {
display: inline-block;
width:30%;
margin-right: -4px;
}
img {
border: 1px solid black;
}
JSFiddle
I have a few work thumbnail divs in a container When I hover over one specific one, it shifts the ones after it along the next row. How can I resolve this?
HTML:
<div class="blog-container">
<h1>PRINT</h1>
<div class="work_thumbs">
<li class="print">
<div><img src="../Images/Tree Top News/Thumbs/TTN2.jpg" alt="Tree Top" border="0" class="thumb">TREE TOP NEWS</div>
</li>
<li class="print">
<div><img src="../Images/Harrow Council/Thumbs/Harrow Logo.jpg" alt="Harrow Council" border="0" class="thumb">HARROW COUNCIL</div>
</li>
<li class="print">
<div><img src="../Images/Regent/Thumbs/Regent logo.jpg" alt="Regent Care" border="0" class="thumb">REGENT CARE SERVICES</div>
</li>
<li class="print">
<div><img src="../Images/NLCS/Thumbs/NLCS logo.jpg" alt="NLCS" border="0" class="thumb">NLCS</div>
</li>
<li class="print">
<div><img src="../Images/Aish/Thumbs/AHC.jpg" alt="Aish" border="0" class="thumb"> AISH</div>
</li>
<li class="print">
<div><img src="../Images/FJL/Thumbs/FJL.jpg" alt="chicago graphic design" border="0" class="thumb">FJL</div>
</li>
<li class="print">
<div><img src="../Images/Tree Top News/Thumbs/TTN.png" alt="Canons high school" border="0" class="thumb">CANONS HIGH SCHOOL</div>
</li>
</div>
</div>
CSS:
.blog-container {
height: 100%;
width: 100%;
margin-top: 37px;
background-color:
}
.work_thumbs {
width:1000px;
margin: 0px auto 0 auto;
float: left;
}
.work_thumbs li {
margin: 0px 15px 15px 0px;
list-style-type: none;
display: block;
float: left;
display: inline;
font-family: "geogtq md";
color: #FFF;
overflow: hidden;
}
.work_thumbs li a {
float: inherit;
display: block;
width: 230px;
padding-bottom: 50px;
font-family: "geogtq md";
color: #00BDE5;
height: 200px;
border: 1px solid #02BDE5;
overflow: hidden;
}
.work_thumbs li .type {
color: #01BDE6;
}
.work_thumbs li a:hover {
background-color: #ceeef6;
border-bottom: 1px solid #a2a2a2;
text-decoration: none;
margin-bottom: -1px;
color: #007789;
font-family: "geogtq md";
}
.work_thumbs li .thumb {
margin-bottom: 15px;
display:block
}
element:hover{url('pathToImg.png'); position:relative; z-index:1;}
Make z-index:1 a higher index to suit your needs, and include a height and width as well.
You are changing the dimensions of your divs upon hover, by adding the negative margin-bottom. this causes your floating divs to 'hook' upon hover, in stead of starting at the left.
Here you can see it in action: http://jsfiddle.net/P8xEN/
I got some images into a div.
<div>
<img />
<img />
<img />
<img />
</div>
All images are set to the same height of 50px. The width is set to auto.
The question is, how do i get the images to float left into a horizontal line that reached into the parent div's overflow area. The parent div need a width of 100%.
I want to set the div to overflow-x: scroll. When the images are simply float: left they break into another line if they extend the divs width. But how can I get them into the overflow, so i have to scroll to see the others?
The main problem is that i can't use js or a wrapper div. The problem has to be solved with css.
Use white-space: nowrap; on the container div and display:inline on the img elements.
FIDDLE
<div>
<img src="http://placehold.it/350x50"/>
<img src="http://placehold.it/350x50"/>
<img src="http://placehold.it/350x50"/>
<img src="http://placehold.it/350x50"/>
</div>
div
{
white-space:nowrap;
overflow-x: auto;
}
img
{
display: inline;
margin-right: 10px;
}
TRY this.. i hope this one can help you.,
Cascsading Syle..
.float_l { float: left }
.float_r { float: right }
.col_w200 {
overflow: scroll;
height: 300px;
width: 200px;
}
.lp_frontpage { margin: 0; padding: 0; list-style: none }
.lp_frontpage li {
margin: 0;
padding: 0;
display: inline
}
.lp_frontpage li a {
float: left;
display: table;
width: 200px;
height: 100px;
margin: 0 10px 10px 0
}
.lp_frontpage li a img { width: 190px; height: 90px; border: 1px solid #3c4445; padding: 4px; }
HTML CODE..
<div class="col_w200 float_r">
<h2>Web Design Gallery</h2>
<ul class="lp_frontpage">
<li><img width="200" height="100" src="images/_01.jpg" alt="Image 01" /></li>
<li><img width="200" height="100" src="images/_image_02.jpg" alt="Image 02" /></li>
<li><img width="200" height="100" src="images/_03.jpg" alt="image 03" /></li>
<li><img width="200" height="100" src="images/_04.jpg" alt="image 04" /></li>
</ul>
</div>
I currently have two images that are displaying next together inline (so far so good). I have 3 lines of different text that I'd like to go alongside these images in line as well. So it would be: image->image->3 different lines of of text/links in a list.
All of this needs to fit in an invisible wide rectangle. So far, the two images are sized the same height and width, so if I can get the 3 lines to fit their height it would display nicely.
The (3) lines I'd like to display (from the code below) are: classes for "headline", "submitted", "share."
html, body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
#logobar {
background: rgb(206, 211, 255);
}
#logobar ul {
list-style-type: none;
margin: 40;
padding: 40;
}
#logobar li {
display: inline;
padding: 20;
font-size: 52;
font-family: Comic sans MS;
}
.box {
margin-left: 50px;
width: 650px;
height: 80px;
display: inline-block;
}
.box .headline {
font-size: 18px;
color: black;
list-style-type: none;
}
My HTML code looks like:
<div id="logobar">
<ul>
<li>Breaditt: Bread News Aggregator</li>
<li>
<img src="img/logo.jpg" alt="breaditt cat" width="150" height="100">
</li>
</ul>
</div>
<div id="breadnews">
<div class="box">
<img src="img/counter.png" alt=counter width="75" height="75" />
<img src="img/breadcat.jpg" alt=article-logo width="75" height="75" />
<div class="headline">Website dedicated to cats with bread
</div>
<div class="submitted">
<h>submitted 2 days ago by Alex Doggrowski</h>
</div>
<div class="share">
<h>14,400 Comments. Share Save hide report</h>
</div>
</div>
</div>
.box img {
float: left;
margin-right: 10px;
}
.box {
clear:both;
}
http://jsfiddle.net/samliew/uUcL6/
You can use display property.
Example:
//CSS
img{
display:inline-block; vertical-align:top;
height:100px; width:100px;
}
//HTML
<div>
<img src="1.jpg" alt="image1"/>
<img src="2.jpg" alt="image2"/>
</div>