|
HTML - Html 4.0 Inline
Which doctype doesn't allow for inline? Right now every line break in my code, IE creates a space in the tables. How do I get rid of this?
Thanks, Alec Similar TutorialsI am designing the home page for a website. I have a list of links that is the site index that is 300px wide. I want this on the left side of the page. I want a paragraph that will basically be a introduction to the website to be inline with the index... sitting to the right of the index rather than below it. here is a simplified version of what I have: <body> <div id="wrapper"> <div id="head1"> <h1> page title </h1> </br> </div> <div id="list" <ul> <li> <a href="perps.html"> blah</a> </li> </br> <li> <a href="Why.html"> blah </a> </li> </br> <li> <a href="surveillance.html">blah </a> </li> </br> <li> <a href="me.html"> blah </a> </li> </br> <li> <a href="network.html"> blah </a> </li> </br> <li> <a href="mystory.html">blah </a> </li> </br> </ul> </div> <div id="intro"> <p> ***paragraph text****.</p> </div> </div> </body> CSS sheet: #list { width:230px; padding: 20px 0 0 20px; border-style: solid; list-style:none; } #intro { border-style:solid; float: right; padding: 0 0 0 0px; margin: 0 0 0 300px; border: 0 0 100px 0; } I know i need to use "span" but I have no idea where to start. Any help would be greatly appreciated. Hi, I am currently making a website, I have used an inline frame on my site, and I am having trouble getting it to do what I want it to! lol Basically, I have put a menu on the left of the page, and an inline frame in the middle, now, I want it so that when you click on a link on the left, the whole page stays the same, but the inline frame will go to the requested page. So basically, a website inside a website if you see what I mean. I have tried using <a href="http://address.com/page.htm" target="mainframe"> </a> but I still can't get it to work. If anyone has any ideas it would be great!! Thanks a lot. ps: I should also add, I am using tables on my site, and the menu is in a different table to the iframe, does that make a difference? I have browsed the search function and found some topics that are helpful, but when I try the codes that are stated on those pages, it creates another iframe on my page, but it works with that one, but the new iframe is always in the wrong place, I am using MS frontpage by the way, and I added my iframe by click insert, and inline frame. The code I used that worked, but put another iframe below the menu, was this one: <p><a href="http://www.websitename.com/page.htm" target="frame">About</a></p> <!-- #BeginEditable "content" --> <iframe id="frame" name="frame" width="580px" height="450px" scrolling="auto" frameborder="0" Your browser does not support frames or inline frames.</iframe> <!-- #EndEditable --> It is done like that, because the page I am linking to, isn't stored on my site, but I don't think that should pose a problem, as it should display the same as it would if it was stored on my server, or so I would have thought? I look forward to any replies, and I thank you for taking the time to read this long post. In a nutshell: --- The following <li> tags are inline-blocks. Why does removing the closing <li> tags fix the whitespace issue? Code: <li>Item one</li> <li>Item two</li> <li>Item three</li> Versus... Code: <li>Item one <li>Item two <li>Item three The context of this question: --- From: CSS display: inline-Block: Why It Rocks, And Why It Sucks The above post is about using inline-block instead of float to position <li> elements, which is useful for making navigation bars. There is one drawback to using inline-block: (You can copy and paste the first piece of code below to see what I'm talking about.) If you restrict the <ul> to a particular width, your navbar won't display correctly, which has something to do with hitting the RETURN key between your lines of code (whitespace issues?). See below: This works fine because there we didn't hit RETURN to create a line break between each list. <li>Item One</li><li>Item Two</li> Here, we hit RETURN to put each list on a separate line and now the code doesn't display properly. The first piece of code below illustrates this problem. <li>Item One</li> <li>Item Two</li> The second piece of code solves this problem by using comments to remove the whitespace. The third piece of code solves this problem by removing the closing <li> tags. My question is, how does removing closing tags change anything? Are there any issues I should be aware of if I use this solution? Are there other contexts where I can apply a similar technique? Code: <style type="text/css">
ul#display-inline-block-example,
ul#display-inline-block-example li {
margin: 0;
padding: 0;
}
ul#display-inline-block-example {
width: 300px;
border: 1px solid #000;
}
ul#display-inline-block-example li {
display: inline-block;
width: 100px;
min-height: 100px;
background: #ccc;
vertical-align: top;
}
</style>
<ul id="display-inline-block-example">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
Code: <style type="text/css">
ul#display-inline-block-example,
ul#display-inline-block-example li {
margin: 0;
padding: 0;
}
ul#display-inline-block-example {
width: 300px;
border: 1px solid #000;
}
ul#display-inline-block-example li {
display: inline-block;
width: 100px;
min-height: 100px;
background: #ccc;
vertical-align: top;
}
</style>
<ul id="display-inline-block-example">
<li>Item one<!--
--><li>Item two</li><!--
--><li>Item three</li>
</ul>
Code: <style type="text/css">
ul#display-inline-block-example,
ul#display-inline-block-example li {
margin: 0;
padding: 0;
}
ul#display-inline-block-example {
width: 300px;
border: 1px solid #000;
}
ul#display-inline-block-example li {
display: inline-block;
width: 100px;
min-height: 100px;
background: #ccc;
vertical-align: top;
}
</style>
<ul id="display-inline-block-example">
<li>Item one
<li>Item two
<li>Item three
</ul>
Hi, I need to seek some advice from the gurus he - 1) What are the benefits of using the new XHTML 1.0 compared to HTML 4.01 specification? Currently my website is using HTML 4.01 Transitional doctype. Will it affect the current site layout if I change to XHTML 1.0? Does this new format supports the older browsers like Netscape 2 and IE 3.02? 2) As we all know, there are two ways we can implement the CSS on a website. There are Inline CSS and External CSS methods. Some people claimed the Inline CSS will process faster as the codes are embedded into the HTML codes itself. Is it true? Also, is there any impact on the page size? Your comments are very much appreciated. Thank you. Cheers, Is their any shortcut to give inline css in Dreamviewer ? Since I am using Dreamviewer & I have to write Inline CSS explicitly & there is streachable facility in the control so that we can stretch & its appropriate width & height can be assign to its component ? Since I am getting it in dreamviewer & if any body knows how to do it then please let me know abt it ? Regards.... Hello everyone, I have a problem and it is driving me insane :/. I am trying to create 3 inline boxes (using span or div?) that are right next to one another (ie. with no borders). The two at either side are of length 25% and the middle is of length 50%. Here is my effort at coding it myself : Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
word-spacing: 0px;
}
.sideWrap {
top: 0px;
width: 25%;
height: 100px;
background-color: #0CF;
display: inline-block;
}
.sideWrap2 {
top: 0px;
width: 25%;
height: 100px;
background-color: #0CF;
display: inline-block;
}
.center {
padding: 0px;
margin: 0px;
left: 25%;
width: 50%;
height: 200px;
background-color: #0F0;
display: inline-block;
}
</style>
</head>
<body>
<span class="sideWrap"></span>
<span class="center"></span>
<span class="sideWrap"></span>
</body>
</html>
But unfortunately, this produces ... something I dont want .. as shown by the attachment. This clearly has inexplicable white borders that I have not coded :S, and the three blocks are not inline. Can anyone give a simple explanation as to how to put these in line and eliminate the border between them? Thanks in advance, mintsmike I have display:inline and its adding in two drop boxes that it shouldnt. After the drop boxes it then stops the inline. Im new to css, have only been trying it for the past couple of days. The two drop down boxes are suppose to be on the left, under the links at the top. Can someone explain to me why inline stops where it does? Thanks. Oh yeah, the links under <li> I know their to the wrong address's. body { font-family:georgia,'times new roman',times,serif; color:#BD0A70; background-color:#F2F2F2; } ul.navbar { list-style-type: none; padding:0; width:32em; float:left; } ul.navbar li { display:inline; font-size:125%; background-color:#007BA7; margin:.10em; } ul.navbar a,ul.navbar a:visited { color:#ffffff; text-decoration:none; } ul.navbar a:hover { background:#00008B; } form.jump { /* position: absolute; */ float: left; } div.floatright { /* position: absolute; */ float: right; } h1 { clear:both; font-family:helvetica,geneva,arial,SunSans-Regular,sans-serif; } ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>My first styled page</title> <link rel="stylesheet" href="mystyle.css"> </head> <body> <a charset="ISO-8859-1"> <!-- Site navigation menu --> <ul class="navbar"> <li><a href="index.html">Change email</a> <li><a href="musings.html">Change Password</a> <li><a href="town.html">F.A.Q.</a> <li><a href="town.html">Contact</a> <li><a href="links.html">Log out</a> <li> </li> </ul> <form class="jump" action="/reredirect.php" align="left" method="post"> <input type ="text" name="userpage" size="17" value="Jump to user page" onFocus="this.value=''"> <img src="cooltext406694699.png" align="absbottom" onmouseover="this.src='cooltext406694699MouseOver.png';" onmouseout="this.src='cooltext406694699.png';" input type="submit" value="Submit" name="submit"></img> </form> <div class="floatright"> <script type="text/javascript"><!-- /* 234x60, created 11/22/08 */ google_ad_slot = "0343255875"; google_ad_width = 234; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> <!-- Main content --> <table> <tr> <td> <form method="post" action="/redirect.php" name="event"> <select name="select" class="breakinline" onChange="this.form.submit()"> <OPTION SELECTED>Select friend <OPTION value="/users/sharon">name1 <OPTION value="/users/carrie">name2 <OPTION value="/users/capy">name3 <OPTION value="/users/charla">name4 </SELECT> </FORM> <td> <form id="myeventz" method="post" action="/changeevent.php" name="myevent"> <select name="myevent" class="tabletxt" onChange="this.form.submit()"> <OPTION SELECTED=>12/25 Christmas</option> <OPTION value="0101 Event One">01/01 Event one <OPTION value=" 0202Eventtwo">Remove this event <OPTION value=" ">Add a new event </SELECT> </FORM> </td> </tr> </table> <p>Select item's to remove</p> Well, i'm not sure i'm gonna use this snippet but i can think of plenty reasons why i might: Code: <h4 style="display:<?php print $display; ?>"> It won't validate because, quote: "character "<" is the first character of a delimiter but occurred as data." Maybe i've been staring at it too long but i don't see the difference from any other php statement, which the validator should simply not parse. ?? Thanks, Joey I'd like to open an inline frame on my site. I've got the code this far; however I cannot find out how to finish it. I need to knowhow to get it to open at a certain spot on the page. So like an example would be I want it to open at spot x on a page. How would I code this to open it at that spot? Code: <html> <body> <iframe src="default.asp" width=125px height=125px></iframe> </body> </html> This question might be rather basic. I'm not a web-developer, though I have a lot of other coding experience. As part of an internal webpage I'm creating, I want to access a webservice that returns a string and display it on the page. The service is accessed by URL, and requires parameters that are dynamically generated base upon the request parameters, so I can't just use #include. What I want to see is something like this, where the number string is provided by the webservice: Authorization code: 1343-7205-7570-8264 I tried this: Code: Authorization code: <object type=text/plain data="http://blah/service?params"></object> IE doesn't output the resulting string. Firefox does output the string, but it's not cleanly inlined with the rest of the text. It has it's own big block of the screen that the text sits in. Is there a simple way to insert the text from a dynamically generated URL into the current page? I am trying to create a pop-up window from a link that is within an inline frame. I know the code I am using is correct as when I place the link outside of the inline frame, it works perfectly. It is when the link is placed within the inline frame that it acts up - it opens itself like a regular link within the frame (except that all my pages have frame break on them so it just works to open the page within the same window). This is the code I am using for the frame in my head section... <SCRIPT TYPE="text/javascript"> <!-- function popup(mylink, windowname) { if (! window.focus)return true; var href; if (typeof(mylink) == 'string') href=mylink; else href=mylink.href; window.open(href, windowname, 'width=1000,height=700,scrollbars=no'); return false; } //--> </SCRIPT> and this is the script I am using for the link itself... <A hREF="news.html" onClick="return popup(this, 'notes')"><img align="right" src="news.jpg" border=0></A> This is my website I'm testing this on: www.kingsfieldfarm.net/index3.html The lower link (outside of the inline frame) works. The link inside the frame does not. Can anyone help me? Thanks! (and PS: Does anyone know how to centre the pop up window and get rid of the address bar?) Hi, I was wondering if someone could explain block and inline elements. I know they deal with word wrap but, I have read and I am still confused on how you know what is a block element and what is an inline element. Can someone provide some aid? Thanks. Here's my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>MyTitle</TITLE>
<STYLE type="text/css">
.quanswer { border:1px solid #00c; }
.quanswer img { margin-right:5px; cursor:pointer; width:20px; }
.text { display:inline; color:#bbb; background:#000; }
</STYLE>
</HEAD>
<BODY>
<DIV class="quanswer">
<IMG src="graphics/qucheckbox_normal.png">
<DIV class="text">Agree</DIV>
</DIV>
<BR>
<DIV class="quanswer">
<IMG src="graphics/qucheckbox_normal.png">
Disagree
</DIV>
</BODY>
</HTML>
It references a 20x20 PNG image but you should get the idea wiithout such an image. All I want to do is make the text vertically-aligned to halfway up the image. Centralised, in other words. I've been trying to do it by adding a bottom margin to the text, or by adding a negative top margin to the image, but nothing works! I've got a feeling I'm forgetting something really obvious... Please help, Seymour. Hi, i've been banging my head against the wall trying to find a solution, and have eventually given in..! I'm creating an html email that has an image in it. Easy When that email is received and the user prints, it replaces the image with another more print friendly version. Easy using media:print in a style. However, when the user then replies to the email, all of the <style> in the <head> is wiped and the large un-printer friendly image remains. The only solution would be to put all styles inline within the <body>. So the question..! Any ideas how to replicate this process only coding within the body? thanks, J I am a newbie in HTML. I would like to be able to display an inline image with a caption (that just display inline as a big character). I have googled a lot but found no satisfying solution. Any suggestion for that? OK I have a home page that has several inline frames. All the action happens in one of the frames in the middle. Now what I want is when they click on a link in this main pane it loads the new page in said frame, but moves the browser back to the top of the parent frame, which is still home.html. The site I'm working on can be accessed at http://www.awardworks.com I tried using an onLoad with a java function that performs: window.scrollTo(0,0); but this didn't work hello everybody! I want to know if is possible to: set a link to another page which has an inline frame (e.x. name="I1") and change the inline frame source. Thanks I obviously don't understand layouts as well as I thought I did. I've cut down my last problem so I can upload a page for you to see and the source code for you to play with. Can anyone tell me why I get 3 different displays between IE 6, 7 and mozilla. what I want is for each row to fill the table 100% in height even though the number of lines are different. see the page here Thanks in advance Hi all, Sorry if this has been answered already. I've done a search, and couldn't find it. I'm a copywriter who maintains his own HTML website with Notepad. But I'm very ignorant of CSS use. In other words I know enough HTML to get myself into trouble, but nowhere near enough to get myself out! I've just realised that the borders around the images on my portfolio page no longer display. I'm sure they used to. Here's the essence of the code: <img src="images/image.gif" border="1" style="border: gray"> But they work fine when I remove the style tag. But then they appear black, and I want them gray. I'm using some font substitution code (SiFR or something like that). Not sure if that's relevant. I've noticed it's caused some strange problems in the past. Would greatly appreciate it if someone could help. Cheers. Can anyone tell me why, in the code below, the yellow box is lower than the red one? I can't work out why they're not aligned. If I change the boxes' innerHTMLs so that the yellow one contains more text than the red, the red one is lower down. I don't understand why this is happening! Code: <!DOCTYPE HTML> <html> <head> </head> <body> <div style='background-color:blue; '><span style='display:inline-block; width:300px; height:200px; background-color:red; '>h gfh difd fk kl;fd ;fdk fdg fdklfd fd fdk kfng yh gi5ut rgfmr fkfmn lpke</span><span style='display:inline-block; width:300px; height:200px; background-color:yellow; '>yh gi5ut rgfmr fkfmn lpke r8nfd dsjnf psdn sd</span></div> </body> </html> |
|||||||