The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Title with SVG icons not aligned
Mr_Wolowitz
post Jan 23 2023, 11:27 AM
Post #1





Group: Members
Posts: 4
Joined: 23-January 23
Member No.: 28,765



Hello, I can't align titles with svg icons, I paste the code. If you try the code, the titles are aligned to the bottom, but I want to align them with the center of the svg icons. Can you help me? Thank you.

CODE

<style>

#top_banner{
background-color: #e4e4e4;
font-family: 'Arial';
font-weight: normal;
font-size: 15px;
display: block;
text-align: right;
}
    
#top_banner h5{
    float: right;
    margin-right: 20px;
    color: #000;
}
    
#top_banner img{
margin-right: 5px;
margin-top: -5px;
}

#top_banner a {
color: #333333;
text-decoration: underline;
    }
#top_banner a:hover{
color: #333333;
text-decoration: none;
    }
</style>


<div id="top_banner">
    <h5><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="svg_icon"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>Feedback 100% positivi</h5>

    <h5><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z"/></svg><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M15.233 5.488c-.843-.038-1.097-.046-3.233-.046s-2.389.008-3.232.046c-2.17.099-3.181 1.127-3.279 3.279-.039.844-.048 1.097-.048 3.233s.009 2.389.047 3.233c.099 2.148 1.106 3.18 3.279 3.279.843.038 1.097.047 3.233.047 2.137 0 2.39-.008 3.233-.046 2.17-.099 3.18-1.129 3.279-3.279.038-.844.046-1.097.046-3.233s-.008-2.389-.046-3.232c-.099-2.153-1.111-3.182-3.279-3.281zm-3.233 10.62c-2.269 0-4.108-1.839-4.108-4.108 0-2.269 1.84-4.108 4.108-4.108s4.108 1.839 4.108 4.108c0 2.269-1.839 4.108-4.108 4.108zm4.271-7.418c-.53 0-.96-.43-.96-.96s.43-.96.96-.96.96.43.96.96-.43.96-.96.96zm-1.604 3.31c0 1.473-1.194 2.667-2.667 2.667s-2.667-1.194-2.667-2.667c0-1.473 1.194-2.667 2.667-2.667s2.667 1.194 2.667 2.667zm4.333-12h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm.952 15.298c-.132 2.909-1.751 4.521-4.653 4.654-.854.039-1.126.048-3.299.048s-2.444-.009-3.298-.048c-2.908-.133-4.52-1.748-4.654-4.654-.039-.853-.048-1.125-.048-3.298 0-2.172.009-2.445.048-3.298.134-2.908 1.748-4.521 4.654-4.653.854-.04 1.125-.049 3.298-.049s2.445.009 3.299.048c2.908.133 4.523 1.751 4.653 4.653.039.854.048 1.127.048 3.299 0 2.173-.009 2.445-.048 3.298z"/></svg>@account</h5>

</div>


This post has been edited by Mr_Wolowitz: Jan 23 2023, 11:28 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Jan 23 2023, 02:50 PM
Post #2


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



QUOTE(Mr_Wolowitz @ Jan 23 2023, 04:27 PM) *

I want to align them with the center of the svg icons.


Have you not tried this yet...

CODE

svg {
    margin-right: 5px;
    vertical-align: middle;
}



coothead

This post has been edited by coothead: Jan 23 2023, 03:07 PM
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason Knight
post Jan 24 2023, 03:11 AM
Post #3


Advanced Member
****

Group: Members
Posts: 100
Joined: 25-December 22
Member No.: 28,719



In general I would suggest avoiding placing SVG for icons in the markup in the first place. That's all presentation and as such doesn't belong there, and misses a caching opportunity. It's also not helpful that you have no text for those social icons, haven't written your anchors or the UL they should be in yet, are using SVG for things that a webfont would be more efficient at...

And then the real rub. If this is a "top banner" how the devil are you down to depth five? What are these headings the START of subsections of the page of? Where's the content they are headings of? This doesn't look like stuff that would/should/could even be the start of a subsection of the H4 preceding them, what an H5 MEANS! Those clearly are NOT "headings".

When possible write your complete and full semantic markup for an area as if images and style do not even exist, before you even TRY to apply style to it.

For example rewriting with font-awesome the alignment gets easier if you let line-height do its job and use vertical-align:bottom;

Sadly, vertical-align:middle is unreliable.

https://codepen.io/jason-knight/pen/ExpEVpq

Guessing wildly as to heading depths and what would/should be around it. Content dictates markup, content + markup + device limitations dictates layout and design, NOT the other way around no matter how many artists under the DELUSION they are "designers" claim otherwise.

Oh and for the love of Christmas, don't declare things in PX. You're telling users with accessibility needs to sod off by doing so.

This post has been edited by Jason Knight: Jan 24 2023, 03:12 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mr_Wolowitz
post Jan 24 2023, 03:31 AM
Post #4





Group: Members
Posts: 4
Joined: 23-January 23
Member No.: 28,765



QUOTE(Jason Knight @ Jan 24 2023, 03:11 AM) *

In general I would suggest avoiding placing SVG for icons in the markup in the first place. That's all presentation and as such doesn't belong there, and misses a caching opportunity. It's also not helpful that you have no text for those social icons, haven't written your anchors or the UL they should be in yet, are using SVG for things that a webfont would be more efficient at...

And then the real rub. If this is a "top banner" how the devil are you down to depth five? What are these headings the START of subsections of the page of? Where's the content they are headings of? This doesn't look like stuff that would/should/could even be the start of a subsection of the H4 preceding them, what an H5 MEANS! Those clearly are NOT "headings".

When possible write your complete and full semantic markup for an area as if images and style do not even exist, before you even TRY to apply style to it.

For example rewriting with font-awesome the alignment gets easier if you let line-height do its job and use vertical-align:bottom;

Sadly, vertical-align:middle is unreliable.

https://codepen.io/jason-knight/pen/ExpEVpq

Guessing wildly as to heading depths and what would/should be around it. Content dictates markup, content + markup + device limitations dictates layout and design, NOT the other way around no matter how many artists under the DELUSION they are "designers" claim otherwise.

Oh and for the love of Christmas, don't declare things in PX. You're telling users with accessibility needs to sod off by doing so.


Hello, thank you very much for your complete answer. I'm sorry I embarrassed you with my coding sad.gif , but I'm not a developer, I'm only an e-commerce manager who knows a little html and css who is trying to create a simple eBay page, nothing too complicated. So don't worry I won't write much code in future biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mr_Wolowitz
post Jan 24 2023, 03:31 AM
Post #5





Group: Members
Posts: 4
Joined: 23-January 23
Member No.: 28,765



QUOTE(coothead @ Jan 23 2023, 02:50 PM) *

QUOTE(Mr_Wolowitz @ Jan 23 2023, 04:27 PM) *

I want to align them with the center of the svg icons.


Have you not tried this yet...

CODE

svg {
    margin-right: 5px;
    vertical-align: middle;
}



coothead


Thank you!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Mr_Wolowitz
post Jan 24 2023, 04:17 AM
Post #6





Group: Members
Posts: 4
Joined: 23-January 23
Member No.: 28,765



QUOTE(Jason Knight @ Jan 24 2023, 03:11 AM) *

In general I would suggest avoiding placing SVG for icons in the markup in the first place. That's all presentation and as such doesn't belong there, and misses a caching opportunity. It's also not helpful that you have no text for those social icons, haven't written your anchors or the UL they should be in yet, are using SVG for things that a webfont would be more efficient at...


Hello, I'm tying to use your suggestions and use font awesome, but social icons are not shown. I included the tag in head:

CODE
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512- YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY
1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />


The star is shown, but not the social icons. Could you help me please?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 24 2023, 05:47 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(Jason Knight @ Jan 24 2023, 09:11 AM) *

And then the real rub. If this is a "top banner" how the devil are you down to depth five? What are these headings the START of subsections of the page of? Where's the content they are headings of? This doesn't look like stuff that would/should/could even be the start of a subsection of the H4 preceding them, what an H5 MEANS! Those clearly are NOT "headings".


Please turn it down a notch, will you? This is basically a place for newbies to get help, even if other questions also are welcome. Newbies deserve respect as much as everyone else. They don't need to be told off. They need help and we prefer it to be friendly. OK?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Jan 24 2023, 11:49 AM
Post #8


Advanced Member
****

Group: Members
Posts: 194
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743



QUOTE(Mr_Wolowitz @ Jan 24 2023, 09:17 AM) *

. The star is shown, but not the social icons. Could you help me please?



I used this site...

https://fontello.com/

...to convert your three svg's into custom icons

The advantage is that the font will be on your server rather
than a third party's. IPB Image

You can see the result of my endeavors in the attachment...

Attached File  css_font_test.zip ( 4.89k ) Number of downloads: 115


You will find that the code displays well on PC's and mobiles. IPB Image

coothead
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason Knight
post Jan 25 2023, 08:32 AM
Post #9


Advanced Member
****

Group: Members
Posts: 100
Joined: 25-December 22
Member No.: 28,719



QUOTE(pandy @ Jan 24 2023, 05:47 AM) *

Please turn it down a notch, will you? This is basically a place for newbies to get help, even if other questions also are welcome. Newbies deserve respect as much as everyone else. They don't need to be told off. They need help and we prefer it to be friendly. OK?

See, that's the type of {string of expletives omitted} that MAKES me not friendly. Because how in the blue blazes was what you quoted disrespectful, or telling them off? In what possible huffing reality is that even a factual statement on your part?!?

I don't see it at all and it's that type of mollycoddling and "wah wah somebody said something negative" that results in beginners staying beginners, or getting saddled up and taken for a ride by dirtbag snake oil peddlers. (see "frameworks")

I've no stomach for that type of toxic positivity. It's ugly, and far more disrespectful than entire truckload of insults. That fake plastered on smile and "can't we all just get along" lunacy, made all the worse by people taking offense where none was meant!

I think they can do better, I think we can all do better. But how dare I point out something that was wrong and/or shows a lack of understanding the basics of HTML.

A lack of basics far far too common and in desperate need of correction, the sooner the better.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 25 2023, 08:41 AM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Likewise. Please read the forum rules.
https://forums.htmlhelp.com/index.php?act=boardrules
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 06:50 PM