PDA

View Full Version : Problem with webpage(s)


Stannislav
12-16-2006, 12:45 AM
Hi all,
I am designing a website and the layout I have designed using Photoshop, I have saved the layout as an image and set it to the background of my webpage (in dreamweaver). I have then used the 'Layer' tool for adding all my content in, but I have that problem which you are all aware of where if a computer is running a different resolution or different size window/browser everything becomes disaligned. I have looked around and people offer more advanced HTML to use but none of this has been successful with me. Any help on the matter would be appreciated.

domedia
12-16-2006, 01:01 AM
but I have that problem which you are all aware of where if a computer is running a different resolution or different size window/browser everything becomes disaligned.
Welcome to the forums!
Yes this is a problem if you don't understand the way positioning works. Usually this happens if you mix relative (a centered design for instance) and absolute positioning (absolute in viewport).

If you have any code or url, don't be shy, you would only be helping yourself ;)

Stannislav
12-16-2006, 10:37 AM
Thanks Domedia, by no means am I an expert in web design, as you can probbly tell from the code. I have used many many layers ontop of the background image that is set. Please find the code attached.

domedia
12-16-2006, 10:58 PM
If you want to position everything absolute from top left of viewport, this is the problem you're going to get into :-(

Maybe have a look at the centering tutorial:
http://www.dreamweaverclub.com/css-center-content.php

I think this might be what you're looking for.

Stannislav
12-16-2006, 11:11 PM
I have come up with a solution. The solution is to chop the template down into seperate images for; header, navigation, content & footer. Then load them into DW8 and apply all the settings I need via the use of CSS. Seems to be a proffesional approach to web design also. What do you guys think?

chriskq
12-17-2006, 10:14 AM
What do you guys think?

now your on the right track.
So do you link you'll go fot a left sided webpage or a centered one?

Stannislav
12-17-2006, 01:38 PM
I think I'll chop my current template into seperate images for Header, Vertical Navigation, Content & Footer and then centre them all.

But on my template I have put line dividers across the Navigation area (http://img99.imageshack.us/img99/3636/navej9.jpg),

is there a way in a DIV to get specifically positioned text, or will I have to remove the line dividers and just put the links in below one another?

Stannislav
12-19-2006, 07:03 PM
I have started in CSS and it has started ok, first problem I have come across though is the viewing between browsers. It looks as I want through Firefox but looks all messed up through Internet Explorer.

#header {
width: 715px;
height: 84px;
background-position: left center;
margin-left: 160px;
margin-top: 20px;
}
#navbar {
height: 26px;
width: 715px;
margin-left: 160px;
margin-top: 4px;
}
#navigation {
color: #FFFFFF;
float: left;
height: 304px;
width: 152px;
margin-left: 160px;
}
#content {
color: #FFFFFF;
float: right;
height: 304px;
width: 505px;
}

As you can see from the CSS, the design of the page is 715px in width, so the 152px from the navigation combined with the 561px aswell as a 3px margin cap adds up to the 715px width.In DreamWeaver the Content div is around 200px away from the Navigation div , In Firefox they stand side by side fine, in their correct locations which is the navigation floated to the left below the divider bar between the header, and the content floated to the right below the divider bar. In IE the Content div is joined to the bottom right hand corner of the Navigation div, even though the math is correct. Anyone offer any help to solving this?