http://www.kidsmartnyc.com/index.html
I tried a few things after I removed the image from the secondary pages but now I can't get the centering back.
With the power of CSS!
<img src="images/art.jpg" alt="" style="display: block; margin: 0 auto;">
Please create individual div for image give a style that text-align:center and width:100%;
<div class="main">
<div style="text-align:center; width:100%;">
<img alt="" src="images/art.jpg" style="margin: 0pt auto;"/>
</div>
---- /*someother Statements*/
----
----
</div>
Related
New to writing code and need help stacking images on top of one another.
I am trying to stack an image on top of another (that I wish to have as my background) with a right align.
<div class="container-fluid" id="special">
<section id="fourth">
<img src="website/img-services.jpg" alt="Greenteriors Moss Art" width="40%" height="40%" align="right" id="services">
<img src="website/bg-services.jpg" alt="Greenteriors Moss Art" size="cover" width="100%" height="100%" id="services-background">
</section>
</div>
I lack the CSS prowess to even attempt to write the code. What currently happens is the img-services stacks on top of bg-services with a right align. I need the first image stacked on top of the second.
Appreciate any help.
here's a jsfiddle for an identical project with more images: http://jsfiddle.net/kizu/4RPFa/4570/
jsfiddle is a great free tool to play around with code and see how changes work out
so you'd be using an inline-block helper and setting height to: 100% and vertical-align: middle on both elements.
<div class="container-fluid" id="special">
<section id="fourth">
<div class=frame>
<span class="helper"></span> <img src="website/img-services.jpg"
alt="Greenteriors Moss Art" width="40%" height="40%" align="right"
id="services">
</div>
<div class=frame>
<span class="helper"></span> <img src="website/img-services.jpg"
alt="Greenteriors Moss Art" width="40%" height="40%" align="right"
id="services">
</div>
</section>
</div>
i've added extra div's around your elements. now you just need to add this to the css file to tell it what to do with those new divs:
.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
white-space: nowrap; /* this is required unless you put the helper span closely near the img */
text-align: center; margin: 1em 0;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
you'll want to play around to make it look how you want. change the height and width. prob remove the border
#fourth { background-image: url('website/bg-services.jpg'); background-size: cover; }
<div class="container-fluid" id="special">
<section id="fourth">
<img src="website/img-services.jpg" alt="Greenteriors Moss Art" width="40%" height="40%" align="right" id="services">
</section>
</div>
I'm trying to center my image inside the div, but its seemingly glued to the right.
Here are my divs:
<div align="left" style="display:inline-block;">
<div style="width:210px;">
<img src="res/img/TopAd.png" style="top:-100px; padding:10 0 10 0;">
</div>
</div>
This is what it looks like:
How can I fix this?
img tags are inline by default so all you have to do is call text-align: center on its parent:
<div style="display:inline-block;">
<div style="width:210px;text-align: center;">
<img src="res/img/TopAd.png" style="padding:10px 0;">
</div>
</div>
A few other notes:
You can remove align="left", that's not supported in HTML5.
You can also remove top: -100px because the top, left, right, and bottom properties don't work unless an element is set to fixed, absolute or relative.
This line: padding: 10 0 10 0; is missing px added to it and can be condensed to padding: 10px 0; which is top and bottom.
UPDATE
if you want to just center all of this in the middle of the page you can add text-align: center to the body but I would suggest removing the first div and adding margin:auto to the second one which has a defined width:
<div style="width:210px;text-align: center; margin: auto;">
<img src="http://www.placecage.com/200/400" style="padding:10px 0;"/>
</div>
FIDDLE
<div align="left" style="display:inline-block;">
<div style="width:210px; vertical-align:middle; text-align:center">
<img src="res/img/TopAd.png" style="top:-100px; padding:10 0 10 0;">
</div>
</div>
The following code will do the task.
<div align="left" style="display:inline-block;">
<div style="width:210px;" align="center">
<img src="res/img/TopAd.png" style="top:-100px; padding:10 0 10 0;">
</div>
<div align="left"
The align attribute was deprecated in HTML4. Use style="text-align: left;" instead of align="left".
padding:10 0 10 0;
10 of what? You are missing the units. You probably want 10px for pixels:
padding:10px 0 10px 0;
I don't see any code in there that even looks like it's trying to center the image. Try text-align: center on the container that the image should be centered within.
<div style="display:inline-block;">
<div style="width:210px; text-align: center; border: 1px solid #ccc;">
<img src="http://placecage.com/160/160" style="padding: 10px 0 10px 0;" />
</div>
</div>
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 show this four images without any margin. How to do this?
Each A,B,C,D look like one image.
A
B
C
D
<div align="center">
<img src="a.png">
<br/>
<img src="b.png">
<br/>
<img src="c.png">
<br/>
<img src="d.png">
</div>
I tried css margin=0 and style padding =0 but it is not working.
Update---
<img id="ImgEmotion" src="a.png" width="40" border="0">
<img src="b.png" width="20" height="20" border="0">
If I use css, I know there are no margin.
If I use #no_margin, how can I apply to img tag? Also I need the 'id='ImgEmotion'.
CSS:
img
{
margin:0;
display:block
}
HTML:
<div align="center">
<img src="a.png">
<img src="b.png">
<img src="c.png">
<img src="d.png">
</div>
JSFIDDLE
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;
}