I know that it is a simple matter, but nowhere I can find a solution. In the following html code markers of <li> are at the bottom of <inframe> How to do to be in the middle or at the top <inframe> ?
<!DOCTYPE html>
<html>
<body>
<ul style=" list-style-position: inside;">
<li> <iframe src="http://www.w3schools.com"> </iframe> </li>
<li> <iframe src="http://www.w3schools.com"> </iframe> </li>
<li> <iframe src="http://www.w3schools.com"> </iframe> </li>
</ul>
</body>
</html>
Thank you in advance for your help.
Give the CSS property vertical-align:middle; to the iframe. This will make the bullet go to the middle of the list.
iframe{
vertical-align:middle;
}
<!DOCTYPE html>
<html>
<body>
<ul style=" list-style-position: inside;">
<li> <iframe src="http://www.w3schools.com"> </iframe> </li>
<li> <iframe src="http://www.w3schools.com"> </iframe> </li>
<li> <iframe src="http://www.w3schools.com"> </iframe> </li>
</ul>
</body>
</html>
Related
I have been working on this code since yesterday (my first time using html so please excuse my syntax and cascading) and am having trouble getting my ul to center properly with the image being in the header, because it makes the hyperlinks shift. Any insight onto how I can fix this with some simple HTML style/formatting? Also, any tips on the code itself would be greatly appreciated. (Please try to provide some level of explanation so that I can actually learn versus copy and paste). Thanks!
<!DOCTYPE html>
<html>
<style>
.listStyle {
font-size:175%;
text-align:center;
list-style-type:none;
margin-left: auto;
margin-right: auto;
padding: 0;
}
</style>
<head>
<base target="_top">
<span><img src="url" alt="YMF Logo" style="float:right;" height="auto";width="100px;margin: 0 auto;"></span>
</head>
<body>
<b>
<u>
<h1 style="position:relative;top:40px;text-align:center;font-size:175;">
Warehouse Quick Links
</h1>
</u>
<div style="position:relative;top:20px;">
<ul class="listStyle">
<li>
Outbound Sheet
</li>
<li>
Spoils Form
</li>
<li>
Check-In Form
</li>
<li>
Amazon Pallet Guide
</li>
<li>
Amazon Packaging Guide
</li>
<li>
Shipstation
</li>
<li>
Amazon Seller Central
</li>
</ul>
</div>
</b>
</body>
</html>
I am trying to make my list horizontally and I saw that I need to type: display:inline; inside style argument but when I tried it, it didn't work. I will attach my code here maybe I did something wrong. thanks for the helpers!
<body style="font-family:Calibri; font-size:20px">
<center>
<img src="Images/Logo.jpg" style ="margin-top:100px; border:5px solid black;" alt="GameReview" title="Game Review"/>
<br />
<br />
<ul style="list-style-type:none; display:inline;">
<li>
Details
</li>
<li>
On me
</li>
<li>
Gallery
</li>
<li>
Links
</li>
<li>
Conatact me
</li>
</ul>
</center>
</body>
this is for a school project.
The inline style needs to be on the li element.
<style>
ul li {
display: inline;
}
</style>
this code overlaps two div, (using html only)how do i display these vertically like this: https://i.stack.imgur.com/Mq5om.jpg
<html>
<body>
<title> Flag Ship Devices </title>
<div>
<object border="2" width="400" height="250" data="D:\Project1\FinalResource\iphonex.jpg" align="left" >
<img src="D:\Project1\FinalResource\iphonex.jpg">
</object>
<object align="left">
<ul>
<h2> iPhone X (Matte Black, 64GB) </h2> <br>
<li> <p>Price ₹83499</p> </li>
</object>
</div>
[enter image description here][1]
Mi A1 (White, 64GB)
Price ₹13999
Please, take a look and see if this helps you.
Also, I suggest you to use bootstrap, it's a very good framework to this kind of need.
.product_container{
width: 100%;
margin-bottom: 10px;
display: flex;
}
<html>
<body>
<title> Flag Ship Devices </title>
<div class="product_container">
<object border="2" width="400" height="250" data="D:\Project1\FinalResource\iphonex.jpg" align="left" >
<img src="https://placehold.it/400x250"/>
</object>
<object align="right">
<ul>
<li><h2> iPhone X (Matte Black, 64GB) </h2> <br></li>
<li> <p>Price ₹83499</p> </li>
</ul>
</object>
</div>
<div class="product_container">
<object border="2" width="400" height="250" data="D:\Project1\FinalResource\iphonex.jpg" align="left" >
<img src="https://placehold.it/400x250"/>
</object>
<object align="right">
<ul>
<li><h2> iPhone X (Matte Black, 64GB) </h2> <br></li>
<li> <p>Price ₹83499</p> </li>
</ul>
</object>
</div>
I have the following HTML
<!DOCTYPE html>
<html>
<body>
<h1>My Great Web</h1>
<FONT SIZE = "5">
<ol>
<li> Foo. </li>
<li> Bar. </li>
<ol>
</FONT>
<br>
<hr style="width: 100%"/>
</body>
</html>
Which produce the following figure.
Notice that the horizontal line doesn't extend fully to the left. How can I do that?
You have to close your <ol>
<ol>
<li> Foo. </li>
<li> Bar. </li>
</ol>
The font tag is not supported in HTML5. Use CSS instead.
The font element is deprecated in HTML 4.01.
It might display poorly on some browsers
<html>
<body>
<h1>My Great Web</h1>
<div style="font-size:12px;">
<ol>
<li> Foo. </li>
<li> Bar. </li>
</ol>
</div>
<br>
<hr/>
</body>
</html>
Do this :
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0 ;
padding: 0;
font-size: 14px;
}
.container {
width: 80%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<h1>My Great Web</h1>
<div class="list">
<ol>
<li> Foo. </li>
<li> Bar. </li>
<ol>
</div>
<br />
</div>
<hr />
</body>
</html>
I cannot get the FB Like button and the Tweet button to display next to each other!!
HTML:
<div class="grid_3 social">
<ul>
<li>
<fb:like href="http://{{ request.get_host }}{{ post.get_absolute_url }}" layout="button_count" show_faces="false" width="450" font=""></fb:like>
</li>
<li>
Tweet
</li>
</ul>
</div>
CSS:
.social {
float: right;
}
.social ul {
list-style: none outside none;
display: inline;
}
.social li {
display: inline;
}
I tried every combination I can think of to no avail. Help please!! CSS will be the death of me...
While we're on the subject of these buttons, we all know they double and triple your page's load time because they make a lot of JS calls, especially when you're on something like a blog index page. Anyone have any ideas on how to remedy this situation? I'm already using Disqus, and now adding FB and Twitter my index page can take up to 5 seconds to load. So slow. Would showing no counts on the buttons help?
Thanks!
EDIT: Actual HTML taken from Firebug:
<div class="grid_3 social">
<ul>
<li>
<fb:like class=" fb_edge_widget_with_comment fb_iframe_widget" font="" width="450" show_faces="false" layout="button_count" href="http://localhost:8000/24/">
<span>
<iframe id="f3625cd56daea42" class="fb_ltr" scrolling="no" name="fdb43a564bf6bc" style="border: medium none; overflow: hidden; height: 25px; width: 450px;" title="Like this content on Facebook." src="http://www.facebook.com/plugins/like.php?api_key=109222892497007&channel_url=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D0%23cb%3Df30031a637a623%26origin%3Dhttp%253A%252F%252Flocalhost%253A8000%252Ff1d530a50043dd4%26relation%3Dparent.parent%26transport%3Dpostmessage&href=http%3A%2F%2Flocalhost%3A8000%2F24%2F&layout=button_count&locale=en_US&node_type=link&sdk=joey&show_faces=false&width=450">
<html id="facebook" class=" " lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<body class="plugin transparent_widget ff3 mac Locale_en_US">
<input id="post_form_id" type="hidden" autocomplete="off" value="fa23e0256eb11be4c423202178ac80f5" name="post_form_id">
<div id="FB_HiddenContainer" style="position:absolute; top:-10000px; width:0px; height:0px;"></div>
<div id="LikePluginPagelet">
<div id="connect_widget_4daeb2d755f689e27484431" class="connect_widget button_count" style="">
<table class="connect_widget_interactive_area">
<tbody>
<tr>
<td class="connect_widget_vertical_center connect_widget_button_cell">
<div class="connect_button_slider">
<div class="connect_button_container">
<a class="connect_widget_like_button clearfix like_button_no_like">
<div class="tombstone_cross"></div>
<span class="liketext">Like</span>
</a>
</div>
</div>
</td>
<td class="connect_widget_vertical_center connect_widget_confirm_cell">
<td class="connect_widget_button_count_including hidden_elem">
<td class="connect_widget_button_count_excluding">
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
<script type="text/javascript">
<script type="text/javascript">
</body>
</html>
</iframe>
</span>
</fb:like>
</li>
<li>
<iframe class="twitter-share-button twitter-count-horizontal" scrolling="no" frameborder="0" tabindex="0" allowtransparency="true" src="http://platform0.twitter.com/widgets/tweet_button.html?_=1303294651733&count=horizontal&lang=en&text=mytext&url=http%3A%2F%2Flocalhost%3A8000%2F24%2F" style="width: 110px; height: 20px;" title="Twitter For Websites: Tweet Button">
<html lang="en">
<head>
<body class="hcount show-count">
</html>
</iframe>
</li>
</ul>
</div>
How about:
.social li {
float: left;
}
It would help to see your actual HTML. <fb:like> is not an HTML tag, it’s Facebook’s little markup language they made up (FBML), and it gets replaced with actual HTML when Facebook’s JavaScript runs.
(I believe they’re looking to deprecate FBML too — you might want to have a look at the <iframe>-based like button.)
To answer your second question, you would want to load the javascript asynchronously - someone has modified the twitter script to do so, and I would imagine the facebook script has been modified to do the same.
I can't find links too readily on google, but for 5 seconds a page I'm sure you have the motivation!
The simplest solution I have found is to wrap your buttons in a LI inside a UL.
Take your facebook button code:
<div class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-font="verdana"></div>
Change the DIV tag to LI, and set it inside the UL with the rest of your buttons:
<li class="fb-like" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-font="verdana"></li>
And set your CSS widths for the class fb-like down to something closer to its actual size.
You can assign following CSS Class to your List Items
.NextTo
{
float : left;
}
or
.NextTo
{
display: inline-block;
width: auto;
}
I also spent a lot of time to bring them together and show next to each other and finally found the easiest solution..
You simply need to past html codes between:
<div align="center">... past your code here...`</div>`