July 13, 200917 yr Ok im trying to design something in Dreamweaver, im a bit stuck and I also just want to know whether there is a better way of doing it. So what I am trying to create is what you see in the photoshop screenprint, more specifically the big black content box . I have created the top part of the content box (where the tab is shown) and created that as a seperate sliced image from the rest of the box, because for each page it will change. (Hope that bit makes sense!) I have inserted the sliced image of the top part of the content box into a div, I now want to add a div immediately after that which will have the same black background colour, this should make the two seperate divs look like one. Maybe there is a better way of creating this effect I am trying to do, which i'd love to know! The problem I have at the moment is that there is a white row of space between the two divs, which I obviously dont want to see as it is supposed to look like one whole object. How can I fix this? I am fairly new to web design still, and have not got my head completely around HTML coding even though I understand some of it. This is why I wouldn't mind having the solution explained by code or visually, but could you explain it so that I know what the code is changing. Here is my DW 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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- TemplateBeginEditable name="doctitle" --> <title>Untitled Document</title> <!-- TemplateEndEditable --> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <style type="text/css"> <!-- #header_menu { width: 100%; } --> </style><link href="../styles.css" rel="stylesheet" type="text/css" /> <script src="../Scripts/swfobject_modified.js" type="text/javascript"></script> </head> <body> <div id="header_menu"> <div align="center"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1024" height="88" id="FlashID" title="header"> <param name="movie" value="../main_menu_top.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. --> <param name="expressinstall" value="../Scripts/expressInstall.swf" /> <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. --> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="../main_menu_top.swf" width="1024" height="88"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="../Scripts/expressInstall.swf" /> <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. --> <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img'>http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"'>http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p> </div> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </div> <div id="current_services"> <div align="center"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1004" height="152" id="FlashID2" title="current_services"> <param name="movie" value="../homepage_currentservices.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. --> <param name="expressinstall" value="../Scripts/expressInstall.swf" /> <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. --> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="../homepage_currentservices.swf" width="1004" height="152"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="../Scripts/expressInstall.swf" /> <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. --> <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p> </div> <!--[if !IE]>--> </object> <!--<![endif]--> </object> <div id="top_content_tabs"></div> </div> </div> <div id="current_services"> </div> </div> <div align="center"> </div> <div id="main_content"> <p>Content for id "main_content" Goes Here</p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <script type="text/javascript"> <!-- swfobject.registerObject("FlashID"); swfobject.registerObject("FlashID2"); //--> </script> </body> </html>
July 14, 200917 yr Hi Ashley, I must admit you're problem isn't that easy to understand after reading, but hopefully this will help you. Have you tried making the two main divs (with the whitespace separating them) float to a particular alignment, so that it eliminates the whitespace between them? I know this is off-topic here, but I think you would be doing yourself a favour in the long-run if you moved away from using Photoshop slices. It's a pretty hit-and-miss practice because Photoshop doesn't take into account the unforseen HTML behavious that can sometimes put these huge white spaces between your slices. Slices can be great when doing a mockup for a website and then saving all the slices as separate images, but I would strongly recommend not using Photoshop to construct the HTML page for you, and you learn how to hand-code HTML youself. Judging from what you're doing, I don't think it would be too difficult for you to take the leap away from Photoshop here. If you need any more help with this, I'm more than happy to help out. Let me know if you try something/have another problem with it. Darren
July 14, 200917 yr Author I will give your suggestion a go and let you know if it works. I really want to be able to strictly use code to design the web page, but I dont feel like I know HTML well enough to do this! There are certain things that I would not know how to create, like the flash file that you can see above the black content box. I know there is a way, and you're right that I should move from Photoshop. I might look into this w3 website I have been recommended as that is supposed to be a good starting point. I'd love to know the steps that a html coder goes through when designing a website, for example how they come up with the design and then type the code to create this design. Thanks alot for you help so far, yes I was a bit tired when typing the post yesterday so I thought it might be difficult to understand! Ash
July 14, 200917 yr I would recommend the W3C Schools for beginning to learn HTML, they are the most comprehesive group out there. I think if I were to go back and begin learning everything again, I'd suggest these few starting points: Learn what XHTML is. HTML as a language is now morphing into XHTML, and pretty soon everything will be XHTML. I'd bet all the major websites you visit are XHTML. XHTML is basically standards-compliant HTML. HTML used to be sloppy, without much order, but XHTML is the strict, clean version. Think of it like the difference between grammatically-incorrect English (HTML), and perfect Received Pronunciation English (XHTML). You can find out more here: http://www.w3schools.com/xhtml/default.asp The next step is definitely learning CSS. CSS is such a life safer when used with HTML coding (when I say "HTML", I really mean "XHTML", so will everyone else). You probably already know what CSS is, but at it's very basic it's the way you control the 'look' of your website, and what all the elements inside look like. You can go and learn JavaScript if you like, but it's not a necessity. I only know the basics, and if I ever use custom Javascript code, I can pretty much just learn-as-I-go. By the way, you mentioned you doubted you could write the code for Flash. One of the great things about Dreamweaver is that in Code View, you can drag a flash file from your Files panel, and Dreamweaver will automatically write the code for that Flash file for you! But trust me, once you've used it a few times, you'll understand exactly what it's all about. I know this is a tough concept to get around when you're learning something (and it's the same for everyone) but really, it's only hard while you don't know it. When you know it, it's easy. Take it from someone who has been through the progression you're going through now, it really isn't that difficult to get up and running. Especially when you have fantastic forums like these you can get help from. If you want any more help, feel free to PM me, I think my contact details are in my bio. We're in such a great industry here, it's so exciting and it changes so much, I just love helping out new people break into the field. Good luck! Darren
July 14, 200917 yr Author Thanks alot Darren, found that post really helpful. I actually went straight to the w3s website after reading your post, because im very keen to learn about HTML in more detail and I dont want to get caught up learning how to design websites through importing photoshop slices. The HTML school website is very helpful, I have gone through some of the basics and although alot of it I kind of knew already, it still taught me a few things I had not known before. I plan to read the advanced HTML tutorial and also the CSS tutorial later on, then I will probably move to XHTML because just like you said, and from what im reading on the w3s website - it is the future. I agree, when I started studying my degree in Web design I was very excited with the whole concept, the industry and potential career that can be made out of this. I am very design orientated as I also study graphic design so its very easy for me to lean more towards designing visually, but im really determined to understand the HTML language. I appreciate your help and advice and will contact you if I need anything. Ash
July 14, 200917 yr I don't like to throw a spanner in the works, but you should read these two extracts from sites where people should know what they are talking about:- Item 1.7 here http://dev.w3.org/html5/spec/Overview.html says "The first such concrete syntax is "HTML5". This is the format recommended for most authors. It is compatible with all legacy Web browsers. If a document is transmitted with the MIME type text/html, then it will be processed as an "HTML5" document by Web browsers." Then it says "The second concrete syntax uses XML, and is known as "XHTML5". When a document is transmitted with an XML MIME type, such as application/xhtml+xml, then it is processed by an XML processor by Web browsers, and treated as an "XHTML5" document. Authors are reminded that the processing for XML and HTML differs; in particular, even minor syntax errors will prevent an XML document from being rendered fully, whereas they would be ignored in the "HTML5" syntax." which means that IE6 will have serious problems and the slightest coding error will cause a blank screen with any browser. and here:- "Use of XHTML syntax in a document which is served as HTML. Serving XHTML code to browsers and telling them it is HTML constitutes serving tag soup, because the browser has no choice but to interpret it as HTML-like markup with "syntax errors". This particular use of tag soup is recommended by Appendix C of the XHTML 1.0 specification as a way of serving XHTML to browsers that do not support it." from Wikipedia http://en.wikipedia.org/wiki/Tag_soup Most people were conned a few years ago into thinking that XHTML would supersede HTML, but that isn't now the case. If you start a webpage with XHTML 1.0 doctype and then use content="text/html" a few lines later, you are telling the browser that you've changed your mind, it isn't XHTML but should be processed as HTML which is technically OK, but tag soup. At present Darren is correct that HTML 4.01 and XHTML 1.0 are frequently used, both are correct and XHTML 1.0 is stricter in coding, needing closing tags and lower case, etc. However, the future is causing a lot of debate as HTML 5 and XHTML 5 are both being developed and XHTML will be for special XML functions using content="application/xhtml+xml" instead of content="text/html" and not recommended for normal websites. HTML 5 will be for normal websites according to the first link above. XHTML with content="application/xhtml+xml" will be so strict that any minor coding error will result in a page either not displaying at all or very badly. Where the first link says "in particular, even minor syntax errors will prevent an XML document from being rendered fully, whereas they would be ignored in the "HTML5" syntax." what it means in practice is that HTML will be more tolerant of errors; we all make errors when coding and we test by using a validator but also by opening the page in a browser and thinking "that's not right" or "that's not what I wanted" and then correcting the error, but XHTML 5 won't let us do that so it may be in our interests to use HTML 5 in future. It seems that they want us to return to HTML in future, but right now anything using the doctype XHTML 1.0 will be OK and will always be OK provided the XHTML 1.0 doctype still exists, but new websites should move on to HTML 5 eventually.
Create an account or sign in to comment