AblazeRich

Hi Guys I'm having more problems with these DIV's - just when I think I got em sussed they go and backfire on me! My problem is that I have a CMS (content management System) that allows users to put in text and photos. These go in a DIV with an ID called Maincontent. This has a dashed outline. But if they put in lots of images and not much text, the wrapper div only goes as far as the text! I've tried putting in some and <br> at the very bottom, but even that doesn't seem to work. I think its something to do with the images being floated, but if I don't do that then I get other probs! http://www.lunaseacollective.com/article-lunasea-collective.asp?pid=91#.T9dCzJj9WSr I'm also experiencing problems with the images lining up - as you can see. Does anyone have any robust code for content lists like this where the content can grow and expand and be used in different configurations (like more or less text?) Heres some more examples of how that same code is used with different content: http://www.lunaseacollective.com/article-lunasea-collective.asp?pid=47#.T9dHD5j9WSo http://www.lunaseacollective.com/article-lunasea-collective.asp?pid=77#.T9dHQ5j9WSo Thanks Guys! Rich

Thanks Renaissance, I'm not sure what you mean by 'clear it'. I would like to know though! But what I did was increase the padding and widths of the DIVs that contain those items (social media and centertable). Not sure if this was the best way or not? Also, does anyone have experience of the max-width / max-height attributes in HTML 5 / CSS 3? Cos when my clients try and put a picture in a portrait position it runs behind the text beneath it. I can't make it a block, because it needs a background image to go behind it of the container div. Can these Max Height/Width attributes be used for controlling unknown dimensions of a image? Has anyone any experience of these? Maybe I should start a new topic regarding these...

Hello All! I recently completed a course in HTML 5 and CSS 3 and am now attempting to change my clients Table based website to HTML 5 tags. So far I've managed to get it pretty much working fine. But annoyingly when there is something irregular about a certain page (say an odd number of pics or a landscape and portrait pic next to each other). Then the information at the foot of the page displays incorrectly. This information is the social media buttons and any 'related products' that should be listed. This is one example of the foot displaying incorrectly: http://www.mason-uk.co.uk/project.asp?pid=71 and another: http://www.mason-uk.co.uk/basket.asp?pid=401 This is how it should display: http://www.mason-uk.co.uk/basket.asp?pid=428 I get simalar problems to this on another website I'm building. What is good code for listing content like this? It needs to be robust as my clients are constantly updating via a CMS that I've built them. The HTML goes like this: <section class="mainbody"> <p><h6>Air Springs provide very low natural frequency and are essentially resonance free. Typically used for installations requiring a extremely high level of vibration control - such as science labs and medical facilities. </h6></p><br /> <p>Frequencies of about 2Hz are typically achieved but lower acoustic frequencies are possible by bolting the air spring to a sealed hollow stanchon to increase the effective volume as the natural frequency is related to the air volume.</p> <span class="pic1"> <a class="textlink" style="cursor: pointer" onclick="TINY.box.show({image:'images/airspring-small.jpg',boxid:'frameless',animate:true})"> <img border="0" width="210" align="top" src="images/airspring-small.jpg" title="A Small AirSpring - Click to enlarge" alt="A Small AirSpring"/> <br /> A Small AirSpring</a> </span> <span class="pic2"> <a class="textlink" style="cursor: pointer" onclick="TINY.box.show({image:'images/air-spring-large.jpg',boxid:'frameless',animate:true})"> <img border="0" width="210" align="top" src="images/air-spring-large.jpg" title="A Large Air Spring - Click to enlarge" alt="A Large Air Spring"/> <br /> A Large Air Spring</a> </span> <span class="textspan"> <br /><p><h3></h3></P><br /> <p>Typical applications include medical scanners (MRI) or high precision imaging equipment/apparatus such as SEM and TEM.<br> Some types of electrical transformer require isolation via air springs due to their inherently complex vibration spectrum especially when located on an upper floor. </p><br /> <p>If you would like to order or learn more about this product. Please contact Mason UK's acoustic engineers by using the details in the blue bar to the left or by clicking the 'Contact Us' tab, also located in the blue bar to your left.</p><br /> </span> <span class="pic1"> <a class="textlink" style="cursor: pointer" onclick="TINY.box.show({image:'images/airspring22.jpg',boxid:'frameless',animate:true})"> <img border="0" width="210" align="top" src="images/airspring22.jpg" title="Housing, stanchion, air springs - Click to enlarge" alt="Housing, stanchion, air springs"/> <br /> Housing, stanchion, air springs</a> </span> <span class="pic2"> <a class="textlink" style="cursor: pointer" onclick="TINY.box.show({image:'images/airspring33.jpg',boxid:'frameless',animate:true})"> <img border="0" width="210" align="top" src="images/airspring33.jpg" title="Close-up of Air Spring - Click to enlarge" alt="Close-up of Air Spring"/> <br /> Close-up of Air Spring</a> </span> <span class="textspan"> <br /><p><h3></h3></p><br /> <p>Air Spring housing in place and start of reinforcing steel placement. Note styrofoam lining the pit. This will be removed after the concrete pour to form a 25mm void. The air springs will lift the inertia block by 25mm to form a void underneath. The void space is also vented. This helps to ensure that the inertia block remains free from external vibration & noise.</p><br /> <p> This picture shows completed reinforcing steel and conduits in place. After the concrete pour pneumatic air lines will be drawn through the conduits and connected to the Mason Industries air springs via levelling valves.</p><br /> </span> <span class="pic1"> <a class="textlink" style="cursor: pointer" onclick="TINY.box.show({image:'images/airspring44.jpg',boxid:'frameless',animate:true})"> <img border="0" width="210" align="top" src="images/airspring44.jpg" title="Air spring & reinforcing steel - Click to enlarge" alt="Air spring & reinforcing steel"/> <br /> Air spring & reinforcing steel</a> </span> <span class="pic2"> <a class="textlink" style="cursor: pointer" onclick="TINY.box.show({image:'images/airspring55.jpg',boxid:'frameless',animate:true})"> <img border="0" width="210" align="top" src="images/airspring55.jpg" title="Reinforcing steel & conduits - Click to enlarge" alt="Reinforcing steel & conduits"/> <br /> Reinforcing steel & conduits</a> </span> <div class="socialmedia"> <a class="addthis_button_google_plusone"></a><br /><Br /> <!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style " align="right"> <a class="addthis_button_preferred_1"></a> <a class="addthis_button_preferred_2"></a> <a class="addthis_button_preferred_3"></a> <a class="addthis_button_preferred_4"></a> <a class="addthis_button_compact"></a> <a class="addthis_counter addthis_bubble_style"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4ec524f5130249c5"></script> <!-- AddThis Button END --> </div> <div class="centertable"> <h3> Related Products</h3> <p>No related products found</p> </div> </section> CSS .centrecolumn { position:absolute; top:1px; left:145px; float:none; width:480px; font-family: Verdana, Arial, Helvetica, sans-serif; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; text-align:left; vertical-align:top; z-index:0; } .mainbody { position:absolute; top:190px; left:145px; float:none; width:480px; font-family: Verdana, Arial, Helvetica, sans-serif; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; text-align:left; vertical-align:top; z-index:0; } .pic1 { position:relative; float:left; left:0px; width:235px; font-family: Verdana, Arial, Helvetica, sans-serif; padding:10px 0px 10px 0px; margin:0px 0px 0px 0px; text-align:center; vertical-align:top; z-index:0; } .pic2 { position:relative; float:right; left:0px; width:235px; font-family: Verdana, Arial, Helvetica, sans-serif; padding:10px 0px 10px 0px; margin:0px 0px 0px 0px; text-align:center; vertical-align:top; z-index:0; } .textspan { position:relative; float:left; left:0px; width:480px; font-family: Verdana, Arial, Helvetica, sans-serif; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; text-align:center; vertical-align:top; z-index:0; } .centertable { position:relative; float:left; left:0px; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; text-align:center; vertical-align:top; z-index:0; } .socialmedia { position:relative; float:right; left:100px; width:240px; margin:0px 0px 0px 0px; font-family: Verdana, Arial, Helvetica, sans-serif; padding:0px 0px 20px 0px; margin:0px 0px 0px 0px; text-align:center; vertical-align:top; z-index:0; } Thanks, so much for considering this guys! Rich www.mason-uk.co.uk

Thanks Wickham, thats worked! Excellent

How do you know what type of CSS your using? Isnt it set by the browser?

