SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    really akward CSS outcome

    I really am clueless upon this here.

    http://warnicro.awardspace.com/portofolio/index.php
    The brown thing is supposed to be in the middle and not on the right and have a width of 800px, then there is supposed to be a lite brown background that reaches from top to bottom also in the middle, and that brown header which is now really small is supposed to cover the top of the lite background.
    I made all classes for it, but this is not supposed to be the outcome I expected.

    really puzzled here, so suggestions are really really welcome.

  2. #2
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, first off you didn't specify a METRIC for your widths... Like in menulayer - width:600; Six hundred WHAT? EM, PT, PC, PX, Apples, crates of motor oil?

    Second, you are expliciting a lot of parameters that aren't necessary...
    margin: 0px 0px 0px 0px;

    and

    margin:0px;

    do the same thing.

    I'm not actually seeing anything in the code that would center elements, except a couple of text-aligns, and that only does inline elements, not your blocks.

    Frankly, looking at it, I'm not 100% sure what look you are trying to accomplish... I do have the feeling though whatever you are trying to accomplish you are overthinking the solution.

    -- edit -- and you forgot to close one of your DIV, which is where PROPER formatting would probably have pointed out the problem... and where validation comes in handy.

  3. #3
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow
    margin: 0px 0px 0px 0px;

    and

    margin:0px;
    True. As does the even simpler:

    margin: 0;
    Ed Seedhouse

  4. #4
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ed Seedhouse
    True. As does the even simpler:

    margin: 0;
    While I agree with that on the simplification grounds, I disagree with it on the grounds of Zero what?

    But the reason for that is I learned programming two decades ago, when we still had to worry about number systems where zero wasn't always zero... 0 in fortran entery =one for example... could also mean false... or true on some TI calculator functions.

    Even though CSS has no metrics where zero doesn't equal zero, out of habit I just can't bring myself to leave it out... Again, those nasty ingrained programming habits.

  5. #5
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow
    While I agree with that on the simplification grounds, I disagree with it on the grounds of Zero what?

    But the reason for that is I learned programming two decades ago, when we still had to worry about number systems where zero wasn't always zero... 0 in fortran entery =one for example... could also mean false... or true on some TI calculator functions.

    Even though CSS has no metrics where zero doesn't equal zero, out of habit I just can't bring myself to leave it out... Again, those nasty ingrained programming habits.
    Ed and deathshadow, you guys both make some great points...and crack me up in the process .

    With this one, zero is zero. Nothing is nothing - of what is no matter as it is nothing. I have zero ounces of butter. I have zero ounces of feathers. I have nothing either way.

    I does make me wonder if there is any value in knowing what unit would be used but that seems a bit of a stretch.

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well I fixed a couple of things and it does look a bit better, still it doesn't quite fufill all expectations I had here are the things that trouble me.

    The backgroundlayer is not shown, its supposed to cover the whole middle of the screen from top to toe with a light brown color.

    I tried adding the function "Float" but that doesn't seem to work, but the odd thing is when I remove "text-align: center;" the whole thing that went back to the left.

    I thought that text-align will grab the text within the div and put that to the align, and the float function grabs other divs within and put them to that align, don't really know what to do now.

  7. #7
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I think the thing you are missing from the equation is that floats cannot CENTER something... there is NO SUCH THING as float:center. Floats can ONLY go left and right.

    ... and you seem to be throwing vertical-align around on elements that don't even support it properly/predictably... and use valign once which doesn't even EXIST in CSS.

    You should probably refer to http://www.w3schools.com/css/css_classification.asp

    To 'center' something within it's parent container, you need to set it's left and right margins to 'auto' - note that vertically in CSS unless you declare a fixed height, there is no predictable way to center or align bottom an element within another container.

    so basically, replace all your float:center with margin:0px auto; and rip out all those valign/vertical-align since those don't work how you are trying to use them... oh, and your 'fullscreenlayer' thing - that's all stuff that could just be applied to 'body'

    Oh, and height:100% never works. Percentile heights on the whole tend to return zero unless inside an element with a heigh specified in an actual 'metric'.

    Hang on, I'll take a stab at a quick workalike recode for you.

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, thanks alot, I had already visited that page, and well the vertical thing, some other CSS-er told me that its useable so that why I ussed, but ill wait for the recode you are going to do then.

    thnx in advance

  9. #9
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ... on the other hand, maybe not. I'm still not 100% sure what layout you are even trying for, but there are a whole bunch of what appear to be 'made up' CSS properties in there like 'block-float' and multiple style declarations that override each-other that I'm not even sure which ones you want used... This could take a while as I 'guess' my way though it.

  10. #10
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I think this:
    http://battletech.hopto.org/for_others/hellusius

    does what you were trying to do - I left out the 'segment' stuff since I wasn't sure what you were trying to do with that (especially since the DIV was empty and assigned a class that didn't exist).

    I had to resort to an image to make that background stretch to window height - the only way to make a colored background stretch 100% screen-height without resorting to javascript is with a tiled image - unless you want the entire screen that color.

  11. #11
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In light of deathshadow's last point, why don't you just tell us what type of layout you want - perhaps show a mockup and we can give you some solid code to work with rather than trying to "shove a square peg in a round hole".

    In the meantime it appears as though you should brush up on CSS layout fundamentals. Here is a great place to start:
    http://www.cookwood.com/html6ed/examples/#c11

    And for general purpose CSS, covering all sorts of issues including layout, SitePoint's CSS Guru's FAQ:
    http://www.sitepoint.com/forums/showthread.php?t=171943

    Paul also has a good number of layouts and tricks here:
    http://pmob.co.uk/

    It doesn't look like the layout you are after is that complex so that is a good thing.

  12. #12
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will all read the links later today John Wozniak, thanks allot for those in advance, and Deathshadows thanks allot, thats almost perfect =D, I will have a look at the code later today cause I gotta hop off for work now

  13. #13
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow
    While I agree with that on the simplification grounds, I disagree with it on the grounds of Zero what?
    I used to agree with that, but then it occurred to me (well OK, someone pointed out) that in the context of positions and widths, zero is just zero.

    Now if we were doing temperature I'd agree we have to say "zero degrees Celsius", but a zero length is always the same length whatever units are used.

    I think.
    Ed Seedhouse


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
  •