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
Related
I have some images in the footer, wrapped in tags. For some reason they are not working whatsoever... I am totally lost.
website is HERE
any help would be great (footer is on every single page on the site)
relevant html:
<div class="socialLinks">
<div class="footerTitle">Follow Us At</div>
<div class="iconsContainer">
<a href="https://www.facebook.com/NewWaveAcademyMMA/">
<img class="socialicon" src="../images/fb.svg">
</a>
<a href="https://twitter.com/NewWaveMMA?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">
<img class="socialicon" src="../images/twit.svg">
</a>
<a href="https://www.instagram.com/newwaveacademymma/">
<img class="socialicon" src="../images/insta.svg"></a>
</div>
</div>
Your .footercopyright div is overlapping the rest of your footer.
Since you're using floats to align the .affiliations and .sociallinks divs, you should wrap them in a clearfix. This will clear your floats and prevent your copyright div from expanding to fill the space.
<div class="footerbox">
<div class="clearfix">
<div class="affiliations"></div>
<div class="socialLinks"></div>
</div>
<div class="footercopyright"></div>
<div>
.clearfix:after {
content: "";
display: table;
clear: both;
}
The links on your webpage are working. You are unable to click on the links because you have placed a div over your links. Actually, you are clicking this div, not the links. This is the div (look it up in the browser console):
<div class="footercopyright">Copyright, All Rights Reserved NWA 2018</div>
You may resolve this by either removing this div, or by setting a higher z-index for the links container.
you can add clear in below class and work.
Also, noticed small dotted below links::
You use display:inline-block; on <a> to remove this
`.footercopyright {
position: relative;
color: #232528;
max-width: 100%;
font-size: 10pt;
text-align: center;
padding: 5px 0px;
clear: both;
}`
I need a little help preventing some text below and image from pushing the image up when it wraps. Please see the attached image to best understand what I'm talking about. The goal is to get all of the icons lined up horizontally and have "This Text Is" line up with "Some Text" and "More Text". "Longer" should be below everything else on its own line.
Each of the icons and text are wrapped in their own container divs like so:
<div class = "icon">
<a href = "#">
<img src = "icon.png" />
<h3>Some Text</h3>
</a>
</div>
Here's the CSS which I'm using to create fixed width columns:
.icon {
display: inline-block;
width: 150px;
}
It seems like the "display: inline-block" is causing the problem, but if I change it to "inline" the icon divs lose their fixed width. Using margin, padding, or positioning to move the icons that are being pushed up back down is not a valid solution because that would get messy. There are 10 icons total and the icon div width changes depending on the browser width (which makes the text wraps at different points depending on the browser width). I was hoping there was an easy CSS solution such as "vertical-align" (which didn't work).
Any help would be greatly appreciated.
You said vertical-align did not work.
This should align images that have an equal height to the top:
.icon {
vertical-align: top;
}
You could wrap it in a flex container
great write up on flex here
.icon {
display: inline-block;
width: 150px;
}
.container{display:flex}
<div class="container">
<div class = "icon">
<a href = "#">
<img src = "http://placehold.it/150x150" />
<h3>Some Text</h3>
</a>
</div>
<div class = "icon">
<a href = "#">
<img src = "http://placehold.it/150x150" />
<h3>more Text</h3>
</a>
</div>
<div class = "icon">
<a href = "#">
<img src = "http://placehold.it/150x150" />
<h3>Some Longer Text with 2 lines</h3>
</a>
</div>
</div>
You can float the icons left in the container, and cause the container to trigger a reflow to contain the icons.
.icon {
float: left;
display: block;
}
.container {
overflow: hidden;
}
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!
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! :)