...

View Full Version : PSD to xHTML What am I doing wrong?



Obsolete
02-13-2012, 08:43 PM
I'm pulling my hair out, not sure where the hell I'm going wrong.

Below I'll show you the HTML & CSS and then an Image to show my planned out-come.

HTML


<!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>Quench Radio || Quenching your thurst for music!</title><br />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
<div id="container"><!-- CONTAINER START -->

<div id="header">

<!-- logo -->
<img src="images/logo.png" alt="Quench" />

<div id="djsaystextbox">
<div class="djsays"><strong>@USERNAME</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et augue nisi, ac ullamcorper purus. Pellentesque eu neque vitae diam vestibulum gravida id at risus. Integer eu suscipit risus.</div>
<img src="images/djsays.png" alt="" class="djsayslogo" />
</div><!-- TEXT BOX FOR DJ SAYS END -->
<div id="djsayslogo"></div><!-- DJ Says text + Speech Bubble tick -->

</div><!-- Header Container -->

<div id="menu-bg">
<div class="menu-p">
<div class="menulink">
<a href="index.html">Home</a>
<a href="profiles.html">Profiles</a>
<a href="chat.html">Chat</a>
<a href="news.html">News</a>
<a href="staff.html">The Staff</a>
<a href="contact.html">ContactUs</a>
<a href="login.html">Login/Register</a>
</div>
</div>
</div><!-- Menu END -->

<div id="welcome-bar"><img src="images/welcome.png" alt="" /></div>
<div id="welcome-bg">
<div class="welcome-p">Text Goes Here</div>
</div>
<!-- Welcome END -->

<div id="status-bar"><img src="images/status.png" alt="" /></div>
<div id="status-bg">
<div class="status-p">Text Goes Here</div>
</div>
<!-- Status Updates END -->

<div class="news-bg">
<div class="news-p">Text Goes Here</div>
</div>

<div class="news-bg">
<div class="news-p">Text Goes Here</div>
</div>

<div class="news-bg">
<div class="news-p">Text Goes Here</div>
</div>
<!-- News 3 at a time END -->

<!-- ||||||||||||||||||||||||||||||||||||||||||| -->

<!-- RIGHT SIDE STARTS -->

<div id="radio bar"></div>
<div id="radio">
Stats go here
</div>
<!-- Radio Stats END -->

<div id="user bar"></div>
<div id="user">
User Panel here
</div>
<!-- User Panel END -->

<div id="staff bar"></div>
<div id="staff">
Staff Pics here
</div>
<!-- The Staff END -->


<div id="footer bar">
<div id="footer p">
COPYRIGHT <a href="index.html">Quench Radio</a> || All Rights Reserved
</div>
</div>


</div><!-- CONTAINER END -->
</body>
</html>


CSS


@charset "utf-8";
/* Quench Radio Style */

body {
background-color:#000000;
background-image:url('images/background.png');
background-repeat:no-repeat;
background-position:center;
background-attachment:fixed;
font-family:Arial, Helvetica, sans-serif;
}

#container {
width:960px;
margin:auto;
}

#djsaystextbox {
background-image:url('images/djsaysbox.png');
background-repeat:no-repeat;
width:571px;
height:64px;
float:right;
}

.djsays {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding-top:10px;
padding-left:15px;
padding-right:10px;
}

.djsayslogo {
padding-top:11px;
padding-left:2px;
}

#menu-bg {
background-image:url(images/menu.png);
background-repeat:no-repeat;
width:960px;
height:40px;
}

.menu-p {
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
text-align:center;
padding-top:10px;
word-spacing:25px;
}

.menulink A:link {text-decoration: none; color:#ffffff;}
.menulink A:visited {text-decoration: none; color:#ffffff;}
.menulink A:active {text-decoration: none; color:#b7f301;}
.menulink A:hover {text-decoration: none; color:#b7f301;}

#welcome-bar {
padding-top:43px;
}

#welcome-bg {
background-image:url('images/welcomebox.png');
background-repeat:no-repeat;
width:620px;
height:227px;
}

.welcome-p {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding-top:10px;
padding-left:10px;
}

#status-bar {
padding-top:30px;
}

#status-bg {
background-image:url('images/statusbox.png');
background-repeat:no-repeat;
width:620px;
height:227px;
}

.status-p {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding-top:10px;
padding-left:10px;
}

.news-bg {
background-image:url('images/newsbox.png');
background-repeat:no-repeat;
width:620px;
height:156px;
padding-top:30px;
}

.news-p {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding-top:10px;
padding-left:10px;
}


Planned Outcome
http://lookpic.com/O/i2/45/vWFsvKd.jpeg

Demo
http://www.quench.net23.net

The news boxes are padding-top:30; but the 1st one doesn't pad down from the pink/red box. The other 2 do, but also the text is moved... I'm baffled.

Any help would be appreciated. I do really want to write this like I write English...

Thanks in advance,
Obs.

DarkLaika
02-13-2012, 09:24 PM
I can't see your planned outcome image. I'm getting a 403 error.

Obsolete
02-14-2012, 09:05 AM
I can't see your planned outcome image. I'm getting a 403 error.

I've edited the top post. Sorry about that. Also added a Demo.

[UPDATE] Finally done it. Added this to the CSS...



