Set Anchor tag width - html

I have tried several answer here and have not been able to find what is going on.
I am making a wordpress site, I have some knowledge but I am not an expert and I havent had success in accomplishing what I am looking for.
Here is the deal, I am trying to place social icons in the footer of a website (wordpress, with a theme). When I place the images, it looks like it is intended to do:
The left column shows the icons properly aligned
As soon as I start placing the Anchor Tags like this (only one of the icons has the anchor tags):
<div>
<a href="[full link to your Facebook page]">
<img title="Facebook" src="http://fundacionhonrarlavida.eu/wp-content/uploads/2016/01/1453371609_Facebook.png" alt="Facebook" width="35" height="35" />
</a>
<img title="Twitter" src="http://fundacionhonrarlavida.eu/wp-content/uploads/2016/01/1453371295_twitter_social_media_online.png" alt="Twitter" width="35" height="35" />
<img title="YouTube" src="http://fundacionhonrarlavida.eu/wp-content/uploads/2016/01/1453416978_youtube.png" alt="YouTube" width="35" height="35" />
<img title="LinkedIn" src="http://fundacionhonrarlavida.eu/wp-content/uploads/2016/01/1453417011_linkedIN.png" alt="LinkedIn" width="35" height="35" />
<img title="Mail" src="http://fundacionhonrarlavida.eu/wp-content/uploads/2016/01/1453417082_mail.png" alt="Mail" width="35" height="35" />
</div>
The one that has a link ocuppies the whole row and moves the others to the next one.
I tried inspecting the moved Icon and realized per this image, that is the anchor property thats taking the whole space, as the image is the right size:
Is the Anchor tag that is taking the whole space
Now I have tried so many things, in the a img a at ccs, i placed display in block, inline-block, and I always get the same results.
Jus as a test, I tried to use a plugin for social icons and the icons were also displaying vertically.
Here is the css regarding the img:
a img, a {
display: inline-block
border: none;
outline:none;
}
a {
outline:none;
text-decoration: none;
color:#525252;
}
I also, created a class .footer a, where I specified the size of the anchor, but it didnt help.
Can you please point me in the right direction?

try with using within "inline element":
style="position: absolute;"
or add a class in the CSS with following position:
position: absolute;

I would start with the following style rule:
.textwidget > div > a {
display: inline-block;
width: 35px;
height: 35px;
margin: 0;
padding: 0;
}

Related

Placing logo with links inline

I am trying to place two logos with links inline in HTML in a jupyter notebook but couldn't get it working proprly.
<a href="https://colab.research.google.com/github/sample_repo/sample_notebook.ipynb">
<img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"/, width=150, height=150/></a>
<a href="https://mybinder.org/v2/gh/https%3A%2F%2Fgithub%2Fsample_repo/main?filepath=sample_notebook.ipynb">
<img src="https://mybinder.org/badge_logo.svg" alt="Open In mybinder"/, width=150, height=150/></a>
What I have tried so far?
I tried to put the logo in a div and then tried to align it to left using css
I tried to place the logo with link in a list
None of them worked! The logos right now looks like this
What I am trying to achieve?
I want the logo to be inline separated by space placed from left to right
You can place them inside div with display: flex and disable flex-wrap.
Also do not set both width and height for your images, it can stretch them without keeping the original ration. Only define one property, see snippet.
.logo {
display: flex;
flex-wrap: none;
flex-gap: 1em;
}
/* space between links */
.logo > a {
margin-right: 6px;
}
/* scale your images like this */
img {
height: 40px;
}
<div class="logo">
<a href="https://colab.research.google.com/github/sample_repo/sample_notebook.ipynb">
<img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"></a>
<a href="https://mybinder.org/v2/gh/https%3A%2F%2Fgithub%2Fsample_repo/main?filepath=sample_notebook.ipynb">
<img src="https://mybinder.org/badge_logo.svg" alt="Open In mybinder" /></a>
</div>
For markdown application try to place Your code inside <p align="left">YOUR CODE</p> (see example below).
You can also choose left or right.
<p align="left">
<a href="https://colab.research.google.com/github/sample_repo/sample_notebook.ipynb">
<img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"/, width=150, height=150/></a>
<a href="https://mybinder.org/v2/gh/https%3A%2F%2Fgithub%2Fsample_repo/main?filepath=sample_notebook.ipynb">
<img src="https://mybinder.org/badge_logo.svg" alt="Open In mybinder"/, width=150, height=150/></a>
</p>

Remove vertical space between text and image

