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">
Related
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;}
Here is the situation. I want to edit the HTML in my forum but there is no CSS support. I have included what I have, barring I didn't screw it up. What I want to do is put the three elements after the opening text side by side, in line. Next I want to do the same with the last to elements, the hit counters. My working knowledge is limited and I have tinkered to the last of my patience. I am a amateur, self taught, noob, whatever you want to call it so forgive my lack of knowledge.
<p>Click on the Iowa state icon to view members in your area of the state. To be placed on the map with what you are interested in finding click on the "Pop Smoke" icon and post your state, county and interest on the "local Patriots" group page. In order to view the Iowa Constitution click the Constitution icon.</p>
<p><img class="align-center" src="http://i68.tinypic.com/331lr0i.jpg" alt="" width="150"/></p>
<p><strong><strong><img class="align-center" src="http://i63.tinypic.com/e5qw7l.png" alt="" width="125"/></strong></strong></p>
<p><img class="align-center" src="http://i68.tinypic.com/znrh28.jpg" alt="" width="200" border="0"/></p>
<p><img alt="" src="http://api.ning.com:80/files/nkvdZEQNy6zCn2jimzPD4qqESNX8HVjut48i5dAhMIf3v26qIZPzpAG6BqDSJKGk2ZV*G7wvlRG2*j3zCkGfOUKCqKyc83y1/alumbar.gif" width="540"/></p>
<p><a rel="nofollow" href="http://www.reliablecounter.com" target="_blank"><img src="http://www.reliablecounter.com/count.php?page=modernmilitiamovement.com/group/iowa-state-group&digit=style/plain/6/&reloads=1" alt="" title="" border="0"/></a><br/><a rel="nofollow" href="http://www.reliablecounter.com" target="_blank" style="font-family: Geneva, Arial; font-size: 9px; color: #330010; text-decoration: none;">Unique visits</a></p>
<img src="http://www.reliablecounter.com/count.php?page=modernmilitiamovement.com/group/iowa-state-group3&digit=style/plain/6/&reloads=0" alt="" title="" border="0"/></a><br/> <a rel="nofollow" href="http://www.curinglight.com" target="_blank" style="font-family: Geneva, Arial; font-size: 9px; color: #330010; text-decoration: none;">All visits</a></p>
You're using inline style ("style=...") already. Paragraph elements display "block" by default, which means they will each start a new line and span the the entire width available to them.
I'd suggest wrapping each set of tags you want vertically aligned together in a div and either change the display styling of your paragraphs or remove some of them.
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;
}
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.
I have a grid of images with space between them. How do I remove this space?
I have already tried setting the padding and margin of the images to 0px but it has not worked.
Any ideas?
Make sure you don't have any spaces in your html markup. So change:
<img src="" alt="" /> <img src="" alt="" />
to
<img src="" alt="" /><img src="" alt="" />
Sometimes spaces can hide at the end of new lines too, so be sure to check the end of lines if your html looks like
<img src="" alt="" />
<img src="" alt="" />
Edit
Instead of writing: <img src="imgs/img8.jpg" style="margin: 0; width: 300; height: 300;" /> 87 times, just put this in your css file:
div img { margin: 0;
width: 300px;
height: 300px;
}
and then you can simply make your images <img src="imgs/img8.jpg" alt="img8" />
add font-size:0px to the div, then you can continue keeping the img elements on separate code lines
If you use float: left on the images, and separate each row with a breaker with a clear: both then there should be no spaces between the images.
The parameters you need to zero are padding, border and margin. On the images themselves and any container in between.
Try putting two images on the same line like:
<img src="imgs/img0.jpg" style="margin: 0; width: 300; height: 300;" /><img src="imgs/img1.jpg" style="margin: 0; width: 300; height: 300;" />
and see if that changes anything. I also suggest you follow the advice about using CSS to simplify all of the image styles. Because right now, you'd have to manually change every value by hand if you wanted to change the image sizes.
Unfortunately, HTML has some silly white-space problems sometimes.