Title with SVG icons not aligned |
Title with SVG icons not aligned |
Mr_Wolowitz |
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 |
coothead |
Jan 23 2023, 02:50 PM
Post
#2
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
|
Jason Knight |
Jan 24 2023, 03:11 AM
Post
#3
|
Advanced Member Group: Members Posts: 103 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 |
Mr_Wolowitz |
Jan 24 2023, 03:31 AM
Post
#4
|
Group: Members Posts: 4 Joined: 23-January 23 Member No.: 28,765 |
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 , 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 |
Mr_Wolowitz |
Jan 24 2023, 03:31 AM
Post
#5
|
Group: Members Posts: 4 Joined: 23-January 23 Member No.: 28,765 |
|
Mr_Wolowitz |
Jan 24 2023, 04:17 AM
Post
#6
|
Group: Members Posts: 4 Joined: 23-January 23 Member No.: 28,765 |
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? |
pandy |
Jan 24 2023, 05:47 AM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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? |
coothead |
Jan 24 2023, 11:49 AM
Post
#8
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
. The star is shown, but not the social icons. Could you help me please?
coothead |
Jason Knight |
Jan 25 2023, 08:32 AM
Post
#9
|
Advanced Member Group: Members Posts: 103 Joined: 25-December 22 Member No.: 28,719 |
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. |
pandy |
Jan 25 2023, 08:41 AM
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Likewise. Please read the forum rules.
https://forums.htmlhelp.com/index.php?act=boardrules |
Lo-Fi Version | Time is now: 23rd April 2024 - 04:53 PM |