I've got another problem. I've tried to put some content inside the Hero DIV, and its thrown everything out! (some javascript to cycle through the images) I've tried to use the z-index, but it doesn't seem to do anything. Am I using it wrong? Please help! I've gotta go to my interview first thing! DIV Test link <body> <div id="wrapper"> <div id="head"></div> <div id="contentwrap"> <div id="hero"> <a href="javascript:gotoshow()"><img src="images/hero.jpg" name="slide" border=0 style="filter:blendTrans(duration=3)"></a> <script language="JavaScript1.1"> <!-- var whichlink=0 var whichimage=0 var blenddelay=(ie)? document.images.slide.filters[0].duration*1000 : 0 function slideit(){ if (!document.images) return if (ie) document.images.slide.filters[0].apply() document.images.slide.src=imageholder[whichimage].src if (ie) document.images.slide.filters[0].play() whichlink=whichimage whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0 setTimeout("slideit()",slidespeed+blenddelay) } slideit() //--> </script> <div id="pod1"></div> <div id="pod2"></div> <div id="pod3"></div> <div id="feature"></div> </div> <div id="bodytext"> <h1>Renway Executive Hire</h1> <p>Renway Executive Hire are a Reading based travel agency who specialise in organising transport for executive travel within the UK. Their biggest client base are corporate clients travelling to and from airports, major international railway stations and seaports.</p> <p> They provide chauffer driven cars, minibuses, car hires and even corporate internal flight bookings.</p> </div> </div> <div id="footer"></div> </div> </body> CSS body { text-align:center; background-image:url(images/background.jpg); } h1 { font-family:Times New Roman, Times, serif; font-size:18pt; font-weight:bold; color:#5d5d5d; } p { font-family:Arial, Helvetica, sans-serif; font-size:13pt; font-weight:normal; color:#5d5d5d; } #wrapper { margin: 0 auto; width: 940px; text-align:left; background-color:#CCC; height:990px; } #head { position:relative; width:940px; background-image:url(images/header.png); height:120px; text-align:center; } #hero { position:relative; width:940px; background-image:url(images/hero.jpg); height:320px; text-align:center; z-index:0; } #pod1 { margin:0px 0px 0px 0px; position:inherit; width:200px; top:270px; left:25px; background-image:url(images/pod1.png); height:250px; float:left; z-index:1; } #pod2 { margin:0px 0px 0px 0px; position:inherit; width:200px; top:270px; left:55px; background-image:url(images/pod2.png); height:250px; float:left; z-index:1; } #pod3 { margin:0px 0px 0px 0px; position:inherit; width:200px; top:270px; left:85px; background-image:url(images/pod3.png); height:250px; float:left; z-index:1; } #feature { margin:0px 0px 0px 0px; position:inherit; width:230px; top:270px; left:110px; background-image:url(images/feature.jpg); height:510px; float:left; z-index:1; } #contentwrap{ position:relative; width:940px; background-image:url(images/body.jpg); background-position:bottom; height:780px; text-align:left; float:none; } #bodytext { position:relative; top:30px; width:630px; height:300px; padding: 0px 0px 0px 35px; text-align:left; float:none; } #footer { position:relative; width:940px; background-image:url(images/footer.png); height:100px; text-align:center; }

Thanks guys, you're right Wickham, I was confusing the terminology. Sorry about misunderstanding what you were trying to tell me Bomb. I'm trying to get my head around DIV's quite quickly here! But to clarify; So my Pod DIV's are only working because they are inheriting the position: relative; from the Hero DIV? They are also incased in a wrapper div, I've called #contentwrap, in the HTML. With overlaying DIV's (that make use of the z-index) do they need to be nested within the DIV they are ontop of? How do you arrange the HTML? Can they sit across two DIV's using this technique?

Ok, I've seemed to have sorted it somehow (don't know if this was a good way to do it or not?), by juggling the way I've nested the DIV's differently. <body> <div id="wrapper"> <div id="head"></div> <div id="contentwrap"> <div id="hero"> <div id="pod1"></div> <div id="pod2"></div> <div id="pod3"></div> <div id="feature"></div> </div> <div id="bodytext"> Test test test testing test testicles, test test testing test testicles. Test test test testing test testicles, test test testing test testicles. Test test test testing test testicles, test test testing test testicles. Test test test testing test testicles, test test testing test testicles. Test test test testing test testicles, test test testing test testicles. Test test test testing test testicles, test test testing test testicles. </div> </div> <div id="footer"></div> </div> </body> </html> I don't know why, but I've got a funny feeling that this is not a good way to do it. Can anyone see any probs with this? Without meaning to be flippant; I've tried taking the z-index code in and out and I cannot see what it does? It doesn't seem to effect anything? Whats it actually meant to do?

Could the 'Float' elements be affecting it?

I added it to the Hero DIV and then I also tried adding it to the Bodytext DIV (renamed it from Body to Bodytext as was concerned that there may have been a conflict there), and I've still got nothing. I uploaded it over the file I linked to above and again here: DIV Test Link Do you think it might be something to do with the Float or position tags? Heres what the CSS code looks like now: body { text-align:center; background-image:url(images/background.jpg); } #wrapper { margin: 0 auto; width: 940px; text-align:left; background-color:#CCC; height:990px; } #head { position:relative; width:940px; background-image:url(images/header.png); height:120px; text-align:center; } #hero { position:relative; width:940px; background-image:url(images/hero.jpg); height:320px; text-align:center; z-index:0; } #pod1 { margin:0px 0px 0px 0px; position:inherit; width:200px; top:200px; left:20px; background-image:url(images/pod1.png); height:250px; float:left; z-index:1; } #pod2 { margin:0px 0px 0px 0px; position:inherit; width:200px; top:200px; left:40px; background-image:url(images/pod2.png); height:250px; float:left; z-index:1; } #bodytext { position:relative; width:940px; background-image:url(images/body.jpg); height:460px; text-align:left; z-index:0; } #footer { position:relative; width:940px; background-image:url(images/footer.png); height:100px; text-align:center; }

