Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Jul 2009
    Location
    West Midlands, UK.
    Posts
    30
    Thanks
    4
    Thanked 1 Time in 1 Post

    PSD to xHTML What am I doing wrong?

    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
    Code:
    <!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
    Code:
    @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.
    Last edited by Obsolete; 02-14-2012 at 04:43 PM. Reason: Picture Not Showing & Added demo

  • #2
    New Coder
    Join Date
    Jan 2012
    Posts
    53
    Thanks
    8
    Thanked 4 Times in 4 Posts
    I can't see your planned outcome image. I'm getting a 403 error.

  • #3
    New Coder
    Join Date
    Jul 2009
    Location
    West Midlands, UK.
    Posts
    30
    Thanks
    4
    Thanked 1 Time in 1 Post
    Quote Originally Posted by DarkLaika View Post
    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...

    Code:
    .newspad {
          padding-top:30px;
    }
    Then wrapped
    Code:
    <div class="newspad">
      <div class="news-bg">
        <div class="news-p">Text Goes Here</div>
      </div>
    </div>
    Would this be ok?
    Last edited by Obsolete; 02-14-2012 at 04:47 PM.

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,391
    Thanks
    11
    Thanked 295 Times in 294 Posts
    Quote Originally Posted by Obsolete View Post
    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

  • Users who have thanked tracknut for this post:

    Obsolete (02-16-2012)

  • #5
    New Coder
    Join Date
    Jul 2009
    Location
    West Midlands, UK.
    Posts
    30
    Thanks
    4
    Thanked 1 Time in 1 Post
    Quote Originally Posted by tracknut View Post
    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
    Last edited by Obsolete; 02-14-2012 at 09:11 PM.

  • #6
    New Coder
    Join Date
    Jul 2009
    Location
    West Midlands, UK.
    Posts
    30
    Thanks
    4
    Thanked 1 Time in 1 Post
    Anyone?

  • #7
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,391
    Thanks
    11
    Thanked 295 Times in 294 Posts
    Boy, I can't see any difference at all.

    Dave

  • #8
    New Coder
    Join Date
    Jul 2009
    Location
    West Midlands, UK.
    Posts
    30
    Thanks
    4
    Thanked 1 Time in 1 Post
    Here is two screen shots.

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

  • #9
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,391
    Thanks
    11
    Thanked 295 Times in 294 Posts
    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

  • #10
    New Coder
    Join Date
    Jul 2009
    Location
    West Midlands, UK.
    Posts
    30
    Thanks
    4
    Thanked 1 Time in 1 Post
    It is outside the div. It's on it's own.

    Code:
    <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.

  • #11
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,391
    Thanks
    11
    Thanked 295 Times in 294 Posts
    Not a problem. Your comments in the code are not correct, I think. This image:
    Code:
            <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

  • #12
    New Coder
    Join Date
    Jul 2009
    Location
    West Midlands, UK.
    Posts
    30
    Thanks
    4
    Thanked 1 Time in 1 Post
    Oh yeah no I'm with you.

    Well when I change it to:

    Code:
          <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 -



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



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

  • #13
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,391
    Thanks
    11
    Thanked 295 Times in 294 Posts
    Try this:
    Code:
    <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>

  • #14
    New Coder
    Join Date
    Jul 2009
    Location
    West Midlands, UK.
    Posts
    30
    Thanks
    4
    Thanked 1 Time in 1 Post
    Nope doesn't work: (Maybe ignore and move on? lol)


  • #15
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,391
    Thanks
    11
    Thanked 295 Times in 294 Posts
    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


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •