SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Little CSS problem (a big one actually)

    Hello folks

    Since I'm new in here, I thought I'd give you a nice problem I can't seem
    to figure out myself.

    But first:
    Here is a screenshot of what I made: CLICK
    And here's my testsite: http://www.motustudio.org/testsite/index.html

    Here's the problem:
    I want a website with a fixed width, which is centered in the browser.
    I usually have no problem with making a site like that, howéver...
    the grey bar that you can see in the header has to stick to the right side
    of the browserwindows, wile not "striking through" the logo and against
    the leftside. The grey bar has to stop where the logo begins.

    I've tried floats, width's with percentages and a few other things, but for
    some reason I can't get it to do what I want. Could anyone please take a
    look at my code and tell me what's wrong with it and what I can do to get it
    the way I want?

    Thanks a lot in advance!

    - Flabber

  2. #2
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thanks for the quick reply... but could you explain what you just did?
    I haven't tried it yet, but what are all the hacks you used for one little
    problem with the "greybar" div?

  3. #3
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I changed my layout on the testsite a bit to show what I hope to get
    It's a normal fixed width/centered layout now. But the grey bar has to
    stick to the right side, hehe.

    http://www.motustudio.org/testsite/index.html

    @All4nerds;
    Why did you use so many hacks (and only for IE as far as I can tell)?
    I always believed it was possible to achieve what I want to see by using
    floats, margins and %'s... although I couldn't get it to work myself

    Could you explain what you did by any chance?

  4. #4
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a million! That was exactly what I need
    I don't know how you did it (yet), but I'm gonna see if I can figure that out, hehe.

    Just for my own satisfaction;
    Did you make those hacks/filters because IE wouldn't be able to render it properly otherwise? Because besides the normal CSS, the IE-hack that you used at the end of the CSS is Chinese to me

  5. #5
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh i see... i don't quite understand all the code you used for it,
    but I do understand the way you did it. Thanks a lot for your help

    I see you added a little piece in your previous post called "your code".
    I can't see the IE-hacks in it... is this code a cleaned-up version?

  6. #6
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh darn, good point
    I thought that I could use hacks in the same stylesheet, hehe.

    I'll get to work on that tomorrow... I also found another possible solution,
    without any hack/filter by the way. Ill post that here for everyone, since it's
    actually a measily amount of code, with the same results (so far).

    Thanks for the help fellow dutchman!

  7. #7
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the code without hacks:
    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	text-align: center;
    	font-family: "lucida grande", verdana, sans-serif;
    	color: white;
    	background: #32290B;
    }
    
    #header {
    	width: 100%;
    	height: 146px;
    	background-color: #adc677;
    	left: 0px;
    }
    
    #logo {
    	float: left; 
    	width: 40%; 
    	height: 146px; 
    	background: url(img/motustudio.jpg) no-repeat right top;
    }
    
    #titlebar {
    	position: relative; 
    	float: right; 
    	width: 59.9%; 
    	height: 50px; 
    	top: 32px; 
    	background-color: #a4b179;
    }
    
    #titletxt {
    	padding-left: 15px;
    	text-align: left;
    	line-height: 20px;
    	font-size: 12px;
    }
    
    #menu {
    	background: url(img/menu.gif) repeat-x left top;
    	height: 45px;
    	width: 100%;
    }
    
    #content {
    	margin: 20px auto 0;
    	width: 800px;
    	min-height: 400px;
    	background-color: grey;
    }
    Here's the website: http://www.motustudio.org/testsite/index.html

    The only problem now is that the content-block isn't always aligned with the
    logo. I can only think of the aligning with percentages and negative margins
    as the cause of this. Does anyone have a possible solution for this perhaps?
    I've been trying to solve it by using floats, but that doesn't seem to do the trick


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
  •