Non AP DIV layout

HTML & CSS
1

Hi guys,

Just practicing laying out a site without AP Divs (after paying £100 for a DVD which taught me this - ouch!).

Anyways, I have laid out a basic page, just a header, nav, main content and footer Div. As every Div is stacked on top of each other and it looks fine in browsers, do I need to include Floats and Clears? I’m just interested in the best practice really and to keep the code as clean/simple as possible.

Here is the test url I have it running on: testingsite

I’m sure something is wrong with the CSS because the JQuery for the main content area is not displaying the images but is working fine otherwise. As you can see, they flash up on first load then disappear. I had a similar issue which Paul helped out with a while back with jQuery displaying correctly and that was down to the fact I had used AP Divs.

Also, is it possible the free ads which Godaddy run with free hosting causing a possible conflict with JScript?

Here is the html:

<!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=UTF-8" />
<title>artist</title>
<link href="artstyles.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.js" type="text/javascript"></script>

<script type="text/javascript">
$(window).load(function() {
	$('#slider').nivoSlider();
});
</script>

</head>

<body>
<div id="master">
  <div id="header">
    <div id="navbar"><a href="#">home</a> <a href="#">works</a> <a href="#">custom orders</a> <a href="#">shop online</a> <a href="#"> contact</a> <a href="#">blog</a></div>
</div>

<div id="subhead">Home - Artist</div>

<div id="slider">
  <img src="Art Images/pic1.jpg" width="990" height="500" alt="pic1" />
  <img src="Art Images/pic2.jpg" width="990" height="500" alt="pic2" />
  <img src="Art Images/pic3.jpg" width="990" height="500" alt="pic3" />
</div>

<div id="footer">xhtml css jQuery</div>

</div>
</body>
</html>

And the CSS:

@charset "UTF-8";

#master {
	margin:0 auto;
	width:990px;
}
#master #header #navbar a {
	font-size: 16px;
	color: #333;
	font-family: Tahoma, Geneva, sans-serif;
	text-decoration: none;
	display: block;
	height: 30px;
	width: 120px;
	float: left;
	text-align: center;
}
#header {
	position: relative;
	height: 150px;
	width: 990px;
	left: 0px;
	top: 0px;
}
#navbar {
	position: relative;
	height: 30px;
	width: 720px;
	left: 270px;
	top: 115px;
	display: block;
}
#subhead {
	position: relative;
	height: 15px;
	width: 990px;
	left: 0px;
	top: 0px;
}
#slider {
	position: relative;
	height: 500px;
	width: 990px;
	overflow: hidden;
	border: 1px solid #000;
}
#footer {
	position: relative;
	left: 0px;
	top: 0px;
	height: 15px;
	width: 990px;
}

Thanks for any help.

2

Using JQuery is fine provided that you know enough JavaScript to use it properly. It is the people who try to use it without knowing enough javaScript who give it a bad reputation with their copy of JQuery and 10 lines of code they wrote that uses it to do what could have been done without JQuery with 3 or 4 lines of ordinary JavaScript (which appears to be a common way that a lot of people do use it simply because of not learning enough JavaScript basics first).

3

A lot of people like jQuery. A vocal minority does not. I use it because I’m not a JS maven, and it enables me to incorporate some strong JS elements into my sites without having to know JS that well. Like anything that written “for the masses”, it’s not going to be perfect in the viewpoint of the experts and the standardistas. The debate reminds me of the howling in the typographical community over anti-aliasing.

4

Well I took out the crappy ads, but still no show on the images:confused:

The numbers are running inside the slide along with the next and previous buttons so I don’t think it’s a JS problem.

Anyone have an idea where the issue could be?

5

Sorry I waffled on a bit in the first post.

My main question is if the CSS is the reason the jQuery is not working?

I have tried floats/clears with all the Divs but no joy. If the CSS is good I can rule it out as the culprit.

Thanks

6

Well I found the problem. I had left a space in the image folders file name (facepalm).

With regards to jQuery, I find it suits me where I’m at right now. I’m learning different parts to web design every day and javaScript is on the list of things to delve further into. How much further I’m not sure, but enough to get a basic understanding at least.

7

Yeah Its horrible crap that ad. I was only using it for testing but think I’ll look elsewhere for free hosting and see if it gets different results (will check over on hosting section).

As for jQuery, that’s the first I’ve heard it being talked down. I thought it was the way to go over Flash (from reading on here). Will keep your thoughts on board with this.

With the CSS, is it that there is some unnecessary stuff in there? I started out being told (not here) that AP Divs were good practice. Moved on from that thanks to this site, so any ideas for improving it would be very welcome.

Cheers

8

It could be the automatically added crap from your host screwing with you… Though my advice would be to pitch jquery in the trash as fat bloated goofy effects in the first place… since I’m not even sure what it is you are trying to do with it, I’m just fairly well certain it’s not a good thing. (Not a fan)

Really, this crap they add to make sure everything is closed before their goof assed advert script:

</iframe></noscript></object></layer></span></div></table></body></html><!-- adsok –>

Could really be screwing with you… though I’m not seeing any scripting errors thrown or anything TOO awry with your CSS.

Jquery - flushing perfectly good websites down the toilet with ‘gee ain’t it neat’ animated nonsense. Do yourself a favor, pitch that in the trash and just write a static image gallery.

9

Hi Grx25,

Welcome to Sitepoint :slight_smile:

As you are new I will let you off but you made a couple of etiquette errors on your first post and you really should have started your own thread rather than tag on the end of this. :wink: Secondly it is against the guidelines to request someone to contact you by email because the forums are for public consumption and not for personal use.

Regarding your question about using AP elements (we talk about elements and not divs) then you have heard correctly that overusing absolute positioning is bad because it creates a rigid and hard to maintain structure.

Once you remove an element form the flow by absolutely placing it then you have to control everything around it at all times. This leads to a structure that can’t be changed easily and can’t grow with content (unless you just have one element with everything stuck inside it).

Most of the time you want to let the page flow from one element to the next logically and without having to do much at all. This makes it easy to make changes and add content without having to change the structure.

Therefore you would use static positioning (the default) most of the time and then just make space with margins and padding as required. If you want horizontal alignment then you would use floats but remember to clear them to once again regain control of the flow of the page.

You can use absolute positioning in small doses where you may want to position something inside a fixed height container but usually you would not to absolutely position structural elements.

Absolute positioning isn’t bad it’s the people who use it incorrectly that are bad :slight_smile:

10

hi, what’s up,

i am a print graphic designer working in the States. i assume u are in the UK? ; )
anyways, i had a couple of basic questions regarding AP divs. after you worked with both AP DIVS and regular DIVS would you agree with the common consensus
that AP DIVS are “bad”? they have thus far worked fine for me and i find them much more intuitive to use then regular DIVS… at the firm i work at we do only print design (for HP), but are starting to move into web design for them. i really want to get a jump on web design but find it confusing. i took an intro to dreamweaver course and my professor was all about AP DIVS. Then i compared notes with co-workers who had taken other classes and they reported being told AP DIVS were NOT ideal. i saw your link to your basic site (looks good!). what would ur opinion be?

also, how did you do ur slideshow of art on your page?

thanx in adavance for your response,
george ramirez