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/
Related
I have my social media icons in the footer using html because nothing I tried with CSS gave me the results I wanted. Problem is that now I want the icons to be fixed to the bottom but doing it with CSS isn't working. Here's the code right now:
<div class="footer">
<center>
<a class="faceb" href="http://facebook.com/" title="Facebook" alt="faceb">
<img src="http://www.sheisbiddy.com/wp-content/uploads/2015/11/wfaceb.png" hspace="5" style="PADDING-BOTTOM: 20px" onmouseover="this.src='http://www.sheisbiddy.com/wp-content/uploads/2015/11/faceb.png'"onmouseout="this.src=' http://www.sheisbiddy.com/wp-content/uploads/2015/11/wfaceb.png'" border="0" alt="" />
</a>
</center>
</div>
And here's the CSS I tried that didn't work:
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
}
There's several issues with your original code. First you never close your <center> tag, but you should probably be using text-align:center; in your css instead as the center tag is depreciated.
Next you're using an ID selector instead of a class selector. So you have a couple options, you can either replace your CSS with:
.footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
}
Or you can replace your HTML with:
<div id="footer">
<center>
<a class="faceb" href="http://facebook.com/" title="Facebook" alt="faceb">
<img src="http://www.sheisbiddy.com/wp-content/uploads/2015/11/wfaceb.png" hspace="5" style="PADDING-BOTTOM: 20px" onmouseover="this.src='http://www.sheisbiddy.com/wp-content/uploads/2015/11/faceb.png'"onmouseout="this.src=' http://www.sheisbiddy.com/wp-content/uploads/2015/11/wfaceb.png'" border="0" alt="" />
</a>
</center>
</div>
But I'd highly recommend dropping those center tags and updating it like the following:
<div id="footer">
<a class="faceb" href="http://facebook.com/" title="Facebook" alt="faceb">
<img src="http://www.sheisbiddy.com/wp-content/uploads/2015/11/wfaceb.png" hspace="5" style="PADDING-BOTTOM: 20px" onmouseover="this.src='http://www.sheisbiddy.com/wp-content/uploads/2015/11/faceb.png'"onmouseout="this.src=' http://www.sheisbiddy.com/wp-content/uploads/2015/11/wfaceb.png'" border="0" alt="" />
</a>
</div>
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
text-align:center;
}
You are using id(#) selector use dot(.) instead as you are using class in your div.
.footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
}
I have some really basic HTML and CSS and for some reason the outline of the link is lower than the image itself, but they should line up because the image is inside the tag as below:
The code for this is:
<div id="social">
<img src="images/social/deviantart.png" alt="DeviantArt"/>
<img src="images/social/facebook.png" alt="Facebook"/>
<img src="images/social/flickr.png" alt="Flickr"/>
<img src="images/social/google+.png" alt="Google+"/>
<img src="images/social/linkedin.png" alt="LinkedIn"/>
<img src="images/social/tumblr.png" alt="Tumblr"/>
<img src="images/social/twitter.png" alt="Twitter"/>
<img src="images/social/youtube.png" alt="You Tube"/>
</div>
And the CSS:
#social {
float:left;
width:24px;
}
#social a {
padding:0px;
height:24px;
}
Has anyone got any idea why they are not in line and if so how to get them in line?
Try to add display:inline-block;
#social {
float:left;
width:24px;
display:inline-block;
}
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 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/
I have the following markup:
<div class="photo" style="float: left; margin: 2px;">
<a href="#">
<img src="images/image.jpg" alt="My Image" height="240" width="240" />
</a>
</div>
How can I create a layer on top of the image where I can write some text? The layer should have transparency, be aligned to bottom and having a size of 240x60?
Thanks!
Why not make the image a background?
<div class="photo" style="float:left; margin:2px">
<a href="#" style="background:url('images/image.jpg');
width:240px; height:240px; display:inline-block;">Your text here</a>
</div>
The display:inline-block allows you to apply width and height to an otherwise inline element, but here you might even want to just use display:block since it's the only child of the container.
EDIT: You can even put more containers in it, something like this:
<div class="photo" style="float:left; margin:2px">
<a href="#" style="background:url('images/image.jpg'); position:relative;
width:240px; height:240px; display:block;">
<span style="display:block;position:absolute;bottom:0;left:0;right:0;
background:white;background:rgba(255,255,255,0.25);">Your text here</span>
</a>
</div>
Text blocks over images. Website and demo as follows:
http://css-tricks.com/text-blocks-over-image/
I'll do it like with an image container like that :
Html
<div class="image-container">
<img src="path/to/image" />
<p class="caption">My text</p>
</div>
CSS
.image-container {
position:relative;
}
.caption {
width:100%;
background:rgba(0,0,0,0.5);
color:#ffffff;
position:absolute;
top:0;
}
See fiddle !
Markup
<div class="figure-container">
<img src="http://ipadwallsdepot.com/detail/solid-color_00015061.jpg" width="250" height="250" />
<span class="figure-label">FIG 1.1: Caption Text Here</span>
</div>
<div class="figure-container">
<img src="http://ipadwallsdepot.com/detail/solid-color_00015061.jpg" width="250" height="250" />
<span class="figure-label">FIG 1.2: Another Caption Here</span>
</div>
Stylesheet
.figure-container
{
position: relative;
display: inline-block;
}
.figure-label
{
position: absolute;
bottom: 10px;
right: 10px;
color: White
}
I created a JSFiddle here http://jsfiddle.net/AbBKx/ showing how to absolutely position a child element (label) relative to a parent container.