HTML - Menu/content Conflict

can anybody give me a hand identifying why my content will not correctly align alongside my vertical website menu http://americanotaku.awardspace.com/index.htm

Hey guys,

I was wondering if anyone could help me?

I wish to produce a website which works in the following way:

The header and footer remain the same, and do not reload on page refresh. Then, links on a menu bar stimulate loading a new page, however only the content below the header changes.

An example of this, is the CushyCMS website (http://www.cushycms.com). When you click the menu links, the header doesn't reload, only the page content does.

How would I do this?

My reason for wanting this method, is because I wish to have an image slider present within the header of all of my pages, and I don't wish to have to update every page each time I wish to add an image.

Please help?

Many thanks,
Luke

Hi There,

Pulling my hair out over this. For the life of me, cant make it work:

http://www.cowboytuffwebsitedesign.c...cialdeals.html

I've used positive padding negative margin to stretch both div's heights to match each other. But the content div, when needed to be higher than the menu div, will overflow its content past the container divs bg. As well the footer will only clear past the menu div, not the content div.

HELP! PLEASE!

I can copy and paste HTML right into the thread if needed.

Thanks

Hi All,

First off, I am a complete beginner with html and javascript so please bear with me. My website is http://fly-budget-airlines.com. I have added a Terminal A Search Engine to the index page and, although it displays fine, if you enter flight details and click enter it doesn't work. I have found that if you load http://fly-budget-airlines.com/main.htm then the Search Engine seems to work fine. Therefore I beleive the problem lies in a javascript conflict with the menu (http://fly-budget-airlines.com/menu.htm).

Can anyone help with this? Thanks in advance.

Guy

Hello,

On one of my pages I have 2 forms and only one of them seems to work. The other one (which I have on all 600 pages of my website as it is part of a template I use) does not work on this page where I already have another form. There seems to be a conflict.

Here is the code first form (working):

<form name=ftInCmForm>
<center>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="0" cellpadding="3" cellspacing="0" bgcolor="#C0C0C0">
<tr>
<td>Convert to centimeters</td>
<td><INPUT type=radio value=0 name=choice onClick="killChoice(this.form)" checked ; tabindex="1"><font size="3">(i.e.
5' 3&quot; to 160 cm)</font></td>
</tr>
<tr>
<td>Convert to feet and inches</td>
<td><INPUT type=radio value=1 name=choice onClick="killChoice(this.form)" ; tabindex="2"><font size="3">(i.e.
160 cm to 5' 3&quot&nbsp;</font></td>
</tr>
<tr>
<td rowspan="2" valign="middle">enter length</td>
<td><input type=text name=ft size=5 onClick="form.ft.select()" ; style="font-family: Georgia" tabindex="3"> ft</td>
</tr>
<tr>
<td><input type=text name=inCm size=5 onClick="form.inCm.select()" ; style="font-family: Georgia" tabindex="4">
in/cm</td>
</tr>
<tr>
<td></td>
<td><INPUT onClick="ftInCm(this.form)" type=button value="convert" ; tabindex="5"></td>
</tr>
<tr>
<td></td>
<td><input name=answer size=40 value="The answer will appear here..." style="background-color: #C0C0C0; font-family: Georgia" tabindex="6" ></td>
</tr>
<tr>
<td></td>
<td><INPUT type=reset value=reset onClick="form.ft.disabled=false" tabindex="7" ;></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</div>
<br>
<div align="center">
<center>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#C0C0C0">
<tr>
<td align="center"> Solution</td>
</tr>
<tr>
<td><textarea rows="3" name="solution" cols="68" style="background-color: #C0C0C0; font-family: Georgia"> A more comprehensive solution will appear here...</textarea></td>
</tr>
</table>
</td>
</tr>
</table>



And here is the code for the form which is working on all but 1 page (the page with the above form on it). This is a Google site search form:

<form method="get" action="http://www.google.com/search" target="_blank">

<div style="border:1px solid black;padding:4px;width:14em;" align="center">
<table border="0" cellpadding="0" align="center">
<tr><td>
<input type="text" name="q" size="25"
maxlength="255" value="" />
<input type="submit" value="Google Search" /></td></tr>
<tr><td align="center" style="font-size:75%">
<input type="checkbox" name="sitesearch"
value="www.thetallestman.com" checked /> only search TheTallestMan.com<br />
</td></tr></table>
</div>
</form>


I have looked and looked, but have no idea where the conflict lies.
Any help would be very much appreciated.

Kind regards,

The Tallest Man

hello.
i do my best to keep all of my html valid and because custom scrollbars dont validate i decided to put the css for that in a separate stylesheet. soo my pages have two stylesheets on them , i dont know if that makes a difference or not but my problem is that the scrollbars remain the default scrollbar when i wth the doctype on the page. i use XHTML1.0 Transitional. when i remeve the doctype the scrollbar works fine.

is their a way to doo this while keeping my doctype?

hi there,

I am using this technique: http://www.smoothdivscroll.com/

im in a fairly complicated situation, if you take a look at my site here

you will see a set of 4 images aligned neatly... well, they need to scroll to the left, slowly.. we just need to get the scrolling to work. Later on I can customize the options myself. I think the scrolling is failing to start because a lot of scripts are already loaded.. maybe there is a conflict somewhere?

I dont know where to look to be honest.. could someone point me in the right direction?



Thanks a bunch

Hi all,

Hopefully this forum is the right place to ask. Let me know if it isn't.

I have a very basic tumblr site to display some artwork, with custom HTML enabled.

The theme for the site has been altered with a line to create infinite scroll autopaging - instead of next page prompts that site scrolls down and loads pages as you go using this line:

<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>

This works fine on the site and enables continuous scrolling.

When thumbnails are clicked on the site it utilizes a kind of javascript slideshow, the "Slimbox" hovering style over the page background.

This works fine for the first page of images, but after scrolling down a while, to where other pages would have been, all other images do not function in the slideshow.

Q1 - Is there some addition I can make so that the slideshow can see beyond page limits so that the slideshow functions for all images?

Q2 - Is it possible to retain the description from the image thumbnail in the slideshow replacing the image count (ie. image 16 of 29)?

I am hoping that it is possible to click through a slideshow of all images on the site.

Any help would be greatly appreciated. I wish I was better at this stuff. Thanks in advance...

The website address is www.rydavidbradley.tumblr.com

The page code is:
HTML Code:

<!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" xml:lang="en" lang="en">
    <head>
    
    <script type="text/javascript" src="http://pixelspread.com/tumblr/portfolio/mootools.js"></script>
<script type="text/javascript" src="http://pixelspread.com/tumblr/portfolio/slimbox.js"></script>


        <!-- DEFAULT COLORS -->
        <meta name="color:Background" content="#eee"/>
        <meta name="color:Content Background" content="#fff"/>
        <meta name="color:Title" content="#444"/>
        <meta name="color:Description" content="#666"/>
        <meta name="color:Post Title" content="#c00"/>    
        <meta name="color:Text" content="#444"/>
        <meta name="color:Inline Link" content="#c00"/>
        <meta name="color:Quote" content="#666"/>
        <meta name="color:Quote Source" content="#444"/>
        <meta name="color:Link Post" content="#c00"/>
        <meta name="color:Conversation Background" content="#f8f8f8"/>
        <meta name="color:Conversation Border" content="#ddd"/>
        <meta name="color:Conversation Text" content="#444"/>
        <meta name="color:Conversation Label" content="#111"/>
        <meta name="color:Photo Border" content="#eee"/>
        <meta name="color:Date" content="#fff"/>
        <meta name="color:Date Background" content="#ccc"/>
        <!-- END DEFAULT COLORS -->

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
        <link rel="icon" href="{Favicon}"/>
        <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
        <meta name="viewport" content="width=775"/> <!-- iPhone -->

        <style type="text/css">
            body {
                margin:           0px;
                background-color: {color:Background};
                font-family:      Helvetica, arial, sans-serif;
            }
            
            #content {
                width:            90%;
                margin:           auto;
                padding:          15px;
                background-color: {color:Content Background};
                position:         relative;
            }

            a {
                color:            {color:Inline Link};
            }

            h1 {
                
	           
	            font-size:22px;
            }
            
            h1 a {
                color:            {color:Title};
                text-decoration:  none;
            }
            
            #description{
            	 color:            {color:Title};
            	 margin-bottom: 20px;
            	 font-size:12px;
            	}

         
            
        
       
                     
           
            
            /* Photo Post */
            
            .photo {
                float:left;
                width:125px;
            }
            
            .photo img {
                border:           solid 5px {color:Photo Border};
            }

            .photo div.caption {
                font-size:        11px;
                color:            {color:Text};
                margin-top:       5px;
            }
            
            .photo div.caption a {
                color:            {color:Text};
            }
                       
           
            /* Footer */
            #footer {
                margin:           40px 0px 30px 0px;
                text-align:       center;
                font-size:        12px;
                color:            {color:Text};
            }
            
            #footer a {
                text-decoration:  none;
                color:            {color:Text};
            }
            
            #footer a:hover {
                text-decoration:  underline;
            }
            .clear{clear:both;}
            .designed{font-size:11px;}
            {CustomCSS}
            
            
            
            /* SLIMBOX */

