|
HTML - Style=float:left Problem
Hi I have a requirement. i have an image with float:left style. I have a text following that and an line just below the text spanning entire width of column(not just width of text). I tried 2 ways of displaying it, but the underline was displaying below the floated image not just below the text. Can you please help me here?
Two ways 1) Image: float:left, Text and <HR> 2)Image:float:left, Text and dot image spanning entire width of column and height 1 pixel Thanks rakesh Similar Tutorialshello; I would like to do this Code: <div id="a_div"
class="a_class"
my_html_prop="javascript:my_function( )" // my_function returns a number
style="left:my_html_prop " >
...
any thoughts? thanks dsdsdsdsd Hey guys, Im working on a website for a project at the moment and am having some problems with how it is rendering in IE. I have an image floating to the right of some text, and want the text (In two different divs) to wrap around that picture. Works fine in Firefox but doesnt seem to want to work in IE. I've spent this morning trying to get it to work, looking for different fixes around the place but cant seem to get any of them to apply to my code. Any help would be greatly appreciated. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Kling:2 Educational Wall Decorations</title>
<meta name="keywords" content="Wall Stickers, Wall Decorations, Educational Wall Stickers, Kling, Kling:2, Static, Childrens Wall, Childrens Decorations, Room Decorations, Childrens Educational Wall Stickers, Education, Early Learning, Child learning, Kids Wall Stickers, Kids Wall Decorations" />
<meta name="description" content="Kling:2 Educational Wall Stickers are a new way to not only decorate your childs room, but to also introduce them to learning in the home environment." />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="css/dropdown/dropdown.css" media="all" rel="stylesheet" type="text/css" />
<link href="css/dropdown/themes/default/default.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_header">
<div id="header">
</div>
</div>
<div id="main_body">
<div id="body">
<div id="menu">
<ul id="nav" class="dropdown dropdown-horizontal">
<li><a href="./">Home</a></li>
<li><a href="./">About Us</li>
<li class="dir"><a href="./">Activities</a>
<ul>
<li><a href="./">Purchase</a></li>
<li><a href="./">About Us</a></li>
<li><a href="./">Gallery</a></li>
<li><a href="./">Contact</a></li>
<li><a href="./">Press</a></li>
<li><a href="./">FAQs</a></li>
</ul>
</li>
<li class="dir"><a href="./">Store</a>
<ul>
<li class="dir"><a href="./">New</a></li>
<li class="dir"><a href="./">Used</a></li>
<li><a href="./">Featured</a></li>
<li><a href="./">Top Rated</a></li>
<li><a href="./">Prices</a></li>
</ul></li>
<li>Gallery</li>
<li><a href="./">Contact Us</a></li>
</ul>
</div>
<h1>why choose us?</h1>
<div id="front_photo"> <img src="images/wall.jpg" alt="css image" /> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et arcu lectus. Praesent at ipsum ante, in egestas justo. Sed non massa quis leo imperdiet laoreet sed vitae nunc. Ut malesuada ipsum a velit ullamcorper eget tristique lorem euismod. Pellentesque purus lacus, lacinia et tristique et, rhoncus et elit. Aenean vulputate, lorem id sollicitudin posuere, neque arcu pharetra risus, vitae iaculis mauris tellus vitae leo. Sed est lorem, viverra vitae congue non, ornare quis orci. Cras egestas ultrices dui non imperdiet. Vivamus sed auctor nisl. Phasellus in tortor ac eros convallis dictum. <a href="#">More...</a></p>
<!--services start -->
<div id="concept">
<h2>new services R Richardson</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et arcu lectus. Praesent at ipsum ante, in egestas justo. Sed non massa quis leo imperdiet laoreet sed vitae nunc. Ut malesuada ipsum a velit ullamcorper eget tristique lorem euismod. Pellentesque purus lacus, lacinia et tristique et, rhoncus et elit. Aenean vulputate, lorem id sollicitudin posuere, neque arcu pharetra risus, vitae iaculis mauris tellus vitae leo. Sed est lorem, viverra vitae congue non, ornare quis orci. Cras egestas ultrices dui non imperdiet. Vivamus sed auctor nisl. Phasellus in tortor ac eros convallis dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et arcu lectus. Praesent at ipsum ante, in egestas justo. Sed non massa quis leo imperdiet laoreet sed vitae nunc. Ut malesuada ipsum a velit ullamcorper eget tristique lorem euismod. Pellentesque purus lacus, lacinia et tristique et, rhoncus et elit. Aenean vulputate, lorem id sollicitudin posuere, neque arcu pharetra risus, vitae iaculis mauris tellus vitae leo. Sed est lorem, viverra vitae congue non, ornare quis orci. Cras egestas ultrices dui non imperdiet. Vivamus sed auctor nisl. Phasellus in tortor ac eros convallis dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et arcu lectus. Praesent at ipsum ante, in egestas justo. Sed non massa quis leo imperdiet laoreet sed vitae nunc. Ut malesuada ipsum a velit ullamcorper eget tristique lorem euismod. Pellentesque purus lacus, lacinia et tristique et, rhoncus et elit. Aenean vulputate, lorem id sollicitudin posuere, neque arcu pharetra risus, vitae iaculis mauris tellus vitae leo. Sed est lorem, viverra vitae congue non, ornare quis orci. Cras egestas ultrices dui non imperdiet. Vivamus sed auctor nisl. Phasellus in tortor ac eros convallis dictum. </p>
<!--services end -->
<br class="blank" />
</div>
</div>
<div id="main_footer">
<div id="footer"><!--footer navigation start -->
<ul>
<li><a href="#" class="mg">Home</a>|</li>
<li><a href="#">About Us</a>|</li>
<li><a href="#"> Activities</a>|</li>
<li><a href="#">Store</a>|</li>
<li><a href="#">Gallery</a>|</li>
<li><a href="#">Contact Us</a></li>
</ul>
<p>© Kling:2. All rights reserved. 2009.</p>
</div><!--footer navigation end -->
</div>
</div>
</body>
</html>
The problem is at - http://dynamixco.com/ You see I have floated frame1 and frame2 is horizontal to it... in firefox frame2 is a little below frame1 causeing it too look bad anyone know the solution? (both html and the css are validated) EDIT: now that I think of it, Im sorry if this is in the wrong section O.O EDIT: Resolved, the solution was floating one frame left and the other right. hello fellows, I am new here and dont have much experience but trying to learn html and css. English is not my first language so please ignore my grammar mistakes. I am trying to line up divs in a row but seems I am failed to do it. I can do it by using tables but just wonder if it could be done without inserting tables. Here is my test page which I want to fix. Here is other test page contains tables. Any help would be much appreciated. After some good help from Horus_Kol i made a panel to the left on my website: But now i created alot of stuff on my website, and then i found that something was wrong if there is too much text on the page (sorry, i can't explain it so good ): here is the HTML Code: Code: <html> <head> <title>Urne's Website - About</title> <link rel="stylesheet" type="text/css" href="style/style2.css"> <div id="container" style="width:100%;"> <div id="header"> </div> <div id="left" style="width:30%;float:left;"> <a href="index.html"><img alt="Home2 (15K)" src="img/Home2.png" height="50" width="200" border= "0px"/></a> <p><a href="Community.html"><img alt="Community (15K)" src="img/Community.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Tracks.html"><img alt="Tracks (17K)" src="img/Tracks.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Videos.html"><img alt="Videos (15K)" src="img/Videos.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Images.html"><img alt="Images (15K)" src="img/Images.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Other.html"><img alt="Other (13K)" src="img/Other.png" height="50" width="200" border= "0px"/></a><p/> <p><a href="Trackup.html"><img alt="Track Updates" src="img/trackup.png" height="50" width="200" border= "0px"/></a><p> <p><a href="Settings.html"><img alt="Settings (13K)" src="img/Settings.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Search.html"><img alt="Search (14K)" src="img/Search.png" height="50" width="200" border= "0px"/></a><p> <p><a href="About.html"><img alt="About (12K)" src="img/About.png" height="50" width="200" border= "0px"/></a></p> </div> </head> <body> <div id="main" style="width:70%;"> <h1>Other Things</h1> </div> </body> <div id="footer"> <img alt="Pretty Plant" src="img/Pretty+Plant.png" height="200" width="200" align="right" border= "0px"/> <p><b><u><h3>Pretty Plant 3D Model</h3></u></b></p> <p>This plant i made in September, and was made for this website. You can use it if you want to your track, or any other thing, but if you want to upload it to your website, then please contact me on my e-mail (look in the readme.txt that comes with the plant). <br>Convert the plant to any other format if you want, but please keep the readme.txt unmodified, and safe.</br> <p><a href="dload/Pretty+Plant.zip"><img alt="Download Pretty+Plant.zip" src="img/Download.png" height="50" width="200" border= "0px"/></a> <hr /> <img alt="Urne's World infodocument" src="img/No+pic.png" height="200" width="200" align="right" border= "0px"/> <p><b><u><h3>Urne's World Infodocument</h3></u></b></p> <p>The "Uworld" Project is still going around, and in the beginning i was planning alot, about how the track should be etc. <br>The infodocument contains pictures, and track information about the 5 tracks Urne's World include. Urne's World should be aviable for Download in October/November 2008.</br> Enjoy the reading! </p> <p><a href="dload/UW+Project.doc"><img alt="Download UWorld Project.doc" src="img/Download.png" height="50" width="200" border= "0px"/></a> <hr /> <img alt="Bone Island Light Pack" src="img/No+pic.png" height="200" width="200" align="right" border= "0px"/> <p><b><u><h3>Bone Island Light Pack</h3></u></b></p> <p>Alot of people uses wrong Brightness & Contrast settings wich will cause alot of darkness in Bone Island, so i made this ligth pack to help all thoose who cant drive this amazing track because it's too dark. <br>Hope it helps!</br></p> <p><a href="http://www.mediafire.com/?xvy1gjwxll1"><img alt="FC" align="right" src="img/FC.png" height="50" width="200" border= "0px"/></a> <a href="ihttp://www.mediafire.com/?v2ygm4n7cpu.ico"><img align="right" alt="Extreme" src="img/Extreme.png" height="50" width="200" border= "0px"/></a></p> <hr /> <img alt="Other Pisa Grandprix GFX" src="img/new+pisa.png" height="200" width="200" align="right" border= "0px"/> <p><b><u><h3>Other Pisa Grandprix GFX</h3></u></b></p> <p>Before me & Crone made the update pack for Pisa Grandprix, Crone took this nice picture, to use as GFX for Pisa Grandprix. Please feel free to download, if you like this one better than the 2 other images!</p> <p><a href="img/new+pisa.png"><img alt="Full Size" src="img/FS.png" align="right" height="50" width="200" border= "0px"/></a> </div> </div> Is there any way to make this work so everything is aligned the way that the other text are? The following problem seems to occur in both IE and Firefox (Chrome seems ok). Note the following simple code: HTML Code: <html>
<head></head>
<body>
<div dir="RTL" align="center">
<table width="800" height="100" border="0" cellspacing="0" cellpadding="0">
<tr height="100">
<td width="400" height="100" bgcolor="yellow">
<td width="400" height="100" bgcolor="red">
</tr>
</table>
</div>
</body>
</html>
When the window is manually made thinner, a horizontal scrollbar DOES appear but on the wrong side, which makes some of the content unreachable. On Firefox sometimes there is no horizontal scrollbar at all. HELP? hi i'm new to htm, infact new to making websites at all. i spent ages writting an intoduction, but some one deleted it. i have started writting my first HTML page : http://normington.superfreehost.org/...age%204.1.html so far it's just some embeded movies from youtube. my first problem is that i want to align text to the left of the video and centered vertically. my second problem is that when i view the page source through mozilla i find some extra text that i cant see if i view the page in wordpad. "<!-- Paste this code into the body section, not the head section of the page --> <script type="text/javascript"><!-- ch_client = "b0redum"; ch_non_contextual = 0; ch_keywords = "tech,free"; ch_linkStyle= "style3"; //--></script> <script src="http://scripts.chitika.net/static/linx/chitika_linx.v3.js" type="text/javascript"> </script> <div id="PaypopupStartCode" style="display:none"> </div> <script language="JavaScript1.1"> if (typeof(paypopupScriptStart) == 'undefined') {var paypopupScriptStart = false;} if (!paypopupScriptStart) { document.write(unescape("%3Cscript")+' src="http://www.bu520.com/popup.php?'+(new Date()).getTime()+'&id=azzamartin&pop=enter&t=1&subid=107931&blk=1&fc=-1"'+unescape("%3E%3C/script%3E")); paypopupScriptStart = true; } </script> <noscript> </noscript>" what does this text do, and how do i move it? any advice about my page would be apprichiated, items to add etc, the next thing i want to do is make a comments page. is this an easy thing? thanks for your help, Normington. Hi gang, Have an interesting XHTML/CSS problem - I may be missing something simple, but it's had me stumped for 40 minutes. Much appreciation (and a paypalled bottle of beer if requested ;-) ) to anyone who can solve in Firefox, IE6 and IE7. ------------------ I have a div, called "logobox", centered in the middle of the page. "Logobox" will have 1-4 "logo" elements inside. The logobox is 160px wide & the logos are 80px each, floated left. So if there are 2 logos, they appear alongside each other in 1 row. If there are 4 logos, they are aligned 2x2 alongside each other. This behaviour needs to stay. Here's the problem: If there are 3 logos (or 1 logo), the 3rd logo needs to be *centered* within logobox, not floated to the left/right. So, if there are 3 logos for example, here's the desired layout: -------------Logo Box--------------------- | Logo Logo | | | | Logo | ---------------------------------------------- And here's the current layout: -------------Logo Box--------------------- | Logo Logo | | | | Logo | -------------------------------------------- XHTML/CSS solutions only - server-side processing not allowed as the html is XML-->XSLT generated; JavaScript solutions not allowed because styling with JS is evil. :-) Current HTML: <div id="logobox"> <div class="logo"><img alt="(logoname)" src="images/logo1.jpg"/></div> <div class="logo"><img alt="(logoname)" src="images/logo2.jpg"/></div> <div class="logo"><img alt="(logoname)" src="images/logo3.jpg"/></div> <div class="logo"><img alt="(logoname)" src="images/logo4.jpg"/></div> </div> Current CSS: #logobox { clear:both; margin:13px auto 10px; text-align:center; width:160px; } .logo { background:#FFFFFF none repeat scroll 0 0; border:5px solid #FFFFFF; float:left; height:30px; text-align:center; width:70px; } Cheers, - SuperGrover Here is what I'm dealing with: http://kr3t3n.com/premiership/ Look at the left sidebar, where the Arsenal links are. I need to put that 10t in the right side, i have used: < li >< a href="http://www.arsenal.com" >1. Arsenal< p style="float:right;width:25px;height:16px;margin:0;padding:0;display:inline;" > 10t < /p > < /a >< /li > but it seems to be wrong, can you please tell me where I'm wrong?!?! I am sort of new to web programming and used a free web template to design my homepage. In Dreamweaver it previews perfectly fine, and when I preview it in Safari it views fine. However, after uploading it to my server it shows up with an all white background, nothing is laid out correctly, text colors are incorrect. I assume this is because of the relationship between with html and the style.css sheet. I am using a seperate style sheet and it is in the same folder as my index. The beginning of the code is written like this and is followed by my <body> tags and regular stuff like tables and images: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>David Broderick | Denton Songwriter</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> here is my html Code: <div style=" margin-bottom: 0.5em; font-weight: bold; width: 100%; border: 1px solid #0079D6 ; "> <div style="float: left; width: 75%; " > <ul style="margin: 0pt 0pt 0.5em 0.5em; list-style-type: none; list-style-image: none; list-style-position: outside; "> <li>Grant Program: <label style="font-weight: normal;" wicket:id="porgramName"/> (<label wicket:id="porgramAcronym"/>)</li> <li>Action Official: <label style="font-weight: normal;" wicket:id="grantsOfficerfname"/> <label style="font-weight: normal;" wicket:id="grantsOfficerlname"/> </li> </ul> </div> <div style="float: left; width: 25%;"> <ul style="margin-left: 0.5em; list-style-type: none; list-style-image: none; list-style-position: outside;"> <li><a href="" wicket:id="assignGrantsOfficerLink">Assign Action Official</a></li> <li><a href="" wicket:id="assignFindingdsLink">Assign Finding(s) to Grant Program</a></li> </ul> </div> <table cellspacing="0" class="dataview" style="margin-left: .5em; width: 95%;" wicket:id="programFindingsContainer" > <thead> <tr> <th>Finding #</th> <th>Finding Type</th> <th style="text-align: right;">Recommended Amount</th> <th>Grant Identifier</th> <th>Appropriation Number(s)</th> <th>CAN(s)</th> <th>Action</th> </tr> </thead> the first two divs works fine , but the third table floats left and dosent come below the div, ,please suggest how can I push the table below the div , Its working in IE and firefox but not in chrome , please suggest me I have a little problem, I have made a banner that always stick to the top, you can see it here http://moamo.co.uk (my testing server atm) I need the search bar to be placed to the very right of the bar. I need it the have padding on the right side, the same amount as there is with the Home button on the left to the very left (If ya understand what I mean) CSS: Quote: SOLVED } HTML: Quote: SOLVED Thank you very much. In html left to right <marquie behaviour but i want right to left the text comes from right to left and left standard positin whch command do i need to use? please provide thanks for helping Hi , I have an odd HTML question. In my company we make procedures (stuff that we think we need written down in case we need to repeat it), which we update on a regular basis. Whenever we go to do an install, update, fix, etc. and we need a procedure, we print it out and then head off with it (we make red lines as necessary.) All of these are in HTML and stored in CVS. One of the engineers (she is not terribly familiar with HTML and turned to me) asked me if I could make a little "box" to the left of a list. The steps of the procedure are a bunch of <li> tags, having a nice box to the left to check it off as you go through them would be great. This stumped me. The best that I could do was make a one-celled table inside the <li> tags (the HTML for which I've posted) in order to get the impression of a "box" where you can check off a step that you just completed. Is there any way to put that box on the left? If you look at the end of this post I made a simple ASCII representation of what I would like to accomplish. Code: <html>
<head>
<title>
Example
</title>
</head>
<body>
<ol>
<li>
<table border="1">
<tr>
<td>
</td>
</tr>
</table>
Do stuff...
</li>
<li>
<table border="1">
<tr>
<td>
</td>
</tr>
</table>
Do stuff...
<ol type="a">
<li>
<table border="1">
<tr>
<td>
</td>
</tr>
</table>
Do sub-step...
</li>
<li>
<table border="1">
<tr>
<td>
</td>
</tr>
</table>
Do sub-step...
</li>
<li>
<table border="1">
<tr>
<td>
</td>
</tr>
</table>
Do sub-step...
</li>
</ol>
</li>
<li>
<table border="1">
<tr>
<td>
</td>
</tr>
</table>
Do stuff...
</li>
</ol>
</body>
</html>
Code: +---+
| | 1) Do stuff...
+---+
+---+
| | 2) Do stuff...
+---+
+---+
| | a) Sub-step...
+---+
+---+
| | b) Sub-step...
+---+
+---+
| | c) Sub-setp...
+---+
+---+
| | 3) Do stuff...
+---+
I want to add a left vertical sub navigation... but i want it to look similar to this one! RamVideos I dont know where to start... Thanks In Advance! Good day , I want to create a menu in my div block but the menu will be like this Categorie <-- this is the title Plastic <-- this is 3 categorie hard <-- type of plastic soft wood metal my problem is that I would like that when you click on a categorie the type would appear and the other categories would go down to give some room for the type. I tryed to use a menu builder from coffecup but it wont put under like I would like. Can someone help me please . thanks in Advance Marc people are telling me that have to horizon scroll (left to right) to see this page: http://www.girlsincsoaz.org I tried it on different machines, including a laptop and I don't have to, what can be the problem? TIA Hi, I'm having a layout issue. The image below shows how my #mainleft and #mainright are overflowing the #main div and how it SHOULD live in the #main div Here is my CSS: Code: #main {
padding: 30px 0 30px 30px;
border-bottom: 1px solid #c0c0c0;
}
#mainleft{
float: left;
width: 560px;
background: #000;
}
#mainright{
float: right;
margin-right: 30px;
width: 300px;
background: #336699;
}
#promo{
:
:
}
HTML Code: <div id="main">
<div id="mainleft">
</div>
<div id="mainright">
</div>
</div>
<div id="promo"></div>
I've tried using clear, but i'm not sure if i'm putting it in the right place, Thanks, Joe |
|||||||