Dreamweaver is generally pretty easy to image map in but I can't seem to get the crosshairs for the image mapping tool to work. I have version CS5.5.
<html>
<head>
<div id="top-header">
<div align="center">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" margin="20">
<tr>
<div id="top-image"><img src="pics/TopHeader.jpg"></div>
<tr>
<div id="nav-bar"><img src="pics/NavBar.jpg" name="NavBar" border="0" usemap="#NavBarMap" id="NavBar"></div>
</div>
</div>
</div>
</table>
</head>
</html>
Basically I'm trying to just click on the NavBar.jpg file in the design window, get the rectangle mapping cursor and just start making the map. For further clarity, this is a header.inc.php file that I'm using to include in all the pages on the site. Every time I go to click on the image it highlights the table code on the split screen.
Can you not image map within a table? I'm using the table for alignment purposes so I'd like to keep it in there if possible. Thanks.
I'm not exactly sure what you are shooting for in your navigation, but you can do the whole thing with CSS in a multitude of different ways. It will be easier to create, and easier to change later on if you find that you need to.
If you haven't created navigation in css before, this list will help you cover a lot of ground: http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php
EDIT:
This site also has some excellent tutorials to clear up any confusion: http://net.tutsplus.com/?s=css+navigation
Related
In my Yii2 application I use kartik mpdf to generate PDF from html.
I have a table on a PDF that is full width in my local machine (Windows) which is the expected behaviour. However, when I deploy it on the Ubuntu server, the table is half width.
I have cross checked the dependecy versions and both the enviornments have identicle dependencies as well.
I confirmed that the parent containers (div) of the table are behaving normally by placing texts within them. Its only the <table> element that gets dropped in size in the whole PDF when deployed.
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="table-responsive">
<table class="table table-bordered" >
<tbody>
</tbody>
</table>
</div>
</div>
</div>
This is my code for the table without the body.
Any idea whats happening behind and how to fix it?
You can add additional CSS:
$pdf = new Pdf([
..........
'cssFile' => '#vendor/kartik-v/yii2-mpdf/assets/kv-mpdf-bootstrap.min.css',
'cssInline' => '',
.........
]);
With this css file my table are with 100% width. You can insert your own css file or add you css classes in cssInline
I was struggling with the great kartik/yii2-mpdf a couples of days ago and I learnt something. Just give to it the minimum CSS you need. For example, rules containing !important are totally ignored.
For this full width table, try adding style="width: 100%;" to the table tag.
After many struggles, I found that MPDF shrinks the table to fit the tallest row into one page. If you have multiple rows (cells) merged vertically then you'll run into this.
tables will resize so that the tallest row (cell) will fit on a page - this is the only one that cannot be overridden
It is mentioned in the troubleshooting section of the documentation.
I've been looking at this for a few hours now and I've probably overlooked something silly, but I really can't get this to work.
I have created a .php file with four different php-files which are included with the
I am practicing with building websites and my first website used to solve this problem with frames, I could simply target every anchor tag to the mainframe and it worked perfectly. However, as frames are a deprecated feature, I decided to replace them. I can't seem to get the links working however.
There are tons of answers around, and that's probably the biggest problem, I can't figure out which solution fits to my specific design. Sorry if this is a doublepost.
This is what I've created so far:
<div id="header" class="header">
<img src="Images/metallic.png" width="125" height="125" alt=""/>
<img src="Images/database.png" width="85%" height="125" align="right" alt=""/>
</div>
<?php include 'Parts/upperdivs.php'; ?>
<?php include 'Parts/navigation.php'; ?>
<?php include 'Pages/main.php'; ?>
As said, there are buttons with hyperlinks in the navigation page and 'normal' hyperlinks in the upperdivs. Is there a way to open all those hyperlinks in the main content div, without having to copy all I've already got? I've read a lot of information about Ajax and the PHP-load feature, but I'm not sure what I should use. I've tried adding it as well, but couldn't get it to work. Thanks in advance!
Edit: I've also tried using an Iframe with an Iframe ID, and pointing to it using the target-tag. The problem is that the pages differ very much in content - if I set the height of the Iframe to, let's say, 1000px, it's way to large and you can scroll too far down on pages with minimal content, and if I set it to 100px, I get two scrollbars, one on the Iframe and one on the right side of the webpage, which is very ugly - and above all - very annoying.
Without being clear on exactly what you're asking, I assume you're looking for an easier way to handle includes.
This is not the best way to do it, but I would have each page be in the URL you want, and have the 'Parts' pages be in a separate folder.
/
| main.php
| about.php
| news.php
/ Parts
| navigation.php
| upperdivs.php
| EVERY_PAGE.php
Then as a shortcut, you could make EVERY_PAGE.php like this:
<div id="header" class="header">
<img src="Images/metallic.png" width="125" height="125" alt=""/>
<img src="Images/database.png" width="85%" height="125" align="right" alt=""/>
</div>
<?php include 'Parts/upperdivs.php'; ?>
<?php include 'Parts/navigation.php'; ?>
On each page you would do this:
<?php include 'Parts/EVERY_PAGE.php'; ?>
///
// ... Page code here ...
//
Also, it's good to learn some better styles of coding, but this will get the job done in a clean and quick way.
I'm rather new to programming, but I'm trying to find a way to do what is described below.
<body>
<div class="gallery">
<img src="photo_1.jpg">
<img src="photo_2.jpg">
<img src="photo_3.jpg">
<!-- trigger for user to load items that weren't downloaded on page load -->
<img src="photo_4.jpg">
<img src="photo_5.jpg">
<img src="photo_6.jpg">
</div>
</body>
I'm trying to find PHP functions that would, ideally, only load the first 3 img embeds within a certain class/ID, and have a clickable trigger to request the remaining img embeds from the server.
I don't know if this is how the typical message board software(such as vBulletin) handles things with "spoiler tags" .. as in whether or not it actually prevents loading, or just hides the content from view. Something like that, if it actually prevents loading, is what I'd like to know about.
First, this has nothing to do with PHP.
The only way to prevent a page from loading the image is to not include the tags on the page.
You could accomplish this a couple ways:
Place the last three photos inside a hidden container and use a Javascript click event to display them when wanted, but that still loads the images when the page is loaded.
Or, you can use an AJAX call to retrieve the items only on demand. Unless they are really large images I would think the first option the best.
<div class="gallery">
<img src='photo1.jpg'/>
<img src='photo2.jpg'/>
<img src='photo3.jpg'/>
<a href="#" onClick='document.getElementById("hidden-gallery").display="visible"'>show more</a>
<div id="hidden-gallery" class="hidden-gallery" style="display:none">
<img src='photo4.jpg'/>
<img src='photo5.jpg'/>
<img src='photo6.jpg'/>
</div>
</div>
I recognize that embedding CSS styles and Javascript the way I did is not the preferred method but it is there just for the examples sake.
On my site: www.metallica-gr.net you can see that the main table has 3 columns.
1st column(left): Vertical image
2nd column(middle): Main content
3d column(right): Vertical image
Problem is, because the right image is on the bottom of the code(since it's the tables last column) it waits for main conent to load before appearing. So before the site loads it looks messy, since only one border of the layout appears.
I can't use the divs for this since I have a lot html pages made already, and also when I tried it didn' went good. Is there any way to fix this? Here's the code:
index.html:
<table border="0" cellspacing="0" cellpadding="0" id="main" align="center">
<tr>
<td width="2" valign="top"><?php include "vertical.php"?></td>
<td valign="top" style="vertical-align:top;">
<div><?php include "main.html"?></div></td>
<td width="2" valign="top"><?php include "vertical.php"?></td>
</tr>
</table>
vertical.php:
<div style="background-image:url(images/vertical.jpg); width:2px; height:100%; background-repeat:repeat-y; vertical-align:top; position:fixed; top:0;"></div>
While I would recommend exploring a more modern HTML structure (like the use of divs), I understand that sometimes a complete restructuring is not viable.
I believe the PHP output buffer may offer an interim solution.
<?php ob_start(); ?>
<table border="0" cellspacing="0" cellpadding="0" id="main" align="center">
<tr>
<td width="2" valign="top"><?php include "vertical.php" ?></td>
<td valign="top" style="vertical-align:top;">
<div><?php include "main.html" ?></div>
</td>
<td width="2" valign="top"><?php include "vertical.php" ?></td>
</tr>
</table>
<?php ob_end_flush(); ?>
What this will do is hold the page response until all the includes have been processed. You should also be aware that while this may cause less "shuffling" on the page it could also increase the perceived load time.
See the PHP Manual's documentation on ob_start for more information: http://www.php.net/manual/en/function.ob-start.php
While the above should take care of any issue caused by PHP includes it looks like you may have a few other likely culprits. The most likely being that you have tags loading from an "src". Script tags will delay all other loading while they're being loaded and processed which is why it is recommended that they be added asynchronously if possible. If they cannot be loaded asynchronously they should be included within the or directly above the closing tag.
For a little more information on your script issue see:
Does the <script> tag position in HTML affects performance of the webpage?
While sifting through the HTML I also spotted quite a few validation errors that should probably be resolved:
http://validator.w3.org/check?uri=http%3A%2F%2Fmetallica-gr.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Even a table based layout should validate as it makes browser rendering more predictable and bug hunting easier.
I think you should replace the table structure with div structure because that's the draw back of table structure that it'll load each TR / TD line by line while in DIV structure we make different divisions that's why browser will load different divisions simultaneously and that's why now a days designers are prefer DIV structure.
In your case it's starting to load from first TD and end with the last TD one by one so I think DIV structure is the solution for your problem.
I'm developing a site that's pretty lightweight on the interface and mostly database driven (equal amounts read and write). It's written in PHP and I've found the easiest way to make each page is:
Page:
<?php include("header-nav.php"); ?>
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Data Point 1</td>
<td>Data Point 2</td>
</tr>
<tr>
<td>Data Point 3</td>
<td>Data Point 4</td>
</tr>
</table>
<?php include("footer.php"); ?>
header-nav.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="assets/style.css" />
</head>
<?php include("db_connect.php"); ?>
<body>
<div id="wrapper">
<h1>Welcome</h1>
<ul id="nav">
<li>Home</li>
<li>Data</li>
</ul>
footer.php:
</div>
</body>
<?php mysql_close($dbc); ?>
</html>
All of these pages by themselves are not valid and may produce errors. Working together to create a whole page, they look great.
My question is: Would this be an efficient and easy to maintain solution?
It seems that just adding a couple includes (one at the top and one at the bottom) makes sense. Especially because the site is so lightweight that I don't need a web framework. It just feels uncomfortable to create pages without starting with <html><head>...etc.
This is definitely an okay thing. I would highly recommend it. This way if you need to change the header or anything you can do so in once place easily. And the read time for hitting the file system for the include really isn't that big of a concern. So I would say that this is definitely acceptable.
"All of these pages by themselves are not valid" - I'm not sure what you mean by this. You mean a HTML Validator wouldn't pass them? Well of course not - they are fragments of pages. What matters is what the validator says when ran against the HTML the executed PHP generates.
This is one approach, and depending on the size of the problem you're tackling it's a valid one.
Yes, IMO this is a perfectly good way to do things, especially for a small site. Done it myself many times.
Get over your discomfort. Most IDEs (Dreamweaver comes to mind) actually support this way of developing sites, and will display content correctly and honor the includes if you prefer a WYSIWYG.
I develop sites using includes, like so:
site-header.inc:
require_once 'html-header.inc';
<div id="header">
/* menus, navigation, etc. */
</div>
<div class="content">
site-footer.inc:
</div>
<div id="header">
/* menus, navigation, etc. */
</div>
require_once 'html-footer.inc';
Where "html-header.inc" and "html-footer.inc" are your HTML header and footer tags and elements (title, meta, etc.). I then have functions to allow me to add CSS, JavaScript, titles, anywhere on the page, and use ob_start() and ob_end_flush() to handle these in the footer, actually. e.g.
stylesheet_register($path, $media="screen", $type="text/css");
javascript_register($path, $type="text/javascript");
title_set($title, $overwrite=true);
It your basic concept of abstraction: Don't write the same "header" and "footer" HTML code twice. Same applies to any PHP functionality which can be easily abstracted away and decoupled. Best of luck.