#lbOverlay {
	position: absolute;
	left: 0;
        top: 50px;
	width: 100%;
	background:#FFFFFF;
	cursor: pointer;
}

#lbCenter, #lbBottomContainer {
	position: absolute;
	left: 50%;
	overflow: hidden;
	background-color: #FFFFFF;
}

.lbLoading {
	background: #fff url([url]http://pixelspread.com/tumblr/portfolio/loading.gif[/url]) no-repeat center;
}

#lbImage {
	border: 10px solid #FFFFFF;
}

#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}

#lbPrevLink {
	left: 0;
}

#lbPrevLink:hover {
	background: transparent url([url]http://pixelspread.com/tumblr/portfolio/prevlabel.gif[/url]) no-repeat 0% 15%;
}

#lbNextLink {
	right: 0;
}

#lbNextLink:hover {
	background: transparent url([url]http://pixelspread.com/tumblr/portfolio/nextlabel.gif[/url]) no-repeat 100% 15%;
}

#lbBottom {
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #FFFFFF;
	border-top-style: none;
}

#lbCloseLink {
	display: block;
	float: right;
	width: 66px;
	height: 22px;
	background: transparent url([url]http://pixelspread.com/tumblr/portfolio/closelabel.gif[/url]) no-repeat center;
	margin: 5px 0;
}

