I found the way to make a link to align, if I do the break between img and the link.
<section id="home" style="background-image: url(https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);">
<h1>It's my super wooper page</h1>
<img class="profile-picture" src="assets/img/My_Picture.JPG" alt="picture of myself">
<br>
<a class="btn-cv" href="#">Download CV</a>
</section>
The question is WHY the link won't just align, as it is a text-element. And what is even more "weird", the margin won't work for the link, so it keeps sticking to the image. I know, I could give the image some margin-bottom, but I's really like to understand, what is happening in the backgrond.
If you want to align the link in the center. You should put text-align: center; on the parent element and not on the <a>. It's because the <a> is an inline element.
Can you please check the below code? Hope it will work for you. <a> is an inline element. if you are applying a margin to <a> tag then you need to give display:inline-block property to <a>
Please refer to this link: https://jsfiddle.net/yudizsolutions/pt68qczy/
.text-center {
text-align: center;
}
.btn-cv {
margin: 10px 0px;
display: inline-block;
}
<section id="home" style="background-image: url(https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);">
<h1>It's my super wooper page</h1>
<img class="profile-picture" src="assets/img/My_Picture.JPG" alt="picture of myself">
<br>
<div class="text-center">
<a class="btn-cv" href="#">Download CV</a>
</div>
</section>
Related
I'm trying to make this image a href, its like this because I couldn't figure out how to have the image align with the menu on the right. But now I'm trying to make the logo go to the front page, I have tried making the code <div class="wrapper"> <div href="index.html" class="picture1"></div> but that doesn't work. Any ideas how to fix this
div.picture1 {
width:153px;
height:60px;
background-image:url('Carlsberglogof.png');
<div class="wrapper">
<div class="picture1"></div>
enter image description here
You can replace your div with an anchor tag. I added the green colour so you can see it.
a {
display: block;
width: 153px;
height: 60px;
background-image:url('Carlsberglogof.png');
background-color: green;
}
<div class="wrapper">
</div>
You could use JavaScript, for example:
<div onClick="location.href='/index.html'"> ...
...or simply wrap the whole element in an <a> tag:
<div class="wrapper">
<a href="index.html">
<div class="picture1"></div>
</a>
</div>
Go down to the HTML part of the code snippet. The first box has a figure that wraps an a with an img tag. The second box has an a that wraps a figure with an img tag.
Which of the boxes is the most correct one?
Should figure wrap a or should a wrap figure?
* {
padding: 0;
margin: 0;
}
body,
html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.box {
border: 1px solid #ccc;
max-width: 200px;
margin: .5rem;
}
img {
vertical-align: top;
width: 100%;
}
.text {
padding: 2rem;
}
<!-- A inside figure -->
<div class="box">
<figure>
<a href="#">
<img src="http://placekitten.com/g/500/500">
</a>
</figure>
<div class="text">Text</div>
</div>
<!-- Figure inside a -->
<div class="box">
<a href="#">
<figure>
<img src="http://placekitten.com/g/500/500">
</figure>
</a>
<div class="text">Text</div>
</div>
I have checked and reviewed shared HTML. also, debugged/analyzed in firebug (Firefox add-ons) Box-Model. a properly wrapped to figure.
The second box is correct. a completely properly wrapped to figure.
<!-- Figure inside a -->
<div class="box">
<a href="#">
<figure>
<img src="http://placekitten.com/g/500/500">
</figure>
</a>
<div class="text">Text</div>
</div>
Thanks
I'd argue that both your variations are semantically correct, and they both validate within the HTML5 standards.
Both the <a> and <figure> tags are flow content, and permitted content inside the very same tags is also flow content according to MDN. So wrapping either one of them inside the other would make perfect sense.
If you want to link the figure contents including <img>, <figcaption> or any flow content, I'd wrap everything inside the <a> tag.
If you want to link just the <img> or any other specific element, I'd wrap everything inside the <figure> tag and then the anchor inside.
I'm not sure about accessibility concerns in this case, but I think it depends™ on the content.
I'm trying to create a logo picture next to my title on my website.
Problems:
Works with Span
Span is too small
Doesn't work with H1 - H6
Could anyone help me?
Here is my code.
.title img {
vertical-align:middle;
}
<div class="title">
<h1><b>Ex</b><i>Creations</i></h1>
<img src="http://placehold.it/100x100" alt="ExCreations logo." width="100px" height="100px">
</div>
<div class="wrapper">
<div class="nav">
<b>Ex</b><i>Creations</i>
<i>Current Projects</i>
Site <b>Map</b>
<i>Have any questions?</i>
</div>
</div>
But it doesn't work. Although it does with span. Could anyone fix this but keep the h1?
h1 is a block-level element (therefore the img wraps into a "new line").
Instead place your <img> tag inside the <h1>
<div class="title">
<h1>
<b>Ex</b><i>Creations</i>
<img src="http://s8.postimg.org/9znb8gixh/logo.png" alt="ExCreations logo." width="100px" height="100px">
</h1>
</div>
than you can use any vertical-align value for the Logo using
.title h1 img{
vertical-align: middle; /*https://developer.mozilla.org/en/docs/Web/CSS/vertical-align*/
}
SEO-wise it's also nice to have an image with alt "Logo" inside the primary H1
This is because h1 has 100% width, add the following CSS code:
.title h1 {
display: inline-block;
}
At the moment, what I have is seen in the first picture. I would like to know how can I add the spaces (bottom margin?) between the images as shown in picture 2? They 2 side-by-side blocks are 2 different DIVs, and the pictures in each line are elements of the same div, so bottom-margin doesn't work. (CODE AT THE BOTTOM)
Picture 1:
Picture 2:
HTML:
...
<div class="meniu">
NAUJIENOS
KREPSINIO VADOVAS
TRENIRUOTES
IDOMYBES
GALERIJA
APIE MUS
</div>
<div class="rightbar">
<div class="rightpic2">
<img src="pic3.png"> <br>
<img src="pic4.png"> <br>
<img src="pic4.png"> <br>
<img src="pic5.png"> <br>
<img src="pic3.png">
</div>
</div>
<div class="rightpic1">
<img src="pic1.jpg"> <br>
<img src="pic2.jpg">
</div>
...
CSS:
.rightpic1{
float:right;
margin-right:30px;
margin-top:100px;
}
.rightpic2{
margin-right:24px;
margin-left:24px;
margin-top:38px;
}
.rightbar{
float:right;
background-color:white;
margin-top:62px;
}
<a> elements display inline. Nix all the <br> in the markup and add display: block to the css.
.rightpic1 a, .rightpic2 a {
display: block;
margin-top: 15px
}
First of all, you need to close all your image tags. Then add display:block; to the links inside your .rightpick1 & .rightpick2 classes. Then, you can successfully add a margin-bottom to your links.
I attached a fiddle as an example. Hope that helps!
I'm creating the footer of my website using html and css.
I want to have the two facebook and twitter images in line with the text so that everything in the footer is in line with eachother
At the moment my footer code is
HTML -
<div class="footer content">
<img src="Images/facebook.png">
<img src="Images/twitter.png">
<p> Address line 1
Address line 2
Address line 3
</p>
</div> <!--end of footer-->
Can anyone help please?
<p> tags are block-level elements. Use an inline element such as <span>:
<div class="footer content">
<img src="Images/facebook.png" />
<img src="Images/twitter.png">
<span>
Address line 1
Address line 2
Address line 3
</span>
</div>
Alternatively, if you're able to use CSS, you can define both elements as inline-block:
.footer.content > img,
.footer.content > p {
display: inline-block;
}
Example 1 jsFiddle
Example 2 jsFiddle
EDIT: It might also be wise for semantics to use <address>, rather than <span>. For example:
<div class="footer content">
<img src="Images/facebook.png" />
<img src="Images/twitter.png">
<address>
Address line 1
Address line 2
Address line 3
</address>
</div>
Since <address> is also a block-level element, you'll need to include the correct CSS as follows:
.footer.content > img,
.footer.content > address {
display: inline-block;
}
Final jsFiddle example
.content img, .content p {
float:left
}
float: left/right - depending where you want it to be
The simplest way is to use <span> instead of <p>. <p> makes a new paragraph which is quit "independent".
Check out this working example here.
.channels li {
float: left;
margin-left: 0.625em;
}
If you want to use new tags specific for footer and address this is my example:
<footer id="footer">
<span><img src="Images/facebook.png" alt="some text" /></span>
<span> <img src="Images/twitter.png" alt="some text"/></span>
<span>
<address>
Address line 1
Address line 2
Address line 3
</address>
</span>
</footer>
#footer {display:inline;}
#footer address {display:inline }
The alt to images was added to help with disability and standards.
I find a lot of the time I need to adjust the position of the image to align with the text. You can do this by wrapping the text and image in a div with position relative and then assigning position absolute on the image. Then you ca add top and margin left to adjust the position relative to the text. https://jsfiddle.net/edhescqn/3/
HTML:
<div class="amazonLink">
<a href="#">
<div class="amazonLink__text">Buy Now on Amazon</div>
<img class="amazonLink__image"
src="http://cdn2.iconmonstr.com/wp-content/assets/preview/2016/240/iconmonstr-amazon-1.png" width="24px" height="24px">
</a>
</div>
CSS:
.amazonLink {
position: relative;
margin-top: 10px;
}
.amazonLink__text {
display: inline-block;
line-height: 40px;
}
.amazonLink__image {
display: inline-block;
position: absolute;
top: 8px;
margin-left: 5px;
}
Use display:inline-block css property for image ad text to display image and text in same line