.newspad {
padding-top:30px;
}


Then wrapped


<div class="newspad">
<div class="news-bg">
<div class="news-p">Text Goes Here</div>
</div>
</div>


Would this be ok?

tracknut
02-14-2012, 04:01 PM
Would this be ok?

Yes, but couldn't you have skipped the newspad div completely and just added a margin-top:30px to your news-bg style?

Dave

Obsolete
02-14-2012, 05:24 PM
Yes, but couldn't you have skipped the newspad div completely and just added a margin-top:30px to your news-bg style?

Dave

Dave you're a genious. Something so simple has taking out atleast 6 lines. :)

Thank you.

One more question. The DJ Says part with the speech bubble is slightly off in FF but perfect in IE9...
Just worked out in IE it needs to be margin-top: 12px; to get it inline, but in FF it needs to be margin-top: 8px; I hate browsers! We need a universal one :P

Obsolete
02-16-2012, 12:14 PM
Anyone?

tracknut
02-16-2012, 03:58 PM
Boy, I can't see any difference at all.

Dave

Obsolete
02-16-2012, 04:28 PM
Here is two screen shots.

IE & FF
http://imageshack.us/g/35/35921026.png/

tracknut
02-16-2012, 04:36 PM
Ah, I see. That's because you're depending on the font inside the box for your spacing. I would move the "dj says" image below (ie outside the div) the djsaystextbox div, and line it up with no margins or other spacing below that div. That should allow you much better control of its position.

Dave

Obsolete
02-16-2012, 05:57 PM
It is outside the div. It's on it's own.



<div id="djsaystextbox">
<div class="djsays"><strong>@USERNAME</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et augue nisi, ac ullamcorper purus. Pellentesque eu neque vitae diam vestibulum gravida id at risus. Integer eu suscipit risus.</div>
<img src="images/djsays.png" alt="" class="djsayslogo" />
</div><!-- TEXT BOX FOR DJ SAYS END -->
<div id="djsayslogo"></div><!-- DJ Says text + Speech Bubble tick -->


Its on its own at the bottom.
Sorry about being a pain Dave, just trying to better myself and understand more. I do appreciate your help.

Matt.

tracknut
02-16-2012, 06:33 PM
Not a problem. Your comments in the code are not correct, I think. This image:


<img src="images/djsays.png" alt="" class="djsayslogo" />

is the image with the little arrow and "DJ says" text, and is the one I'm suggesting you move outside your #djsaystextbox div.

Dave

Obsolete
02-16-2012, 06:50 PM
Oh yeah no I'm with you.

Well when I change it to:



<div id="djsaystextbox">
<div class="djsays"><strong>@USERNAME</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et augue nisi, ac ullamcorper purus. Pellentesque eu neque vitae diam vestibulum gravida id at risus. Integer eu suscipit risus.</div>
</div><!-- TEXT BOX FOR DJ SAYS END -->
<img src="images/djsays.png" alt="" class="djsayslogo" />


It ends up like this -

http://img33.imageshack.us/img33/8834/59463037.th.png (http://imageshack.us/photo/my-images/33/59463037.png/)

I've also included a screen shot of it float: right;

http://img839.imageshack.us/img839/1706/77889243.th.png (http://imageshack.us/photo/my-images/839/77889243.png/)

Its nothing major. But trying to get this cross browser stuff down to a T.

tracknut
02-16-2012, 07:02 PM
Try this:


<div id="header" style="overflow:auto">

<!-- logo -->
<img alt="Quench" src="images/logo.png" style="float:left">

<div id="djsaystextbox">
<div class="djsays"><strong>@USERNAME</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et augue nisi, ac ullamcorper purus. Pellentesque eu neque vitae diam vestibulum gravida id at risus. Integer eu suscipit risus.</div>
</div>
<img src="images/djsays.png" class="djsayslogo" style="float:left;margin-top:0">
<!-- TEXT BOX FOR DJ SAYS END -->
<!-- DJ Says text + Speech Bubble tick -->
</div>

Obsolete
02-16-2012, 07:09 PM
Nope doesn't work: (Maybe ignore and move on? lol)

http://img853.imageshack.us/img853/686/85453026.th.png (http://imageshack.us/photo/my-images/853/85453026.png/)

tracknut
02-16-2012, 07:12 PM
Do you have a way to put the current rev up on the site, maybe as a differnt file if you don't want to change the original? I thought that last edit worked for me, but it's tough always going back to your original to make changes.

Dave

Obsolete
02-16-2012, 07:17 PM
Do you have a way to put the current rev up on the site, maybe as a differnt file if you don't want to change the original? I thought that last edit worked for me, but it's tough always going back to your original to make changes.

Dave

Like this - http://www.quench.net23.net/dave.html

tracknut
02-16-2012, 07:28 PM
Ah, looks like you ended up with one too many </div> in there.


<!-- DJ Says text + Speech Bubble tick -->
</div>


</div><!-- Header Container -->


Delete one of those, I think that'll do it

Dave

Obsolete
02-16-2012, 07:30 PM
Dave you're a star mate. I'll try and get my head around what you done different.

Thanks a lot!

tracknut
02-16-2012, 10:09 PM
Feel free to ask, if there's anything you can't figure out. It's the only way to learn!

Dave



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum