Ask Question Forum:
Model Library:2025-02-08 Updated:A.I. model is online for auto reply question page
C
O
M
P
U
T
E
R
2
8
Show
#
ASK
RECENT
←
- Underline
- Bold
- Italic
- Indent
- Step
- Bullet
- Quote
- Cut
- Copy
- Paste
- Table
- Spelling
- Find & Replace
- Undo
- Redo
- Link
- Attach
- Clear
- Code
Below area will not be traslated by Google,you can input code or other languages
Hint:If find spelling error, You need to correct it,1 by 1 or ignore it (code area won't be checked).
X-position of the mouse cursor
Y-position of the mouse cursor
Y-position of the mouse cursor
Testcursor
caretPos
Attachment:===
Asked by webstuck5
at 2024-07-13 22:51:22
ModifyPoint:500 Replies:10 POST_ID:828972USER_ID:11870
Topic:
Cascading Style Sheets (CSS);;Hypertext Markup Language (HTML)
I have the following code:
CSS
CSS
ol { list-style-position:inside; padding:0; } li { padding:13px 0 0 0; } li:first-child { padding:0; } 1:2:3:4:5:6:7:8:9:10:11:12:13:
HTML
<"div id="content">" <"ol>" <"li>" From way up here, it's crystal clear that now I'm in a whole new world with you.<"br>"<"span class="attribute">"--&"nbsp;""Aladdin"<"/span>"<"br>"<"br>"<"iframe src="//www.youtube.com/embed/sVxUUotm1P4" height="" width="315" allowfullscreen>"<"/iframe>" <"/li>" <"li>" When he held out his hand for mine, my heart went all a-flutter.<"br>"<"span class="attribute">"--&"nbsp;""Aladdin"<"/span>"<"br>"<"br>"<"img src="http://www.romancestuck.com/images/quotes/aladdin.jpg" alt="More Disney Love Quotes &"ordm;"O&"ordm;": www.romancestuck.com/quotes/disney-quotes.htm #Aladdin #DisneyPrincess #Disney #Love #LoveQuotes" height="250" width="315">"<"br>"<"a href="//www.pinterest.com/pin/create/button/?url=http://www.romancestuck.com/quotes/disney-quotes.htm&"media=http://www.romancestuck.com/images/quotes/aladdin.jpg&"description=More%20Disney%20Love%20Quotes%20%26ordm%3BO%26ordm%3B%3A%20www.romancestuck.com%2Fquotes%2Fdisney-quotes.htm%20%23Aladdin%20%23DisneyPrincess%20%23Disney%20%23Love%20%23LoveQuotes" data-pin-do="buttonPin" data-pin-config="none" data-pin-color="red" data-pin-height="28">"<"img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png">"<"/a>" <"/li>" <"li>" One look at your smile and I could see the light shining everywhere.<"br>"<"span class="attribute">"--&"nbsp;""Aladdin"<"/span>" <"/li>" <"/ol>"<"/div>" 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:
For the li tags that have images in them, I would like to center the pinterest pin it button under the image. I would also like it so that I could possibly add more social sharing buttons and have them all centered under the images with a small margin between them, I may also want to do more than 1 row of social sharing buttons. How can I accomplish these things?
Thanks!
Expert: Gary replied at 2024-08-14 02:15:54
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
Expert: Gary replied at 2024-08-09 13:23:49
No comment has been added to this question in more than 21 days, so it is now classified as abandoned.
I have recommended this question be closed as follows:
Accept: duncanb7 (#40193969)
If you feel this question should be closed differently, post an objection and a moderator will read all objections and then close it as they feel fit. If no one objects, this question will be closed automatically the way described above.
GaryC123
Experts-Exchange Cleanup Volunteer
I have recommended this question be closed as follows:
Accept: duncanb7 (#40193969)
If you feel this question should be closed differently, post an objection and a moderator will read all objections and then close it as they feel fit. If no one objects, this question will be closed automatically the way described above.
GaryC123
Experts-Exchange Cleanup Volunteer
Expert: Scott Fell (padas) replied at 2024-07-16 23:09:55
Edited the code snippets from the question and placed in a code box
padas
Topic Advisor
padas
Topic Advisor
Expert: rbudj replied at 2024-07-16 06:23:24
Try this:
<!doctype html><head><title>CSS Layout</title><style type="text/css"> ol { list-style-position:inside; padding:0; } li { padding:13px 0 0 0; } li:first-child { padding:0; }</style><head><body><div id="content"> <ol> <li> From way up here, it's crystal clear that now I'm in a whole new world with you.<br><span class="attribute">-- "Aladdin"</span><br><br><iframe src="//www.youtube.com/embed/sVxUUotm1P4" height="" width="315" allowfullscreen></iframe> </li> <li> <div style="width:300px;"> When he held out his hand for mine, my heart went all a-flutter.<br><span class="attribute">-- "Aladdin"</span><br><br><img src="http://www.romancestuck.com/images/quotes/aladdin.jpg" alt="More Disney Love Quotes ºOº: www.romancestuck.com/quotes/disney-quotes.htm #Aladdin #DisneyPrincess #Disney #Love #LoveQuotes" height="250" width="315"><br> <div style="width:300px;text-align:center;"><a href="//www.pinterest.com/pin/create/button/?url=http://www.romancestuck.com/quotes/disney-quotes.htm&media=http://www.romancestuck.com/images/quotes/aladdin.jpg&description=More%20Disney%20Love%20Quotes%20%26ordm%3BO%26ordm%3B%3A%20www.romancestuck.com%2Fquotes%2Fdisney-quotes.htm%20%23Aladdin%20%23DisneyPrincess%20%23Disney%20%23Love%20%23LoveQuotes" data-pin-do="buttonPin" data-pin-config="none" data-pin-color="red" data-pin-height="28"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png"></a> <a href="//www.pinterest.com/pin/create/button/?url=http://www.romancestuck.com/quotes/disney-quotes.htm&media=http://www.romancestuck.com/images/quotes/aladdin.jpg&description=More%20Disney%20Love%20Quotes%20%26ordm%3BO%26ordm%3B%3A%20www.romancestuck.com%2Fquotes%2Fdisney-quotes.htm%20%23Aladdin%20%23DisneyPrincess%20%23Disney%20%23Love%20%23LoveQuotes" data-pin-do="buttonPin" data-pin-config="none" data-pin-color="red" data-pin-height="28"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png"></a> <a href="//www.pinterest.com/pin/create/button/?url=http://www.romancestuck.com/quotes/disney-quotes.htm&media=http://www.romancestuck.com/images/quotes/aladdin.jpg&description=More%20Disney%20Love%20Quotes%20%26ordm%3BO%26ordm%3B%3A%20www.romancestuck.com%2Fquotes%2Fdisney-quotes.htm%20%23Aladdin%20%23DisneyPrincess%20%23Disney%20%23Love%20%23LoveQuotes" data-pin-do="buttonPin" data-pin-config="none" data-pin-color="red" data-pin-height="28"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png"></a> </div> </div> </li> <li> One look at your smile and I could see the light shining everywhere.<br><span class="attribute">-- "Aladdin"</span> </li> </ol> </div></body></html> 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:29:30:31:32:33:34:35:36:37:38:39:40:41:42:43:44:45:46:47:48:49:50:51:
I left the styles inline for easy adjusting.
Expert: COBOLdinosaur replied at 2024-07-14 11:42:18
>>>Why and where it mention table will phrase out ?
The use of tables to manage layout has been considered not "best practice" for at least 10 years. Tables are for the presentation of tabular data. Using them for anything else is semantically incorrect; technically limiting; hurts load and rendering time; and makes responsive, adaptive, and fluid design more difficult.
W3C and virtually every authoritative source have been clear that using tables for layout is not appropriate in HTML4, XHTML, and HTML5; so unless the intent is a retro 20th century design tables are not correct for layout.
Cd&
The use of tables to manage layout has been considered not "best practice" for at least 10 years. Tables are for the presentation of tabular data. Using them for anything else is semantically incorrect; technically limiting; hurts load and rendering time; and makes responsive, adaptive, and fluid design more difficult.
W3C and virtually every authoritative source have been clear that using tables for layout is not appropriate in HTML4, XHTML, and HTML5; so unless the intent is a retro 20th century design tables are not correct for layout.
Cd&
Accepted Solution
Expert: duncanb7 replied at 2024-07-14 01:56:24
500 points EXCELLENT
set div tag to width:1% that will let the
inner div an auto width and hidden overflow and set its width from the top image, Please try this, probably it works without using any <table> tab
Duncan
inner div an auto width and hidden overflow and set its width from the top image, Please try this, probably it works without using any <table> tab
Duncan
<html><meta http-equiv="Content-Type" content="text/html; charset=Big5"><head><title>Title</title><style></style><script type="text/javascript">$(document).ready(function() {});</script><script type="text/javascript"></script><style type="text/css"></style></head><body><div id="content"> <ol> <li> From way up here, it's crystal clear that now I'm in a whole new world with you.<br><span class="attribute">-- "Aladdin"</span><br><br><iframe src="//www.youtube.com/embed/sVxUUotm1P4" height="" width="315" allowfullscreen></iframe> </li> <li > When he held out his hand for mine, my heart went all a-flutter.<br> <span class="attribute">-- "Aladdin"</span><br><br> <div style="width:1%;display:table"> <img src="http://www.romancestuck.com/images/quotes/aladdin.jpg" alt="More Disney Love Quotes ºOº: www.romancestuck.com/quotes/disney-quotes.htm #Aladdin #DisneyPrincess #Disney #Love #LoveQuotes" height="250" width="315"><br> <div style="text-align:center"> <a href="//www.pinterest.com/pin/create/button/?url=http://www.romancestuck.com/quotes/disney-quotes.htm&media=http://www.romancestuck.com/images/quotes/aladdin.jpg&description=More%20Disney%20Love%20Quotes%20%26ordm%3BO%26ordm%3B%3A%20www.romancestuck.com%2Fquotes%2Fdisney-quotes.htm%20%23Aladdin%20%23DisneyPrincess%20%23Disney%20%23Love%20%23LoveQuotes" data-pin-do="buttonPin" data-pin-config="none" data-pin-color="red" data-pin-height="28"> <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png"> </a> </div> </div> </li> <li> One look at your smile and I could see the light shining everywhere.<br><span class="attribute">-- "Aladdin"</span> </li> </ol></div></body></html> 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:29:30:31:32:33:34:35:36:37:38:39:40:41:42:43:44:45:46:47:48:
Expert: duncanb7 replied at 2024-07-14 01:39:52
Why and where it mention table will phrase out ?
Expert: stevejacob68 replied at 2024-07-14 01:36:13
Hi,
You can define css property for an img and align center property on it.
p.center { text-align: center; }
You can apply css in similar manner and align image in center.
You can define css property for an img and align center property on it.
p.center { text-align: center; }
You can apply css in similar manner and align image in center.
Author: webstuck5 replied at 2024-07-14 01:07:35
I thought tables were being phased out. Is that not the case?
Expert: duncanb7 replied at 2024-07-14 00:34:33
If you want it work cross browser between FF, IE, Chrome, it may be using table tag
for top image and image under the top image, and use div tag
include the achor tag with pinterest pin image butten with style
text-align:center. You could try the following html page code for a start or reference only.
You can put style at css style tag instead of inline tag
Hope understand your question completely.If not , please point it out
Duncan
for top image and image under the top image, and use div tag
include the achor tag with pinterest pin image butten with style
text-align:center. You could try the following html page code for a start or reference only.
You can put style at css style tag instead of inline tag
Hope understand your question completely.If not , please point it out
Duncan
<html><meta http-equiv="Content-Type" content="text/html; charset=Big5"><head><title>Title</title><style></style><script type="text/javascript">$(document).ready(function() {});</script><script type="text/javascript"></script><style type="text/css"></style></head><body><div id="content"> <ol> <li> From way up here, it's crystal clear that now I'm in a whole new world with you.<br><span class="attribute">-- "Aladdin"</span><br><br><iframe src="//www.youtube.com/embed/sVxUUotm1P4" height="" width="315" allowfullscreen></iframe> </li> <li > When he held out his hand for mine, my heart went all a-flutter.<br> <span class="attribute">-- "Aladdin"</span><br><br> <table> <tr> <td> <img src="http://www.romancestuck.com/images/quotes/aladdin.jpg" alt="More Disney Love Quotes ºOº: www.romancestuck.com/quotes/disney-quotes.htm #Aladdin #DisneyPrincess #Disney #Love #LoveQuotes" height="250" width="315"><br> </td> </tr> <tr><td> <div style="text-align:center"> <a href="//www.pinterest.com/pin/create/button/?url=http://www.romancestuck.com/quotes/disney-quotes.htm&media=http://www.romancestuck.com/images/quotes/aladdin.jpg&description=More%20Disney%20Love%20Quotes%20%26ordm%3BO%26ordm%3B%3A%20www.romancestuck.com%2Fquotes%2Fdisney-quotes.htm%20%23Aladdin%20%23DisneyPrincess%20%23Disney%20%23Love%20%23LoveQuotes" data-pin-do="buttonPin" data-pin-config="none" data-pin-color="red" data-pin-height="28"> <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png"> </a> </div> </td> </tr> </table> </li> <li> One look at your smile and I could see the light shining everywhere.<br><span class="attribute">-- "Aladdin"</span> </li> </ol></div></body></html> 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:29:30:31:32:33:34:35:36:37:38:39:40:41:42:43:44:45:46:47:48:49:50:51:52:
