| Page 1 of 1 |
|
|
 Posted: Sun, 21st Dec 2008 16:21 Post subject: why won't you work?! |
|
 |
I'm getting really aggravated. I'm making a new layout for my web site, and this is how it looks like in photoshop:
and after I slice the images, and do a bit of coding in dreamweaver it looks like this:
All is nice and I'm happy, until I preview it in FF, then it looks like:
Why?!?!!! I validate it, the code is fine! It looks like the background is higher on the first part, and lower on the second. I did it for 1680x1050 resolution, but I dk what will it look on smaller resolutions. I put the margin of "wrapper" (the thing all of the contents are set) on "0 auto" so that it's centered on whatever resolution. I carefully measured everything so that it would fit. But it doesn't work!!! WHY?!?! 
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
[sYn]
[Moderator] Elitist
Posts: 8374
|
| Posted: Sun, 21st Dec 2008 19:25 Post subject: |
|
|
Simple answer: Dreamweaver is a pile of shit and you need to do the website correctly.
Slightly more complex: Dreamweaver cuts everything up into separate images and tries to manually place them on the webpage. This is a really stupid way of doing a background image thus why it isn't working. You should just keep the image as a single file and set it as the background in the websites CSS. First, just stop using dreamweaver, everytime dreamweaver loads a webdev losses a ball.
|
|
| Back to top |
|
|
|
|
| Posted: Sun, 21st Dec 2008 19:38 Post subject: |
|
|
But I have set background image in CSS separately 
| Code: | body {
background-image: url(background.gif);
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
} ... |
But dreamweavwer is simple to use (I'm not a pro webdev, I'm doing it because I have some little extra time, and I would like to try sth new  ).
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
[sYn]
[Moderator] Elitist
Posts: 8374
|
|
| Back to top |
|
|
$en$i
VIP Member
Posts: 3127
|
|
| Back to top |
|
|
|
|
| Posted: Mon, 22nd Dec 2008 13:46 Post subject: |
|
|
here it is:
CSS
 Spoiler: |
@charset "utf-8";
body {
background-image: url(background.gif);
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
#wrapper {
width: 1080px;
margin: 0 auto;
}
#title {
width: 1080px;
height: 99px;
background-image: url(v1/title.gif);
background-repeat: no-repeat;
}
#menu {
height: 72px;
width: 1080px;
background-image: url(v1/menu.gif);
background-repeat: no-repeat;
}
#header {
width: 1080px;
height: 252px;
background-image: url(v1/header.gif);
background-repeat: no-repeat;
}
#main {
height: 538px;
width: 1080px;
}
#leftcol{
float: left;
height: 538px;
width: 767px;
overflow: auto;
background-image: url(v1/leftcol.gif);
background-repeat: no-repeat;
}
#rightcol{
float: right;
height: 538px;
width: 312px;
background-image: url(v1/rightcol.gif);
background-repeat: no-repeat;
}
#footer{
width: 1080px;
height: 88px;
background-image: url(v1/footer.gif);
background-repeat: no-repeat;
clear: both;
}
.style1 {
color: #ffffff;
}
#wrapper #main #leftcol {
font-family: Egyptian505 Lt BT;
}
|
And index.html (start page):
| Spoiler: |
<!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>World of a soon to be physicist</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="title"></div>
<div id="menu"></div>
<div id="header"></div>
<div id="main">
<div id="rightcol"></div>
<div class="style1" id="leftcol">
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
|
Now, I have found inspiration from tutorial: http://psdtuts.com/tutorials/interface-tutorials/create-a-sleek-high-end-web-design-from-scratch/
But the difference is that his site is located on the left and not on the center...
I made layout in photoshop, and then sliced it into pieces, and started to work in dw...
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
$en$i
VIP Member
Posts: 3127
|
| Posted: Mon, 22nd Dec 2008 21:41 Post subject: |
|
|
Firstly don't slice your bg picture lol, try to make it fade with a bg color, otherwise just make of your title "world of a soon to be physicist" a transparent png or gif image, also your Arthur C. clarke's quote. For the rest you will only need another image: one that will be 1x1 pixel large half-transparent black, used where relevant as a bg image of your divs.
To center your non-sliced bg image:
| Code: | body {
background:url(http://www.unm.edu/~abqtom/images/Moon/Moon11-19-02b.jpg) 50% 0 no-repeat;
}
|
|
|
| Back to top |
|
|
|
|
| Posted: Tue, 23rd Dec 2008 11:17 Post subject: |
|
|
I realized what the problem was... Transparency!! Instead of using transparent png images, I sliced images merged with background and made gif images, and then tried to match them to background 
Thnx for help!!! You saved me! 
EDIT:
New problems: Now when I preview it in dw it looks perfect! But I uploaded CSS and all the html files to the uni server it just leaves blank all the supposed to be transparent parts...
uploaded:
previewed from dw:
It's like the png images won't show...
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
$en$i
VIP Member
Posts: 3127
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 24th Dec 2008 10:53 Post subject: |
|
|
Transparent gif? How? I made whole transparency thing in photoshop, and then save for web and ... and when I choose anything else than PNG 24 it won't be transparent...
| Quote: | | Put all your webpage images within an "images" subfolder, label them all in lowercase (and without space or weird -accents, etc- characters) |
Did that
| Quote: | | put your css file within another "css" subfolder and enter where relevant "../images/yourpic.gif" within your style.css file. |
How?
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
$en$i
VIP Member
Posts: 3127
|
|
| Back to top |
|
|
|
|
| Posted: Sat, 27th Dec 2008 10:28 Post subject: |
|
|
About that transparent gifs... I can make only transparent background of it, but I need a ''see through'' transparent as in my pics...
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
|
|
| Posted: Sat, 27th Dec 2008 10:44 Post subject: |
|
|
You can make a semitransparent png with photoshop. Only problem -> transparent pngs won't look good with IE6(transparency is 100% buggy). IE7 isn't good at handling different transparency levels. If there aren't any transparency differences your site'll look good on all newer browsers.
|
|
| Back to top |
|
|
$en$i
VIP Member
Posts: 3127
|
| Posted: Sat, 27th Dec 2008 21:11 Post subject: |
|
|
| dingo_d wrote: | | About that transparent gifs... I can make only transparent background of it, but I need a ''see through'' transparent as in my pics... |
Yeah for your "see through" background images you will have to use png (with the hack mentioned earlier for IE6), for all others you should rather use gif.
|
|
| Back to top |
|
|
|
|
| Posted: Sun, 28th Dec 2008 01:05 Post subject: |
|
|
Well most of the people I know who visit my web (students from my uni) use FF, and it doesn't have problems with transparency (as far as I know). I think my images aren't linked good in CSS on server I'm using (I think I messed it up a bit and left the location in CSS for images on my hard drive ) Will get to it soon (pretty busy right now with stuffing my face with all the cakes ) and report if I have any troubles. Thnx for all the help!
EDIT: Yay!!! It works!!! I didn't put all the images into separate folder. I know it would probably be better, but who cares, as long as it works I'm fine with it!! THNX!!!!!!
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
| Page 1 of 1 |
All times are GMT + 1 Hour |
. Web development is very easy, just need to spend a bit of time learning the concepts. You'll have far more luck that way.
