October 10, 201411 yr Hi all, I'm trying to design a website about our cockatiels that we breed. I haven't done any designing for about 3 years, so I'm busy trying to learn all about css and that sort of thing. Please forgive the "noobishness" and try to put things in words of one syllable Anyway, I am using Dreamweaver 8 (I tried webeasy 10.2, but didn't like it) and I want a specific design (i'm not sure how to show you my design, but I will try to explain it... I want a header, 3 columns of varying widths and a footer. In the header I want our Name which I have saved as an image so it will display in the fonts I want, a small caption under the Title image, and a picture (or slideshow if I can get that technical) in the top right corner. I then want a horizontal navigation bar. Then the 3 columns with the main content in the middle. Images on the left and right (but probably different sizes). And then a footer. I have managed to find examples of the above layout - without the header image in the top right and so I go about trying to fit my content in, however sometimes things don't display properly in design view but they do in firefox and other times they display fine in design view but they are all over the place in the browser and I don't know what I've done wrong. There are also times when I either insert an image or something and the image goes in the right place, but the h1 disappears completely or jumps to a random spot somewhere. When this happens I try to see what has caused it (or even undo) but I can't seem to fix it so it will go back to how it was before the insert... needless to say I have redesined this layout about a dozen times. Can any of you smart people shed some light on this? And please if you need me to link anything to show you, please give me detailed instructions how I go about it. Thanks Pt
October 10, 201411 yr The most important thing here is to realise that dreamweavers 'design view' is useless, very rare does it actually show you what the browser would render so only rely on the browser, ideally rely on multiple browsers and not just one. The issues you are having seem very basic but in order to tell you exactly what the issues are we would need to see your html and CSS so if you could post that link that would be best.
October 11, 201411 yr Author Thanks for your reply Fuzzy. I'm not sure how to link the code etc, so I'll just post it here... Remember this is based on a design I downloaded, so the code isn't all mine... just the wrong bits body { margin:0; padding:0; border:0; /* This removes the border around the viewport in old versions of IE */ width:100%; min-width:600px; /* Minimum width of layout - remove line if not required */ /* The min-width property does not work in old versions of Internet Explorer */ font-size:90%; background-image: url(../Harlequin%20Aviaries/images/other%20images/background2.jpg); font-family: "Trebuchet MS", Arial, sans-serif;}a { color:#369;}a:hover { color:#fff; background:#369; text-decoration:none;}h1, h2, h3 { margin:.8em 0 .2em 0; padding:0;}p { margin:.4em 0 .8em 0; padding:0;}img { margin:10px 0 5px;}#ads img { display:block; padding-top:10px;}/* Header styles */#header { clear:both; float:left; width:100%;}#header {}.heading img{ float:right; position: absolute; left: 656px; top: 196px;}#header p,#header h1,#header h2 { padding:.4em 15px 0 15px; margin:0;}#header ul { clear:left; float:left; width:100%; list-style:none; margin:10px 0 0 0; padding:0;}#header ul li { display:inline; list-style:none; margin:0; padding:0;}#header ul li a { display:block; float:left; margin:0 0 0 1px; padding:3px 10px; text-align:center; color:#FFFFCC; text-decoration:none; position:relative; left:15px; line-height:1.3em; background-color: #FF9933; font-weight: bold;}#header ul li a:hover { color:#FF6600; background-color: #FFFF66; font-weight: bold;}#header ul li a.active,#header ul li a.active:hover { color:#CC0000; font-weight:bold; background-color: #FF9933;}#header ul li a span { display:block; <body><div id="header"> <img src="../Harlequin Aviaries/images/other images/HA_title_text_img.png" alt="Heading Image" /> <div class="heading img"> <img src="../Harlequin Aviaries/images/other images/background_chicks.jpg" alt="" width="752" height="250" /> <h2>Specialising in hand-raised cockatiels</h2> <ul> <ul> <li><a href="http://matthewjamestaylor.com/blog/perfect-3-column.htm" class="active">home</span></a></li> <li><a href="http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.htm">about us</span></a></li> <li><a href="http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm">advice</span></a></li> <li><a href="http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm">nursery</span></a></li> <li><a href="http://matthewjamestaylor.com/blog/perfect-2-column-double-page.htm">gallery</span></a></li> <li><a href="http://matthewjamestaylor.com/blog/perfect-full-page.htm">contact</span></a></li> <li><a href="http://matthewjamestaylor.com/blog/perfect-stacked-columns.htm">links</span></a></li> </ul> Oh, I also know that I should have at lease one </div> at the end there, but every time I put it in, it just shows up in the page... Sorry if that's not how you link stuff... Edited October 11, 201411 yr by ptolia
October 11, 201411 yr Use http://validator.w3.org/ to validate your markup. It will show you if you have any unclosed or stray tags in your code. It will also show you all other errors like block-elements nested in inline ellements etc. As FuzzyLogic wrote: If you add a link to your posts it would be easier to help. If you dont have access to a server you can paste your code with an online service like http://jsfiddle.net/ (It will allow you to execute and share the code) If you need to add code to your post use the code button [<>] in the wysiwyg-editor when you write your post for clearer formatting . Edited October 11, 201411 yr by Nillervision
October 11, 201411 yr Author I have managed to get it working. I started, yet again, from scratch and went through it very slowly writing down all the changes I was making. This is really good for figuring out what I'm doing wrong and how things work. Thanks for your help. I'm sure I'll be back with more questions and now I know where to go to check the code and such so I can post links so you can help me Pt
Create an account or sign in to comment