SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2006
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Site redesign just won't line up


    I just started the redesign of my site, this time trying out things in CSS that I haven't really messed around with before (I've only been using CSS for around a week or so).

    If you could possibly help me with fixing the layout on www.interactiverichard.co.uk/sandbox, I would be very grateful!

    The problem is especially in IE/Win, where the layout is just generally messed up.

    Also, on all platforms, I'm trying to get the left hand side of the logo, coloured barcode lines, and the main section of text to line up. But because I'm needing to use a %, the layout falters especially at large widths of browser window.

    I've queued up some screenshots on various platforms, over at
    http://browsershots.org/website/http...co.uk/sandbox/
    and they should be there shortly.

    The site is at
    http://www.interactiverichard.co.uk/sandbox/index.php

    And the stylesheet at
    http://www.interactiverichard.co.uk/sandbox/style.css

    Anyone who helps is absolutely amazing :-D

    Cheers, Rich

  2. #2
    SitePoint Zealot
    Join Date
    Sep 2006
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, and general CSS pointers would be helpful... I'm currently an idiot in this department! And how well can everyone see the leaves in the header section background (the faint grey ones). They look great on LCD, but some tests on CRT show they aren't always so visible.

    Cheers again, Rich

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should really be applying your float and margins to #content instead of individually to #main, .colours and .banner cos you're essentially just repeating the same style (actually, you don't even need #main). And #sidebar should be taken out of #content. Also, you don't need to float #sidebar or give it a width, just give it a margin-right wider than #content. You might also want to reconsider the 15% margin-right because at smaller screen sizes, your margin becomes much greater in proportion to the rest of your layout.
    And to center your header, you should make the left and right margins auto.
    So what you end up with should look something like:

    HTML Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
     <head>
     <title>interactive richard: web/print design, logos, branding and stationary</title>
     <style>
     html,body {
     	margin: 0;
     	padding: 0;
     	text-align: left;
     	color: #444444;
     }
     body {
     	background: url(images/bg.jpg) no-repeat top right;
     	font: 62.5% Geneva, Arial, Helvetica, sans-serif;
     }
     img { border: none; }
     h1 {
     	font-weight: normal;
     	text-align: left;
     }
     h2 {
     	margin-bottom: -10px;
     	font-size: 1em;
     }
     #header {
     	background: url(images/logo.gif) no-repeat top left;
     	height: 96px;
     	width: 450px;
     	margin: 40px auto 0;
     }
     #header h1 { display: none; }
     #content {
     	float: right;
     	width: 450px;
     	margin-right: 15px;
     }
     #main { text-align: justify; }
     #sidebar { 
     	text-align: left;
     	margin-right: 490px;
     	color: #666666;
     }
     .colours {
     	background: url(images/colours.gif);
     	height: 5px;
     }
     </style>
     </head>
     <body>
     	<div id="header"><h1>interactive richard</h1></div>
     	
     	<div id="content">
     		<div class="colours"><!-- Displays the colour strip at the top --></div>
     		<h1 class="banner">web/print design, logos, branding and stationary</h1>
     	
     		<h2>About Richard Henry</h2>
     		<p>I'm a UK-based designer, living in Huddersfield near Leeds.</p>
     		
     		<h2>What I can do for you</h2>
     		
     		<p>If you're looking for someone to design and print anything from your business cards, stationary and window stickers, to launching a full online marketing campaign and web store with credit card processing, I'll be able to help you out.</p>
     		
     		<h2>How much does it cost?</h2>
     		<p>If you tell me your budget, I'll tell you how much I can produce for what you're willing to spend. Projects are scalable to fit your needs and wallet, so just let me know the ground rules, and I'll work with them.</p>
     		
     		<h2>Print your own media with Interactive Richard</h2>
     		<p>If you've had your business cards, letterheads, or other media designed somewhere else, consider using me to print it. My rates are very competitive - contact me using the form at the bottom of the page to learn more.</p>
     	</div>
     	<div id="sidebar">
     		<h2>Sidebar!</h2>
     		<p>Welcome to the sidebar of love. I'll put things like links to conferences, cool information, my media order pack, and loads of **** in this section. Awesome.</p>
     	</div>
     </body>
     </html>
    You could do with making your text size bigger too cos at the moment it's tiny.

  4. #4
    SitePoint Zealot
    Join Date
    Sep 2006
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers mate, I'm sorting it all out now. And a valid point about the text size - I'm going to increase it to something more readable, or at least add an option to increase it depending on the user's preference.

    Thanks for all the help :-D

  5. #5
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i've had similar problems

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Your layout looks the same for me on a variaty of browers. But one thing that doesn't work on internet explorer is the :hover on objects other then links. There is a way to make it work for IE. Go to this page: http://www.xs4all.nl/~peterned/csshover.html and read about it there. And then aply it to your site.
    Last edited by Robinvd; Oct 18, 2006 at 10:56. Reason: typo


Bookmarks

Posting Permissions

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