Randomishlying Posted January 6, 2012 Share Posted January 6, 2012 I'm confused about why a paragraph element is acting a certain way. I don't know how a p element is suppose to act, so I don't know if this is my fault.The paragraph is on the right side of an image with a float left, and the text in the paragraph element stays to the right of the image as I imagined it would. However, the paragraph element itself is also covering the image so that the image is not selectable.I've since changed the paragraph element to a span and it seemed to fix the problem, but I'm still confused about why the paragraph element did that. Is there some way to define the size of a p element, or perhaps some other way to fix this problem? Here's a snippet or the original code: Basically part of the <p id="wedText"> was over top of <img id="weddingLimo"<div id="weddings"><img id="weddingLimo" src="images/wedding-limo.jpg" width="168" height="112" alt="Wedding Limo Image" /> <span id="wedHeader">WEDDINGS</span> <p id="wedText">Trust us for all your wedding and special occasion transportation needs for wedding party, friends and family.</p></div>}#weddings { position: absolute; left: 10px; top: 20px; height: 111px; width: 334px; vertical-align: middle;}#weddingLimo { float: left; margin-right: 13px;}#wedHeader { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: bold; color: #666; position: relative; top: 4px;}#wedText { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; color: #666; position: relative; top: 12px;} For a closer look at my code (current):HTML - <!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>Sarasota-Tampa Express Homepage</title><link href="all.css" rel="stylesheet" type="text/css" /><script type="text/javascript">function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}</script></head><body id="theHeader" onload="MM_preloadImages('images/homeActive.png','images/about-usActive.png','images/route-and-scheduleActive.png','images/flight-informationActive.png','images/fareActive.png','images/one-way-over.png','images/round-trip-over.png','images/one-way-over2.png','images/round-trip-over2.png')" ><table id="headerTable" border="0" cellspacing="0" cellpadding="0"> <tr> <td id="logoBox"> <img src="images/Sarasota-Tampa-Express-Logo.png" width="205" height="75" alt="Logo" /></td> <td> <div id="rightsideHeader"> <p id="tagLine">We make things convenient for you! <span id="phoneNumber">Call Today! (941)366-6600</span></p> <div align="left" id="navigation"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/homeActive.png',1)"><img src="images/home.png" alt="Home" name="Home" width="82" height="33" border="0" id="Home" /></a><a href="thanks.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('AboutUs','','images/about-usActive.png',1)"><img src="images/about-us.png" alt="About Us" name="AboutUs" width="110" height="33" border="0" id="AboutUs" /></a><a href="thanks.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Route','','images/route-and-scheduleActive.png',1)"><img src="images/route-and-schedule.png" alt="Route & Schedule" name="Route" width="178" height="33" border="0" id="Route" /></a><a href="thanks.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FlightInfo','','images/flight-informationActive.png',1)"><img src="images/flight-information.png" alt="Flight Information" name="FlightInfo" width="184" height="33" border="0" id="FlightInfo" /></a><a href="thanks.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Fare','','images/fareActive.png',1)"><img src="images/fare.png" alt="Fare" name="Fare" width="70" height="33" border="0" id="Fare" /></a></div> </div> </td> </tr></table><table id="mainTable" width="1024px" height="174px" align="center" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="top" colspan="2" valign="bottom"><img align="middle" alt="Introductory Homepage Image" src="images/shuttlebus.png"><p id="welcome" align="left">Welcome to Sarasota - Tampa Express</p><p id="statement" align="left">Sarasota-Tampa Express offers regular daily round trip shuttle service<br>to and from Tampa International Airport.</p></td> </tr> <tr> <td id="bottomLeft" align="left" valign="bottom"> <p id="otherServicesText">Other Services</p> <div id="otherServicesBoxes"><img src="images/other-services.png" width="348" height="300" alt="Other services background" /> <div id="weddings"><img id="weddingLimo" src="images/wedding-limo.jpg" width="168" height="112" alt="Wedding Limo Image" /> <span id="wedHeader">WEDDINGS</span><br /> <span id="wedText">Trust us for all your wedding and special occasion transportation needs for wedding party, friends and family.</span></div> <div id="events"><img id="eventBus" src="images/event-bus.jpg" width="179" height="112" alt="Event Bus Image" /> <span id="eveHeader">SPORTS EVENTS</span><br /> <span id="eveText">Let us be your means<br />of transporting all your family, friends, and<br /> their friends to that<br />next big game.</span></div> </div> </td> <td class="bottomRight" align="center" valign="top"> <p>Rental Fleet</p> <img width="552" height="140" alt="Rental Fleet" src="images/rental-fleet.png"> <p id="limoVans">Our limo vans get your big family from place to place.</p><p id="townCars">Vacation in style with one of our luxurious town-cars.</p><p id="travelBus">Transport employees to a big function in our travel bus.</p> <div id="flightTypeBox" align="center"> <img src="images/flight-type-box.png" width="130px" height="205px" alt="Flight Type Box" /> <p id="fromAirport">From Airport</p> <a id="oneWayFA" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('one way','','images/one-way-over.png',1)"><img src="images/one-way.png" alt="from airport one way" name="one way" width="85" height="25" border="0" id="one way" /></a> <a id="roundTripFA" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('round trip','','images/round-trip-over.png',1)"><img src="images/round-trip.png" alt="from airport round trip" name="round trip" width="85" height="25" border="0" id="round trip" /></a> <p id="toAirport">To Airport</p> <a id="oneWayTA" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('one way 2','','images/one-way-over2.png',1)"><img src="images/one-way2.png" alt="to airport one way" name="one way 2" width="85" height="25" border="0" id="one way 2" /></a> <a id="roundTripTA" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('round trip 2','','images/round-trip-over2.png',1)"><img src="images/round-trip2.png" alt="to airport round trip" name="round trip 2" width="85" height="25" border="0" id="round trip 2" /></a></div> </td> </tr> </table> </body> CSS - /*==== universal ====*/.body { font-family: Verdana,Geneva,sans-serif;}.table { margin: 0; padding: 0;}.td { border-style: none; margin: 0; padding: 0;}img { border-style: none; text-decoration: none;}p {margin: 0px;}/*==== header ====*/#theHeader { background-image: url("images/header-gradient.png"); background-repeat: repeat-x; margin: 0;}#headerTable { height: 150px; margin-left: auto; margin-right: auto; width: 1024px;}#logoBox { padding-left: 50px; width: 268px;}#tagLine { color: #FFFFFF; font-family: Verdana,Geneva,sans-serif; font-size: 16px; font-style: italic; height: 45px; margin: 0; padding-top: 35px; text-align: left; width: 706px;}#rightsideHeader { height: 150px; margin-top: 0; width: 624px;}#phoneNumber { padding-left: 100px;}#navigation { height: 70px; width: 706px;}/*==== main content ====*/#mainTable { background-image: url("images/background-gradients.png");}.top { height: 174px; margin: 0; overflow: hidden; padding: 0; width: 1024px;}.top img { float: left; margin-right: 15px;}#welcome {color: #C34306;font-family: Arial,Helvetica,sans-serif;font-size: 28px;font-style: normal;font-weight: bold;height: auto;text-shadow: 2px 2px 15px #7F7F7F;width: 1024px;text-indent: -37px;margin-bottom: 45px;margin-top: 0px;margin-right: 0px;margin-left: 0px;}#statement { color: #000000; font-family: Arial,Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-weight: bold; height: auto; margin: 0; width: 1024px;}#bottomLeft { height: 440px; width: 406px;}/*==== bottom right ====*/.bottomRight {height: 440px;width: 618px;}.bottomRight p {font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-style: italic;font-size: 19px;text-align: center;}.bottomRight img {margin-top: auto;margin-right: auto;margin-bottom: auto;margin-left: auto;} #limoVans {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: normal;color: #666666;width: 160px;float: left;margin-left: 45px;margin-right: 22px;position: relative;top: -36px;font-style: normal;}#townCars {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: normal;color: #666666;width: 160px;float: left;margin-right: 24px;position: relative;top: -36px;font-style: normal;}#travelBus {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: normal;color: #666666;width: 160px;float: left;position: relative;top: -36px;font-style: normal;}#flightTypeBox {margin-right: 30px;float: right;width: 130px;height: 205px;vertical-align: middle;position: relative;top: -19px;}#fromAirport {font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-size: 12px;color: #4D4D4D;position: relative;top: -168px;font-style: normal;}#oneWayFA {position: relative;top: -165px;}#roundTripFA {position: relative;top: -163px;}#toAirport {font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-size: 12px;color: #4D4D4D;position: relative;top: -153px;font-style: normal;}#oneWayTA {position: relative;top: -149px;}#roundTripTA {position: relative;top: -147px;}/*==== bottom left ====*/#otherServicesBoxes {height: 300px;width: 348px;margin-left: 30px;margin-bottom: 63px;position: relative;}#otherServicesText {font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-style: italic;font-size: 19px;margin-left: 63px;}#events {position: absolute;bottom: 10px;left: 10px;height: 111px;width: 325px;}#weddings {position: absolute;left: 10px;top: 20px;height: 111px;width: 334px;vertical-align: middle;}#weddingLimo {float: left;margin-right: 13px;}#wedHeader {font-family: Arial, Helvetica, sans-serif;font-size: 14px;font-style: normal;font-weight: bold;color: #666;position: relative;top: 4px;}#wedText {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-style: normal;font-weight: normal;color: #666;position: relative;top: 12px;}#eventBus {float: left;margin-right: 13px;}#eveHeader {font-family: Arial, Helvetica, sans-serif;font-size: 14px;font-style: normal;font-weight: bold;color: #666;position: relative;top: 4px;}#eveText {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-style: normal;font-weight: normal;color: #666;position: relative;top: 12px;} Link to comment Share on other sites More sharing options...
Ingolme Posted January 7, 2012 Share Posted January 7, 2012 This has to do with the position: relative that you applied to the paragraph. Instead of "position" and "top" use "margin-top" instead. Link to comment Share on other sites More sharing options...
Randomishlying Posted January 7, 2012 Author Share Posted January 7, 2012 I did try that, and it works (as you're undoubtedly aware). Thanks for the tip. However...(heh) I still don't understand why this works with margin-top as apposed to a relative position with top. My understanding of what was happening must be incorrect, because the paragraph element still covers the image, yet the image is now selectable. So you might say, I'm slightly more confused than I was before. I apologize if I'm coming off as stupid, but I feel like it will be easier to avoid this mistake, if I understood why this happened. Link to comment Share on other sites More sharing options...
Ingolme Posted January 7, 2012 Share Posted January 7, 2012 When using relative or absolute position, an element is moved around the document, but other elements are not affected by its movement, so they won't move out of the way to make space for it. This is why you should use positioning sparingly or not at all. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 7, 2012 Share Posted January 7, 2012 The elements are layered, the span had a higher level layer (z-index) than the image, so you could have fixed the problem by adjusting the z-index value, but as stated, using position property should be used as last resort. Link to comment Share on other sites More sharing options...
Randomishlying Posted January 7, 2012 Author Share Posted January 7, 2012 When using relative or absolute position, an element is moved around the document, but other elements are not affected by its movement, so they won't move out of the way to make space for it. This is why you should use positioning sparingly or not at all. This is most of the reason that I used absolute and relative positioning. For instance, if I set a div container to relative, and then I set the elements within that container to absolute, I can move things within the div exactly where I want. In almost every case I'll have already created a website layout in Photoshop or Illustrator, and it just seems easier to do it this way if I already know exactly where I want everything. The reason that I prefer this to setting the margin on each individual element within the div is because, a bunch of times already I've run into the problem of having to change the number or size of elements within said div. Then I have to go back and change all the margins of each individual element to reposition it to where I want it. This kind of repositioning also applies to why I used relative positioning on the text elements in question.Having run into this situation, I can see what you mean. Maybe(hopefully) I'm just thinking about this wrong, and what I want to do can still be accomplished without using absolute and relative positioning.The elements are layered, the span had a higher level layer (z-index) than the image, so you could have fixed the problem by adjusting the z-index value, but as stated, using position property should be used as last resort.The span didn't seem to overlap the image, but the paragraph element did. Also, if the paragraph element had a higher level z-index than the image, how come it was still affected by the image's margin-right 13px. I'm use to working with layers in a handful of adobe programs, so I have a pretty specific way of thinking about them that might be wrong in this case. So my next question what have to be... Is there any way to easily visualize the z-index other than in the code?Also, I'd like to thank both of you for trying to help me, hopefully I'm not asking too much. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 7, 2012 Share Posted January 7, 2012 The span didn't seem to overlap the image, Sorry! I meant to say paragraph. Even though the paragraph has a higher z-index, it is still a block element that stretches the whole length of the parent container element, the image is floated, a block element below a floated element will merge with this element, and any text within this block element will be forced right of the floated image edge and its margin, if the text extends below the bottom edge the image, the text will fall below the image to the left edge of the parent container element. Using relative forced it to overlap, by giving the image position relative; and z-index: 10; and given the paragraph z-index: 5; you would be able to access the image. Link to comment Share on other sites More sharing options...
thescientist Posted January 7, 2012 Share Posted January 7, 2012 I think you'll find relying on positioning for layout brings up more problems that it's worth. The fact that you have had to change code when making changes isn't really a true advatnage of one over the other. The most common problem positioning throws up is what the layout looks like when viewed by users with different resolutions. Link to comment Share on other sites More sharing options...
Randomishlying Posted January 7, 2012 Author Share Posted January 7, 2012 Using relative forced it to overlap I think I'm starting to understand. Correct me if I'm wrong here... You're saying that if you give an element a positioning property, it will change the z-index of that element by one or something? by giving the image position relative; and z-index: 10; and given the paragraph z-index: 5; you would be able to access the image. Do the numbers 10 and 5 have some sort of significance or could the numbers in that example also be 2 and 1? The most common problem positioning throws up is what the layout looks like when viewed by users with different resolutions. Could you give me an example of this? Anything would be awesome.I've had problems with absolute positioning, but not in the case that it's being absolutely positioned to a parent element. You're probably talking about something else anyway. I'm all ears.And just out of curiosity, is there anything you would use positioning for? Link to comment Share on other sites More sharing options...
dsonesuk Posted January 8, 2012 Share Posted January 8, 2012 Using position property would place it above the non positioned image element, the z-index 5 to 10 was just to illustrate the different level setting to place image over paragraph, it would probably have to be higher than 1 and 2, to allow for z-index level of other elements, it would be a case of increase z-index level until you achieve the correct result. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.