Todays noob css question

I tried a float, but the picture seemed to completely wander out of any of the divs it was supposed to sit in. Although I had probably done it wrong.
 
Im new to web design so I might be talking pants, but dont you have to many divs ?

Looking at your page I would have 1 container div that holds everything to center it, 1 for header, 1 for nav bar 1 for body and 1 for footer, the positioning of text etc could be done with css classes ?

I need to get a web site up and running soon so im just learning and its a pain trying to get stuff layed out properly.
 
You have two divs called "contenttext".

And yes, I think there may be too many divs. Although I haven't properly studied his XHTML.

As long as it works for him then great.
 
You have two divs called "contenttext".

And yes, I think there may be too many divs. Although I haven't properly studied his XHTML.

As long as it works for him then great.

Ah ok. So what would one do if you needed a div to cover several areas, would you set it as a class instead? (I think im making sense here). Ive now figured out how to do what I asked in the OP anyway.

Next problem I have, is how would I go about having the topbar and nav menu constant? Ie, each time I click on a link, it takes me to a new page and reloads the flashcontent. what I want is this content to stay, with only the main page content area changing. Sort of frames without frames.
 
Simple, remove the content and you now have a template.

Each time you want a new page, open template, wack in new content and save.

You could also save the top part of the site in its own html file and when you create a new page, include the top part.
 
Simple, remove the content and you now have a template.

Each time you want a new page, open template, wack in new content and save.

You could also save the top part of the site in its own html file and when you create a new page, include the top part.

Huh? I think you've misunderstood my post there.
 
Sorry, I see what you mean now. Was rushing and didn't read your post properly.

EDIT: I have found this: http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Seems to be what you are after and it has instructions on how to use the script.

Excellent. Cheers mate, thats perfct.:)

Ive got it 99% as I want it now, however im having problems with loading flash content inside the dynamic div. All the other sections work, but the home.html page that contains the flash object is having problems. Any idea why?
http://www.afowler.co.uk/test/index.html

The index.html currently looks like;

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">

<head>
<title>Alasdair Fowler Photography</title>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>
</head>





<body> 
	<div align="center">	
	<script type="text/javascript" src="swfobject.js"></script>

		<div id="pinstripesides">
			<div id="monoSlideshow1">
				<p><strong>Please install Flash and turn on Javascript.</strong></p>
			</div>		
			<div align="center" id="navbar">
				<ul>
				<li><a href="javascript:ajaxpage('Home.html', 'contentarea');">Home</a></li>
				<li><a href="javascript:ajaxpage('About.html', 'contentarea');">About</a></li>
				<li><a href="javascript:ajaxpage('messages.php', 'contentarea');">Messages</a></li>
				<li><a href="javascript:ajaxpage('Links.html', 'contentarea');">Links</a></li>
				<li><a href="javascript:ajaxpage('Contact.html', 'contentarea');">Contact</a></li>			
				</ul>
			</div>
		</div>
	
		<script type="text/javascript">
			var fo = new SWFObject("monoslideshow.swf", "FOmonoSlideshow", "800", "100", "7", "#000000");
			fo.addVariable("showLogo", "false");
			fo.addVariable("dataFile", "monoslideshow2.xml");
			fo.write("monoSlideshow1");
		</script>

		<div id="contentarea"></div>



		<div id="footer">
			<div id="footertext">
				<p>All images and content are the copyright of Alasdair Fowler</p>
			</div>
		</div>
	</div>

</body>
</html>

And the home.html like;

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">

<head>
<title>Alasdair Fowler Photography</title>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>

<body> 
	<div align="center">	
	<script type="text/javascript" src="swfobject.js"></script>

		<div id="pinstripesides">	
			<div id="monoSlideshow2">
			<p><strong>Please install Flash and turn on Javascript.</strong></p>
			</div>
		</div>


		<script type="text/javascript">
			var fo = new SWFObject("monoslideshow.swf", "FOmonoSlideshow", "800", "600", "7", "#000000");
			fo.addVariable("showLogo", "false");
			fo.addVariable("dataFile", "monoslideshow.xml");
			fo.write("monoSlideshow2");
		</script>		
	</div>
</body>
</html>
 
I am not sure why it isn't working with flash. Never used it before. Does the home.html work by itself [if you load it on its own].
 
I think im getting closer to an answer;
http://www.dynamicdrive.com/forums/showpost.php?p=92569&postcount=3

It seems its a problem with getting Javascript into the dynamic content. Ive tried stripping the Javascript I need out and calling it with the line;

<li><a href="javascript:ajaxpage('Home.html', 'contentarea'); loadobjs('swfobject.js', 'slideshow1.js', 'slideshow2.js' )">Home</a></li>

Where slideshow1.js is;
Code:
<script type="text/javascript" src="swfobject.js"></script>

and slideshow2.js is;
Code:
<script type="text/javascript">
var fo = new SWFObject("monoslideshow.swf", "FOmonoSlideshow", "800", "600", "7", "#000000");
fo.addVariable("showLogo", "false");
fo.addVariable("dataFile", "monoslideshow.xml");
fo.write("monoSlideshow2");
</script>

But its still not working. Any idea if im way off the mark, or any other suggestions?:(
 
Hmm to be honest I really don't know. I don't use Javascript or AJAX so I don't even know where to start.

Judging by that post you have done the right thing by separating out the Javascript but I am not understanding why it isn't working.

I will take a good look at it tomorrow and see if there is something that has been overlooked. Someone else may be able to answer in the meantime.
 
Right, next problem;

http://www.afowler.co.uk

If you go to my site, the homepage contains the gallery. You can then click on any of the other section which changes the dynamic content of the index.html page. However if you are in the 'home' gallery, then click on it again to go back to the start of the flash gallery, it doesn't as that page is already loaded. So.. is there a way to refresh a div tag upon the click of a link? So each time the 'home' link is clicked, the flash content div is refreshed.
 
I am not sure what you mean.

Are you saying you want to go back to the Home page [showing all the galleries] from within one of the sub-galleries by clicking the Home link?

If so, it already works. At least for me anyway...
 
Back
Top Bottom