1. You have header1 and header2 as 2 separate divs floated left and right. They should be contained without one div with either the image floated left or the menu floated right. Both don't need to be floated and they should be in the same container. Then by making the background of the container grey you don't get that green space in between.
2. Footer - it's hard to say now. We would need to see the code that you are changing to figure out what is going on.
3. Check the code for spaces in between images, if not check the CSS.
4. Again, we need to see the code to offer suggestions. Tough to say what's going on or where to start. We could end up discussing respsonive design or working with frameworks like bootstrap or 960gs.
1 person found this helpful
1. The original menu seems Ok. Hence I would remove the item that you do not want and adjust the width of the items (LI) to 16.6666%
2. If you keep the footer within the confines of the container div, this should not happen
3. It looks like a border or spacing problem. Hard to tell without seeing the code
4. You need a RWD (responsive web design), but even then I would not go past 1200px. It is great having a 1920px monitor, but I would not like to read a web page over the full width. My neck does not need the exercise.
Thanks for the quick response. Ugh, I can't believe how easy a fix that was for the header! Sometimes I find myself over analyzing stuff.
As for the footer, I never changed anything with the footer, and it was fine before I had to add more divs to the main page. So maybe after I finish battling with content for that it'll come out correctly. I'll post again if I'm still having problems with it.
As for the white dash between the images, if you look at the site the way it is now, the dashes are there, and you can check the page source. I used lightbox. The link to the site is in my original question.
I guess I could say the same for the 4th question because I haven't really changed much, it's just the main page I'm still working on, so the majority of the code is still the same.
Thanks again! One down, 3 to go...
Well, I fixed the header problem based on the response from SnakEyez02, but I have the widths in pixels...is it better to put it in percentages?
Thanks for the response on the footer! I DID have a closing div tag in the wrong spot. I don't understand why the validator doesn't catch that stuff(?)
As for the white dash between the images, if you check the site as it is (I put the link to it in my original question), you can check all of the coding. I used lightbox.
I haven't heard of RWD yet, I had only read about a "liquid" layout (along w/the other names for it). As it is now my site is at 1100px wide. I will check out the articles. Looks like perhaps a lot more work to do this.
I know this tutorial is a bit long, but it does a really good job of explaining different types of layouts:
Hope this helps!
1 person found this helpful
The validator ( http://validator.w3.org/ ) should catch everything. Dreamweaver's doesn't always.
For the white space, change the .lbGallery ul li rule from "display:inline;" to "display:inline-block;".
For the responsive web design, you could, and I use that word with extreme caution, use Dreamweaver's fluid grid, although I've had an easier time explaining the Twitter Bootstrap to newcomers than the DW system. The code just makes more sense. They have a few starter pages, but the basics of it are that you layout everything in a grid and the code is already in place to do what you need whether it be fluid or fixed. Typically in repsonive web design, there is no reason you cannot add extra graphical elements to fill in the whitespace of a design on higher resolutions, but as gramps says, typically users don't want to read, so you it is better not to make your body text stretch the width of the display.
Ughhh! I'm freaking out right now! I've done (I believe) everything that everyone here has suggested. As I was making these modifications I checked with different browsers (firefox, chrome, safari), checked every file with validator.w3.org, and everything worked fine. Now I re-uploaded everything to Filezilla, and there's something wrong in each browser that I had checked with before! I don't understand and am very frustrated right now. Could somebody please look at my site and offer some suggestions please?
Thank you very much in advance!
Refresh the browsers to get rid of the cache. Works fine for me.
Well I obviously freaked out prematurely. When I looked this morning most everything was correct. Guess it takes the FTP site some time. I do have one thing that is not working correctly across browsers. On the main page, just below the "Available soon for..." there is an order now button. It only appears with Safari. I've tried Firefox, Chrome and IE and the image does not appear on any of those. The thing that gets me is that the image was there before and worked fine, all I did was make it bigger and relink it, so I'm confused why all of a sudden it doesn't show up.
Thanks in advance for any assistance.
The original question has been answered correctly. I think it is time to statrt a new discussion
Oh ok, thanks, I'll start a new one.