CSS
.contain {
max-width:960px;
text-align:center;
}
.category {
position:relative;
display: inline-block;
float:left;
padding:10px;
}
.category2 {
position:relative;
display: inline-block;
pading:10px;
}
.category3 {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
}
HTML
<div align="center" class="category">
<img src="gemstoneshomebutton.png" />
</div>
<div align="center" class="category2">
<img src="dichroichomebutton.png" />
</div>
<div align="center" class="category3">
<img src="filigreehomebutton.png" />
</div>
i am trying to align 3 images that are 309 px wide , by 111 px high inside a container div,
and they don't align center and also the third image jumps down below the other two images.
I've tried to adjust the width of the container and the 3 divs, I've tried tables and changing the width on the actual html with no success.
This is my first time working with divs and i thought they would be easier, perhaps my math is off when assigning widths, or maybe I'm just structuring it all wrong.![here is an example of what i am trying to achieve, the three categories in the picture here.] http://i49.tinypic.com/2r2uqso.jpg
any
and all help would be appreciated.
CSS
.contain {
max-width:960px;
text-align:center;
}
.category {
position:relative;
display: inline-block;
float:left;
padding:10px;
}
HTML
<div align="center" class="category">
<img src="gemstoneshomebutton.png" />
</div>
<div align="center" class="category">
<img src="dichroichomebutton.png" />
</div>
<div align="center" class="category">
<img src="filigreehomebutton.png" />
</div>
Don't forget to add 'alt' attribute in the img tag! It is especially important for people who a partially sighted or blind.
http://www.myblogsplace.com/images-alt-text
Yes the alt attribute is really important. It is actually used by "screen reader" software so when a person is listening to the content of a webpage, like a blind person, can interact with that specific element. All images should have this attribute so it is accessible.
Related
I'm fighting two days already with this problem. I want to put div with images at absolute positions, below other div with images. Somehow divs are ignoring images and stack on top of each other.
example code is here: https://jsfiddle.net/6H4RA/10/
So it should display one image in the first row, and two images in the second.
I must be missing something obvious.
Here is the code from JSFiddle:
#banner-left {
position:absolute;
width:100px;
height:100px;
}
#header{
position:relative;
background: #ffa;
}
#footer {
position:relative;
margin-top:0px;
width: 100%;
background: #6cf;
}
<div id="header">
Header
<div id="banner-left">
<img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" />
</div>
</div>
<div id="footer">
FOOTER
<div id="banner-left">
<img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" />
</div>
<div id="banner-left" style="top:0px;left:100px;">
<img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" />
</div>
--edit--
I forgot to mention that images must be at absolute positions. That's the catch.
There may be no need to use absolute positioning in this layout design.
Here is how I might approach implementing this.
Note: id's should be unique on a web page, so I changed your #banner-left to a class .banner-left.
.banner-left {
float: left;
margin-right: 20px; /* if needed */
}
.banner-left img {
display: block;
}
#header {
overflow: auto;
background: #ffa;
}
#footer {
overflow: auto;
background: #6cf;
}
<div id="header">
<h1>Header</h1>
<div class="banner-left">
<img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" />
</div>
</div>
<div id="footer">
<h2>Footer</h2>
<div class="banner-left">
<img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" />
</div>
<div class="banner-left">
<img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" width="100" height="100" alt="" />
</div>
In you banner width id, add
display: inline-block;
I forgot to mention that images must be at absolute positions. That's the catch.
Marc, your example works great but i have lots of images with absolute position that i want to move depending on website size with a simple container div.
You have a couple of problems with your code.
First, you can't have multiple elements with the same id. This may not cause problems in your small jsfiddle right now, but it can and will come back and bite you in the rear, later on. However, that is easily solved by turning the ids into classes.
The other problem is that there is no more content in the header and footer divs after the text. Yes, there are the absolutely positioned blocks, but they don't count. Absolutely positioned elements don't partake in the page flow. So the header and footer divs don't have a clue about them!
The easiest solution, as possible in your example, is to give those divs a bottom padding of 100px, so that the images appear to be inside them instead of sticking out. (They don't really sit inside them, but they just are displayed in the same place where the parents' padding is.)
.banner-left {
position:absolute;
width:100px;
height:100px;
}
.banner-left img {
width:100px;
height:100px;
}
#header{
position:relative;
background: #ffa;
padding-bottom:100px;
}
#footer {
position:relative;
margin-top:0px;
width: 100%;
background: #6cf;
padding-bottom:100px;
}
<div id="header">
Header
<div class="banner-left">
<img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" alt="g" />
</div>
</div>
<div id="footer">
FOOTER
<div class="banner-left">
<img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" alt="g" />
</div>
<div class="banner-left" style="left:100px;">
<img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" alt="g" />
</div>
If, however, you don't know beforehand what the heights of the images are, you may have to run some Javascript on the images to figure out which one is the highest, or find out a way to avoid the display:absolute.
I have some images which get smaller as the browser size does.
It works well for me but as the images get smaller the space between them gets bigger.
When the browser is at its smallest, the space between images is the size of the image.
If you resize your browser slowly down to the smallest you will see the media queries kick in and see what i mean.
Ive tried that many things ive lost track.
Ive tried replicating it in a fiddle but it just requires most of my code to do so, so i can only offer the link to the page http://www.techagesite.com/page-1work1112211.htm
.top_grow{
display:inline-block;
vertical-align:top;
font-size:0;
margin:0 auto;
overflow:hidden;
white-space:nowrap;
}
.cats {width:100%;
height:100%;
display:block;
font-size:0;
}
.text{
font-size:11px;
letter-spacing:1px;
word-spacing:1px;
}
<div class="top_grow">
<a href="http://www.techagesite.com/hd-wii-wallpapers-mario-kart-super-mario-galaxy-2.htm">
<img class="cats" src="http://freephonewallpapersformobile.files.wordpress.com/2014/05/super-mario-galaxy-hd-desktop-background_small1.jpg"></img>
<div class="text">
Mario Galaxy
</div>
</a>
</div>
It looks as though your images are being spaced out with a space character. The space character does not have a fluid width.
The solution would be to use floats.
Something like
.holder {
width: 100%;
}
.img-holder {
float: left;
margin-right: 3%;
width: 22%;
height: 100px;
background-color: #ccc;
}
img {
width: 100%;
height: auto;
}
<div class="holder">
<div class="img-holder"><img src="#" /></div>
<div class="img-holder"><img src="#" /></div>
<div class="img-holder"><img src="#" /></div>
<div class="img-holder"><img src="#" /></div>
</div>
This will give you four columns of images with a variable width gutter.
You will need to alter this to suit your own purposes, but I hope this sends you in the right direction.
Try it out in a new file first, then apply what you learn to your specific issue and this should work fine.
I want it so that there are absolutely not white spaces at all. Non on the edges and nothing between the objects. I've tried everything but so far This is as close as I've got:
<div style="float: left; width:100%; "> <HR SIZE="130" COLOR="#262626" WIDTH="100%">
<img style="position:absolute;left:10;top:8;" src="logo.png">
</div>
<div id="map" style="width:100%; height:75%; position:fixed; left:0;top:0;overflow:hidden;"></div>
<HR SIZE="20" COLOR="#262626" WIDTH="100%">
You mean something like this? http://jsfiddle.net/FCvyh/2/
Add this css
body{
margin:0;
}
hr {
margin:0;
}
I guess you are not using a css reset, correct? The browser adds the random margins.
I'm trying to create a website that will adjust the size of table elements table cells relative to the size of the window, so that it will always fit inside the window. Here's what I have:
.table {
display: table;
margin-right: auto;
margin-left: auto;
width: 100%;
}
.tablecell {
display: table-cell;
}
<div class="table">
<div class="tablecell">
<image src="fb.png">
</div>
<div class="tablecell">
<image src="twitter.png">
</div>
<div class="tablecell">
<image src="youtube.png">
</div>
<div class="tablecell">
<image src="apple.png">
</div>
<div class="tablecell">
<image src="email.png">
</div>
</div>
What's messing this up is the width:100%. Here's a picture of the results. I circled the problem space in blue. Ignore Soulja Boy's face.
Basically I just want this centered correctly so that the YouTube image is in the middle of the page. The space created by using width:100% prevents that, but I want to use this or a similar property so that the table will always fit inside the window.
I think you're just seeing the fact that the images are aligned to the left. Try text-align:center;, like this:
.table {
display:table;
margin-right:auto;
margin-left:auto;
width:100%;
}
.tablecell {
display:table-cell;
text-align:center;
}
jsFiddle: http://jsfiddle.net/q73LK/
As a side note, there is no need to use classes for the cells. You can do this instead:
.table {
display:table;
margin-right:auto;
margin-left:auto;
width:100%;
}
.table div {
display:table-cell;
text-align:center;
}
As a second side note, you are missing "alt" attribute on your images. For valid HTML, you need to include the "alt" attribute. Like this:
<div class="table">
<div class="tablecell"><image alt="fb" src="fb.png"/></div>
<div class="tablecell"><image alt="twitter" src="twitter.png"/></div>
<div class="tablecell"><image alt="youtube" src="youtube.png"/></div>
<div class="tablecell"><image alt="apple" src="apple.png"/></div>
<div class="tablecell"><image alt="email" src="email.png"/></div>
</div>
The divs are spaced correctly, but the images inside it are not.
Check here: http://jsfiddle.net/CzaK5/
Just add text-align:center; to the .tablecell.
Edit: Ryan Henderson beat me to it.
Ok so I'm trying to align an image(which is contained in a div) and some text(also contained in a div) on the same line, without setting width for the text, how can i do it? This is what I have so far.
<div id="container">
<div id="image" style="float:left;">
<img src="tree.png" align="left"/>
</div>
<div id="texts" style="float:left;">
A very long text(about 300 words)
</div>
</div>
When the text is short, the image and text can be fit into the same line, but my text is pretty long, and it automatically jumps on another line below the image.
Basically, now it's this: http://puu.sh/MPw2
I want to make this: http://puu.sh/MPvr
I'm been trying to solve this problem for like 3 hours I'm so noob please help? :S
Floating will result in wrapping if space is not available.
You can use display:inline and white-space:nowrap to achieve this. Fiddle
<div id="container" style="white-space:nowrap">
<div id="image" style="display:inline;">
<img src="tree.png"/>
</div>
<div id="texts" style="display:inline; white-space:nowrap;">
A very long text(about 300 words)
</div>
</div>
Try
<img src="assets/img/logo.png" align="left" />
Text Goes here
Simple HTML Attribute:
align="left"
Other values for attribute:
bottom
left
middle
right
top
I know this question is over 6 years old, but still, I would like to share my method using tables and this won't require any CSS.
<table><tr><td><img src="loading.gif"></td><td> Loading...</td></tr></table>
Cheers!
Happy Coding
To get the desired effect, you should place the image tag inside the same div as your text. Then set the float: left attribute on the image. Hope this helps!
I was working on a different project when I saw this question, this is the solution I used and it seems to work.
#[image id] , p {
vertical-align: middle;
display: inline-block;
}
if it doesn't, just try :
float:right;
float:left;
or
display: inline instead of inline-block
This worked for me, hope this helped!
Method1:
Inline elements do not use any width or height you specify.
To avoid two div and use like this:
<div id="container">
<img src="tree.png" align="left"/>
<h1> A very long text(about 300 words) </h1>
</div>
<style>
img {
display: inline;
width: 100px;
height: 100px;
}
h1 {
display: inline;
}
</style>
Method2:
Change your CSS as follows
.container div {
display: inline-block;
}
Method3:
It is the simple method set width
Try the following css:
.container div {
overflow:hidden;
position:relative;
width:90%;
margin-bottom:20px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
}
.image {
width:70%;
display: inline-block;
float: left;
}
.texts {
height: auto;
width: 30%;
display: inline;
}
Try
<p>Click on <img src="/storage/help/button2.1.png" width="auto"
height="28"align="middle"/> button will show a page as bellow</p>
It works for me
From another answer :
<table>
<tr style="background-color:white">
<th><b>To solve your doubts </b></th>
<th><img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png" style="width:150px" style="display:inline-block; "/></th><th style="float:right"></th>
<th><b> has the requisite clout.</b></th>
</tr>
</table>
Demo:
:D A little cheesy but, I thought, why not.
I built on the last answer and used display:table for an outer div, and display:table-cell for inner divs.
This was the only thing that worked for me using CSS.
Just set the img css to be display:inline or display:inline-block
U wrote an unnecessary div, just leave it like this
<div id="texts" style="white-space:nowrap;">
<img src="tree.png" align="left"/>
A very long text(about 300 words)
</div>
What u are looking for is white-space:nowrap; this code will do the trick.
<div id="container" style="display: flex;">
<div id="image" style="float:left; margin-top: 10px">
<img src="tree.png" align="left"/>
</div>
<div id="texts" style="float:left;">
A very long text(about 300 words)
</div>
use display flex and give margin-top(10 is approximate), please remove the float and give width to both div.