It's my first time learning HTML. I'd like to know how to remove the vertical space/gap between the text "De Mare" and the image below it such that the text is directly above the image without any space.
<h2 style="font-family:pristina;">De Maré</h2>
<img src="de mare/chandelier.jpg" width="35" height="35">
This should work:
<h2 style="font-family:pristina;margin:0;">De Maré</h2>
<img src="de mare/chandelier.jpg" width="35" height="35">
Or you could use CSS to get the job done:
span {
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
<span style="font-family:pristina;">De Maré</span><br>
<img src="de mare/chandelier.jpg" width="35" height="35">
And, although I kept it to match yours, make sure to exclude the space in your image URL to get the image to show (unless it's there for a reason).
In your code as you told that you can use two properties that are responsible for the space between the Text and the Images. Along with Width and Depth use the
hspace ="some numeric value" for Horizontal space
vspace ="some numeric value" for Vertical space
<h2 style="font-family:pristina;">De Maré</h2>
<img src="de mare/chandelier.jpg" vspace="20" width="35" height="35">

Top menu CSS - having alignment and linking issues

I am trying to make a top bar on this website above the menu that lists the contact information and the social media icons (I will take them out of the main menu nav) https://grownowsma.com/
The three issues I'm having:
1) I can't get the whole content of the secondary top bar to align right. I want them above the "Get in touch" area
- For this I've tried various CSS selectors using the align: right and align-contents: right; no success
2) I want the email and phone number to be vertically aligned to look better with the icons. I've tried various selectors with vertical-align: center. I read that VA only works inline, but this is inline so I'm stumped.
3) If you click on the Facebook icon it opens, but if you click on any of the other social icons they don't. I tried wrapping each social icon in a so maybe separating them would help, but for some reason no luck. Any ideas on changing the HTML to make the links work on all four social media icons?
<p style="text-align: right; font-family: 'Muli'; vertical-align: center;">
josh#grownowsma.com | <em><a
href="tel:(978)%20857-4349" target="_blank" rel="noopener">978-857-
4349 </a> | </em><span><a href="https://www.facebook.com/Grow-Now-Social-
Media-Agency-1275074409247860/" target="_blank" rel="noopener"><img
class="alignnone wp-image-520" src="https://grownowsma.com/wp-
content/uploads/2017/11/facebook.png" alt="" width="25" height="25" /> </a>
</span><span><a href="https://twitter.com/grownowsma" target="_blank"
rel="noopener"><img class="alignnone wp-image-519"
src="https://grownowsma.com/wp-content/uploads/2017/11/twitter.png" alt=""
width="25" height="25" /></a></span><span> <a
href="https://www.instagram.com/grownowsma/" target="_blank"
rel="noopener"> </a><a href="https://www.instagram.com/grownowsma/"
target="_blank" rel="noopener"><img class="alignnone wp-image-521"
src="https://grownowsma.com/wp-content/uploads/2017/11/instagram.png" alt=""
width="25" height="25" /> </a></span><span><a
href="https://www.linkedin.com/company/11331850/" target="_blank"
rel="noopener"><img class="alignnone wp-image-518"
src="https://grownowsma.com/wp-content/uploads/2017/11/linkedin.png" alt=""
width="25" height="25" /></a></span>
</p>
(FYI: This question is poorly written. I know it wouldn't be easy, but you really should have included a minimal example of what you're trying to do. It might have even helped you solve it on your own. Either way, after taking a quick look into it, I can't just not write what I found, so here's a quick answer.)
All three issues should be correctable with just two changes. Your horizontal alignment issue is because you have your nav set to col-lg-0 (on the immediate first child of .row-menu-inner). This isn't the correct value for a full-width nav. Change it to col-lg-12. Your other right-aligning rules will then work. To vertically align the social icons you can add vertical-align: middle to your img.alignnone rule.
You need to change this class col-lg-0 middle to col-lg-12 , or style it with css .row-menu-inner .col-lg-0.middle{ width: 100%; float: none;}

Div Spacing between Images

