How to avoid creating a new .html doc for every link?

[Kervtuza]

Hey All!

 

I am very new to web design and I love Killersites, helps me understand a lot.

 

I am still learning HTML and CSS basics, I was just wondering if someone could explain how I can create links on my website that change information in a table without creating an entirely new .html doc?

 

for example:

 

I have been messing around using tables, so if I create links in one table and want them to change the information in another table I am currently using the following

 

<a href="filepath/link1.html">link1</a> but I have an entire new html document created for link1.html with the entire code of the website on it.

 

any ideas?

[Andrea]

What you are talking about sounds a whole lot like frames - and you want to forget about that one.

 

I have been messing around using tables, so if I create links in one table and want them to change the information in another table I am currently using the following

 

That is no good, either - tables are meant to display tabular data, have to be used for HTML emails, but have no business as layout for websites.

 

A good solution to this are php includes - you put the information that repeats on every page like header, footer, navigation each into a separate file. You create you basic HTML page, but instead of coding the header, footer, or navigation into the page, you only put the include link. Then you copy this basic structure anew for every new page and just update your content.

 

Here is a video on those includes, and no worries, no actual PHP knowledge is needed.

[Kervtuza]

That is exactly what I was looking for thank you!

 

It does leave me with a few other questions though, I am having trouble figuring out how to properly create a layout and have control over how to position everything, what it the best way to go about this?

[Andrea]

Here are some basic layout tutorials:

 

Center-aligned Web Pages with CSS

 

2-Column, Center-aligned Fixed Width Layout with CSS

 

3-Column, Fixed Width Layout with CSS

[Kervtuza]

Wow Thanks! Div tags are the greatest thing since sliced bread!

 

I am doing things I've never been able to do before. Is there a way to lock a div tag inside another div tag?(if that makes any sense), for example lets say I want to move around a div container that is inside another div container using absolute positioning, when I move the inner div container, it uses the entire web pages pixel positioning inside of just the outer div container.

 

This is what I would like to be able to do

 

#innercontainer

{

position:absolute;

Left:80%;(I normally use pixels just easier for me to explain)

}

<div id="outercontainer">

<div id="innercontainer">

</div>

</div>

 

I would like the 80% to just reflect 80% of the outer container but it is currently using 80% of the entire page=\

 

Any ideas?

[Wickham]

If your outer (containing or parent) div has position: relative; the inner (nested or child) div will take its positions from the corners of the containing div, not the corners of the window.

CSS

#outercontainer { position: relative; background-color: blue;
width: 500px; height: 500px; }

#innercontainer { position: absolute; left: 10px; top: 75px; 
background-color: red; width: 30%; height: 100px; }

 

HTML

<div id="outercontainer">

<div id="innercontainer">
Inner div
</div>

</div><!--end of #wrapper div-->

Edited January 7, 2012 by Wickham

[Kervtuza]

Perfect!

 

can you have one div wrapper inside another wrapper?

[Wickham]

As many as you want.

#outercontainer { position: relative; background-color: blue; width: 500px; height: 500px; }
#innercontainer1 { position: absolute; left: 80px; bottom: 15px; background-color: pink; width: 200px; height: 100px; }
#innercontainer2 { position: absolute; left: 10px; bottom: 75px; background-color: red; width: 40%; height: 100px; }

<div id="outercontainer">

<div id="innercontainer1">
Inner1 div<br />
Inner1 div<br />
Inner1 div
</div>

<div id="innercontainer2">
Inner2 div
</div>

</div><!--end of #wrapper div-->

[Kervtuza]

This is great info guys! This week I am going to buy some web space to show what you guys have taught me.

I am on a roll now that I am understanding div tags, lets say I have a container that is 980px wide and 100px high, how can I center my links 50% of the height?

 

/---CSS---/

#container

{

Width:980px;

Height:100;

}

/---HTML---/

<div id="container">

<a href="link.html">Link</a> (this is always displayed in the top left, I would like it to display middle left)

</div>

 

Thanks for all the help!

[newseed]

