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.
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'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.
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.
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.
How can we have the text "Create New Position" be vertically centered?
HTML/CSS is below.
Adding margin-top:5px to the "Create new.." div helps but it seems hacky.
<div style="margin-top:5px">
<div style="float:left">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>
</div>
The following will work based on creating a line-height which is equivalent for both items.
HTML:
<div class="row">
<span class="left">Create new position</span>
<span class="right"><input type="button" value="Save" />
</div>
CSS:
/* REMOVE THIS PORTION FOR YOUR IMPLEMENTATION, IT IS EXAMPLE ONLY */
* { font-family: Tahoma, sans-serif; font-size: 12px; }
.row { border: 1px solid #ccc; }
/* END EXAMPLE ONLY PORTION */
.row { height: 24px; }
.row > span { line-height: 24px; }
.left { float: left; }
.right { float: right; }
The trick is to set the .row containing DIV to be 24px tall, and also set the contained SPAN elements to have a line-height of 24px. By doing this, you tell the browser how much vertical space to take up for the line of text.
Note, however, that 24px is not the important part - the important part is identifying how tall your button is, which is based on your CSS and your selected font for the button itself.
The reason the example I'm giving you works to vertically center in this case is based on the EXAMPLE ONLY CSS I put in at the top - which says the font-size should be 12px. The default browser sizing (at least in Chrome) is then going to provide a little extra margin and padding around the button, as well as a border - which results in a total height of roughly 24px, and this appearance:
The border is created by the example CSS also, and is only there to show you that the vertical alignment is correct. Once you remove .row { border: 1px solid #ccc; }, it will disappear.
Here is a JSBin which shows it working:
http://jsbin.com/otekil/1/edit
The below may help you.
<div align="center">
</div>
So it would look like this maybe:
<div align="center">
<div style="float:left">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>
Make the line-height of the interior div the same height as the height of the exterior div.
Example:
<div style="margin-top:5px; height: 100px;">
<div style="float:left; line-height: 100px;">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>
</div>
Slightly different approach but you don't need the floats, vertical-align should work fine in this instance IMO:
<div>
Create new position:
<input type="submit" id="x" value="Save" style="vertical-align:baseline;" />
</div>
This method should work in all browsers, is stable, and allows you to easily choose the object to which you want your content centered. The empty container is the only problem I have with this method, but I can easily overlook it when comparing the pros/cons of other methods.
Solution:
You use a div at half of the parent's height to push your content block (push_to_center class), then reduce it by half the content height (content class).
In-line style declaration
<div style="float:left; height:50%; margin-bottom:-55px;"></div>
<div style="clear:both; height:110px; position:relative; width:200px;">
<div style="float:left">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
</div>
Complete HTML page (see it working):
<html><head><title>Test Center Div</title>
<style>
.push_to_center {float:left; height:50%; margin-bottom:-55px;}
.content {clear:both; height:110px; position:relative;}
</style>
</head>
<body>
<div class="push_to_center"></div>
<div class="content" style="width:200px; height:110px;">
<div style="float:left;">Create new position</div>
<div style="float:right;"><input type="submit" id="x" value="Save"></div>
</div>
</body>
</html>
To exclude the Save button from centering simply move it out of the Content classed div (put it earlier in the page flow if you want it above, and below in the page if you want it at bottom):
I always used such trick:
style="height: 30px; line-height: 30px; vertical-alignment: middle;"
Having fixed height plus the same height as line height plus middle vertical alignment.
Maybe the above are better answers, I'm posting this because it's simple and worked for me. :)
Addressed this by adding margin-top:4px to the "Create Position" div. This was the only solution I could get to work!!
This will work.....
<table style="height:500px;width:100%">
<tr>
<td>
<div style="margin-top:px;vertical-alignment: middle;height: 30px; line-height: 30px;">
<div style="float:left;">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>
</div>
</td>
</tr>
</table>