|
HTML - Beginner Help Div/span Code
Ok, this is all very new to me. Just messing round trying to get things to work at the moment mainly how to use div and span.
So I've set up two pages in notepad one for html and one for css and they look like this. html Quote: <html> <!---Anchor for CSS page---!> <link rel="stylesheet" type="text/css" href="css.css"> <head> </head> <!---Body of page---!> <body> <!---Div tag for centered page margin---!> <div class="one"> <h1><center>THE CIVVIES.</center></h1> <hr> <!---Division for bottom of Heading---!> <div class="two"> <img src="images/civvies.jpg"> </div> <div class="three"> the civvies </div> </body> </div> </html> css Quote: div.one { left: 165px; top: 4px; bottom: 20px; width: 900px; length: 600px; position: absolute; border: 10px solid black; } h.1 { align:center; font-size:150%; font-family: courier; } div.two { left:165px; length:50px; border: 5px solid black; } Div.three { left:600px; right:10px; top:20px; width:200px; border:5px solid black; } Now this all works fine until div three...i've got a simple page title that seperates from the rest, the page centers itself, the picture alligns left under the header and takes up half the page to the bottom basically splitting the remaining space into two. Now on the right hand side i was hoping to be able to put content which is what div three was for unfortunately It doesn't seem to want to go where I'm asking it to. Any chance somebody could pop in here and just give me a right hand side of the page to work with for content? also possibly show me how to insert a navigation table above the picture but after the dividing line between the header and the picture? Like I said I'm very new at this. Similar TutorialsAll my code is filled with these <span> tags in my html page, but not all of my code. How can I remove these tags and make a better structured layed out web page. When I remove the <span> tags, I will need an alternative html tag to replace the <span> tag. My <span> tags store stuff about my web page, so I need a html tag that is a replacement and a structured way to put my data in the web page. Any expertise would be great. Thanks, Chris Hi, I'd like to ask a newbie question. I've Googled this to death but as always there isn't a single view so I thought I'd ask the experts here. I have a piece of information - it doesn't really matter what it is but it is accompanied by an image. With the increase use of css sprites, I know find myself using background-image to set the image. The overall effect would look like this <image> some text. This needs to go inline and have a fixed height so that the image shows. There are also other bits of information on the same line. Do I make the containing unit a DIV and float it or make it a SPAN and use display:block? I don't particularly wan't to use display:inline on a DIV because it's not supported correctly in IE. What would you do in this case? Thanks John What exactly do the Span and Div tags do? I've read definitions on the web: "defines a block of text," etc., but I don't see any examples of what the difference is from normal text to text that is used using the span and div tags. Could someone provide any examples? Thanks, Brad Does anybody know how to get the grab hand image for the onmouseover event for spans? Hi, I have build up a mouseover functionality that shows a light gray boks around the 4 categories on the frontpage on http://www.jjas.dk. It works perfectly under all the browsers except IE6 and IE7. In this browsers I can only click on the text placed right from the picture. But when I try to click on the picture or the picture related text, nothing happens. Now, after I had used 5 days finding a solution I'm giving up. There is nothing wrong with the code at all, so why is it, that it won't work under Internet Explorer? This is the code I'm using: HTML Code: <div class="row">
<ul>
<li>
<a href="/produkter-og-loesninger/komponenter.aspx">
<span class="picture">
<img src="/media/3899/komponent-teaser.jpg" alt="Agenturprodukter" />
<span class="content">
<strong>Agenturprodukter</strong>
<small>Vi er forhandler af flere produkter. </small>
</span>
</span>
<span class="right_content">
<h2>Handelsvarer</h2>
<small>Vi forhandler passive og perifere komponenter.
Kabinetter, keyboards, displaysystemer m.v.</small>
</span>
</a>
</li>
</ul>
</div>
CSS Code: #top_section .row {
float:left;
width:948px;
}
#top_section .row ul {
float:left;
width:948px;
list-style:none
}
#top_section .row li {
float:left;
width:474px;
}
#top_section .row li a {
float:left;
width:440px;
padding:10px;
height:145px;
text-decoration:none;
cursor:pointer;
border:1px solid #eeeeee;
}
#top_section .row li a:hover {
float:left;
width:440px;
height:145px;
background:#dddddd;
border:1px solid #d3d2d2;
}
#top_section .row li a .picture {
float:left;
width:220px;
position:relative
}
#top_section .row li a .picture img {
float:left;
z-index: -1;
}
#top_section .row li a .picture .content {
float:left;
width:210px;
background:url(../common/images/picture_content_bg.png) repeat-x 0 0;
padding:5px 0 0 10px;
position:absolute;
bottom:0;
left:0;
height:41px
}
#top_section .row li a .picture .content strong {
float:left;
width:210px;
font:bold 12px/14px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
}
#top_section .row li a .picture .content small {
float:left;
width:210px;
font:11px/13px Verdana, Arial, Helvetica, sans-serif;
color:#fff;
padding:3px 0 5px
}
#top_section .row li a .right_content {
float:left;
width:200px;
padding-left:20px
}
#top_section .row li a .right_content h2 {
float:left;
width:200px;
font:bold 18px/20px Arial, Helvetica, sans-serif;
color:#336699;
}
#top_section .row li a .right_content small {
float:left;
width:200px;
font:12px/17px Verdana, Arial, Helvetica, sans-serif;
color:#666;
padding-top:3px
}
You can see it live on: http://www.jjas.dk/ (right under the slideshow) I really hope someone out there can help me with my problem. I guess it's pretty easy, though I haven't found the easy part yet Kind regards, Niels Kristiansen I'm trying to use the SPAN tag to override a DIV's attributes wherein it is initially TEXT-ALIGN: LEFT;. I thought for sure that I could override it with the SPAN tag but no luck. I'm doing it this way because I want a portion of the content in the DIV to align left and the other to align right. 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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#quote { width: 500px; }
#quoteTop { width: 460px; height: 40px; padding: 0 20px; background: url('images/quoteTop.gif'); text-align: left; }
#quoteMiddle { width: 460px; padding: 0 20px 20px; background: url('images/quoteMiddle.gif'); text-align: left; }
#quoteBottom { width: 460px; height: 80px; padding: 0 20px; background: url('images/quoteBottom.gif'); text-align: left; }
</style>
</head>
<body>
<div id="quote">
<div id="quoteTop">
<span style="text-align: right;"><a href="/">top</a></span>
</div>
<div id="quoteMiddle">
blah blah blah blah blah blah blah <em>blah blah blah</em> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah <strong>blah blah blah</strong> blah blah blah blah blah blah-blah blah—blah blah blah blah blah blah blah blah blah BLAH! blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
<div id="quoteBottom">
J. Doe
</div>
</div>
</body>
</html>
Is overriding code a bad idea for what I'm trying to get done? Hi, My document contains below span class: <P> <span class="ErrorText"> <img border="0" src="/wps/images/icn_alert_error.gif" class="DialogIcon" align="absmiddle"/>Path does not exists </span> </P> I want to check for existance of this class in document(jsp) using below function: function preview(){ ..... .... ...... (contentPath is textfield) if(contentPath==null || contentPath.length==0){ alert("Please select a content fragment before attempting to preview"); } else { here i want to check whether above mentioned span class exists in document or not if span class exists then proceed for next step.. else break ..... ............... .... } } Hi Everyone, I am using 'span title' as a means to display a tool tip. Some of the tooltips are quite long and the popup is disappearing before the user would have a chance to read it all. Is there any means to delay the length of time that the tooltip will appear without the user having to hover over the text again. An example of one of these tooltips is below: <span title="As dentistry has advanced beyond basic care into new areas such as implantology, cosmetics, and other treatments of the entire dento-maxillo-facial complex, so too must the diagnostic tools keep pace with the need for a higher quality of general and specific information. Our surgeries are fully equipped with X-ray machines and in-house film processors. This enables our patients to get their diagnosis results instantly and treatment plan drawn up effectively in one visit."> Periapical film (small dental film) </span> I really appreciate any help you could offer? Thanks Cathal Hi, I have a huge text that i need to display in a span tag on my page. Currently the words are breaking at the end of the line, i.e. if the word if "Understand" and there is not enough space to display the entire word, half of the word is displayed in the space available, and the remaining on the next line. However, i want that the entire word be displayed on the next line. Please suggest how this can be done. Regards, Ankit!! Hey guys, so I'm building my script right now and it's going quite well. I used Javascript to capture input from text box and display it later using the <span id=''> command. What I'm trying to do is show the <span id=''> in more than one spot. For whatever reason it won't let me do this, it will only display in one spot and not the other. So to clarify, I used the var bride = document.getElementById('bride').value; document.getElementById('bride2').innerHTML = bride;(sorry for the javascript) and then used span id later to display it which works fine when you only want to display it in one spot. When I go to display it in two spots, I believe the span id tags are getting confused with each other and fighting. Is there any way to fix this? What could be wrong with my html or dreamweaver settings? I have code similar to following: Code: <div id="mydiv"> <span id="myspan"> <p>Some <em>text</em> here</p> <p>Some more text here</p> </span> </div> If I select the word 'text' in Design view and make it not-emphasized/Italics, the code changes to: Code: <div id="mydiv"> <p><span>Some text here</span></p> <span> <p>Some more text here</p> </span> </div> So it's decided to remove the id attribute from the span and move the span inside the paragraphs, and since there's two paragraphs, there's an extra span as well. The result is the same even if the span is outside the div. Even if the code is wrong, why is dreamweaver fixing it when I'm just trying to do something unrelated. (The em tag is not the only one that causes this to happen.) ere's what I need to do: I have several variables that I want to assign to various spans within a page (i.e. customer_name, customer_address, etc.). Now, I am going to have more than a 1 span that I dynamically need to assign the customer_name to. But I want it to be able to do so without me having to name them all "customer_name1, customer_name2, customer_name3" and then having to go through and manually change each one, one-by-one within the function. What I'd like to do is ultimately have the function loop through every span with the name or id of "customer_name" and change the innerHTML within it to whatever the value of the costomer's name variable is ("John Doe" for example). I've tried a few ways, most of the time it only changes 1 instead of all of them. Can anyone help? Here's what I need to do: I have several variables that I want to assign to various spans within a page (i.e. customer_name, customer_address, etc.). Now, I am going to have more than a 1 span that I dynamically need to assign the customer_name to. But I want it to be able to do so without me having to name them all "customer_name1, customer_name2, customer_name3" and then having to go through and manually change each one, one-by-one within the function. What I'd like to do is ultimately have the function loop through every span with the name or id of "customer_name" and change the innerHTML within it to whatever the value of the costomer's name variable is ("John Doe" for example). I've tried a few ways, most of the time it only changes 1 instead of all of them. Can anyone help? Hi every one I have a quick question. I'm building and interface this is make of unordered list items. Those list items are contained in a span so that interface can have separate look for the other links on the page. But when I validate my page in Dreamweaver I get some page errors that. Here is the error: The tag:"span" is not allowed within: "ul" It is only allowed within: a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, h1, h2, h3, h4, h5, h6. . ..[XHTML 1.0 strict] Now here is the code in question: HTML Code: <ul id="nav">
<span class="left_links">
<li class="nav_items_00"><a href="index.html">Home</a></li>
<li class="nav_items_00"><a href="services.html">Services</a></li>
<li class="nav_items_00"><a href="gallery.html">Gallery</a></li>
<li class="nav_items_00"><a href="events.html">Events</a></li>
<li class="nav_items_00"><a href="http://hsgsphoto.wordpress.com/" target="_blank">Blog</a></li>
<li class="nav_items_00"><a href="about.html">About</a></li>
</span>
The page that you can see this code in action is located at: http://www.hsgsphoto.com I guess my question is what would be the best practice in this situation. I need the a way to tell this group of links to act different then links in other parts of the page but the error I'm getting in validation is that list items (li) tags are not to be used within a span. Thank you so much for any feed back and help John ere's what I need to do: I have several variables that I want to assign to various spans within a page (i.e. customer_name, customer_address, etc.). Now, I am going to have more than a 1 span that I dynamically need to assign the customer_name to. But I want it to be able to do so without me having to name them all "customer_name1, customer_name2, customer_name3" and then having to go through and manually change each one, one-by-one within the function. What I'd like to do is ultimately have the function loop through every span with the name or id of "customer_name" and change the innerHTML within it to whatever the value of the costomer's name variable is ("John Doe" for example). I've tried a few ways, most of the time it only changes 1 instead of all of them. Can anyone help? ere's what I need to do: I have several variables that I want to assign to various spans within a page (i.e. customer_name, customer_address, etc.). Now, I am going to have more than a 1 span that I dynamically need to assign the customer_name to. But I want it to be able to do so without me having to name them all "customer_name1, customer_name2, customer_name3" and then having to go through and manually change each one, one-by-one within the function. What I'd like to do is ultimately have the function loop through every span with the name or id of "customer_name" and change the innerHTML within it to whatever the value of the costomer's name variable is ("John Doe" for example). I've tried a few ways, most of the time it only changes 1 instead of all of them. Can anyone help? _________________ Бары Киева Рестораны Киева Hi everyone, I was just wondering if it was possible to modify an element from the style tag for example: HTML Code: <style>
.homepage { font-family: Arial, Helvetica, sans-serif; font-size: 50px; color: #ffffff;}
</style>
<span class="homepage">onomotopeia</span>
I was wondering if something like this was possible: HTML Code: <% bcolor = "#0000ff" %> <!-- ASP code -->
<style>
.homepage { font-family: Arial, Helvetica, sans-serif; font-size: 50px; color: #ffffff;}
</style>
<span class="homepage.color=<%=bcolor%>">onomotopeia</span>
So, what I'm trying to do is have the variable called "bcolor" access the color attribute of the .homepage. I know I could have easily changed the color in the style from #ffffff to #0000ff but I want to be more dynamic, does anyone have any suggestions? The adage of 'give a man a fish and he'll be fed; give a man Dreamweaver and he thinks he's a designer' is alive and well with these glitches. http://www.zenarchy.co.uk/test11.htm is a design draft and there are two problems. The first is that the central span that houses 'High quality call recording software' doesn't match up to the end and sit flush. It's almost there in firefox but is miles off in IE. I'd like it to work in both. <td width="100%" height="22" bgcolor="#91a2a0"> <p align="center"><b><font color="#FFFFFF" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>High quality call recording software</strong></font></b></td> is the code I've identified as relevant, but opening the hood and checking the source might be wiser! 2. How do I extend the columns on either side to sit flush at the bottom against the graphite baseline? Your thoughts please (aside from get a pro to do it...) Cheers! ere's what I need to do: I have several variables that I want to assign to various spans within a page (i.e. customer_name, customer_address, etc.). Now, I am going to have more than a 1 span that I dynamically need to assign the customer_name to. But I want it to be able to do so without me having to name them all "customer_name1, customer_name2, customer_name3" and then having to go through and manually change each one, one-by-one within the function. What I'd like to do is ultimately have the function loop through every span with the name or id of "customer_name" and change the innerHTML within it to whatever the value of the costomer's name variable is ("John Doe" for example). I've tried a few ways, most of the time it only changes 1 instead of all of them. Can anyone help? |
|||||||