This is great info guys! This week I am going to buy some web space to show what you guys have taught me.

I am on a roll now that I am understanding div tags, lets say I have a container that is 980px wide and 100px high, how can I center my links 50% of the height?

 

/---CSS---/

#container

{

Width:980px;

Height:100;

}

/---HTML---/

<div id="container">

<a href="link.html">Link</a> (this is always displayed in the top left, I would like it to display middle left)

</div>

 

Thanks for all the help!

 

 

First off your Heigh: 100; is missing px; . Also, don't use uppercase for styles thus you use width instead of Width. It's okay to use uppercase for id and class names.

 

 

To get your link to center the page you will need to make the div a table block using display: table-cell;

 

 

Your css would look like this:

 

/---CSS---/

#container

{

width:980px;

height:100px;

display: table-cell;

text-align: center;

vertical-align: middle;

}

 

 

It won't work for older browser such as IE7.

[Wickham]

Have a look at a tutorial like w3schools

http://www.w3schools.com/html/

or Google div boxes or one of the Killersites video tutorials for more info.

[Kervtuza]

Haha I've been spending a lot of time on w3schools, plus I'm taking a college web design course, the course offers like html css flash photoshop other adobe programs but I dont think it gets deep into javascript and php which I would like to learn...

 

I watched the video for the php includes that andrea posted but I am having trouble making it work. I think I am trying to use it wrong.

 

I currently have 1 page that i included all of the html and css which contain the layout of my site, and is currently a. html file, i created a php file with only text in it and then i try to link it to my html file inside a div container so that when I click a link it will open only the text inside that div container but it currently opens up the php file in a whole new window... am I doing it backward? should i turn the html file to a php file and us the <? php @include(file. php) "? > in the body of a html doc that contains the just text?

[Andrea]

You need to name your html file .php (not .html) - the code and such stay the same, just the extension is different.

 

I currently have 1 page that i included all of the html and css which contain the layout of my site, and is currently a. html file, i created a php file with only text in it and then i try to link it to my html file inside a div container so that when I click a link it will open only the text inside that div container but it currently opens up the php file in a whole new window... am I doing it backward? should i turn the html file to a php file and us the <? php @include(file. php) "? > in the body of a html doc that contains the just text?

 

You're misunderstanding something - you don't have to click anything to get the include to show, the <? php @include(file. php) "? does that.

Also, there is nothing wrong with repeating all the basic layout code on every page of your site. But if you have a special reason to just open a new area of content within an existing page - this is often done when content from somewhere else is inserted, then you can use iframes - here's a basic tutorial on that: http://www.csstutorial.net/2010/06/styling-iframes-with-css/

[grucker]

Going back to your earlier point, which asked about clicks and showing new info in the same page.

I do it this way.

First I make a file which shows the include

<?php
switch ($_GET['part']) {
case 'reports/boxingday.php' :
include('reports/boxingday.php');
break; ?>

just keep repeating this to point to all other items

Then I show the menu to show the link to your item

<li><img src="../graphics/osblob.png" alt="blob" style="margin:15px 0px 0px 0px;"/>
<p> <a href="?part=reports/boxingday.php">Ostriches  Reach Season Peak Early</a></p>
<p class="black">26th December 2011</p>
</li>

just keep repeating this to point to all other items

Then the information you want to show

<p><img src="../reports/watch.jpg" alt="Slapon Watches" />Match  Report Sponsored By Slapper Watches</p>
<h2 class="white">Ostriches  Reach Season Peak Early</h2>
<h3 class="white">Ostriches 28 Bulldogs 6</h3>

Then the two includesThat go on the page of your choice wherever you decide

<?php
include ("includes/newsmenu.php");
?>

<?php
include ("includes/newsreport.php");
?>

There you have it, an empty page which can be filled with whichever link is clicked particularly useful if others are adding content as the material included can be plain text.

[Wickham]

I think there's a missing closing curly brace near the end. I think it should be:-

<?php
switch ($_GET['part']) {
case 'reports/boxingday.php' :
include('reports/boxingday.php');
break;} 
?>