|
HTML - Position Absolute / Align All Span Areas
Hi there,
Im kinda stuck. I would like these following areas: <span class="text">xx</span> <span class="icon">xx</span> .. to ALL be positioned at the same place when being hovered.Problem now is that they keep appearing besides their "button": Have a look here to see what I mean. Have a look here for the source, hope im making sense, thanks. Similar TutorialsHowdy all, I have three scrolling divs that i want to be the height of the page, so i'm guessing position:absolute and height:100% will do that just fine. But i want these three scolling divs to be inside a position:fixed element so that they stay put when scrolling down the page. Is this possible? I dont think a pos:absolute will work nested inside a pos:fixed. How could i work around it? thanks! 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, I am looking for the easiest and reliable solution to make the "View on Google Maps" image to look like here http://www.dublinbynumbers.com/troubleshooter.html instead of here http://www.dublinbynumbers.com/categories/cinemas The solution should work in both IE/FF and any screen resolution. Thanks in advance for your help, Sorin Hello everyone, I've go this code here for positioning the "comments and frieands" together in in a scroll box at the bottom of the page. But I'd like to put it in a sertante position. Could anyone plaese help me find out were and what to put in this code. And for more information this is a code I want to put within a "div" image and place it in relation to were the image is (0,0) not were the page starts (0,0). -------------------------------------------------------------------------------------------------------- <i class=i> <a href="http://xiii.us/ms/center-friends-and-comments"</a>scroll center friends and comments</a></i> </td></tr></table> </td></tr></table> </td></tr></table> <div class="myDClassFC"> <table><tr><td> <table class="off"><tr><td> <table><tr><td> <style> .i {display:none;} div.myDClassFC {height:400px; overflow:scroll; overflow-x:hidden} </style> <i class="i">!-END Block to put Friends and Comments in a Scroll Box-! </i> ----------------------------------------------------------------------------------------------------- Well I appreciate everyones thought. hello, i'm having problems with a website. If you look at the following url you can see the problem. http://www.r-media.nl/vaassen problem When you look at the footer it stays at his absolute position but the holder stops filling in the background color. I would like to have the footer at the bottom and when you resize the screen the holder has to grow with it. Can someone tell me how to do this? Here's my current script: Code: <BODY> <!--Menu--> <div id="menu"> <ul id="menu_list"> <li>Hoofdpagina</li> <li>Informatie</li> <li>Nieuws</li> <li>Agenda</li> <li>Contact</li> <li>Adverteren</li> </ul> </div> <!--End Menu--> <!--Center--> <div align="center"> <!--Holder--> <div id="holder"> <!--Logo--> <div id="logo" align="left"><img src="images/logo.png" width="250" height="150" alt="Vaassen.nu"></div> <!--End Logo--> <!--Content--> <div id="content"><img src="images/cannenburgh.jpg" width="600" height="400"></div> <!--End Content--> </div> <!--Holder--> </div> <!--End Center--> <!--Footer--> <div id="footer"></div> <!--End Footer--> </BODY> And here's my CSS Code: /*CSS Document*/
html,body
{
margin: 0px;
padding: 0px;
height: 100%;
background-image: url("images/bg.gif");
}
/*Holder*/
#holder
{
width: 990px;
height: 100%;
background-color: #EDEDED;
}
/*End Holder*/
/*Logo*/
#logo
{
width: 100%
}
/*End Logo*/
/*Menu*/
#menu
{
width: 1020px;
height: 50px;
position: absolute;
top: 125px;
right: 50%;
margin-right: -510px;
background-image: url("images/menu_bg.png");
background-repeat: no-repeat;
}
#menu_list
{
width: 95%;
margin: 0px;
padding: 0px;
z-index: 999;
}
#menu_list li
{
width: 100px;
height: 35px;
margin: 0px;
padding: 0px;
list-style: none;
line-height: 35px;
float: left;
text-align: center;
font-family: Arial, Verdana, Sans-serif;
font-weight: bold;
font-size: 10pt;
color: #f7f7f7;
cursor: default;
cursor: pointer;
}
/*End Menu*/
/*Content*/
#content
{
margin: 10px auto;
width: 100%;
background-color: #EDEDED;
}
/*End Content*/
/*Footer*/
#footer
{
width: 1020px;
height: 50px;
position: absolute;
bottom: 5px;
right: 50%;
margin-right: -510px;
background-image: url("images/footer_bg.png");
background-repeat: no-repeat;
text-align: left;
text-indent: 1.5em;
font-family: Arial, Verdana, Sans-serif;
font-weight: bold;
font-size: 10pt;
color: #f7f7f7;
line-height: 35px;
}
/*End Footer*/
Thanks in advance! Hey everyone, got a problem with an element that is relatively, or absolutely, positioned (I've tried both methods and both produce the same results). Take a look here with anything but Internet Explorer: http://zachi.teamtreetops.com *Screenshots of whats wrong in IE* The "bottom" div element is off in both cases. ie5 ie7 Code: div#bottom{
height:11px;
width:411px;
background-image: url(images/bottom.png);
position:absolute;
}
Complete style sheet Any insight on the issue would be much appreciated! This is the code I'm using to put flash in, Code: <object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="200" width="200" data="http://www.amarasoftware.com/slideshow.swf"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.amarasoftware.com/slideshow.swf" /> <param name="quality" value="high" /> </object> .. I want to put this flash in an absolute postition Code: position:absolute; top:730px; left:30px; That is an exsample of how I did it with an image. How would I make my flash be absolute postition.... were should I put it. Thanks, i have a web page that so far tested well in every browser except IE 7 - see: www.finlayprints.com/Imprintables_Wedding3.html does anyone have an idea why: 1) red wedding gif image does not align in IE 7 the way it does in every other browser? it's absolute positioned. 2) the text "5x7 imprintables..." is actually overlapping the previous floated box in IE 7?? scratching my head trying to figure out, spewing expletives at the screen here... thanks his may be a dumb question but how do you get a table to align to the absolute top of a webpage? Thx Snaps01 Hi, I need to embed some HTML content in a container, so that the content's elements anchored at absolute position 0 will actually follow the container's position. What should I use as container? Frame, DIV, IFrame? Thanks! I've been running an ad on my site using the Google Double Click program since March with no problems. Suddenly this week, despite not even logging into Doubleclick or making any changes to the code on any of my pages, one of my larger ads is jumping outside of the space allotted for it and into my text. To make it even stranger, it will only do this periodically. IOW, sometimes the ads are being served correctly, but sometimes they get messed up. You can see this happening on this page: http://www.raw-food-health.net/NaturalCures.html Continue to hit refresh as my ads cycle until my large green/yellow square ad to the top left of the center column for "The Raw Food Lifestyle Ebook," appears. Keep hitting refresh over and over again. It might take a dozen times or more. I've seen this happen in firefox and Safari. I've cleared my cache. You'll see that sometimes it appears within its normal area, but sometimes it "jumps" out and partially covers the text to the right of it. Since I haven't done anything to my site or my doubleclick settings , I don't know what to make of this. I've already sought help on the Doubleclick forum, but the consensus there seems tobe that it is not a DC issue, but an HTML issue. You can see lengthy discussion about it here. Let me know if there are any other questions. Any help you could give me would be greatly appreciated. Thanks, Andrew Here's a link to the page I'm currently working on. http://www.vancouver4condos.com/test/ The big map picture is set up as an image map, with all the areas already specified. Each area gets highlighted when viewer hovers the cursor over it. Also, right above the map is a navigation menu, with all the buttons corresponding to each of the areas on the image map below. I was wondering if there is a way to connect each of the navigation buttons with their corresponding map image areas in such a way that when the user hovers the cursor over a button, its map area will automatically get highlighted. Ideally, the opposite would also be true - when hovering the cursor over one of the map areas, its corresponding navigation button would also highlight. This is really strange. Normally I would expect to see something like this happening on pure CSS sites, but this is a good old fashioned table-based layout. If you go to: url and try to click on any of the menus, you'll see the menu item below it moves up. Also if you click on the logo it jumps down to the menu area? Very bizarre and have never seen this behavior in the 10 years I've been coding. Any insight would be greatly appreciated :-) 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 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 Does anybody know how to get the grab hand image for the onmouseover event for spans? 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!! |
|||||||