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;
}
Related
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>
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.
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
What I like to do is to use a DIV's vs. Table.
I like to show an image and to the right of that image show text. The text should be aligned to the top edge of the image. There should be some spacing between the text the image.
I have the following code but seems like the image comes and then the text comes below it:
<div style="float:left">
<img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
</div>
<div style="clear:left"></div>
<div style="float:left">
%#Eval("title")
</div>
<div style="clear:left"></div>
You could use a float/overflow trick:
<div class="imgCont">
<img src="../../images/img1.png" alt="Description" width="32" height="32">
</div>
<div class="text">
%#Eval("title")
</div>
I used classes instead of inline styling:
.imgCont{float:left; margin-right:10px;}
.text{overflow:hidden;}
JSFiddle
You just need to remove the first
<div style="clear:left"></div>
HTML :
<div id="wrapper">
<img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
<div>image</div>
</div>
CSS :
#wrapper img, #wrapper div { float: left; }
#wrapper div { margin-left: 100px; } /* the size of your img + the space wanted */
I don't understand why you have this 2 divs:
<div style="clear:left"></div>
They just prevent your text div and your image div to be on the same row. Css property "clear" make your container to NEVER have another container floating, here on his left.
<div style="float:left">
<img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
</div>
<div style="float:left">
%#Eval("title")
</div>
It would be enough
Here is the answer!
Obviously use div. Here is a simple example!
You can first create a parent div then inside that parent div, you can create 2 divs like
<div>
<div class="float-left"><img src="~/link_to_file.png" alt="photo" /></div>
<div class="float-right">The text that would flow at the right side..</div>
</div>
Here is the CSS for that.
You will be displaying them inline! I mean one div on left other on right!
You will be displaying the text on the top corner! Which means no margin-top for the text div.
Here is the CSS code:
.float-left {
float: left;
}
.float-right {
float: right;
}
.float-left, .float-right {
display: inline; // use inline-block if you want to add padding or margins..
}
This way, the div with the image will align to the left and the other div will be placed to the right side! And they both will be in a line. As you want them to be.
Good luck, cheers! :)