I have a question about floating elements inside of <li> tag.
I have following markup
<li>
<img src="concept-truck.jpg" alt="2013 Toyota Tacoma" id="itemImg" style="float:left">
<p>2013 Toyota Tacoma</p>
<p>Price : 450000$</p>
<p>Year : 2013</p>
<p>more</p>
</li>
In FF, IE works fine, but in Chrome list numeration floats image too.
How to fix it? Thanks
I would rewrite your example like this:
<li>
<div style="float: left;">
<img src="concept-truck.jpg" alt="2013 Toyota Tacoma" id="itemImg">
</div>
<div style="float: left;">
<p>2013 Toyota Tacoma</p>
<p>Price : 450000$</p>
<p>Year : 2013</p>
<p>more</p>
</div>
<div style="float: none; clear: both;"></div>
</li>
This is written with inline-style CSS attributes, which I usually tend to avoid, but as in your example, I wrote it like you did - inline.
Related
Here is my code:
<div class="wrap">
<div id ="header">
<a href="index" class = "logo">
<img src = "logo.png" alt = "" />
</a>
<nav class="navigation">
<ul>
<li>Share</li> |
<li>Join</li> |
<li>See Safty Tips</li> |
<li>Settings</li>
</ul>
</nav>
</div>
<div class="wrapper">
<img src="accident.png" alt="">
<div id="right-content">
<h2>Hit and Run No Injuries</h2>
<p>2.610 miles from your new neighbor<br />
May 20, 2015 at 12.34 PM </p>
<h4>California HWP 2 - High Level</h4>
</div>
</div>
<div class="wrap">
<ul class="secure_v5">
<li id="li-incident">
<a class="inviteLink dark" href="/v5/Resources.aspx?IFrameURL=Invitationv5&vn=&gORn=1">See Incident Location</a>
</li>
<li id="login-signup">
<a class="button dark" href="V4/Login.aspx?v5=1">Share Incident with Friends</a>
</li>
</ul>
</div>
<div class="thanks">
<p>Sincerely,<br />
The AlertID Team</p>
</div>
<p style="text-align:center;">This sponsor is helping to protect your neighborhood</p>
<div class="footer-links">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
and here is jsfiddle , (didn't include images)
When i run this code, some alignment is not correct,
I need something same like this
I just confused with which exact css can be used, Can anyone help me please?
Thanks,
Use HTML tables to control the design layout and some presentation. You may be used to using pure CSS layouts for your web pages, but that approach just won’t hold up in an email environment.
Use inline CSS to control other presentation elements within your email, such as background colors and fonts.
You just put div #right-content to right
try it on CSS.
#right-content {
float:right;
width:600px;
}
#right-content h2{
text-align:center;
}
I create a little attribute to h2 inside div #right-content
and define a fixed width for right-content. It's necessary because of attribute float: right.
Here is my jsfiddle: http://jsfiddle.net/4478bs0L/
I need to place download button underneath of image at left side.
For that, here is my html:
<div><img src="9780143332497.jpg" alt="">
<a href="9780143332497.jpg" class="myButton" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a></div>
If i add caption class to the button and set text-align:center; it didn't working.
Can anyone please help me? Thanks in advance.
Option1: Add a <br/> between both images.[Apparently, your button is also an image]. Sometimes the simplest answer is the easiest.
<img src="image1" alt="">
<br/>
<a href="image2" class="myButton" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a>
Option 2: enclose your button inside a <div> [ block element]
<div>
<a href="http://s30.postimg.org/b7rdjjkwh/9780143332497.jpg" class="myButton" download="ss" title="Download">
<img src="/path/to/image" style="display:block"alt="Download"/>
</a>
</div>
Option 3: add inline css property display:block to the anchor tag containing your button[inline css would override the myButton class property which is making it appear on the same line]
<a href="http://s30.postimg.org/b7rdjjkwh/9780143332497.jpg" class="myButton" style="display:block;width:60px" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a>
Cheers!!
just use a <br> after the image and before the button
<div><img src="9780143332497.jpg" alt="">
<br>
<a href="9780143332497.jpg" class="myButton" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a></div>
FIDDLE DEMO
Yes I did it .... implement this code...
<div class="wrap">
<div class="london-olympic">
<h1>Playng To Win</h1>
<span class="span">Author: Saina Nehwal.</span>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_jumbo_share"></div>
<div><img src="http://s30.postimg.org/b7rdjjkwh/9780143332497.jpg" alt="">
<a style="position:absolute; margin-left: -140px; top: 450px;" href="http://s30.postimg.org/b7rdjjkwh/9780143332497.jpg" class="myButton" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a>
</div>
<Br><br>
<p>. . . being a player from India defines who I am. When I play, it's for my parents, my coach, and my country.'</p>
<p>Meet Saina Nehwal-India's star badminton player and World Number 4, Padma Shri and Khel Ratna awardee, the girl who brought laurels to India by winning an Olympic medal at the age of twenty-two. In this fascinating memoir, she talks about her childhood and growing-up years; her relationship with the most important people in her life; the ups and downs of her celebrated career, from district level wins to the Olympics; and the sacrifices needed to succeed in any sport. She also reveals little-known facts and offers a peek into her many avatars-daughter, sister, student, and the regular girl behind the badminton prodigy.</p>
<p>Find out what a typical day in Saina's life is like-rigorous training, a strict diet, and no parties or sleepovers. But it's not all work and no play; Saina loves to shop, eat ice cream (post wins only), and play games on her iPad!</p>
<p>With candid photographs and badminton tips from the pro herself, this book showcases the making of a badminton champ-in her own words.</p>
</div>
</div>
Use this code
<div>
<img src="9780143332497.jpg" alt="">
</div>
<div>
<a href="9780143332497.jpg" class="myButton" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a>
</div>
i would like to create html like this :
text start with "we all grew up, reiterating to oursleves...." have 2 lines with image, and 3rd like start with left alignment
i take following elements for this ;
<ul class ="ariticaldiv">
<li>
<div>
<img src="../Images/DefaultPhotoMale.png" alt="" />
<span>Think About there benefits , Your Brand is your Equity</span>
<span><span>By : xxxxx</span><span>Director Of HR</span></span>
<span><span>Post:</span><span>March 3,2014</span></span>
<label>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx some long text here xxxxxxxxxxxxxx</label>
</div>
</li>
</ul>
how could i do that ?
If you render float the image, you'l obtain what you desire:
HTML:
<img src="../Images/DefaultPhotoMale.png" alt="" class='floated_image' />
CSS:
.floated_image
{
float:left;
margin-right:10px;
}
try this
<div>
<p style="width: 250px">
<img src="../Images/DefaultPhotoMale.jpg" alt="" style="float: left; width: 50px; height: 50px;margin:2px" />
<span>Think About there benefits , Your Brand is your Equity
By : xxxxx Director Of HR
Post: March 3,2014
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx some long text here xxxxxxxxxxxxxx
</span>
</p>
I'm wondering what the best way is to navigate the user to a users profile page when he clicks a <li> item on the members page.
<li>
<img src="images/pic.png" alt="John Smiths's Profile Picture" class="profile-pic">
<div class="name">John Smith</div>
<div class="skills">PHP, ASP, MySQL, SQL Server, Javascript</div>
</li>
That's the sort of markup for each list item, and it comes out at about 640x50 block width/height. I want the user to go to their profile page when they click on any part of the <li> element.
I tried wrapping the entire list item in a link element (<a>), but that just results in a 0x0 sized link element. I'd also prefer not to use Javascript.
Thanks.
You could do this:
HTML:
<li>
<a href="#" title="Link text" class="list-link">
<img src="images/pic.png" alt="John Smiths's Profile Picture" class="profile-pic">
<span class="name">John Smith</span>
<span class="skills">PHP, ASP, MySQL, SQL Server, Javascript</span>
</a>
</li>
css:
.list-link{
display:block;
}
Wrapping A around LI is invalid HTML. Why not just wrap the entire content of the innerHTML of the LI in an A-tag instead?
<li>
<a href="...">
<img src="images/pic.png" alt="John Smiths's Profile Picture" class="profile-pic">
<div class="name">John Smith</div>
<div class="skills">PHP, ASP, MySQL, SQL Server, Javascript</div>
</a>
</li>
I'm having problem with IE 6 (what a surprise : D)
On this site, in the content, I cannot click on the first few links. But after a few items, the links are working fine.
This problem appears if I load a page with ajax from the menu.
I couldn't figure out the problem, has anybody seen something like this before?
The HTML code is:
<div id="cont" style="display: block;">
<div class="localHeader">
<span> Szállás > Magánszállás </span>
</div>
<div class="subList">
<div class="productContainer">
<div class="img">
<img style="width: 200px;" src="/up/21/480_98_szarka2_255.jpg">
</div>
<div class="text">
<div class="productName">
<a title="Szarka család" href="/cats/showItem/21" rel="history"> Szarka család </a>
</div>
<div class="productDatas">
kato55#freemail.hu
<br>
<a title="Szarka család" href=""></a>
<br>
+36 84 314 062
</div>
<div class="productText"></div>
<a title="Szarka család" href="/cats/showItem/21" rel="history" class="moreButton"> Részletek </a>
</div>
</div>
</div>
</div>
Of course the .productContainer is repeating in the .subList.
Thanks.
Make sure that you have explicitly set overflow:auto on .productContainer. If that doesn't work, try Googling "clearfix" and see if that doesn't fix your problem.
You should ensure that your HTML validates against the DocType you're using, at the moment it doesn't and this can effect how browsers render parts of the page.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbalatonnet.com%2Fcats%2FlstSubCat%2F13