I think I am having an issue with my floats, they are not aligning correctly and I feel like it has to do with the way I have my boxes setup. I have tried changing the alignment with margin-left and right but am not getting the desired look, I would like all of it to lineup. Here is the html and css.
HTML
<div id="service1">
<center>
<h1>Savings <br />Strategies</h1>
<img src="images/eg1.png" class="alignleft" height="150" width="200" alt="" />
</center>
</div>
<div id="service2">
<center>
<h1>Vendor <br />Management</h1>
<img src="images/eg2.png" class="alignleft" height="150" width="200" alt="" />
</center>
</div>
<div id="service3">
<center>
<h1>Environmental<br /> Stewardship</h1>
<img src="images/eg3.png" class="alignleft" height="150" width="200" alt="" />
</center>
</div>
CSS
#service1 {
float:left;
width:360px;
height:280px;
padding:15px;
}
#service2 {
margin-left:auto;
margin-right:auto;
width:360px;
height:280px;
padding:15px;
}
#service3 {
float:right;
width:360px;
height:280px;
padding 15px;
}
Thanks in Advance!
Why not try displaying each div as an inline-block. Remove all the floats and margins as well.
div { display: inline-block; }
You could set display to inline and remove all the margins:
http://jsfiddle.net/ABVJd/2/
Result: http://jsfiddle.net/ABVJd/2/embedded/result
Either that,, or you could remove all margins and floats and add inline-block, as suggested:
http://jsfiddle.net/ABVJd/3/
Result:http://jsfiddle.net/ABVJd/3/
Related
I have an a tag with these content:
<a height="0">
<img style="width:100px; height:100px; display:inline;" src="..." >
<div style="width:100px; height:100px; display:inline;" src="..." >
Hello
</div>
</a>
I want: the div contents shows from top of a but it shows from middle
I set a's height to 0 because of my projects not for this issue;
I test css top margin padding valign ... but no one make it true
there is a lot of ways of implementing it, here is my solution. It's just simply floating elements. Works fine.
img {
width:100px;
height:100px;
float:left;
}
div {
width:100px;
height:100px;
float: left;
}
<a height="0">
<img src="..." >
<div src="..." >
Hello
</div>
</a>
Give your div element a vertical-align of top:
div {
vertical-align: top;
}
<a height="0">
<img style="width:100px; height:100px; display:inline;" src="http://placehold.it/100x100" >
<div style="width:100px; height:100px; display:inline;" src="..." >
Hello
</div>
</a>
Give float:left for your div
sample http://jsfiddle.net/uLqa2ky5/
HTML/CSS newbie question for you.
I've been stuck on this for awhile. I'm looking to center my image gallery AND also make the padding between the images tighter. I'm thinking I need a container but, I've just been screwing it all up when I try. Any help would be great!
<div id="container" align="center">
<div class="img">
<a href="#">
<img src="#" alt="PIcture1" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
<div class="img">
<a href="#">
<img src="Images/9700_1915630577543_1314909545_n.jpg" alt="oldman" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
<div class="img">
<a href="#">
<img src="#" alt="Picture3" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
<div class="img">
<a href="#">
<img src="#" alt="Picture4" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
</div>
CSS:
#container{
}
div.img
{
margin:5px;
padding: 5px;
border:none;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:5px;
border:none;
}
div.img a:hover img
{
border:none;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:5px;
}
It depends on how you want to centre your gallery.
There's a few things that you need to bear in mind. In order to centralise some HTML you need to have a set width of the centralising element.
Here's some code for you to work with:
Create a "centre" class in CSS as follows:
div.centre{
margin:0px auto;
width:800px;
}
Then add it to your container as follows:
<div id="container" class="centre">
The secret to centralisation is in the margin:0px auto;, this is convention of modern web development to centralise content.
Have a look at this code
p.s. don't use align="center" it is depreciated in later versions of HTML. Better to not get into the habit of using it and stick to using CSS classes to centralising things for you.
You should not use align. It is a deprecated property. To center something with a container you need to specify a fixed width and add margin auto.
Ex:
#container {
width:970px;
margin: 0 auto;
}
You can remove the padding on div.img
I want to align my three images horizontally instead of vertically what is the easiest way to achieve this? example
<div id="christmas_promotion_boxes">
<div id="christmas_promo_1">
<img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100">
</div>
<div id="christmas_promo_2">
<img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100">
</div>
<div id="christmas_promo_3">
<img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100">
</div>
</div>
#christmas_promotion_boxes {width:1000px; margin:0 auto 0 auto; text-align:center;}
Display the divs as inline-block like so :
#christmas_promotion_boxes div {
display: inline-block;
}
Fiddle
You need the div's containing the images to be floated.
Add this section of code into your css:
#christmas_promotion_boxes > *{
float:left;
}
http://jsfiddle.net/tDfCR/5/
When I have inline elements I always put them in a ul and display the li's inline. This way you don't have to worry about floating anything and it is much more scalable.
<ul>
<li id="christmas_promo_1"><img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"></li>
<li id="christmas_promo_2"><img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"></li>
<li id="christmas_promo_3><img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"></li>
</ul>
ul{
width:5em
}
li{
display:inline;
list-style-type:none;
}
Slightly different from #zazvorniki accepted answer:
<div class="christmas_promotion_boxes">
<img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"/>
<img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"/>
<img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"/>
</div>
.christmas_promotion_boxes {
width: 1000px;
margin: 0 auto 0 auto;
display: inline-block;
}
http://jsfiddle.net/tDfCR/114/
Make sure the width is larger the sum all of width of all the images.
add this
#christmas_promotion_boxes div{
float: left;
}
I am trying to have some images inside a div. Only one image should be shown. I use:
<div id="slideshow" style="width:600px;height:400px;position:absolute;overflow:hidden;"></div>
<img src="img3.png" width="600px" height="400px" id="img3" style="position:absolute;left:0px;">
<img src="img2.png" width="600px" height="400px" id="img2" style="position:absolute;left:600px;">
<img src="img1.png" width="600px" height="400px" id="img1" style="position:absolute;left:1200px;">
</div>
But the images overflow from the div and are visible. How do I fix this?
Let's start by fixing your markup...
<style>
#slideshow{
width:600px;
height:400px;
position:absolute;
overflow:hidden;
}
#slideshow img{
width:600px;
height:400px;
float:left;
}
</style>
<div id="slideshow">
<img src="img3.png" id="img3">
<img src="img2.png" id="img2">
<img src="img1.png" id="img1">
</div>
So the reason why is because you defined position:absolute in both the parent and the children. You could have wrapped the image tags in a relatively positioned div. That would reset the absolute position to the top left of the relative positioned parent.
However, in this case, all you needed to do was float left. There was no reason to have absolute positioned children in the slideshow element.
I have this navigation and its not showing up in the position I want it to.
http://jamessuske.com/thornwood2/
I would like to have it next to the logo on the right side, for some reason it shows up on the right at the very top. (kinda hard to describe, but im sure once u see it, u will know what I am talking about)
HTML CODE
<div class="header">
<div class="logo">
<img src="images/logo.jpg" width="350" height="120" border="0" />
</div><!--logo-->
<div class="nav">
Home | About Us | Gallery | Contact Us
</div><!--nav-->
</div><!--header-->
CSS CODE
.header{
width:1009px;
}
.logo{
float:left;
width:350px;
}
.nav{
float:right;
width:260px;
color:#FFF;
}
Also while I am here in IE 7 there is a gap between the topConent and the contentArea, also between the contentArea and bottomContent
http://jamessuske.com/thornwood2/
HTML CODE
<div class="topContent">
<img src="images/top.gif" width="1009" height="37" border="0" />
</div><!--topContent-->
<div class="leftContent">
<img src="images/leftSide.gif" width="48" height="494" border="0" />
</div><!--leftContent-->
<div class="contentArea">
</div><!--contentArea-->
<div class="rightContent">
<img src="images/rightSide.gif" width="49" height="494" border="0" />
</div><!--rightContent-->
<div class="bottomContent">
<img src="images/bottom.gif" width="1009" height="39" border="0" />
</div><!--bottomContent-->
Any help with either issue would be greatly appreciated.
Thanks
.nav { float:left; }
if you want it next to the picture. If you want it on the right but further down - just crop your picture. It has some whitespace up the top, or add margin-top:20px or so.
IE7 bug
As of the bug you need to remove padding and margin from each picture and div so do something like this for each div.
.top-content
{
padding:0px;margin:0px;
}
.top-content img
{
padding:0px;margin:0px;
}