Search the Community

Hello This is my website: http://cvkj.agencialosnavegantes.cl/ In the second section ("Nuestros Servicios") i have 3 big buttons that change their backgrounds to purple on hover. The problem i have is why do these buttons appear repeated below, like below every button i have an empty button repeated. Why is this happening? HTML for the buttons <div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> <a class="et_pb_button boton-contacto et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="#"><img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-5.png" style="width:30%;"><p>Asesoría y Servicios Contable</p> </a></div> Here is the CSS related: .et_pb_button_0.et_pb_button.et_pb_module { width: 290px; border-radius: 50px 50px 50px 50px; padding: 50px ! important; margin: 1%; } .et_pb_button_0 { color: #08a121!important; background-color: #fff; border-width: 1px !important; border-color: #fff; letter-spacing: 0px; font-size: 21px; font-weight: bold !important; } .et_pb_bg_layout_light.et_pb_button_0:hover { color: #fff; background: #574586; } .et_pb_bg_layout_light.et_pb_button_0:hover p { color: #fff; }

I'm having a difficult time diving the paragraph inside the between-page tag. Here is how I would like it to be as: Right now the paragraphs are both on top of each other, not side by side. Is there any way I can add division to them like in the example above? Here is the link to the website that I'm currently working on.

Goal: To set text indent in the first paragraph after a heading to a value of 0px; with subsequent paragraphs to be set with a text indent of N.px. Query: Can this be done?

Hello Everyone,I'm a total novice with CSS, but I'm trying to learn. I'm trying to place an image with a caption into a paragraph. I did some Googling and found http://www.corelangs.com/css/box/caption.html. I pretty much copy and pasted an example from this website with a few changes. Everything seemed to work fine, until I tried to align the image to the right of a paragraph with a width of 800px. Here is the css: .imageholder {position: relative; width: 260px; border:thin solid black} .imageholder .caption {position: absolute; width: 260px; bottom: 0px; left: 0px; color: #000000; background: #ffffff; text-align:center; font-size:11pt; font-family:'Palatino Linotype', serif; opacity:0.8; border:thin solid black} and the html: <h2>Glenwood Sunday Market</h2><p><span class="imageholder" style="float:right;"><img src="glenwood.jpg" width="100%" style=:margin:0; padding:0; position:relative; left:-20"> <span class="caption">Natasha and Scott at the Glenwood Market </span></span>Blah blah blah etc etc</p> When I used the code as written at corelangs.com, with a <div> element for "imageholder", the image and caption looked fine, but the <div> element destroyed the paragraph formatting, and the paragraph spread to fill the width of the page, with the image at the far right. I tried using <span> instead of <div> since it is an inline element, and the positioning was fine, but the image was always offset by about 20px right of the <span> frame. I've attached a screen cap with borders added for clarity. What is the right way to do this? Should I be using <div class="imagegolder"> or <span class="imageholder">? Thanks, Adam

Hello, a complete beginner here - I have just built my first website, but to my horror I realized that if I view it with another screen resolution, or on someone else's computer, it changes the whole appearance of the site, esp. the flow of the paragraphs, often to a very ugly result. Images start to overlap paragraph, and paragraphs suddenly look extremely narrow. I am happy to restructure the website, (built in html without Dreamweaver's help) but have no idea how - especially how to make the main structure adjust to different views (larger/smaller screens, i-pads etc) Thank you! You can view the website and its source here - http://www.aidanandrewdun.com/ I'd be grateful if you viewed the page source and let me know what I've been doing wrong.

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;}