I have two iframes on a page and I can't figure out why the text is overlapping the second iframe. Any suggestions? Thanks!
<h1>Spanish Springs Library </h1>
<hr />
<div align="left" id="text" style="float: left;">
<div border="0" align="right" id="tour" style="float: right; width: 450px; height: 300px;"><iframe width="448" frameborder="0" src="http://tours.blackhawkvirtualmedia.com/public/vtour/full/55789" border="0" height="280"></iframe>
<div border="0" align="right" id="map" style="float: right; width: 200px; height: 200px;"><iframe scrolling="no" marginwidth="0" width="200" frameborder="0" src="http://maps.google.com/maps/ms?ie=UTF8&hl=en&oe=UTF8&msa=0&msid=108756021178700849594.000457097404325161dd5&ll=39.618251,-119.728832&spn=0.026447,0.034332&t=p&z=13&output=embed" marginheight="0" height="200"></iframe><br /><small>View a larger version of this map</small> </div>
</div>
<p>Calendar of Events<br />7100A Pyramid Lake Highway<br />Sparks, NV 89436 </p>
<p><strong><br />Hours:</strong> Mon, 10am - 6pm<br /> Tue - Wed, Noon - 8pm<br /> Thurs, 10am - 6pm<br /> Sun, 10am - 5pm <br /> Fri - Sat, Closed<br /><strong>Phone:</strong> 775-424-1800<br /><strong>FAX:</strong> 775-424-1840 </p>
<p>Spanish Springs Library is located on the Pyramid Highway in Spanish Springs. An octagonal building with open spaces set off by a 64 foot ceiling over the atrium, comfortable seating and thirty-nine public access/Internet computers, it is truly a destination for the entire family. Features include a drive-through service point to pick up and drop off materials, and a 24-hour book return. </p>
<p>The Nell J. Redfield Foundation Young People's Library features a unique oversized stack of books at the entrance and a separate Story Time room. Seven of the thirty-nine public computers (including an adult station so parents and children can work side by side, and two children’s games computers) and a family restroom complete the area as a family friendly place.</p>
<p>The teen zone is a comfortable place with eight of the thirty-nine public access computers and an area for group study and projects.</p>
<p>Programs for all ages are offered including Story Times, guest speakers and artists, craft programs, book discussion for all ages, an art gallery, displays, and much more!</p>
<p>An ADA computer station with a Braille printer is available to the public.</p>
<p>E.L. Cord community meeting rooms provide spaces for groups to meet and groups may arrange to stay after the library is closed.</p>
<p>Self-serve features include express check-out, the ability to pick up holds, Downloadable ebook and audio-book station, automated computer sign-ups, and printing. Offering wireless internet access and printing from your laptop, laptop locks, a public fax machine, a flatbed scanner for public use, and study rooms, the library is truly a destination for the whole family.</p>
<p>Citizens may request exam proctoring at the Spanish Springs Library. </p>
<p>The atmosphere is enhanced by the cozy fireplace, coffee cart and comfortable seating throughout the building.</p>
</div>
Your code is very confusing. Try to use only one tag <p> along the text and for the days/hours, use a <table>. If you can use a <div> and make the formatting of the text first and last place the <iframe> of Google Maps.
Related
this is my webpage http://www.noor-azmi.com/element/company.html
As you can see, there are 2 grey boxes on top. I do not want the gap in between them. I want it to be combined into 1 rectangle box.
They are both in different columns the left one is col-8 and the right one os col-4. When i checked in the browser, it seems there is a 15px padding each between them.
I am ok with the padding but can the padding also have the same BG colour ? Then that will solve the issue. Thanks
Seperate grey part into another row and you are good to go.
<div class="row">
<div class="our_company col-sm-8">
<h2>Our Company</h2><br>
<p>As the name indicates, Element Design Studio is a boutique design studio that provides landscape master planning and full serviced landscape architecture services for hotels, resorts, residential developments, mixed-use projects and golf course landscapes. Headquartered in Singapore, Element was co-founded by Gregory Kunak in 2011 based on simple and straightforward fundamentals; to provide Clients with the highest quality design services.<br><br>
Since 2011, Element has provided design services for a vast amount of projects located in 16 countries, consisting of Bangladesh, Egypt, Guinea, India, Indonesia, Laos, Kenya, Korea, Malaysia, Mauritius, Nepal, Saudi Arabia, Seychelles, Singapore, Sri Lanka and Vietnam. <br><br>
Whether appointed to provide landscape master planning services on a 100 hectare mixed-use development or engaged to provide detailed landscape design services for a hotel, resort or luxury residential condominium, Element takes immense pride with providing the highest quality of design excellence throughout every stage of the project. Above all, it is our fundamental goal to ensure that our Clients achieve a successful landscape product.</p><br>
</div><div class="our_leader col-sm-4">
<h2>Our Leadership</h2><br>
Gregory Kunak<br>
<h3>Managing Director</h3>
<img src="image/Gregory-Kunak-Profile.jpg">
<p>After working for 20 years with two of the largest and most prominent landscape architecture firms in the United States and Singapore, Gregory Kunak co-founded Element in 2011.<br><br> Through his career, Gregory has gained extensive design experience on many notable hotels, resorts, residential developments and mixed-use projects throughout the United States, Caribbean, Middle East and majority of Asia. As Managing Director of Element, Gregory is responsible for every aspect of the company.<br><br> As a registered landscape architect, Gregory is responsible for ensuring that each and every project adheres to the most stringent health, safety and welfare standards while striving to achieve design excellence. He is a rollercoaster enthusiast, enjoys the outdoors and horticulture and supports the Pittsburgh Steelers. </p></div>
</div>.
Try this,
You need to make change in you div
HTML Code:
<div class="row">
<div class="col-md-12 bg-grey">
<div class="col-md-8">
This is col 1
</div>
<div class="col-md-4">
This is col 2
</div>
</div>
</div>
CSS Code:
.bg-grey {
background-color: grey;
}
I've run into an issue with column widths where they are being completely ignored in CSS and HTML while trying to set up a newsletter page. Here's the style sheet:
h3 {
font-family:bitter;
font-weight:500;
font-size:14pt;
}
table {
border-collapse: collapse;
border:0px;
width: 700px;
table-layout: fixed;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
margin: 0;
text-align: justify;
line-height: 150%;
}
td {
font-family: arial;
font-size: 11pt;
padding: 1em;
font-weight: 600;
vertical-align: top;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
}
Here's the table:
<table>
<tr><td colspan="2"><img src="img.jpg" width="600" height="108"></td></tr>
<tr><td class="greybg" colspan="2">For those who ever wondered why such an exciting company had such a less-than-
exciting newsletter, we heard you. That is why we are proud to announce our new look and, more importantly, new tone to
how we communicate with you. Take a few minutes to browse through our new features, such as grammar tips from our
editors, profiles and helpful advice from one of our top authors, along with the latest news and innovations, including
new videos and the recently launched Textbroker University, our exciting new program to help our 3-star authors become
4 stars! With all the great things happening, there has never been a better time to be a part of Textbroker!</td></tr>
<tr>
<td class="orangebg" rowspan="3" style="width:70%;"><h3>CLASS IN SESSION!</h3>
If you have ever wondered how to become a 4-star author and earn more money at Textbroker, there is now Textbroker
University! Our unique three-course curriculum was designed to correct the most common reasons authors are rated at 3
stars. The process is easy. Just use the link to <a href="http://www2.textbroker.com/textbrokeruniversity">sign up
here</a>. You get:
<br />• Expedited ratings of your five most recent articles
<br />• Our three courses, including:
<br />• Our blog on avoiding filler content
<br />• Our podcast and exercise on proofreading
<br />• Our video and exercise on commas
<br />• Once you finish, you can submit 10 articles for re-evaluation
<br />The course is free, and you can review the material as much as you want, so there’s no reason not to raise your
rating--and start making more money. In addition to a higher per- word rate, 4-star authors also have access to more of
our lucrative TeamOrders. These can provide a steady stream of work in specialty areas that pay more than the usual 4-
star rate! Don’t wait for the late bell. Sign up now!</td>
<td class="whitebg" style="width:30%;">
<h3>FUN FACT OF THE MONTH</h3>
Did you know that 4-star authors can earn 40 percent more than 3-star authors for an article of the same
length? Sign up with Textbroker University, and let us show you how to be a 4-star author in no time!
<br />
</td>
</tr>
<tr><td class="dkgreybg" style="height:20px; width:30%;"></td></tr>
<tr>
<td class="whitebg" style="width:30%;"><h3>GETTING STARTED</h3>
Starting something new can be intimidating, and our system is no different. Now, we make the process easier
with the latest in our series of videos available on Youtube. Please follow the link to our New Author Registration Video to help you get started! Feel free
to share with your friends, so they can start writing for Textbroker too. More videos coming soon to help you get the
most out of Textbroker!
</td>
</tr>
<tr><td class="greybg" colspan="2">
<h3>PROLIFIC AND PROFITABLE PROFILES</h3>
</td>
</table>
From within, here's the section of columns that aren't working:
<td class="orangebg" rowspan="3" style="width:70%;"><h3>CLASS IN SESSION!</h3>
If you have ever wondered how to become a 4-star author and earn more money at Textbroker, there is now Textbroker
University! Our unique three-course curriculum was designed to correct the most common reasons authors are rated at 3
stars. The process is easy. Just use the link to <a href="http://www2.textbroker.com/textbrokeruniversity">sign up
here</a>. You get:
<br />• Expedited ratings of your five most recent articles
<br />• Our three courses, including:
<br />• Our blog on avoiding filler content
<br />• Our podcast and exercise on proofreading
<br />• Our video and exercise on commas
<br />• Once you finish, you can submit 10 articles for re-evaluation
<br />The course is free, and you can review the material as much as you want, so there’s no reason not to raise your
rating--and start making more money. In addition to a higher per- word rate, 4-star authors also have access to more of
our lucrative TeamOrders. These can provide a steady stream of work in specialty areas that pay more than the usual 4-
star rate! Don’t wait for the late bell. Sign up now!</td>
<td class="whitebg" style="width:30%;">
<h3>FUN FACT OF THE MONTH</h3>
Did you know that 4-star authors can earn 40 percent more than 3-star authors for an article of the same
length? Sign up with Textbroker University, and let us show you how to be a 4-star author in no time!
<br />
</td>
</tr>
<tr><td class="dkgreybg" style="height:20px; width:30%;"></td></tr>
<tr>
<td class="whitebg" style="width:30%;"><h3>GETTING STARTED</h3>
Starting something new can be intimidating, and our system is no different. Now, we make the process easier
with the latest in our series of videos available on Youtube. Please follow the link to our New Author Registration Video to help you get started! Feel free
to share with your friends, so they can start writing for Textbroker too. More videos coming soon to help you get the
most out of Textbroker!
</td>
</tr>
Divs and floats aren't an option because this needs to go in an email. No idea why this isn't working. I've researched this heavily before asking and added a few things to my header that would seem to fix the problem. Do I need to specify the width in the whitebg class? I'd prefer not to so that I can use it later for any width of column.
Try fiddling the width. I'm in Chrome: http://jsfiddle.net/W29Ea/1/
I have a Wordpress site and I'm trying to align some text with an image using a table.
For some reason the image appears higher than the text on my site
Any assistance is very much appreciated.
The page is here:
http://pictureperfect.kpwebservices.net/about/
This is my code:
<table style="width: 86%;" border="0">
<tbody>
<tr>
<td width="50%"></td>
<td width="50%"></td>a
</tr>
<tr>
<td>Our aim is to ensure you look and feel your best on your special day. Whether it is your Wedding day, formal, Deb, Spring Carnival, photography and any occasion in between.
Picture Perfect Makeup is a mobile service catering Melbourne, surrounding and outer suburbs. We will come to your doorstep for your own comfort.
Mary Kechichian- Professional Makeup Artist and Stylist. Completed Training in Melbourne CBD with Elite Makeup Academy in advance Makeup artistry and Hair stylist.
Amongst my travels and learning Completed training in New York specialising in airbrushing, tattoo coverage with Kett Cosmetics.</td>
<td><img alt="" src="http://pictureperfect.kpwebservices.net/wp-content/uploads/2013/04/936482_507067716023365_1908922291_n.jpg" width="439" height="392" /></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
Your text has the CSS attribute vertical-align: baseline, which will cause the image next to it to line up with the base of the first row of text.
Try changing this to vertical-align: top.
If you use Firefox, you can quickly see this in action by using Tools -> Web Developer -> Inspector on your page and then clicking on the td with text in it.
You need a vertical align to make sure that no matter how much your height increases, the text in the left block remains on top. Use something like:
<tr>
<td style="vertical-align: top;">Our aim is to ensure you look and feel your best on your special day. Whether it is your;Wedding day, formal, Deb, SpringCarnival, photography and any occasion in between.<p></p>
<p>Picture Perfect Makeup is a mobile service catering Melbourne, surrounding and outer suburbs. We will come to your doorstep for your own comfort.</p>
<p>Mary Kechichian- Professional Makeup Artist and Stylist. Completed Training in Melbourne CBD with Elite Makeup Academy in advance Makeup artistry and Hair stylist.</p>
<p>Amongst my travels and learning Completed training in New York specialising in airbrushing, tattoo coverage with Kett Cosmetics.</p></td>
<td class="odd"><img alt="" src="http://pictureperfect.kpwebservices.net/wp-content/uploads/2013/04/936482_507067716023365_1908922291_n.jpg" width="439" height="392"></td>
</tr>
The style is in-line, however you can easily insert into a class and point the class to this cell. I would also suggest you put a margin on the image or padding into the cell where the image is located so that it looks much more elegant.
try replacing the table with this:
<div style="width: 86%; position:relative; margin:0 auto;">
<div style="width:50%; float: left;">Our aim is to ensure you look and feel your best on your special day. Whether it is your;Wedding day, formal, Deb, SpringCarnival, photography and any occasion in between.</p>
<p>Picture Perfect Makeup is a mobile service catering Melbourne, surrounding and outer suburbs. We will come to your doorstep for your own comfort.</p>
<p>Mary Kechichian- Professional Makeup Artist and Stylist. Completed Training in Melbourne CBD with Elite Makeup Academy in advance Makeup artistry and Hair stylist.</p>
<p>Amongst my travels and learning Completed training in New York specialising in airbrushing, tattoo coverage with Kett Cosmetics.</div>
<div style="width:50%; float:right;"><img alt="" src="http://pictureperfect.kpwebservices.net/wp-content/uploads/2013/04/936482_507067716023365_1908922291_n.jpg" style="width:100%; max-width:439px; height: auto;" /></div>
</div>
You should try to avoid using tables to layout your page and use them for, well tabular data.
Hope this helps
So I'm trying to replicate a page layout, it's an image that is the full height of a page with text to the right of it. The text width seems to adjust depending on the the image, I'm just not exactly sure how it's done. http://mcgarrybowen.com/en/People/Bill-Borrelle that's the page, any thoughts on how this was done?
this is what I tried but isn't quite working right, looks like this http://www.klossal.com/klossviolins/about.html :
<div style="width:100%;padding-top:40px;padding-bottom:40px;">
<div style="width:920px;position:relative;">
<div style="float:left;">
<img style="height:100%;" src="http://www.klossal.com/klossviolins/elements/horst.jpg" alt="">
</div>
<div style="float:left;">
<p style="color: #b9b8b4;
font-family: 'Source Sans Pro' , sans-serif;
font-size: 24px;
text-align: left;
position:relative;
width:auto;">About</p>
<p style="color: #b9b8b4;
font-family: 'Source Sans Pro' , sans-serif;
font-size: 14px;
text-align: left;
position:relative;
width:auto;">
Mittenwald-trained, Master Violin Maker, Horst Kloss, has worked with fine stringed instruments and bows for over three decades. The Kloss Shop specializes in the repair, restoration, appraisal and sale of historic instruments and bows. Mr. Kloss further offers acoustic adjustment tailored to the individual musician's requirements, the application of museum conservation standards to preserve instrument integrity and maintain value as well as baroque conversion. Mr. Kloss is experienced in providing musicians with custom instrument set up designed to prevent overuse syndrome while maintaining maximal adjustment of tonal color, clarity and projection.<br><br>
Since 1972, Horst Kloss has cared for collections of note along the East Coast of the United States, including the Boston Museum of Fine Art's collection of historic stringed instruments. He is one of under a hundred makers, nation-wide, whose extensive training and high caliber skills qualified him for full membership status in the American Federation of Violin and Bow Makers.<br><br>
Raised among musicians and makers, Horst Kloss was imbued with a love of music and a profound sense of stewardship in caretaking for stringed instruments. At the age of 14, he began an apprenticeship in his hometown of Mittenwald, a center for violin-making since the 1600's. He received his formal training at the Bavarian State School of Violin Making in Southern Germany where he earned his Journeyman's diploma in 1964 and his Master's degree in 1972 under the tutelage of Josef Kantuscher. He moved to the United States in 1964 following the exodus of finer instruments from Europe and gained exposure to many of them while working for Carl Becker at Lewis & Sons. Mr. Kloss instructs the courses offered in instrument repair and restoration at the University of New Hampshire's Violin Craftsmanship Institute. He established shops in Houston and Boston before settling in Needham, Massachusetts.<br><br>
Horst Kloss has attracted an international clientele, including many distinguished concert performers, who value his consistently high quality restoration and sound adjustments. His experienced eye and broad client base make him especially well-suited to bring buyers and sellers of fine stringed instruments together.</p>
</div>
<br class="clear">
</div>
The layout is built on Twitter Bootstrap, and implements its responsive feature.
Update: Here's a start. You should really use classes instead of all those inline styles. It makes modifying your layout immensely easier.
http://jsfiddle.net/xfPKx/2/
.wrapper {
width:100%;
}
.portrait {
height: 100%;
left: 0;
position: fixed;
width: 50%;
}
.text {
float: right;
margin: 5% 0;
max-width: 30%;
width: auto;
}
<div class="wrapper">
<div class="portrait">
<img src="http://www.klossal.com/klossviolins/elements/horst.jpg" alt=""
/>
</div>
<div class="text">
...
Note: this question is no longer relevant. The site has been moved to a new host and the the code on the site no longer applies.
Thanks.
I am trying to help out a client. The site is almost ready to go, but there are a series of images that simply disappear in IE7.
The click on the Leadership tab and the whole block of content vanishes.
Here is the html for that section:
<div id="leadership-content" class="content">
<p class="intro">Leadership for every company is important in the daily management and growth as a business matures. At Moving Simplified we feel that offering our employees career-oriented paths gives them a more sincere desire to provide outstanding customer service. All employees have the option to "climb the ladder" to eventually own a franchise of their own.</p>
<div class="profile">
<h3>Eric M. Snider<img class="flt-right" src="_images/Eric_Snider_Logo_Photo.jpg" alt="Moving Simplified Founder & CEO Eric Snider founded Moving Simplified in 2007 as a new alternative to Charlotte moving companies by offering a suite of moving services of Pack It, Move It, Clean It and Junk It under one brand!" width="225" height="232" /></h3>
<h4>Founder / Chief Executive Officer</h4>
<p>Eric founded Moving Simplified in 2007 as a professional services company with a new concept to assist people during one of the most stressful times of their lives: moving. His vision was to build a new type of moving services company - a company that would include every service that a customer would need during their move. Bringing it all together in one company offering is the key differentiating factor with Moving Simplified. "We are changing the face and perception of the moving company stereotype one move at a time," says Snider. "We do this everyday by holding ourselves to a higher standard of service, people skills and performance."</p>
</div>
<div class="gray-line"></div>
<div class="profile">
<img class="flt-right" src="_images/Ben_Photo.jpg" alt="Moving Simplified Founder & CEO Eric Snider founded Moving Simplified in 2007 as a new alternative to Charlotte moving companies by offering a suite of moving services of Pack It, Move It, Clean It and Junk It under one brand!" width="225" height="232" />
<h3>Ben Simmons</h3>
<h4>Crew Leader / Senior Manager</h4>
<p>Ben joined Moving Simplified in 2009 as one of the first management team members. Ben's entrepreneurial spirit and physical fitness background makes him an excellent team player and role model. "We're working hard everyday to help change the perception and face of the moving business," says Simmons. "It can only be accomplished through discipline, desire and performance."</p>
</div>
<div class="gray-line"></div>
<div class="profile">
<img class="flt-right" src="_images/Tim_Photo.jpg" alt="Moving Simplified Founder & CEO Eric Snider founded Moving Simplified in 2007 as a new alternative to Charlotte moving companies by offering a suite of moving services of Pack It, Move It, Clean It and Junk It under one brand!" width="225" height="232" />
<h3>Timothy Browne</h3>
<h4>Crew Leader / Senior Manager</h4>
<p>Tim joined Moving Simplified in 2009 as a team leader and manager. Tim has a professional service background that was a natural catapult into Moving Simplified. "As a crew leader and senior manager, I have a responsibility to ensure that our customers are 100% satisfied with our moving team's presentation, ability and performance," says Browne. "Our goal is to be the area's top moving services provider and we strive to deliver that top-tier level of service with every customer."
</p>
</div>
Here is the css:
.profile { width: 630px; padding-bottom: 20px; }
#mainContent .profile h3 { margin-top: 10px; }
#mainContent .profile p { float: left; width: 350px; }
.profile img { float: right; }
.gray-line { clear: both; }
It shows up fine in Safari and Firefox but in IE7 it is nowhere to be seen.
Thanks for any help!
Are the images that don't show all in the same folder? Try renaming the folders to a name without an underscore _ at the start.
By the way, the images don't show in my Firefox nor IE8.