Thanks Bomb, but that doesn't seem to have done anything. Do you think it might be conflicting with something?

Thanks for that Wickham I've roughly DIV'd out the main elements, but I can't seem to create those boxes that need to float ontop of the other DIV's. I've been battling away at it and not really progressed far. I've got them to float ontop of one DIV but they are meant to come down ontop of the DIV beneath it (as per the diagram above). Here is a link to the online version of what I've created so far (rough mock up). I've got a job interview tomorrow, so its quite important that I get this right ASAP. DIV Mock Up The HTML code for it is as follows: <!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>Untitled Document</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="head"></div> <div id="hero"> <div id="pod1"></div> <div id="pod2"></div> </div> <div id="body"></div> <div id="footer"></div> </div> </body> </html> The CSS code is as follows: body { text-align:center; background-image:url(images/background.jpg); } #wrapper { margin: 0 auto; width: 940px; text-align:left; background-color:#CCC; height:990px; } #head { position:relative; width:940px; background-image:url(images/header.png); height:120px; text-align:center; } #hero { position:relative; width:940px; background-image:url(images/hero.jpg); height:320px; text-align:center; } #pod1 { margin:0px 0px 0px 0px; position:inherit; width:200px; top:200px; left:20px; background-image:url(images/pod1.png); height:250px; float:left; } #pod2 { margin:0px 0px 0px 0px; position:inherit; width:200px; top:200px; left:40px; background-image:url(images/pod2.png); height:250px; float:left; } #body { position:relative; width:940px; background-image:url(images/body.jpg); height:460px; text-align:left; } #footer { position:relative; width:940px; background-image:url(images/footer.png); height:100px; text-align:center; }

Hello you lovely people! I need some help. I'm an old school web designer who learnt to design websites using tables. I then stopped web design for some years, but recently I've been doing it again. I kinda understand DIV's but the seem to behave one way one day and one way the next. I have a design brief where I need to create a website that has design elements in each of the boxes of the image I've attached. The image is to scale (pixel for pixel) the website is 980px wide, and must be centred (seen the sticky on centring a webpage using a wrapper). The bit I'm having trouble with is the DIV's that sit ontop of the other DIV's. Anyone fancy helping me out with the code for that? I realise that its probably to do with the 'Float' and 'Position' (and 'Top' and 'Left' and 'Width' and 'Height' CSS elements). But I just seem to push my DIV's out of the way with other DIV's. Some CSS/DIV related Questions: Why would you use FLOAT: Left; instead of FLOAT: Right; What is the difference between these two? What does 'None' and 'Inherit' mean? What is the differences between all the different Position: attributes? Absolute, Fixed, Inherit, Relative, Static,

Thanks for that guys! Especially Wickham! What sorts of programmes are there out there to construct these email forms in? Or do I just build it as a HTML page (in Dreamweaver for example) and copy and paste the code straight into the email I am sending out? Do I need to tell it anything in particular in the HEAD tags? or the HTML tag? Kind Regards Rich

HELP! I have a job interview tomorrow for a role as an Email Designer. But I have no idea how to go about doing this. I know how to use HTML and CSS, but have never used these for email design. Is it just as simple as typing the HTML code into the email itself and clicking send? Can you link to an external CSS style sheet or does it have to all be inline / in the header? Can you have a header? Please, any help or advice would be GREATLY appreciated. Any links to tutorials or advice on programmes that help to do this would also be appreciated. Kind Regards Rich

I've been a web designer for awhile, but have steered round DIV's and used TABLE's instead (except for things like drop down menus and bits of code I've pinched from Javascript libraries etc). This is now no longer fashionable and I am applying for jobs. So I really need to update my skills to include DIV's. So if you knowledgable lovely people don't mind, can I please pick your brains? 1)Does all this mean that to position further DIVs you just place them within the wrapper DIV tags (in the HTML)? (nested DIV's essentially). Will these DIV's use the wrapper DIV as their 'reference point' for their positioning? For instance if you use left:20px; top:20px for a nested DIV will it draw it 20px from the top left from the wrapper DIV or from the top left of the page? 2)Is it common to have DIV websites stretch to whatever screen size the user is using? Or do people tend to design for the smallest resolution (800px by 600px for example) And just centre the content for larger resolutions? This is how I design for the vast majority of my table based designs. 3)Is there any indepth DIV tutorials that you would recommend? Kind Regards Rich