|
HTML - Including An External Html File Questions
ok so to start off if I ask any dumb questions my apologizes. I have just started writing HTML code. I have done quite a bit of C++ but its been years and html is much different.
Well here is my question I have made a dynamic sidebar for my webpages so I can cut out all those blocky link buttons at the top of the page. So I created an external html file and wrote the code for the side bar, but I can't figure out how to get it into my webpage html files. I am sure its something minor but I can't seem to figure it out. I have been able to get it on the page by using iframe but I really don't like iframe. One of the really big things is I want it locked to the right side of the browser screen so if you scroll it stays there. Also it needs to float above everything else so it will open on top of the webpage and no disrupt the content. I am sorry if this is a simple thing but I have spent 2 days reading everything I can on it and can't get it to work. I have tried it as a PHP file with include command. I tried link didn't work also. I know I could just include all the code on the pages but I am trying to learn how to use template correctly so as to make my pages as clean and SE friendly as possible. Last thing if I need to post some of the code up here to help I can do that. Well thanks in advance, this will make my day if I get this dang side bar to work. Thanks J Similar TutorialsHi I use an include to display an exteral html file in a div. If I strip the html file of all the header formatting, it displays fine. As soon as I add the header info, transitional info etc, it adds a couple of blank line breaks to the top of the text dsiplayed in the external div. here's the link:www.mcbub.com How do I make it so the text starts at the top? thanks in advance! Hi I use an include to display an exteral html file in a div. If I strip the html file of all the header formatting, it displays fine. As soon as I add the header info, transitional info etc, it adds a couple of blank line breaks to the top of the text dsiplayed in the external div. How do I make it so the text starts at the top? Cheers Shaun Is it possible to include a header and footer file using HTML? I have my file as a .html and need to be able to include the HTML for the header and footer. Anyone know how I can do this? Is it possible to include a header and footer file using HTML? I have my file as a .html and need to be able to include the HTML for the header and footer. Anyone know how I can do this? Hi there, I've got an example xml page that I'm trying to separate into tidier pices (eg separate files for stylesheets, xsl, xml etc). However I don't know how to separate the xml file? Normally in html it's just something like with stylesheets/javascript etc: <script>script here</script> turns into <script src="external.js"></script> But that doesn't work with xml it appears, so can anyone tell me how I can remove the bit in <xml> ... </xml> to an external file and get it loading from that external file...? I have an html application consisted of a number of html files, js files and css files. Is it possible to have an external property file where I can keep the name of the server so as to use a variable for the urls? For example to have something there like nameOfTheUrl=andreana and in the html file to have something like http://nameOfTheUrl/content/index.html My server has java but it is not a servlet container so I can not use jsp. Can an image map be stored externally, and read in, when an image is read in? For my current project, I will have 67 different image maps, but for my next project, that will increase to 125 different image maps. George Hi I have the following code loading an external .txt file into a DIV <?php $content = file_get_contents($_SERVER['DOCUMENT_ROOT']."/text_files/about_text.rtf"); echo htmlspecialchars($content); ?> It loads, but the line breaks are ignored, so it appears as one continous string of words. How do I make the html display the text file's line breaks? Thanks for your time and info Shaun Hi guys, I have a div on my page, which essentially just places a layer/table over the entire page and displays a "LOADING..." message, then promptly disappears when everything hidden beneath it has finished loading. I want to use this same div in several other pages, so I thought the best way would be to place it in an external file, then simply call it when required. Can someone please tell me how I can do this, i.e. what code I need to place in my HTML script to call an external div? I apologise if this is an obvious newbie-style question! But I appreciate any help that anyone out there can give me. Thanks in advance, Kate. Hello! I'll be using an HTML pulldown menu system for a website, where the menu links are for pages on that website. Easy enough! But....when I add webpages to the website, I'll have to edit the HTML of the menu on each and every webpage to incorporate the new link. Again, easy enough, but time consuming. So I need a system where the pulldown menu looks to an external file for it's links - then, all I have to do is edit one file instead of editing every webpage. Can anyone help? (BTW - I wasn't sure what board to post this in, so if it needs moving to client-side or server-side, that's cool). Hi guys, im trying to setup a simple website for my football team and ive run intio a small problem. I originally had the Navigation code on every page but started to get annoying when i wanted to make changes etc. So by following the FAQ he http://bonrouge.com/~faq#includes I thought id found the answer to my problem but i cant seem to get it to work. The below code is contained in a file called menu.htm <div id="navigation"> <h2>Navigation</h2> <ul> <li><a href="home.htm">Home</a></li> <li><a href="squad.htm">Squad</a></li> <li><a href="fixtures.htm">Fixtures</a></li> <li><a href="matchReport.htm">Match Reports</a></li> <li><a href="news.htm">News</a></li> <li><a href="sponsorship.htm">Sponsorship</a></li> <li><a href="motm.htm">Man of the Match</a></li> <li><a href="forum.htm">Forum</a></li> </div> My code for the first page called "home.htm" is as follows <!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> --> <html> <head> <title>Pavilion FC</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="myCSS.css" rel="stylesheet" type="text/css"> </head> <body> <div id="logo"> <h1></h1> <p> </p> </div> <!--#include file="menu.html"--> </body> </html> Is this code meant to have the comments round it? Should it be in the HTML or CSS file? I also tried converting the files to PHP and usign the line <?php include 'menu.php'; ?> but that didnt seem to work either. Both times the menu just doesnt appear. Im using firefox to view the files offline before uploading, so that id upload it anyway to see if php needed to be enabled or soemthing but still doesnt work. Hi all, I'm wondering if someone could explain a little about the validation of my site? http://validator.w3.org/check?uri=ht...ctype=Inli ne For one thing, I can't understand why it gives the wrong line in the code for the error, and what is means by the column of the code. Neither of them correspond in any way with my code, that I can see. Also, why is telling me that maginheight, height, etc., are all invalid elements. Finally, will being html 4 compliant help my page rank in any way? im going to start off saying that thanks for helping me with the layout changer, it works awesome, thank u guys for ur patience well i have a site aka spt.byethost7.com i have a few questions - I want when someone clicks a link on my menu i want the site not to move just the middle part which is where i will have the stuff of which the link will represent. for example: http://www.pokenebula.mihopa.net/ click Berry Dex under General, ull see that the page doesnt change just the middle part, can ya tell me please? - Is byethost a good host? - can i get the best free host? if so please tell me thanks for ur time 1. Under the picture, there are some tags (funny, meme, comic). When you hover over the tags, they turn white/bright. Is there a way to make this stay white/bright? (http://plustom.tumblr.com/post/18287272359) 2. Under the picture, there are pictures of some people. When you hover over their pictures, they turn white/bright. Is there a way to make this stay white/bright? (http://plustom.tumblr.com/post/18287272359) 3. Under the pictures of the people, there is a link that says "Previous Post". When you hover over it, it gets bold. Is there a way to make this stay unbold? (http://plustom.tumblr.com/post/18287272359) Current HTML code: (Excuse the faces). HTML Code: body {font-family: {font:Text}; font-size: 12px; color: {color:Font}; background-color: {color:Background};}
#right {width: 250px; left: 50%; top: 50px; margin-left: -400px; position: absolute; {block:IfFixedSidebar}position: fixed;{/block:IfFixedSidebar} -webkit-transition-duration: .3s;}
#right:hover {opacity: 1;}
#right a {text-decoration: none;}
.title {padding-bottom: 10px; border-bottom: 2px solid {color:Tertiary}; font-size: 14px; display: inline-block; font-weight: bold; margin-bottom: 10px;}
a {color: {color:Font};}
.link {font-size: 11px; display: inline-block; margin-top: 5px; font-weight: bold;}
#center {width: 400px; margin: auto; margin-top: 50px;}
#description {margin-bottom: 5px; font-size: 11px; max-width: 200px;}
.entry {margin-bottom: 20px; padding-bottom: 20px; border-bottom: 2px solid {color:Secondary};}
.entry img {-webkit-box-shadow: 1px 1px 1px 1px {color:Shadow} !important; max-width: 400px;}
.perma {position: absolute; opacity: 0; -webkit-transition-duration: .2s; z-index: 1;}
{block:IndexPage}.entry:hover .perma {opacity: 1;}{/block:IndexPage}
.permalink {display: inline-block; padding: 10px; background-color: {color:Primary}; color: {color:Primary Font};}
.permalink:hover
.exclamation {display: inline-block; margin-left: 1px; opacity: 0; -webkit-transition-duration: .2s;}
.link:hover .exclamation {opacity: 1;}
.text_perma {width: 100px; text-align: right; position: absolute; margin-left: -110px; -webkit-transition-duration: .2s; opacity: 0;}
{block:IndexPage}.entry:hover .text_perma {opacity: 1;}{/block:IndexPage}
.text_permalink {border-bottom: 1px solid {color:Background}; display: inline-block; -webkit-transition-duration: .2s;}
.text_permalink:hover {border-bottom: 1px solid {color:Secondary};}
h2 {font-size: 14px;}
h2 a {text-decoration: none; border-bottom: 1px solid; -webkit-transition-duration: .2s;}
h2 a:hover {border-bottom: 1px solid {color:Background};}
.label {margin-right: 10px; font-weight: bold;}
.album_art {display: inline-block; margin-right: 10px; float: left;}
.album_art img {width: 150px; height: 150px;}
.audio {display: inline-block; min-height: 150px; max-width: 207px;}
ol.notes {margin-left: -45px; list-style-type: none; width: 400px;}
ol.notes a:hover {text-decoration: none;}
ol.notes blockquote {margin-top: -3px; margin-left: 0px; padding-left: 13px; padding-top: 5px; border-left: 11px solid {color:Primary}; margin-bottom: 0px;}
ol.notes li.note {padding: 5px;}
li.note img {margin-right: 10px; width: 11px; height: auto; opacity: .5; -webkit-transition-duration: .3s;}
li.note:hover img {opacity: 1;}
.entry blockquote {border-left: 2px solid {color:Primary}; padding-left: 10px; margin-left: 25px;}
.player {-webkit-box-shadow: 1px 1px 1px 1px {color:Shadow};}
#tags {margin-bottom: 20px;}
#tags a {margin-right: 10px; opacity: .7; text-decoration: none;}
#tags a:hover {opacity: 1;}
.nav_1 {display: inline-block; width: 50%; margin-bottom: 20px;}
.nav_2 {display: inline-block; width: 50%; text-align: right; margin-bottom: 20px;}
#nav a {text-decoration: none;}
#nav a:hover {font-weight: bold;}
.audio_symbol {padding: 7px; background-color: {color:Background}; opacity: .9; border-radius: 100px; position: absolute; margin-top: 7px; margin-left: 7px; font-size: 14px; height: 15px; width: 15px; -webkit-text-stroke: 1px transparent;}
{block:IfInfiniteScrolling}.regular_pagination {display: none;}{/block:IfInfiniteScrolling}
http://plustom.tumblr.com/ This is my current blog and I need some help tweaking it. 1. When you hover over the sidebar title/picture, it turns bright/white. Is there a way to make it stay bright/white without hovering over it? 2. Is there a way to move the sidebar with the title/picture over to the left? 3. When you hover over the picture in the middle, there's a small square box at the top left corner of the picture. It's white when you hover over the picture, but when you hover over the square, it's gray. Is there a way to make the square box stay white all the time? 4. There is a white line under the picture. Is there a way to make it bold similar to the line under "Amnesia"? Current HTML code: (Can't seem to post rest in next post). HTML Code: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{Title}</title>
<meta name="color:Background" content="#FFFFFF"/>
<meta name="color:Font" content="#000"/>
<meta name="font:Text" content="Arial"/>
<meta name="color:Primary" content="#dcdcdc"/>
<meta name="color:Primary Font" content="#fff"/>
<meta name="color:Secondary" content="#eee"/>
<meta name="color:Tertiary" content="#ccc"/>
<meta name="color:Shadow" content="#dcdcdc"/>
<meta name="if:Show Caption" content="0"/>
<meta name="if:Fixed Sidebar" content="1"/>
<meta name="if:Infinite Scrolling" content="0"/>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}<link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="toggle.js" type="text/javascript"><!--mce:1--></script>
<style type="text/css">
body {font-family: {font:Text}; font-size: 12px; color: {color:Font}; background-color: {color:Background};}
#right {width: 250px; left: 50%; top: 50px; margin-left: 220px; position: absolute; {block:IfFixedSidebar}position: fixed;{/block:IfFixedSidebar} opacity: .7; -webkit-transition-duration: .3s;}
#right:hover {opacity: 1;}
#right a {text-decoration: none;}
.title {padding-bottom: 10px; border-bottom: 2px solid {color:Tertiary}; font-size: 14px; display: inline-block; font-weight: bold; margin-bottom: 10px;}
a {color: {color:Font};}
.link {font-size: 11px; display: inline-block; margin-top: 5px; font-weight: bold;}
#center {width: 400px; margin: auto; margin-top: 50px;}
#description {margin-bottom: 5px; font-size: 11px; max-width: 200px;}
.entry {margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid {color:Secondary};}
.entry img {-webkit-box-shadow: 1px 1px 1px 1px {color:Shadow} !important; max-width: 400px;}
.perma {position: absolute; opacity: 0; -webkit-transition-duration: .2s; z-index: 1;}
{block:IndexPage}.entry:hover .perma {opacity: 1;}{/block:IndexPage}
.permalink {display: inline-block; padding: 10px; background-color: {color:Primary}; color: {color:Primary Font};}
.permalink:hover {opacity: .7;}
.exclamation {display: inline-block; margin-left: 1px; opacity: 0; -webkit-transition-duration: .2s;}
.link:hover .exclamation {opacity: 1;}
.text_perma {width: 100px; text-align: right; position: absolute; margin-left: -110px; -webkit-transition-duration: .2s; opacity: 0;}
{block:IndexPage}.entry:hover .text_perma {opacity: 1;}{/block:IndexPage}
.text_permalink {border-bottom: 1px solid {color:Background}; display: inline-block; -webkit-transition-duration: .2s;}
.text_permalink:hover {border-bottom: 1px solid {color:Secondary};}
h2 {font-size: 14px;}
h2 a {text-decoration: none; border-bottom: 1px solid; -webkit-transition-duration: .2s;}
h2 a:hover {border-bottom: 1px solid {color:Background};}
.label {margin-right: 10px; font-weight: bold;}
.album_art {display: inline-block; margin-right: 10px; float: left;}
.album_art img {width: 150px; height: 150px;}
.audio {display: inline-block; min-height: 150px; max-width: 207px;}
ol.notes {margin-left: -45px; list-style-type: none; width: 400px;}
ol.notes a:hover {text-decoration: none;}
ol.notes blockquote {margin-top: -3px; margin-left: 0px; padding-left: 13px; padding-top: 5px; border-left: 11px solid {color:Primary}; margin-bottom: 0px;}
ol.notes li.note {padding: 5px;}
li.note img {margin-right: 10px; width: 11px; height: auto; opacity: .5; -webkit-transition-duration: .3s;}
li.note:hover img {opacity: 1;}
.entry blockquote {border-left: 2px solid {color:Primary}; padding-left: 10px; margin-left: 25px;}
.player {-webkit-box-shadow: 1px 1px 1px 1px {color:Shadow};}
#tags {margin-bottom: 20px;}
#tags a {margin-right: 10px; opacity: .7; text-decoration: none;}
#tags a:hover {opacity: 1;}
.nav_1 {display: inline-block; width: 50%; margin-bottom: 20px;}
.nav_2 {display: inline-block; width: 50%; text-align: right; margin-bottom: 20px;}
#nav a {text-decoration: none;}
#nav a:hover {font-weight: bold;}
.audio_symbol {padding: 7px; background-color: {color:Background}; opacity: .9; border-radius: 100px; position: absolute; margin-top: 7px; margin-left: 7px; font-size: 14px; height: 15px; width: 15px; -webkit-text-stroke: 1px transparent;}
{block:IfInfiniteScrolling}.regular_pagination {display: none;}{/block:IfInfiniteScrolling}
</style>
</head>
<body>
<div id="right"><div style="display: block;"><div class="title"><a href="/">{Title}</a></div></div>
<div id="description">{Description}</div> {block:AskEnabled}<div style="display: block;"><div class="link"></div></div>{/block:AskEnabled} <div style="display: block;"><div class="link"></div></div> <div style="display: block;"></a></div></div> {block:SubmissionsEnabled}<div style="display: block;"></a></div></div>{/block:SubmissionsEnabled} {block:HasPages}{block:Pages}<div style="display: block;"><div class="link"><a href="{URL}">{Label}<div class="exclamation">!</div></a></div></div>{/block:Pages}{/block:HasPages} <div style="display: block;"><div class="link"></a></div></div></div>
<div id="center">
Hi everyone. I am looking to engage someone in conversation about an HTML cut-up excercise I am currently working on. I have some basic HTML and CSS experience from several short evening courses I attended a couple of years ago, built myself a couple of very basic, amateur sites (I am interested in 3d modeling and built myself a couple of portfolio sites to show some of my models), and went as far as to fumble my way through putting together a practice e-commerce site using PHP/mysql/apache. This was all a couple of years ago now and I had thought web design was a thing of my past. But, in a slightly strange turn of recent events I put myself forward for an seo position at a local web dev company, and came away asked if I would be interested in a junior front end developer role. I am eager to take on this challenge, and have been given an html cut-up excercise to do as a barometer of my abilities. Everything I have ever done web wise, has really been from scratch, so this cut-up business is very new to me. I found several videos on youtube which all centred around the slice tool in photoshop, and then saving out the slices as an html and images file, to then fine tune elsewhere, in my case, Dreamweaver. I am conscious though, of not having an image heavy webpage, and also am not happy with the huge and complicated table that Photoshop coded for me as a result of all my slicing. So, does anyone have any experience with Photoshop cut-ups, and ideas to get the best results from the outcome. At the moment, Ive hand coded most of the buttons, so they are no longer images, and added links to them. But I got to a point where all the 1 pixel high 'spacer.gif's' were getting on my nerves that I deleted all of them. Then that left me with a very distorted and empty looking table, so I deleted all the table elements from the code also. So my idea from here is to use divs and absolute positioning to place all the leftover 'necessary' parts, how they look in the original psd image. Does it sound like I am on the right path? I assume there are several methods of going about a cut-up. Could anyone give me some advice? Ben Hello this is my first post i know some things about html but not too many i want to make a site but dont know some thing yet. i dont want to download a template i make it with notepad now. 1)how exactly i can put images at the exact place and there isnt any space between pictures? 2)how i can put pictures on pictures, i want to make a small image that inside there will be links and those links will be small images 3)i want in the middle of site to be some news that will be written in front of an the image for news how i do that. 4)also i want to make a small windows that will saw some picture and those pictures will change every 5 seconds for all these things will i need any other programm or i can do it just with notepad? I have a table, I have a main header and 2 sub header's, and i want to center the main header to the middle of the table. Can anyone help me? Heres my table: EDIT: WHERES COOTHEAD!! I have gone back from scratch in HTML but this time creating my own tutorial as I go along and have covered a few items before right here on this forum before and now I just can't seem to remember and understand the bleepety-bleep-bleep-BLEEP things no matter how many tutorials I read a million times on the net, so really freaking frustrating, my head is about to explode, sorry got to vent somewhere before I run amok! Ok, [I'm taking a few deep breaths here......], let me start with "linking to a location on the same page", I see the anchors Quote: <a href="#myanchor">Go to anchor</a> <a name="myanchor">My Anchor</a> Using my text here as an example, I want to use the word in the first line "gone" to link directly to the word "million" in the 5th line from the top, how do I do this please? Hello all. I'm new to these forums. A new free MMO is being launched on June 20, and I have decided to make a nice guild page for the guild me and a friend have made. However, having absolutely no experience whatsoever with coding, I've run into some problems. The site may be viewed he www.maliceadmin.5gbfree.com I have set the site up perfectly the way I want it on my main desktop. Everything is aligned perfectly, no trouble at all. This is on a 19 inch monitor at 1280x960 resolution. However, I was just surfing the web upstairs here on my laptop and decided to check out my site. The text is not aligned properly as it was shown on my main desktop. I'm completely new to coding so please be very detailed in your responses. Does anybody know what the problem might be? Also, I couldn't figure out how to adjust the height of my table. For example, when text reaches the end of the black box, I want it to cut off and have a scrollbar to be scrollable. My final and least important question why the text size and alignment works on Firefox, but not IE. That would be all. Thanks for your time. |
|||||||