I have made a navbar in photoshop and converted into code using the Save to web function in Photoshop, now the navbar is getting displayed OK, but when I add other stuff code then it just gets out of the page, its width increases.
My navbar.html
<html>
<head>
<title>Couture Collection</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Untitled-3) -->
<table id="Table_01" width="1366" height="78" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="images/navbar_01.png" width="1125" height="21" alt=""></td>
<td colspan="2">
<img src="images/navbar_02.png" width="241" height="21" alt=""></td>
</tr>
<tr>
<td>
<img src="images/navbar_03.png" width="180" height="56" alt=""></td>
<td>
<img src="images/navbar_04.png" width="217" height="56" alt=""></td>
<td>
<img src="images/navbar_05.png" width="272" height="56" alt=""></td>
<td>
<img src="images/navbar_06.png" width="207" height="56" alt=""></td>
<td colspan="2">
<img src="images/navbar_07.png" width="414" height="56" alt=""></td>
<td>
<img src="images/navbar_08.png" width="76" height="56" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="180" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="217" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="272" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="207" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="249" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="165" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="76" height="1" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
1125+241 = 1366 and 180+217+272+207+414+76 = 1366
So if you add another td it will increase your nav and exceed 1366px. Best way should be to use real HTML + CSS to make your navbar instead of generating it with photoshop because it's using fixed width (which is not responsive at all)
Related
I have content stored in mysql, as following:
<table width="450" cellspacing="1" cellpadding="1" border="1">
<tbody>
<tr>
<td><img width="513" height="680" align="left" alt=" src="/userfiles/image/pic.jpg" /></td>
<td><img width="315" height="700" align="left" alt=" src="/userfiles/image/DSC_0389.JPG" /></td>
<td><img width="580" height="320" align="left" alt=" src="/userfiles/image/ktxh.jpg" /></td>
</tr>
</tbody>
</table>
When I load from db, PHP and display in html by PHP, there is no problem.
Now, I want all images, be displayed by fixed width and height as 200 X 200 AND TABLE BORDER = '0'
<table width="200" cellspacing="1" cellpadding="1" border="0">
<tbody>
<tr>
<td><img width="200" height="200" align="left" alt=" src="/userfiles/image/pic.jpg" /></td>
<td><img width="200" height="200" align="left" alt=" src="/userfiles/image/DSC_0389.JPG" /></td>
<td><img width="200" height="200" align="left" alt=" src="/userfiles/image/ktxh.jpg" /></td>
</tr>
</tbody>
</table>
How do I solve this problem?
Replace with this code and css
<style>
.cstm
{
width:200px;
height:200px
}
table
{
border:0
}
</style>
<table width="200" cellspacing="1" cellpadding="1" border="0">
<tbody>
<tr>
<td><img class="cstm" align="left" alt=" src="/userfiles/image/pic.jpg" /></td>
<td><img class="cstm" align="left" alt=" src="/userfiles/image/DSC_0389.JPG" /></td>
<td><img class="cstm" align="left" alt=" src="/userfiles/image/ktxh.jpg" /></td>
</tr>
</tbody>
</table>
As you mention the $content is dynamic, can you try adding the style to the table as such:
<style>
table td>img
{
width:200px;
height:200px
}
</style>
I have 5 images. I need to show the images based on the order.
Now I have the order in the array like
2,3,5,1,4
Now my images are in $new->image1,$new->image2,$new->image3,$new->image4,$new->image5
My result should be like if order is as like above,
order is like $new->image2,$new->image3,$new->image5,$new->image5,$new->image1,$new->image4
How can I achieve this
<table style="text-align:justify" align="center" border="1" cellspacing="0" >
{{$new->img_order}}
<?php
$order_array = explode(",", $new->img_order);
$img1 = $new->image2;
dd($new->image2);
?>
<tr>
<td height="600" rowspan="3"><img width="350" height="910px" src="{{asset('collage/'.$new->image1)}}" class="img-responsive" alt=""></td>
<td height="300" colspan="2"><img width="500" height="300px" src="{{asset('collage/'.$new->image2)}}" class="img-responsive" alt=""></td>
</tr>
<tr>
<td width="250" ><img width="250" height="350px" src="{{asset('collage/'.$new->image3)}}" class="img-responsive" alt=""></td>
<td width="250"><img width="250" height="350px" src="{{asset('collage/'.$new->image4)}}" class="img-responsive" alt=""></td>
</tr>
<tr>
<td colspan="2"><img width="500" height="250px" src="{{asset('collage/'.$new->image5)}}" class="img-responsive" alt=""></td>
</tr>
</table>
I just wonder why you not save the image path in array, but with many image1, image2, .....
Without sorting the image, you can echo the image by the order array with
$new->{'image' . $order[0]}
$new->{'image' . $order[1]}
$new->{'image' . $order[2]}
...
I want on my site to insert Google Ads on left and right sidebar, but I don't know how to create sidebars.
This is code from my header.php code that i have currently:
<?php
include "config.php";
?>
<html>
<head><meta name="adtictac-site-verification"
content="1qvt6zbzk026xfomo6gxbxxhjk9t96obv58gpcv3n9ver69s0"><meta
name="clckd" content="273a893ce34e0acd4ba2655313b5f902" />
<title><?php echo $sitename; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#2C60A9" leftmargin="1" topmargin="0" marginwidth="0"
marginheight="0">
<table width="777" border="2" bgcolor="#ffffff" align="center"
cellpadding="0" cellspacing="0" class="border">
<tr>
<td><img src="images/header.jpg" width="777" height="210" alt=""></td>
</tr>
<tr>
<td background="images/bg.jpg"><table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td width="30%"><img src="images/links.jpg" width="231" height="17"
alt=""></td>
<td width="7%"><A href="index.php"><img src="images/home.jpg" width="54"
height="17" alt="" border="0"></a></td>
<td width="11%"><A href="join.php"><img src="images/register.jpg"
width="83" height="17" alt="" border="0"></a></td>
<td width="7%"><A href="faq.php"><img src="images/faq.jpg" width="54"
height="17" alt="" border="0"></a></td>
<td width="12%"><A href="contactus.php"><img src="images/contact-us.jpg"
width="98" height="17" alt="" border="0"></a></td>
<td width="12%"><A href="advertise.php"><img src="images/advertise.jpg"
width="92" height="17" alt="" border="0"></a></td>
<td width="21%"><A href="login.php"><img src="images/login.jpg"
width="49" height="17" alt="" border="0"></a></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td class="bodytext"> </td>
<td> </td>
</tr>
<tr>
<td width="7%"> </td>
<td width="91%" class="bodytext"><p align="justify">
<?php
include "config.php";
$rs=mysql_query("select ID,BannerURL from bannersads where remaining>0 and
approved=1 and adtype=1 order by rand() limit 0,1");
while($arr=mysql_fetch_array($rs)) {
echo "<br><center><a href=$siteurl/tr.php?id=$arr[0] target=_blank><img
src=$arr[1] width=468 height=60 border=0></a><br></center><br>";
$rsu=mysql_query("update bannersads set remaining=remaining-1 where
ID=$arr[0]");
}
?>
So can someone share some tips how to create sidebars where need to create placed like shown in image? I tryed inserting this:
<div class="google">
// Google Code here
</div>
and this CSS:
.google {
margin-left:-250px;
}
but looks like broke my content in my homepage.
.google {
left: 250px;
}
Also create a container and give it width in px, not %.
Let me hope that will solve your problem.
I'm building my first site using php. I created a file called 'header.php' which contains my navigation and picture. On my 'index.php' I write inside the div where the header should be placed <?php include_once 'inc/header.php'; ?> now, you can see that the file is included but the pictures don't show and it looks like the div styles aren't working because the place holders for the pictures are in the wrong spot. If you look at 'header.php' by it's self in a browser everything looks fine, pictures are there with styles for containers. What am I missing here? This is my header.php file:
<style type="text/css">
#import url("../site_css/Css_reset.css");
#import url("../site_css/craig-smith.css");
</style>
<div class="picture"><img src="../graphics/header1.gif" />
<div id="nav">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="400">
<!-- fwtable fwsrc="navback_temp.png" fwpage="Page 1" fwbase="nav.jpg" fwstyle="Dreamweaver" fwdocid = "1996150392" fwnested="0" -->
<tr>
<td><img src="../graphics/nav/spacer.gif" width="80" height="1" border="0" alt="" /></td>
<td><img src="../graphics/nav/spacer.gif" width="70" height="1" border="0" alt="" /></td>
<td><img src="../graphics/nav/spacer.gif" width="134" height="1" border="0" alt="" /></td>
<td><img src="../graphics/nav/spacer.gif" width="116" height="1" border="0" alt="" /></td>
<td><img src="../graphics/nav/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="nav_r1_c1" src="../graphics/nav/nav_r1_c1.jpg" width="80" height="40" border="0" id="nav_r1_c1" alt="" /></td>
<td><img name="nav_r1_c2" src="../graphics/nav/nav_r1_c2.jpg" width="70" height="40" border="0" id="nav_r1_c2" alt="" /></td>
<td><img name="nav_r1_c3" src="../graphics/nav/nav_r1_c3.jpg" width="134" height="40" border="0" id="nav_r1_c3" alt="" /></td>
<td><img name="nav_r1_c4" src="../graphics/nav/nav_r1_c4.jpg" width="116" height="40" border="0" id="nav_r1_c4" alt="" /></td>
<td><img src="../graphics/nav/spacer.gif" width="1" height="40" border="0" alt="" /></td>
</tr>
</table>
</div>
</div>
and this is relevant info for index.php
<body>
<div id="body">
<div id="header">
<?php include_once 'inc/header.php'; ?>
</div>
The image paths need to be relative to index.php, not the include file. You need to remove ../ from your <img> paths
Try This :
<?php include_once './inc/header.php'; ?>
Paths should be relative to index.php not header.php. Using dreamweaver to make changes to header.php you need to manually change paths because it will make everything relative to header.php.
Are you sure the paths are correct? What does the file hierarchy look like?
I have the following site and I want with regular expressions to get the text between the following tags
<td colspan="2" align="left" valign="top" bgcolor="#FBFAF4"> ..... </td>
I am trying with the following however it returns an empty array of $matches.
preg_match_all("/<td(.*) bgcolor=\"#FBFAF4\"\>(.*)\<\/td>/",$old_filecontents,$matches);
Which is the correct pattern for this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Exotiq - Ðñïúüíôá</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7"> <link href="Styles.css" rel="stylesheet" type="text/css"> <link href="stylesheets/Styles.css" rel="stylesheet" type="text/css"> <script src="scripts/PopBox.js" type="text/javascript"></script> <script type="text/javascript"> popBoxWaitImage.src = "images/spinner40.gif"; popBoxRevertImage = "images/magminus.gif"; popBoxPopImage = "images/magplus.gif"; </script> <script type="text/javascript"> AC_FL_RunContent('codebase', 'http://download.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab#version=9,0,28,0', 'width','675','height','445','title','Morpork', 'src','assets/flash/morepork','loop', 'false','quality','high','pluginspage', 'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash', 'wmode','transparent','movie','assets/flash/morepork'); </script> </head> <body background="images/fonto2.jpg" topmargin="0"> <table width="948" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td><table width="948" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="24"> </td> <td height="150" colspan="3"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="900" height="150"> <param name="movie" value="flash/top02.swf"> <param name="quality" value="high"> <param name="wmode" value="transparent"> <embed src="flash/top02.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="900" height="150"></embed></object></td> <td width="24" height="150"> </td> </tr> <tr> <td height="31" colspan="5" valign="middle"> <div align="center"> <script src="menu/xaramenu.js"></script> <script Webstyle4 src="menu/menu_.js"></script> </div></td> </tr> <tr> <td width="24"> </td> <td width="200" valign="top" background="images/GreenFasa.jpg"> <br> <table width="180" border="0" align="center" cellpadding="0" cellspacing="1"> <tr> <td height="25" class="styles"> Makuti<br> <hr> </td> </tr> <tr> <td height="25" class="styles"> Fun Palm<br> <hr> </td> </tr> <tr> <td height="25" class="styles"> Alang-Alang<br> <hr> </td> </tr> <tr> <td height="25" class="styles"> Thatch<br> <hr> </td> </tr> <tr> <td height="25" class="styles"> <strong>Abaca</strong><br> <hr> </td> </tr> <tr> <td height="25" class="styles"> </td> </tr> </table></td> <td colspan="2" align="left" valign="top" bgcolor="#FBFAF4"> <div align="left"> <table width="680" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="600" height="40" class="titles">ÊáôáóêåõÝò - ÏìðñÝëåò - Abaca</td> <td width="50" align="right" valign="middle" class="titles"> <div align="right"><img src="images/uk-flag.jpg" width="30" height="17" border="0"></div></td> </tr> <tr> <td colspan="2" class="body"><p>Ç ïìðñÝëá <strong>Abaca</strong> Ýñ÷åôáé ùò Üîéïò áíôéêáôáóôÜôçò ôçò ïìðñÝëáò Rattan ðïõ åðß 15 ÷ñüíéá óôïëßæåé ôéò åëëçíéêÝò ðáñáëßåò. Ôï <strong>Abaca</strong> åßíáé Ýíá öõóéêü õëéêü ðéï <strong>áíèåêôéêü</strong> êáé ðéï üìïñöï áðü ôï Rattan. <br> Ðáñáäßäåôáé ìå <strong>îýëéíï êïñìü åìðïôéóìïý</strong> Ö8åê.<br> <br> </p> <table width="680" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="340" height="150" valign="middle"> <div align="left"><img src="images/Manufactures/Umbrelas/Abaca/AbacaUmbrela.jpg" width="328" height="500"></div></td> <td width="340" height="150" valign="bottom" class="body"> <table width="340" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="170" height="130"> <div align="center"><img src="images/Manufactures/Umbrelas/Abaca/1_Abaca02_s.jpg" width="152" height="101" class="PopBoxImageSmall" onclick="Pop (this,50,'PopBoxImageLarge');" title="ÌåãÝèõíóç" pbsrc="images/Manufactures/Umbrelas/Abaca/1_Abaca02.jpg" pbCaption="Abaca - ÏìðñÝëá ðáñáëßáò" popBoxCaptionBelow="true" /></div></td> <td width="170" height="130"> <div align="center"><img src="images/Manufactures/Umbrelas/Abaca/2_Abaca03_s.jpg" width="150" height="112" class="PopBoxImageSmall" onclick="Pop (this,50,'PopBoxImageLarge');" title="ÌåãÝèõíóç" pbsrc="images/Manufactures/Umbrelas/Abaca/2_Abaca03.jpg" pbCaption="Abaca - ÏìðñÝëá ðáñáëßáò" popBoxCaptionBelow="true" /></div></td> </tr> <tr> <td width="170" height="130"> <div align="center"><img src="images/Manufactures/Umbrelas/Abaca/3_Abaca01_s.jpg" width="150" height="112" class="PopBoxImageSmall" onclick="Pop (this,50,'PopBoxImageLarge');" title="ÌåãÝèõíóç" pbsrc="images/Manufactures/Umbrelas/Abaca/3_Abaca01.jpg" pbCaption="Abaca - ÏìðñÝëá ðáñáëßáò" popBoxCaptionBelow="true" /></div></td> <td width="170" height="130"> <div align="center"></div></td> </tr> <tr> <td width="170" height="130"> <div align="center"></div></td> <td width="170" height="130"> <div align="center"></div></td> </tr> <tr> <td width="170" height="130"> <div align="center"></div></td> <td width="170" height="130"> <div align="center"></div></td> </tr> </table></td> </tr> <tr> <td width="340" height="50" valign="top"> <p align="center"> </p></td> <td width="340" height="50" valign="top"> <div align="center" class="perigrafes">ÊëéêÜñåôáé ðÜíù óôéò öùôïãñáößåò ãéá ìåãÝèõíóç</div></td> </tr> <tr> <td width="340" valign="bottom"> <div align="center"> </div></td> <td width="340" valign="bottom"> <p align="center"> </p></td> </tr> <tr> <td width="340" valign="top"> <div align="center"></div></td> <td width="340" valign="top"> <p align="center"> </p></td> </tr> <tr> <td height="20" colspan="2" valign="top"> </td> </tr> </table></td> </tr> </table> <font color="#FFFFFF"></font></div></td> <td width="24" height="420"> </td> </tr> <tr> <td width="24"> </td> <td width="200"> </td> <td width="600"> </td> <td width="100"> </td> <td width="24"> </td> </tr> </table></td> </tr> <tr> <td height="22"><table width="900" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#007F3E"> <tr> <td height="25"> <div align="center" class="styles">All rights reserved ® Designed by CONTINENTAL ADVERTISING </div></td> </tr> </table></td> </tr> </table> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-12742174-1"); pageTracker._trackPageview(); } catch(err) {}</script> </body> </html>
Given that the cell you're talking about contains HTML, another table in fact, you can't do traditional termination checking ... or you'll get the content between the cell opening and the first </td> you find. Plus '.' isn't multi-line friendly, so unless your cell opens and terminates on the same line, you'll get no matches.
I'd say don't use regular expressions for this. Try an XML parser.
If you were just getting plain text, that'd be fine, but because you're returning HTML which contains your terminator, you'll need to use a parser with some kind of DOM depth awareness ... ... or find a way to count terminators in regex.