Dear Members of this amazing Forum
I recently started using Html again and for the love of God i can't figure out where the problem is.
I created 3 Div's, each with 1 image, 1 group of images, and 1 image again. (same problem if all are in the same div, with a rather basic Css)
.HeaderNav {
margin: 0;
padding: 0;
overflow: auto;
opacity: 1;
overflow-x: hidden;
overflow-y: hidden;
display: block;
}
And the Html to use it.
<div class="HeaderNav">
<img src="../Images/shang3_03.jpg" alt="" width="940" height="120" class="HeaderNav" />
</div>
<div class="HeaderNav">
<img src="../Images/shang3_05.jpg" alt="" width="240" height="55" />
<img src="../Images/shang3_06.jpg" alt="" width="66" height="55" />
<img src="../Images/shang3_07.jpg" alt="" width="84" height="55" />
<img src="../Images/shang3_08.jpg" alt="" width="72" height="55" />
<img src="../Images/shang3_09.jpg" alt="" width="74" height="55" />
<img src="../Images/shang3_10.jpg" alt="" width="107" height="55" />
<img src="../Images/shang3_11.jpg" alt="" width="62" height="55" />
<img src="../Images/shang3_12.jpg" alt="" width="70" height="55" />
<img src="../Images/shang3_13.jpg" alt="" width="165" height="55" />
</div>
<div class="HeaderNav">
<img src="../Images/shang3_14.jpg" alt="" width="940" height="133" />
<br/>
</div>
What results in the image below, sadly i don't get where the little space is from. Or why it's not on top too. Somehow i'm really confused where this issue is from and i'd realy appreciate the help.
[2]: http://i.imgur.com/SIkB7Hs.png <-- this one schould be a bit more clear sorry about that
edit: if found a rather face-> wall way to fix it with margin-top. And just making a div class for everyline. What's probably not the best way to go.
Ok, a few things here.
For one, with questions like this, it helps people answering a LOT if you post your code in a JSFiddle, like this here (though the images don't show there because they're relative URLs).
Also, it seems if you float the images to the left you can get rid of the spacing:
.HeaderNav img {
float: left;
}
Just to note, I have no idea why the spacing existed in the first place. Another tip: you should use 'Inspect Element' in Chrome or Firebug in Firefox to take a look at elements and see padding, margins, etc. Usually that makes it obvious where whitespace is coming from, though in this case I found nothing. Floating to the left was just an idea that seemed to work.
Probably because your <img> are still being declared as inline-level elements. Use:
.HeaderNav img {
display: block;
}
Also, you should check if a margin or padding have been assigned to the image element. If you do, reset them.
Also, make sure your padding and margin are 0 for the html and body...
so, try this:
body, html {
margin: 0;
padding: 0;
}
HTML cannot be used on it's own; it has to have CSS working with it continuously.
A bit confusing question, I don't understand it all. But check this jsFiddle. Is this what you mean?
Also remove the HeaderNav class from the first image.
<div class="HeaderNav">
<img src="../Images/shang3_03.jpg" alt="" width="940" height="120" />
</div>
The img element default display type like inline-block, because of the font-size, so the img element maybe have 3px space.
To solve this problem, you can use the code below:
.HeaderNav img {
display: block;
}
or
.HeaderNav img {
float: left;
}
They all will change the img elements display type, I recommend the first one.

Placing & Positioning images using CSS?

Edited this question entirely, not sure if it made sense previously.
Ok, I am having difficulty positioning some images on a website. I am using the slidedeck jQuery slideshow, and in the third slide I want a portfolio of work, so just to display 6 images (2 rows of 3).
In the index.html the slides are set up as follows;
<div id="slidedeck_frame" class="skin-voyager">
<dl class="slidedeck">
<dt>ABOUT US</dt>
<dd>About the company here</dd>
<dt>OUR SERVICES</dt>
<dd>Company services here</dd>
<dt>PORTFOLIO</dt>
<dd>Images of completed work here</dd>
<dt>Contact Us</dt>
<dd>Contact form here</dd>
</dl>
</div>
Each of these slides is formatted in the CSS sheet with the following tag;
.slidedeck dd.slide_1
In the third slide, I need to be able to simply show rows of images using the CSS to position them. I have tried a number of things but can't get it right. In the index.html I have tried;
<dt>PORTFOLIO</dt>
<dd><img src="images/myImage1.png" width="130" height="130" />
</dd>
But that obviously just display an image, with no ability to format it.
I have also tried;
<dt>PORTFOLIO</dt>
<dd>
<div>
<img id="image1" src="images/myImage1.png" width="130" height="130">
</div>
</dd>
and then using the following CSS to position;
img#image1 {
position: relative;
top: 20px;
left: 10px;
z-index: 5;
}
But the image just doesn't show up at all.
Any suggestions?
You are styling with dd.slide_1 but none of the <dd> elements have that class applied.
Edit
Given this html:
<dl class="slidedeck">
<dt>PORTFOLIO</dt>
<dd>
<img src="images/myImage1.png" width="130" height="130" />
<img src="images/myImage2.png" width="130" height="130" />
<img src="images/myImage3.png" width="130" height="130" />
<img src="images/myImage4.png" width="130" height="130" />
<img src="images/myImage5.png" width="130" height="130" />
<img src="images/myImage6.png" width="130" height="130" />
</dd>
You should be able to style your images like this
.slidedeck dd img {
/* add whatever styles you want */
}
If that isn't working try adding !important after your style values. If this works investigate what CSS (perhaps from jQuery plugins) is interfering with your styles. Try not to leave !important in if you can help it.
So for 2 rows of 3 images you would need this css
.slidedeck dd {
width: 390px; /* 3x your image width */
overflow: hidden; /* To contain floats */
}
.slidedeck dd img {
float: left;
display: block;
}