Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am having trouble with my alignment issues for my headers on my website,
http://questdesign.com.au/index.php/folio
Here is the code for my Folio page.
<table>
<tbody>
<tr>
<td><img src="images/quest_design_folio_web_header.png" alt="" width="954" height="51" /></td>
</tr>
</tbody>
</table>
<table style="height: 23px;" width="985">
<tbody>
<tr>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/quest_design_folio_websites_subheader.png" alt="" width="895" height="45" /></td>
</tr>
</tbody>
</table>
<table style="height: 23px;" width="981">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/quest_design_allison_driscoll_author_ebook_website.jpg" alt="" width="144" height="180" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_ironmonger_heavy_metal_rock_music_website.jpg" alt="" width="160" height="180" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_kate_brock_personal_trainer_website.jpg" alt="" width="160" height="180" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_silence_no_more_music_website.jpg" alt="" width="160" height="180" /></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
<table style="height: 23px;" width="983">
<tbody>
<tr>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="images/quest_design_folio_social_media_subheader.png" alt="" width="895" height="45" /></td>
</tr>
</tbody>
</table>
<table style="height: 23px;" width="984">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_emmerson_legal_social_media_branding.jpg" alt="" width="180" height="89" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_kate_brock_personal_trainer_social_media_branding.jpg" alt="" width="180" height="89" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_lifestyle_maximiser_social_media_branding.jpg" alt="" width="180" height="85" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_rock_solid_personal_training_social_media_branding.jpg" alt="" width="180" height="85" /></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
<table style="height: 23px;" width="982">
<tbody>
<tr>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="images/quest_design_folio_online_marketing_material_subheader.png" alt="" /></td>
</tr>
</tbody>
</table>
<table style="height: 23px;" width="982">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_adam_quinn_social_media_marketing.jpg" alt="" width="180" height="97" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_allison_driscoll_author_ebook_social_media_marketing.jpg" alt="" width="180" height="122" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_emmerson_legal_social_media_marketing.jpg" alt="" width="180" height="113" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_kate_brock_personal_trainer_social_media_marketing.jpg" alt="" width="180" height="135" /></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
<table>
<tbody>
<tr>
<td><img src="images/quest_design_folio_design_header.png" alt="" width="954" height="51" /></td>
</tr>
</tbody>
</table>
<table style="height: 23px;" width="981">
<tbody>
<tr>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/quest_design_folio_logos_subheader.png" alt="" /></td>
</tr>
</tbody>
</table>
<table style="height: 23px;" width="981">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_australian_academy_kung_fu_logo.jpg" alt="" width="180" height="141" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_kettlebell_strength_logo.jpg" alt="" width="180" height="180" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_rawgasm_logo.jpg" alt="" width="180" height="57" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_rock_solid_personal_training_logo.jpg" alt="" width="180" height="90" /></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
<table style="height: 23px;" width="979">
<tbody>
<tr>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/quest_design_folio_business_cards_subheader.png" alt="" /></td>
</tr>
</tbody>
</table>
<table style="height: 23px;" width="978">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_emmerson_legal_business_card.jpg" alt="" width="180" height="110" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_mickyfit_training_business_card.jpg" alt="" width="180" height="110" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_rawgasm_business_card.jpg" alt="" width="180" height="110" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_rock_solid_personal_training_business_card.jpg" alt="" width="180" height="110" /></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
<table style="height: 23px;" width="980">
<tbody>
<tr>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/quest_design_folio_flyers_brochures_subheader.png" alt="" /></td>
</tr>
</tbody>
</table>
<table style="height: 23px;" width="979">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td style="text-align: center;"><img src="http://www.questdesign.com.au/images/headers/quest_design_emmerson_legal_flyer.jpg" alt="" width="180" height="85" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_fifth_dimension_music_rave_flyer.jpg" alt="" width="85" height="180" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_kate_brock_personal_trainer_flyer.jpg" alt="" width="180" height="85" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_rawgasm_flyer.jpg" alt="" width="85" height="180" /></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
<table style="height: 23px;" width="979">
<tbody>
<tr>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/quest_design_folio_book_covers_subheader.png" alt="" /></td>
</tr>
</tbody>
</table>
<table style="height: 23px;" width="979">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_beginners_guide_to_bodybuilding_book_cover.jpg" alt="" width="124" height="180" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_blades_of_the_fae_book_cover.jpg" alt="" width="127" height="180" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_carpentry_bible_book_cover.jpg" alt="" width="127" height="180" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_drifter_book_cover.jpg" alt="" width="120" height="180" /></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
<table style="height: 23px;" width="979">
<tbody>
<tr>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/quest_design_folio_album_covers_subheader.png" alt="" /></td>
</tr>
</tbody>
</table>
<table style="height: 23px;" width="978">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_earth_rhythm_album_cover.jpg" alt="" width="180" height="180" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_glasgow_kiss_album_cover.jpg" alt="" width="180" height="180" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_ironmonger_album_cover.jpg" alt="" width="180" height="180" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_sarah_cooper_album_cover.jpg" alt="" width="180" height="180" /></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
<table style="height: 23px;" width="978">
<tbody>
<tr>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/quest_design_folio_posters_banners_subheader.png" alt="" /></td>
</tr>
</tbody>
</table>
<table style="height: 23px;" width="978">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_adam_quinn_music_promotional_poster.jpg" alt="" width="119" height="180" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_bitten_by_productions_beyond_babylon_theatre_poster.jpg" alt="" width="127" height="180" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_ironmonger_heavy_metal_music_promotional_poster.jpg" alt="" width="180" height="127" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_mickyfit_training_boot_camp_fitness_poster.jpg" alt="" width="127" height="180" /></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
<table style="height: 23px;" width="977">
<tbody>
<tr>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/quest_design_folio_stationary_subheader.png" alt="" /></td>
</tr>
</tbody>
</table>
<table style="height: 23px;" width="976">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_emmerson_legal_stationery.jpg" alt="" width="180" height="98" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_kate_brock_personal_trainer_letterhead_stationery.jpg" alt="" width="127" height="180" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_kate_brock_personal_trainer_membership_card_stationery.jpg" alt="" width="180" height="102" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/rawgasm_stationary_example_quest_design.jpg" alt="" width="127" height="180" /></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
<table>
<tbody>
<tr>
<td><img src="images/quest_design_folio_image_header.png" alt="" width="954" height="51" /></td>
</tr>
</tbody>
</table>
<table style="height: 23px;" width="983">
<tbody>
<tr>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/quest_design_folio_retouching_subheader.png" alt="" /></td>
</tr>
</tbody>
</table>
<table style="height: 23px;" width="982">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images//headers/quest_design_luke_glamour_retouching.jpg" alt="" width="180" height="135" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_matt_monica_glamour_retouching.jpg" alt="" width="180" height="117" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_monica_glamour_retouching.jpg" alt="" width="180" height="105" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_tegan_glamour_retouching.jpg" alt="" width="180" height="135" /></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
<table style="height: 23px;" width="981">
<tbody>
<tr>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/quest_design_folio_restoration_subheader.png" alt="" /></td>
</tr>
</tbody>
</table>
<table style="height: 23px;" width="979">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_family_image_restoration.jpg" alt="" width="125" height="180" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_little_girl_image_restoration.jpg" alt="" width="180" height="131" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_soldier_image_restoration.jpg" alt="" width="180" height="128" /></td>
<td><img style="display: block; margin-left: auto; margin-right: auto;" src="http://www.questdesign.com.au/images/headers/quest_design_toddler_image_restoration.jpg" alt="" width="180" height="56" /></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
Any chance you can let me know what I might have missed out on. They show up centered on Mozilla firefox but in Chrome it aligns more to the right hand side.
You can change width: 982px; TO width="100%".
You can refer attached image.
If you want more details on what width: 100% do, you can refer this link :-
http://www.impressivewebs.com/width-100-percent-css/
It seems that Chrome is setting the width=985px, as per the attribute on the HTML element, whereas Safari (and Firefox) are respecting the max-width: 100% (960) value in the CSS. Remove that attribute to fix!
Related
So my problem can be seen in this picture:
How do I make every cell have the text at the same height? The last <th> (text+img) drags it down for some reason.
My css:
.table {
width: 100%;
padding: 0;
margin: 15px 0 0;
border-collapse: collapse
}
.table th {
text-align: left;
color: #fff;
background: 0 0;
text-transform: uppercase;
font-size: .9em;
line-height: 1em;
padding: .5em;
}
.table th.gold {
color: #ffdd45
}
.table td {
padding: .7em .5em .6em;
font-size: 1.1em;
line-height: 1.2em;
background: #222;
border: 2px solid rgba(0, 0, 0, 0);
vertical-align: middle;
}
<table class="table rate" style="margin-top: 0;">
<thead>
<tr>
<th>#</th>
<th>User</th>
<th>Number 1</th>
<th class="gold">Number 2</th>
<th>text+img</th>
</tr>
</thead>
<tbody id="players-table1">
<tr>
<td style="text-align: center;">1</td>
<td>
<a href="/user/9842394892389" class="username">
<img src="piclink" alt="Аvatar"><span>user0</span></a>
</td>
<td>4</td>
<td class="bold gold">500</td>
<td style="width:10%"><i>35x<img src="http://placekitten.com/301/301" style="width:55%;height:10%"/></i></td>
</tr>
<tr>
<td style="text-align: center;">2</td>
<td>
<a href="/user/9842394892389" class="username">
<img src="piclink" alt="Аvatar"><span>user</span></a>
</td>
<td>4</td>
<td class="bold gold">400</td>
<td style="width:10%"><i>35x<img src="piclink" style="width:55%;height:10%"/></i></td>
</tr>
<tr>
<td style="text-align: center;">3</td>
<td>
<a href="/user/9842394892389" class="username">
<img src="piclink" alt="Аvatar"><span>user2</span></a>
</td>
<td>3</td>
<td class="bold gold">300</td>
<td style="width:10%"><i>35x<img src="piclink" style="width:55%;height:10%"/></i></td>
</tr>
<tr>
<td style="text-align: center;">4</td>
<td>
<a href="/user/9842394892389" class="username">
<img src="piclink" alt="Аvatar"><span>user2</span></a>
</td>
<td>3</td>
<td class="bold gold">300</td>
<td style="width:10%"><i>35x<img src="piclink"/></i></td>
</tr>
</tbody>
</table>
There are 2 ways to fix this:
Decreasing the height of the image(which is what I did in answer), this was 10% before and I made it as 5%. The td content was pushing down due to that.
If you don't want to decrease the height of the image then you have to increase the height of the each row so that the height can easily fit-in.
so call is yours what to choose.
.table {
width: 100%;
padding: 0;
margin: 15px 0 0;
border-collapse: collapse
}
.table th {
text-align: left;
color: #fff;
background: 0 0;
text-transform: uppercase;
font-size: .9em;
line-height: 1em;
padding: .5em;
}
.table th.gold {
color: #ffdd45
}
.table td {
padding: .7em .5em .6em;
font-size: 1.1em;
line-height: 1.2em;
background: #222;
border: 2px solid rgba(0, 0, 0, 0);
vertical-align: middle;
border: 1px solid red;
}
<table class="table rate" style="margin-top: 0;">
<thead>
<tr>
<th>#</th>
<th>User</th>
<th>Number 1</th>
<th class="gold">Number 2</th>
<th>text+img</th>
</tr>
</thead>
<tbody id="players-table1">
<tr>
<td style="text-align: center;">1</td>
<td>
<a href="/user/9842394892389" class="username">
<img src="piclink" alt="Аvatar"><span>user0</span></a>
</td>
<td>4</td>
<td class="bold gold">500</td>
<td style="width:10%"><i>35x<img src="http://placekitten.com/301/301" style="width:55%;height:5%"/></i></td>
</tr>
<tr>
<td style="text-align: center;">2</td>
<td>
<a href="/user/9842394892389" class="username">
<img src="piclink" alt="Аvatar"><span>user</span></a>
</td>
<td>4</td>
<td class="bold gold">400</td>
<td style="width:10%"><i>35x<img src="http://placekitten.com/301/301" style="width:55%;height:5%"/></i></td>
</tr>
<tr>
<td style="text-align: center;">3</td>
<td>
<a href="/user/9842394892389" class="username">
<img src="piclink" alt="Аvatar"><span>user2</span></a>
</td>
<td>3</td>
<td class="bold gold">300</td>
<td style="width:10%"><i>35x<img src="http://placekitten.com/301/301" style="width:55%;height:5%"/></i></td>
</tr>
<tr>
<td style="text-align: center;">4</td>
<td>
<a href="/user/9842394892389" class="username">
<img src="piclink" alt="Аvatar"><span>user2</span></a>
</td>
<td>3</td>
<td class="bold gold">300</td>
<td style="width:10%"><i>35x<img src="http://placekitten.com/301/301" style="width:55%;height:5%"/></i></td>
</tr>
</tbody>
</table>
I am using simple_html_dom to gather data from another website and I am wondering how I can do a foreach for only the data as an a element.
$url = 'example.com';
html2 = file_get_html($url);
$download2 = $html2->find('table',1);
$data['ep_table'] = $download2->outertext;
The above code returns the following.
<table style="height: 341px;">
<tbody>
<tr style="height: 31px;">
<td style="height: 31px; width: 26px;">#</td>
<td style="height: 31px; width: 196px;">Song</td>
<td style="text-align: right; height: 31px; width: 82px;">Download</td>
</tr>
<tr style="height: 62px;">
<td style="height: 62px; width: 26px;">1</td>
<td style="height: 62px; width: 196px;">미쳐가지고 (I’m Crazy)</td>
<td style="text-align: right;height: 62px;width: 82px;">
<a href="http://example.com/South-Club-im-crazy/"
target="_blank"
rel="noopener">
<strong>
<button class="button_rbox" title="" type="button">
<span class="cnt">Download</span>
</button>
</strong>
</a>
</td>
</tr>
<tr style="height: 31px;">
<td style="height: 31px; width: 26px;">2</td>
<td style="height: 31px; width: 196px;">Someday</td>
<td style="text-align: right; height: 31px; width: 82px;">
<a href="http://example.com/South-Club-someday/"
target="_blank"
rel="noopener">
<strong>
<button class="button_rbox" title="" type="button">
<span class="cnt">Download</span>
</button>
</strong>
</a>
</td>
</tr>
<tr style="height: 93px;">
<td style="height: 93px; width: 26px;">3</td>
<td style="height: 93px; width: 196px;">안녕 (Hi/Bye)</td>
<td style="text-align: right; height: 93px; width: 82px;">
<a href="http://example.com/South-Club-hi/"
target="_blank"
rel="noopener">
<strong>
<button class="button_rbox" title="" type="button">
<span class="cnt">Download</span>
</button>
</strong>
</a>
</td>
</tr>
<tr style="height: 31px;">
<td style="width: 26px; height: 31px;">4</td>
<td style="width: 196px; height: 31px;">빗방울 (Raindrop)</td>
<td style="text-align: right; width: 82px; height: 31px;">
<a href="http://example.com/South-Club-raindrop/"
target="_blank" rel="noopener">
<strong>
<button class="button_rbox" title="" type="button">
<span class="cnt">Download</span></button>
</strong>
</a>
</td>
</tr>
</tbody>
</table>
How can I do a foreach, which searches only the html of $data['ep_table'] and not the entire page we're parsing for a a element?
I've tried this, with no luck.
foreach($data['ep_table']->find('a') as $track){
print $link = $track->href;
}
You're trying to use find() on plaintext, not a DOM object. You should do this:
$url = 'example.com';
html2 = file_get_html($url);
foreach( $html2->find('table', 1)->find('a') as $track)
{
echo $track->href;
}
It's also worth pointing out that find('table', 1) assumes the target table is the second <table> element in the retrieved markup.
i have been searching on net to get an infographic email template to send email using PHP. Can we have functionalities like moving HTML content within the Email body or like popups within the email body on click event. Basically show and hide of HTML content will do.
Any sites or URLs which have achieved this can be very helpful for me to go forward with this development.
See the sample code below: (But the style gets removed in Gmail :( )
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- This code is part of a tutorial from Email on Acid: https://www.emailonacid.com/blog/article/email-development/build-an-interactive-carousel-for-email -->
<title>Interactive Carousel</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
#media only screen and (-webkit-min-device-pixel-ratio: 1), (min--moz-device-pixel-ratio: 1), (max-width: 480px), (max-device-width: 480px) {
.slide1-content,
.slide2-content,
.slide3-content {
display: block;position: absolute;top: 0px;left: 0px;width: 600px;height: 520px;background-color: #FFFFFF;
}
}
#media only screen and (-webkit-min-device-pixel-ratio: 1), (min--moz-device-pixel-ratio: 1) {
.slide1-content {left: 0px;}
.slide1:hover { background-color: #37B330;}
#slide-1:checked ~ .slide1 {background-color: #37B330 !important;}
#slide-1:checked + span + table .swoosh { left: 0px !important; }
.slide2 { top: 66px; left: 321px; }
.slide2-content { left: 600px; }
.slide2:hover { background-color: #37B330;}
#slide-2:checked ~ .slide2 {background-color: #37B330 !important;}
#slide-2:checked + span + table .swoosh { left: -600px !important; }
.slide3 { top: 122px; left: 321px; }
.slide3-content { left: 1200px; }
.slide3:hover { background-color: #37B330;}
#slide-3:checked ~ .slide3 {background-color: #37B330 !important;}
#slide-3:checked + span + table .swoosh { left: -1200px !important; }
}
</style>
</head>
<body style="background-color:#6c6c6c;margin: 0px;padding: 0px;" bgcolor="#6c6c6c">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#6c6c6c" style="width: 100% !important; table-layout:fixed;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" align="center" style="border-collapse: collapse;">
<div class="wrapper" style="min-width: 640px;">
<table id="CarouselWrapper" width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" class="shrink" style="width:600px; margin:0 auto;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 415px !important;height: 895px !important;position: relative;display: block;overflow: hidden;">
<tr>
<td style="border-collapse: collapse;">
<table class="CarouselMain" width="600" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;width: 600px !important;height: 1400px !important;">
<tr>
<td valign="top" style="border-collapse: collapse;">
<table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td style="line-height:1px; font-size:0px;border-collapse: collapse;">
<!--[if mso]><p style="display: none;"><![endif]-->
<form action ="foo">
<input class="yahoo" type="radio" name="action" checked="checked" id="slide-1" style="display: none!important; max-height: 0; visibility: hidden;" />
<span style></span>
<!--[if mso]></p><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td style="line-height:1px; font-size:0px;border-collapse: collapse;">
<!--[if mso]><p style="display: none;"><![endif]-->
<input class="yahoo" type="radio" name="action" id="slide-2" style="display: none!important; max-height: 0; visibility: hidden;" />
<span style></span>
<!--[if mso]></p><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td style="line-height:1px; font-size:0px;border-collapse: collapse;">
<!--[if mso]><p style="display: none;"><![endif]-->
<input class="yahoo" type="radio" name="action" id="slide-3" style="display: none!important; max-height: 0; visibility: hidden;" />
<span style></span>
</form>
<!--[if mso]></p><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td style="border-collapse: collapse;">
<table class="swoosh" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;position: relative;transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;">
<tr>
<td class="slide1-content" style="border-collapse: collapse;display: block;position: absolute;top: 0px;left: 0px;width: 600px;height: 520px;background-color: #FFFFFF">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" height="320" style="border-collapse: collapse;">
<img style="border: none !important;" src="https://www.emailonacid.com/images/emails/carousel/image3.jpg" width="320" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" style="line-height:1px;font-size:1px;display:block;border-collapse: collapse;"> </td>
</tr>
<tr>
<td class="slide2-content" style="border-collapse: collapse;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" height="320" style="border-collapse: collapse;">
<img style="border: none !important;" src="https://www.emailonacid.com/images/emails/carousel/image2.jpg" width="320" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" style="line-height:1px;font-size:1px;display:block;border-collapse: collapse;"> </td>
</tr>
<tr>
<td class="slide3-content" style="border-collapse: collapse;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tr>
<td valign="top" height="320" style="border-collapse: collapse;">
<img style="border: none !important;" src="https://www.emailonacid.com/images/emails/carousel/image4.jpg" width="320" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" style="line-height:1px;font-size:1px;display:block;border-collapse: collapse;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<label class="button slide3" for="slide-3" style="display: none; max-height: 0; visibility: hidden; font-size:1px; line-height:1px;visibility: visible !important;max-height: 46px !important;width: 86px !important;padding:7px 0px 6px 0px;display: block !important;position: absolute !important;text-align: center;z-index: 7;background-color: #262626;box-sizing: content-box;color: #ffffff !important;font-family: Arial, Helvetica, sans-serif;font-size: 13px !important;line-height:16px !important;font-weight:bold;cursor:pointer;-webkit-transition: 0.1s ease-in;-moz-transition: 0.1s ease-in;-ms-transition: 0.1s ease-in;-o-transition: 0.1s ease-in;">
<span class="hide" style="color:#ffffff;">Three</span>
</label>
</td>
</tr>
</table>
<label class="button slide2" for="slide-2" style="display: none; max-height: 0; visibility: hidden; font-size:1px; line-height:1px;visibility: visible !important;max-height: 46px !important;width: 86px !important;padding:7px 0px 6px 0px;display: block !important;position: absolute !important;text-align: center;z-index: 7;background-color: #262626;box-sizing: content-box;color: #ffffff !important;font-family: Arial, Helvetica, sans-serif;font-size: 13px !important;line-height:16px !important;font-weight:bold;cursor:pointer;-webkit-transition: 0.1s ease-in;-moz-transition: 0.1s ease-in;-ms-transition: 0.1s ease-in;-o-transition: 0.1s ease-in;">
<span class="hide" style="color:#ffffff;">Two</span>
</label>
</td>
</tr>
</table>
<label class="button slide1" for="slide-1" style="display: none; max-height: 0; visibility: hidden; font-size:1px; line-height:1px;visibility: visible !important;max-height: 46px !important;width: 86px !important;padding:7px 0px 6px 0px;display: block !important;position: absolute !important;text-align: center;z-index: 7;background-color: #262626;box-sizing: content-box;color: #ffffff !important;font-family: Arial, Helvetica, sans-serif;font-size: 13px !important;line-height:16px !important;font-weight:bold;cursor:pointer;-webkit-transition: 0.1s ease-in;-moz-transition: 0.1s ease-in;-ms-transition: 0.1s ease-in;-o-transition: 0.1s ease-in;top: 10px; left: 321px;">
<span class="hide" style="color:#ffffff;">One</span>
</label>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
NB:
Is it possible to add dynamic moving content ie show and hide div elements within the Email body.
it's not possible to send scripts per Mail because of security issues. Also many of the major Mail Clients, like you noticed in Gmail, dont't support most of the simplest Html and Css.
Css animation works in some Clients, in others work gifs, but scripts wont work in any. Maybe you can design a workaround using this Recource. Css animation are complicated to design, pretty annoying to build, but can hide elements or move them around, if supported by the client.
Also you could have the button, that would start the animation, link to a webpage, where the animation will be. But in my expirience, this gives a terrible Usebility.
If most of your audience uses Outlook, its not worth to create something with Animations at all since Outlook doesn't support any of this.
Hope this was helpful!
This is the thank you page I am trying to have someones name be displayed like "Thank you John, ..."
But i can't seem to have it post the name. my $first_name is in another php file
<?php include("email.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<base target="_blank">
<title>Mid-Night Designs</title>
<style type="text/css">
body *{font-family: 'Open Sans', Arial, sans-serif !important}
div, p, a, li, td { -webkit-text-size-adjust:none; }
*{-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
td{word-break: break-word;}
a{word-break: break-word; text-decoration: none; color: inherit;}
body .ReadMsgBody
{width: 100%; background-color: #ffffff;}
body .ExternalClass
{width: 100%; background-color: #ffffff;}
body{width: 100%; height: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;}
html{ background-color:#ffffff; width: 100%;}
body p {padding: 0!important; margin-top: 0!important; margin-right: 0!important; margin-bottom: 0!important; margin-left: 0!important; }
body img {user-drag: none; -moz-user-select: none; -webkit-user-drag: none;}
body a.rotator img {-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; }
body a.rotator img:hover {-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg);-ms-transform: rotate(360deg); }
body .hover:hover {opacity:0.85;filter:alpha(opacity=85);}
body .jump:hover {opacity:0.75; filter:alpha(opacity=75); padding-top: 10px!important;}
body .logo img {width: 150px; height: auto;}
body .icon25 img {width: 25px; height: auto;}
body .icon18 img {width: 18px; height: auto;}
</style>
<style type="text/css">#media only screen and (max-width: 640px){
body body{width:auto!important;}
body table[class=full] {width: 100%!important; clear: both; }
body table[class=mobile] {width: 100%!important; padding-left: 30px; padding-right: 30px; clear: both; }
body table[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
body td[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
body .erase {display: none;}
body .buttonScale {float: none!important; text-align: center!important; display: inline-block!important; clear: both;}
body td[class=pad20] {padding-left: 20px!important; padding-right: 20px!important; text-align: center!important; clear: both; }
}</style>
<style type="text/css">#media only screen and (max-width: 479px){
body body{width:auto!important;}
body table[class=full] {width: 100%!important; clear: both; }
body table[class=mobile] {width: 100%!important; padding-left: 20px; padding-right: 20px; clear: both; }
body table[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
body td[class=fullCenter] {width: 100%!important; text-align: center!important; clear: both; }
body .erase {display: none;}
body .buttonScale {float: none!important; text-align: center!important; display: inline-block!important; clear: both;}
body td[class=pad20] {padding-left: 20px!important; padding-right: 20px!important; text-align: center!important; clear: both; }
}</style>
</head>
<body style='margin: 0; padding: 0;'>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center">
<table class="full" align="center" border="0" width="100%" cellpadding="0" cellspacing="0">
<tbody><tr>
<td align="center" class="pad20">
<table width="500" border="0" cellpadding="0" cellspacing="0" align="center" class="full">
<tbody><tr>
<td width="100%" height="15" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td valign="middle" width="100%" style="font-family: Helvetica, Arial, sans-serif, 'Open Sans'; color: #929292; font-weight: 400; font-size: 12px; line-height: 20px; text-align: center;">
<br>
</td>
</tr>
<tr>
<td width="100%" height="40" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td valign="middle" align="center" width="100%" class="logo" style="line-height: 1px; text-align: center;"></td>
</tr>
<tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</table><table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center" class="pad20">
<table class="full" align="center" border="0" width="500" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff; border-top-left-radius: 5px; border-top-right-radius: 5px;">
<tbody><tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center" class="pad20">
<table class="full" align="center" border="0" width="500" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff;">
<tbody><tr>
<td align="center" class="pad20">
<table width="450" border="0" cellpadding="0" cellspacing="0" align="center" class="full">
<tbody><tr>
<td width="100%" height="10" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td valign="middle" width="100%" style="font-family: Helvetica, Arial, sans-serif, 'Open Sans'; color: #111111; font-weight: 800; font-size: 30px; line-height: 36px; text-align: center; text-transform: uppercase;">
Thank you!
</td>
</tr>
<tr>
<td width="100%" height="20" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td width="100%" style="color: #929292; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 14px; text-align: center; line-height: 22px;" class="fullCenter">
<span style="color:#000000;"><span style="font-size:14px;"><strong>Thank you<?php echo $_POST['first_name'];?>
, for using our quote calculator. If you have any further questions feel free to contact us!</strong></span></span>
</td>
</tr>
<tr>
<td width="100%" height="20" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center" class="pad20">
<table class="full" align="center" border="0" width="500" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff;">
<tbody><tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td align="center" class="pad20">
<table width="450" border="0" cellpadding="0" cellspacing="0" align="center" class="full">
<tbody><tr>
<td valign="top" width="100%">
<table width="75" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="fullCenter">
<tbody><tr>
<td valign="middle" align="center" width="30" class="fullCenter" style="line-height: 1px;"></td>
</tr>
</tbody></table>
<table width="15" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full">
<tbody><tr>
<td width="100%" height="10" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
<table width="350" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="fullCenter">
<tbody><tr>
<td width="100%" style="color: #111111; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 700; vertical-align: top; font-size: 13px; text-align: left; line-height: 24px;" class="fullCenter">
Lorenzo Preciado
</td>
</tr>
<tr>
<td width="100%" style="color: #61b94d; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 600; vertical-align: top; font-size: 13px; text-align: left; line-height: 24px text-transform: uppercase;" class="fullCenter">
<span style="color:#000000;">Web Designer & Developer </span>
</td>
</tr>
<tr>
<td width="100%" style="color: #929292; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 13px; text-align: left; line-height: 24px;" class="fullCenter">
Owner of Mid-Night Designs
</td>
</tr>
<tr>
<td width="100%" style="color: #929292; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 13px; text-align: left; line-height: 24px;" class="fullCenter">
+81 080-6499-4974 | help#mid-nightdesigns.com
</td>
</tr>
<tr>
<td width="100%" height="5" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td width="100%" align="center" class="icon18">
<!-- Social Icons -->
<table width="120" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="buttonScale">
<tbody><tr>
<td valign="middle" align="left" width="30" class="buttonScale" style="line-height: 1px;"></td>
<td valign="middle" align="left" width="30" class="buttonScale" style="line-height: 1px;"></td>
<td valign="middle" align="left" width="30" class="buttonScale" style="line-height: 1px;"></td>
<td valign="middle" align="left" width="30" class="buttonScale" style="line-height: 1px;"></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td width="100%" height="10" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td align="center" class="pad20">
<table class="full" align="center" border="0" width="500" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">
<tbody><tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="full" bgcolor="#1e1e1e" style="background-color: #1e1e1e;">
<tbody><tr>
<td width="100%" valign="top" align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="mobile">
<tbody><tr>
<td align="center">
<table width="450" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align: center;" class="fullCenter">
<tbody><tr>
<td width="100%" height="30" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td width="100%" style="color: #d2d2d2; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 12px; text-align: center; line-height: 24px;" class="fullCenter">
© Copyright - Mid-Nightd<span style="color:#FFFFFF;"></span>esigns.com
</td>
</tr>
<tr>
<td width="100%" style="color: #61b94d; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-weight: 400; vertical-align: top; font-size: 12px; text-align: center; line-height: 24px;" class="fullCenter">
<br>
</td>
</tr>
<tr>
<td width="100%" height="50" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td width="100%" height="1" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</body>
</html>
This is the portion of the form
<label>
First Name
<input NAME="first_name" type="text" required="required" class="SV_validate" placeholder="First Name">
</label>
This is part of my email.php and it works, displaying the name in the email sent but doesn't work in the thank you.
$first_name = $_POST['first_name'];
PHP File that receives POST will be somewthing along the lines of
<?php
session_start();
$_SESSION['Name'] = $_POST['first_name'];
?>
Second File will be
<?php
session_start();
echo $_SESSION['Name'];
?>
Not recommended to do exactly that but that's the basis. You also can't set a session on the same page and call it on the same page.
Please check the simple scenario created for you, change the form action to thank-you.php file.
index.php
<form action="thank-you.php" method="post">
<input type="text" name="firstname">
<input type="text" name="email">
<input type="submit" name="contact" value="Contact">
</form>
thank-you.php
<?php
include_once('email.php');
$firstname = '';
if(isset($_POST['firstname'])) {
$firstname = $_POST['firstname'];
}
?>
<div class="message">Thank you for contacting - <?php echo $firstname;?></div>
email.php
<?php
if(isset($_POST['contact'])) {
$to = 'email#example.com';
$subject = 'Contact';
$message = 'Message';
if(mail($to,$subject,$message)) {
echo "mail sent";
}
}
?>
I am trying make a gallery in a html template using PHP loop.
But I having to write the gallery as a fixed table, so using <td> for each image and spacing element. And then on a new row, it creates a new table.
I guess I'm doing this to avoid any issues in old Outlook.
I've created my solid html layout, this is how I need it to output, see below...
<!-- 1st row -->
<table border="0" cellspacing="0" cellpadding="0" style="width: 579px;" align="center">
<tr>
<td style="width: 135px; height: 148px;" valign="top">
<img src="img/image-1.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" />
</td>
<td style="width: 13px; height: 148px;"><!-- space --></td>
<td style="width: 135px; height: 148px;" valign="top">
<img src="img/image-2.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" />
</td>
<td style="width: 13px; height: 148px;"><!-- space --></td>
<td style="width: 135px; height: 148px;" valign="top">
<img src="img/image-3.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" />
</td>
<td style="width: 13px; height: 148px;"><!-- space --></td>
<td style="width: 135px; height: 148px;" valign="top">
<img src="img/image-4.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" />
</td>
</tr>
</table>
<!-- 2nd row -->
<table border="0" cellspacing="0" cellpadding="0" style="width: 579px;" align="center">
<tr>
<td style="width: 135px; height: 148px;" valign="top">
<img src="img/image-5.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" />
</td>
<td style="width: 13px; height: 148px;"><!-- space --></td>
<td style="width: 135px; height: 148px;" valign="top">
<img src="img/image-6.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" />
</td>
<td style="width: 13px; height: 148px;"><!-- space --></td>
<td style="width: 135px; height: 148px;" valign="top">
<img src="img/image-7.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" />
</td>
<td style="width: 13px; height: 148px;"><!-- space --></td>
<td style="width: 135px; height: 148px;" valign="top">
<img src="img/image-8.jpg" height="135" width="135" style="width: 135px; height: 135px; background: red;" alt="" />
</td>
</tr>
</table>
Which outputs this...
My problem I am having is that I can have from 1 to a unlimited amount of images in my gallery.
So my PHP is little more complicated to write.
This is my attempt below but is a bit ropey.
<?php
$images = get_field('image_thumbnails');
if( $images ): ?>
<?php $count = 0; ?>
<table border="0" cellspacing="0" cellpadding="0" style="width: 579px;" align="center">
<tr>
<?php foreach( $images as $image ): $count++ ?>
<td style="width: 135px; height: 148px;" valign="top">
<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" height="135" width="135" style="width: 135px; height: 135px; border: none;" />
</td>
<?php if ($count %4 == 0) { ?>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" style="width: 579px;" align="center">
<tr>
<?php } else { ?>
<td style="width: 13px; height: 148px;"><!-- space --></td>
<?php } ?>
<?php endforeach; ?>
</tr>
</table>
<?php endif;
?>
Please see my testings using this code with:
4 images
I get this error: end tag for "tr" which is not finished
3 images
Valid no errors but looks weird cause it spaces out
6 images
Valid no errors but looks weird cause it spaces out
1 image
Valid and aligns to the left... weird.
My question can any one help me come with a PHP loop at works better than mine and does not leave any syntax errors with any given image count?
use array_chunk:
$images = get_field('image_thumbnails');
if( $images ) {
$count = count( $images );
for( $i =0; $i < $count % 4; $i++ ) {
// align array
array_push($images, array());
}
$rows = array_chunk($images, 4);
?>
<table border="0" cellspacing="0" cellpadding="0" style="width: 579px;" align="center">
<?
foreach( $rows as $row ) {
?><tr><?
foreach ($row as $image) {
?>
<td style="width: 135px; height: 148px;" valign="top">
<? if ( empty( $image ) ) {
?> <?
} else {
?><img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" height="135" width="135" style="width: 135px; height: 135px; border: none;" /><?
}
?>
</td>
<?
}
?></tr><?
}
?>
</table>
<?
}
Try this solution,..
I am not writing the whole code but giving you some logic to implement your desired layout..
<?php
$count = ceil(mysql_num_rows($query)); //number of tables
for($i=0;$i<$count;$i++)
{
?>
<table>
<tr>
<?php
$num = $j*4;
for($j=($num);$j<($num+3);$j++)
{
echo "<td><img src='".$image."'></td>"
}
</tr>
</table>
}
?>