The following is the code for index.html
figure,
figcaption {
display: block;
}
figcaption {
color: black;
}
#profile_photo {
padding: 10px 20px;
width: 100%;
overflow: hidden;
}
#profile_photo figure {
padding: 6px 8px 10px 8px;
float: left;
position: relative;
width: 200px;
}
<div id="profile_photo">
<figure>
<img src="http://www.placehold.it/200X350" alt="Profile Photo" height="350px" />
<figcaption>Welcome</figcaption>
</figure>
</div>
The padding for the image is not being displayed. What am I doing wrong?
If it helps, I'm trying to complete Step 2 of the following tutorial
It's being displayed as others have commented, you just have no background color in order to see it. If you use inspection tools you'll see the padding is there.
#profile_photo figure{
padding: 6px 8px 10px 8px;
float: left;
position: relative;
width: 200px;
background: red;
}
Working example
the padding is actually showing
but if you want to give some space between the image and the space between image and text try assigning the padding to the tag
img{ padding: 6px 8px 10px 8px; }
Try putting
#profile_photo img instead of #profile_photo figure since the HTML might not render <figure> tag
Related
I have a div wrapped in a link tag, and when you tab to it in Chrome, it looks like this:
I know it's a minor grievance, but is there any way to get rid of the "outcropping" at the top, which I assume is Chrome outlining the link portion of the HTML. But I would like to keep the default Chrome blue outline around the image portion.
Here is a simplified test case:
HTML:
<html>
<body>
<a href='tree.com'>
<div class='card'>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_- _geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg'/>
</div>
</a>
</body>
</html>
CSS:
.card
{
display: inline-block;
border-radius: 5px;
width: 250px;
margin: 5px;
vertical-align: top;
text-align: left;
}
.card img
{
width: 250px;
height: 250px;
}
JSFiddle:
http://jsfiddle.net/mLfkvuyw/26/
Adding the following removes the default Chrome outline from the image (and all child elements) as well, which I don't want:
a:focus
{ outline: none; }
You can do some easy CSS, applying no outline to the parental a tag and instead adding it around the image.
.card {
display: inline-block;
border-radius: 5px;
width: 250px;
margin: 5px;
vertical-align: top;
text-align: left;
}
.nolink:focus {
outline: 0 none !important;
}
.nolink:focus .card img {
border: 2px solid blue;
box-shadow: 1px 1px 1px 0 #888;
}
.card img
{
width: 250px;
height: 250px;
}
<html>
<body>
<a class='nolink' href='tree.com'><div class='card' ><img src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg'/></div></a>
</body>
</html>
The "outcropping" is caused by the .card element's margin creating space between the link and the image elements. Margins can often cause strange layout problems in this way.
A simple fix is to remove the margin property from .card so that the focus outline will be flush with the image:
.card {
display: inline-block;
border-radius: 5px;
width: 250px;
margin: 5px;
vertical-align: top;
text-align: left;
}
I've been looking for solutions everywhere but I can't understand how to separate the text from the iframe. Everything I tried did not work (for example, this answer).
This is a screenshot to have an idea:
this is the HTML (I used it very rarely in my life and never worked with containers before, so I'm sure the error is clearly visible to someone more skilled than me):
<div class="container">
<iframe src="link" width="500px" height="500px" align="left" style="border: 1px solid #ccc" frameborder=0></iframe>
<article>
<font face="calibri" size="30" style="background-color: powderblue;">title</font>
<h4></h4>
<font face="verdana">text</font>
</article>
</div>
This is the CSS (I was testing margin-left: 10px but 10 or 1000px won't change anything):
article {
margin-left: 10px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
body {
max-width: 100%;
}
div.container {
width: 100%;
border: 1px solid gray;
}
iframe {
float: left;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 20px;
}
I think you could solve it by setting position: relative; to your article tag. This way, you could then specify the position offset that you want it to have using the left property instead of using the margin-left property.
I mean:
article {
position: relative;
left: 10px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
body {
max-width: 100%;
}
div.container {
width: 100%;
border: 1px solid gray;
}
iframe {
float: left;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 20px;
}
If this is not exactly what you wanted, I also think that the position property, together with the left, right, top and bottom properties, seem quite suitable for your problem, so I suggest you should take a look of them.
HTML5 does not support those for iframe style, there is no way to set them through style sheet.
I have two inline elements within a div. One element is floated to the left and the other to the right. I have used absolute positioning to place the block containing inline elements at the bottom of a DIV.
Problem: The element floating to the right skews out of its container. How can I fix this so that it stays within its container? Here is the CodePen.
HTML
<div class="posts__post">
<article>
<a class="posts__post--preview" href=""><img src="http://lorempixel.com/470/310/food" /></a>
<a class="posts__post--title" href=""><h1>Bryce Canyon A Stunning U.S Travel Destination</h1></a>
<div class="posts__post--meta">
<a class="posts__post__timestamp"><i class="fa fa-clock-o" aria-hidden="true"></i>10 days ago</a>
<a class="posts__post__tag">Motivation</a> <!-- element floating out --->
</div>
</article>
</div>
SCSS
.posts__post{
height: 400px;
width: 310px;
margin: 40px auto;
//margin-bottom: 40px;
position: relative;
text-align: left;
background-color: white;
border-radius: 5px 5px 5px 5px;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);
.posts__post--preview img{
width: 100%;
height: auto;
border-radius: 5px 5px 0px 0px;
}
.posts__post--tag{
font-size: em(15);
font-weight: bold;
color: $light-grey;
}
.posts__post--meta{
color: $light-grey;
position: absolute;
bottom: 25px;
left: 0;
display: block;
}
.posts__post--title, .posts__post--tag, .posts__post--meta{
margin: 0 25px;
display: inline-block;
text-docoration: none;
}
.posts__post__timestamp{
float:left;
}
.posts__post__tag{
float:right;
}
}
This is because of margin that you have given to posts__post--meta, instead of using margin use padding, and box-sizing:border-box
.posts__post--meta{
padding: 0 25px;
display: inline-block;
text-docoration: none;
width: 100%;
box-sizing: border-box;
}
For more info about box-sizing
.posts__post--meta{
color: $light-grey;
position: absolute;
bottom: 25px;
left: 0;
right:0; //add this
display: block;
}
Just to add a note I have noticed while I'm working on a php application. Using float within a <div> is overridding the whole div. to clarify my point. if you have <div class="page-wrapper"> and within it you have <div id="img-align"> and it has a float, it override the "page-wrapper" and stand alone. don't use it unless you really need it. Thanks
I'm having some problems with anchor and image tags. My image tags are sitting inside (what is essentially) a div tag each, the div tags have constant height and width values. The image tags are given a constant height value, so their width can be calculated based on their aspect ratio and the images do not become distorted when they're resized to fit inside the div.
I want to have an anchor tag surrounding each image for two reasons. (1.) So the images can act as links, but also (2.) so that when the user hovers over the image, I can display an overlay on top of the image.
Putting the image tag inside an anchor tag solves the problem of the link, but as for the second problem, I'm stumped. I need the anchor tag to dynamically size and position itself over its respective image tag. Ideally I'd like to avoid using JavaScript to solve the problem and just stick to CSS (if possible). I have no objection to adding a little extra markup if needs be.
Relevant HTML:
<listitem>
<img src="../images/image1.jpg"/>
</listitem>
<!--More listitems with different sized images go here-->
And the CSS:
#pictureListContainer listitem {
position: relative;
background-color: rgba(0,0,0,0.5);
display: block;
height: 257px;
width: 636px;
}
#pictureListContainer listitem img {
position: relative;
float: right;
height: 203px !important;
vertical-align: middle;
margin: 21px 296px 21px auto;
border: 6px solid white;
border-radius: 6px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
}
Thanks in advance.
Update: I should maybe make it clear that I would like the overlay to have the same dimensions as the image, so that it only overlays the image.
It can be done using only CSS and HTML: JSFiddle
HTML
<div class="listitem">
<a href="#">
<img src="http://sublantic.net/forge/demos/img/code_canyon/scale.png" alt="image" />
<span class="overlay-text">Test</span>
</a>
</div>
CSS
.listitem {
position: relative;
background-color: rgba(0,0,0,0.5);
display: block;
height: 257px;
width: 636px;
overflow: hidden;
}
.listitem img {
position: relative;
float: right;
height: 203px !important;
vertical-align: middle;
margin: 21px 296px 21px auto;
border: 6px solid white;
border-radius: 6px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
position: relative;
}
.listitem a span {
display: none;
position: absolute;
bottom: 10px;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
padding: 10px;
color: #FFF;
}
.listitem a:hover span {
display: block;
}
Edit: Overlay fits to image
JSFiddle
CSS
.listitem {
position: relative;
background-color: rgba(0,0,0,0.5);
display: block;
height: 257px;
width: 636px;
}
.listitem img {
border: 6px solid white;
border-radius: 6px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
}
.listitem a {
position: relative;
overflow: hidden;
display: inline-block;
}
.listitem a span {
display: none;
position: absolute;
bottom: 10px;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
padding: 10px;
color: #FFF;
}
.listitem a:hover span {
display: block;
}
You can use an onClick for the image
<img src="" onClick="" />
This will eliminate the botheration of generating functionality like overlay, etc for a tag and you can get both effects work simultaneously well.
Hope this helps.
Here in the image Title "Accounts and Holding Disclosure in crossing the white line while DRF is way above the white line...
How can i put the text just above the line using css.
Html code is
<div class="tabs">
<img src="images/disclosure.png" />
Accounts and Holdings Disclosure</div>
<div class="tabs">
<img src="images/drf.png" />
DRF</div>
Css is
.tabs
{
height: 85px;
border-bottom: 1px solid #fff;
text-align: center;
color: #fff;
padding-bottom:7px;
}
.tabs img
{
display: block;
margin-left: auto;
margin-right: auto;
height: 70px;
margin-top: 5px;
}
you should write:
.tabs {
height: auto;
}
There is simply not enough splace in the first block to apply the padding. The .tabs is 85px height, the image is 70px height with a margin of 5px top. So the remaining vertical space for your text is 10px only, and you add 7px of padding.
You need to reduce the size of the image in my opinion.
should be :
.tabs {
height: 90px;
}