PDA

View Full Version : my layout in dreamweaver is run away


fattat
02-24-2009, 03:18 PM
in my webbrowser the layout is looking good
http://img264.imageshack.us/img264/9208/picture1z.png (http://imageshack.us)

but in dreamweaver, the arrangement is run away, looking messy!!
http://img264.imageshack.us/img264/5273/picture2d.png (http://imageshack.us)

how come this happen?

this is the script for html....
<div id="blackRight">
<form name="f1" action="#" method="post">
<input type="text" name="name" value="Your Name :" class="txtBox1" />
<input type="password" name="pass" value="Password:" class="txtBox2" />
<input type="submit" name="login" value="Login" class="login" />
<input type="checkbox" name="c1" class="chk" />
<label class="formTxt">Remember me</label>
<label class="fp"><a href="#">Forgot Password ?</a></label>
<br class="spacer" />
</form>
<p class="tollFree"><span>Toll Free</span>+01-9987-0098</p>
</div>


and the css script
#blackRight{
width:321px;
float:right;
}
#blackRight form{
width:270px;
background:url(images/form_icon.gif) 0 0 no-repeat;
padding:14px 0 22px 51px;
}
#blackRight form input.txtBox1{
width:100px;
height:17px;
border-bottom:#000000 solid 1px;
border-right:#000000 solid 1px;
border-top:#808080 solid 1px;
border-left:#808080 solid 1px;
padding:2px 0 0 6px;
font:normal 10px/17px Arial, Helvetica, sans-serif;
color:#040404;
background-color:#fff;
margin:0 11px 11px 0;
float:left;
}
#blackRight form input.txtBox2{
width:100px;
height:15px;
border-bottom:#D4D0C8 solid 1px;
border-right:#D4D0C8 solid 1px;
border-top:#808080 solid 1px;
border-left:#808080 solid 1px;
padding:4px 0 0 6px;
font:normal 10px/15px Arial, Helvetica, sans-serif;
color:#040404;
background-color:#fff;
margin:0 0 11px 0;
float:left;
}
#blackRight form input.login{
width:40px;
height:21px;
background:url(images/btn_login.gif) 0 0 no-repeat;
float:right;
border:none;
cursor:pointer;
margin:0 0 11px 0;
font:normal 11px/21px Arial, Helvetica, sans-serif;
color:#fff;
background-color:#404040;
}
#blackRight form input.chk{
width:12px;
height:12px;
float:left;
margin:0 4px 0 0;
}
#blackRight form label.formTxt{
font:normal 10px/12px Arial, Helvetica, sans-serif;
color:#E5E6C4;
background-color:inherit;
float:left;
margin:0 13px 0 0;
}
#blackRight form label.fp{
float:left;
margin:0;
width:95px;
height:18px;
background:url(images/forgot_password.gif) 0 0 no-repeat;
padding:0 0 0 19px;
}
#blackRight form label.fp a{
font:normal 10px/18px Arial, Helvetica, sans-serif;
color:#FE0C9F;
background-color:inherit;
text-decoration:none;
}
#blackRight form label.fp a:hover{
color:#fff;
background-color:inherit;
}
#blackRight p.tollFree{
width:263px;
height:32px;
background:url(images/tollfree.gif) 0 0 no-repeat;
padding:0 0 0 12px;
font:bold 27px/27px Arial, Helvetica, sans-serif;
color:#F2DB50;
background-color:inherit;
display:block;
float:left;
}
#blackRight p.tollFree span{
font:normal 11px/11px Arial, Helvetica, sans-serif;
color:#fff;
background-color:inherit;
margin:11px 37px 0 0;
width:40px;



can help me check which part got problem??

domedia
02-24-2009, 08:05 PM
Don't rely on Dreamweaver for the website rendering.
Noone is going to surf your website using Dreamweaver so it doesn't really matter :) Free yourself from the DW design view!

fattat
02-24-2009, 09:20 PM
Don't rely on Dreamweaver for the website rendering.
Noone is going to surf your website using Dreamweaver so it doesn't really matter :) Free yourself from the DW design view!

but it make me hard to edit something because the overlapping images and text
http://img120.imageshack.us/img120/2523/picture1v.png (http://imageshack.us)
in my another page of website is totally run away
but in webbrowser all thing is ok
http://img410.imageshack.us/img410/3244/picture2z.png (http://imageshack.us)

is that i missing some script for the css?
i hope that i can know where i am mistake?

edbr
02-25-2009, 12:14 AM
think of Dw design view as a rough guide only or a visual aid if you will it doesnt mean much really

domedia
02-25-2009, 06:41 AM
but it make me hard to edit something because the overlapping images and text Not if you use code view for edits.

mjclementz
02-27-2009, 01:39 AM
unfortunately not everyone knows code. I've been having the same problem, though MUCH less extreme because I don't have near that much clutter. Plus I know a novice-amount of code, enough to get by on anyways.

It really is a good looking site but maybe this is a sign that you should "clean up" a bit. If it gets too crowded people tend to think warez or amateur who wants to make a quick buck.

Just a thought. Good luck sorting all that out. I just tried out CS4 the other day and it had a preview functionality that was much more effective than that of CS3 and, if I'm not mistaken, it was editable. That would help you a lot me thinks.

Ricky55
02-27-2009, 01:47 AM
you have to learn code, html is simple once you get the hang of it.

fattat if that design is all your own work its very good, and if you are kicking out work like that I'd learn how to code.

I just work in code view, and just always have your web browser of choice open at all times and just leave the page open then every time you make an edit just refresh the page to see your work. If you work this way you'll soon stop using design view altogether.

I did a site recently that viewed fine in all browsers but was badly broken in design view, if I was relying on design view alone I wouldn't have been able to do the job.

Like the others have said its just a ruff guide for noobs, stop using it and you will be a better web designer for it.

Ricky55
02-27-2009, 01:51 AM
also working as I described above is just the same as design view really but you have the accuracy of the browser, all the commands from the Dreamweaver interface still work fine, like inserting images etc so all you need to do is get used to looking at the code rather than the design and just use the browser for the design view.

Just force yourself to do it and honestly within a couple of days you'll wonder why you ever used design view.

Ricky55
02-27-2009, 01:53 AM
sorry to post a few times but just read mjclementz comments thats rubbish that design looks really good, nice typography.

Don't sacrifice your design just because its not viewing correctly in design view.

Ricky55
02-27-2009, 01:57 AM
Also CS4's new Live View is what mjclementz is referring to. Still not as good as just using the browser and its slow to render.

edbr
02-27-2009, 02:08 AM
Ditto Ricky's comments 100%

Ricky55
02-27-2009, 07:28 AM
thanks edbr.

A little knowledge can be harmful to others, It makes it look like warez, how exactly?

My only slight criticism and its is slight, is that it looks a bit like a lot of these template sites / some blogs. Especially the colours dotted borders and fonts. Looks good today but will probably date quickly.

Still very good work though.

mjclementz
02-28-2009, 12:53 AM
Yeah that's the one, thanks for filling that in for me.

But don't get me wrong, I'm also definitely an admirer of the work he's done on that page, but as a consumer and a web designer, it's not typically my preference to have things too crowded up. Sometimes its appropriate, sometimes its not. I was simply trying to stimulate some ideas to help him with the issue at hand.

mjclementz
02-28-2009, 12:58 AM
Didn't see your second comment. I used to get into a lot of that warez stuff and I just remember they were always just jam packed with content to the point that you couldn't look at one thing without also seeing ten others. It's a stylistic thing I suppose. To each his own. Hell, I don't have to look at it everyday right?

Ricky55
02-28-2009, 01:59 PM
i've never seen warez sites that look anything like that design. they are typically crowded yes but also devoid of any design, and always look really cheap.