#lbCaption, #lbNumber {
	margin-right: 71px;
}

#lbCaption {
	font-weight: bold;
}

        </style>

 
    </head>
    <body>
        <div id="content">
            <h1><a href="/">{Title}</a></h1>

            <div id="description">
              
                    {Description}
                    
                                              </div>
            
            {block:Posts}
                
                    
                    {block:Photo}
                        <div class="photo">
                            <a href="{PhotoURL-500}" rel="lightbox-smd" title=""><img src="{PhotoURL-100}" alt="{PhotoAlt}"/></a>
                            {block:Caption}
                            <div class="caption">
                            {Caption}
                            </div>
                            {/block:Caption}
                        </div>
                    {/block:Photo}
                                  
              
            {/block:Posts}
              <div class="clear"></div>
          
            
            <div id="footer">
          
             
                
               </p>
                            </div>
        </div>
    </body>
</html>

Hi,

Im trying to make my footer content align correctly to the main content when a window resizes. The apdivs don't seem to want to move at all even with a relative position etc. I have tried everything but just cant get it to work can someone help please?

http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5

Also some one commented before on the amount of css and JS pages. These will al be stripped out as its an Open sources system im using!

Thansk alot
Joe

Conflict between Mime Type and Document Type...

Morning - I have recently been learning CSS and have been upgrading my site to Semantically correct code. The first templat I am building is the following page

http://www.colletts.co.uk/colletts_n...ndexflash.html

and validates here

validates... sort of. Should I be worried about the mime type, what effect will this have on the page. If I follow the instructions and change the file extension to xhtml all hell breaks loose - http://www.colletts.co.uk/colletts_n...dexflash.xhtml IE Error - can't open thios document etc... What am I doing wrong???

Best,

Mas

Hey guys, I used to know a lot about html, but then just completely stopped doing anything with websites for too long.

I was just wondering how I can replace a word or number with a specified word or number.

What I want to achieve:
I've got a forum with a couple thousand members and it's picking up in activity and I want to make some names stand out for being helpful. I want to replace their names with an image.

But to do so, it'd have to be a code made and added into the footer template. Because obviously I can't edit a username for html image code. So I just need the code to find all instances of a certain username and replace it with what I specified.

-------------
Man I really wish I remembered how to do this haha.

Thanks guys.

I am trying to get rid of the "You have to click to activate this function" mumbo jumbo for a site I am doing. I tried following these directions...
http://www.adobe.com/devnet/activeco...devletter.html
but am having a rough time getting it to work... here is my code.
Code:

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','900','height','140','src','GoodDock','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','GoodDock' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="900" height="140">
  <param name="movie" value="images/GoodDock.swf" />
  <param name="quality" value="high" />
  <embed src="images/GoodDock.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="900" height="140"></embed>
</object></noscript>

Hello,

I'm new to this forum, so first, hello! Actually, I'm new to web design in general but have taken on the role at the church I work at because our old site was a mess. I downloaded some nice looking templates and have been using them as a foundation. The site is www.miamibc.com. If you go there and look at the header menu (home, about us, etc), I want to consolidate that menu some and add a drop down menu with more choices. Is there a way I can do this while keeping it looking the way it does now? If you need any more info from me, let me know. Thanks for your help!

Ben

First I would like to know if there is a better way of doing this. <div></div> is the only way I know of doing it although others have told me they didn't even know it could be done with <div></div>.

Second I would like to know if there's some way to control the speed at which the box scrolls.

Third If the content is text then I want the scroll function to be vertical. There's other times I need the scroll to be horizontal.

Here is the code:
HTML Code:

 <div style="background-color: black; border-bottom-color: rgb(212, 47, 212); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(212, 47, 212); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(212, 47, 212); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(212, 47, 212); border-top-style: solid; border-top-width: 2px; font-size: 11px; height: 200px; overflow-x: auto; overflow-y: auto; width: 200px;">
			<span style="color:#ffffff;">CONTENT HERE</span></div>

This is what the code looks like when viewed in Chrome and Firefox. However when used in IE the content can often move through the boarders.

Ok, right, so I have some pictures in a table (Question1) and some text (Question2).

Question 1
Is there a way of having a loading picture before the original image shows up?

Question 2
Is there a way of having a loading picture before the text shows?

This is only 'cause i would like some text that 'kinda looks like it's loading first, or a delay.

I have an 'Agree' box on my website so that when people enter, they have to agree to certain terms first. Is there a way of having a checkbox underneath saying 'Do not show me this page again.' and when they select that, it stores a cookie or something so that they don't see the page again?

The site:
http://www.tc-ua.piczo.com/

Give me your comments and ideas. Thanks; ToshNeox