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.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Nov 2005
    Location
    Eurpoe/Slovenia
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with css design - 100% column height?

    Hi!

    I recenlty decided (was taking this decision now for too long i guess) to start designing pages strictly with css.. I finnaly started, but have allready come to some problems.

    Can anyone please check the http://212.18.63.77/strick/ and tell me if i started it ok?

    My first problem is i can't stretch the left RED-BLACK gradient "column" to be stretch down so it actually connect with red footer.. What is my mistake there..
    Did i start with right sheme in my mind? Did i make allready some big mistakes in css design ?

    please help.. i don't wan't to be forced to go back to tables. i hate them allready and im a newbie with css designing..


    THANKS!!
    Last edited by quepao; 11-27-2005 at 12:38 PM.

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Looks to be a good start.

    You need to use a technique called Faux Columns to make the black section on the left stretch down.

  • #3
    New to the CF scene
    Join Date
    Nov 2005
    Location
    Eurpoe/Slovenia
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    tnx ! this was also my "last" chance to fix this issue.. but i wanted to know if there is another way of fixing this.. so i will simply implement this black part in my main background (which now creates those shadows).. Are my other css elements floated and positioned rightor did u see any mistakes?

    tnx for answering!


    ps.: im starting to love this css.. creating pages was getting borring to me, im so happy i finally started with css only. gives the designing a bit of thinking! ;-)

    qp

  • #4
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nope everything looks ok to me.

    You might want to neaten up the HTML slightly though so it's easier to read through? eg. Instead of this -

    Code:
        <li>
          <p>Ločljivost senzorja : 4.1 mio točk</p>
        </li>
        <li>
          <p>Optični zoom objektiv : 3x optični zoom</p>
        </li>
    Have this?

    Code:
    <li>Ločljivost senzorja : 4.1 mio točk</li>
    <li>Optični zoom objektiv : 3x optični zoom</li>
    You shouldn't really have <p> tag in <li>'s anyway... and this shouldn't really be in there -

    Code:
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    If you want to create spaces use margins in CSS.

    CSS looks ok as well though mostly - I prefer to set mine out like -

    Code:
    #head {
    width: 780px;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    }
    Instead of -

    Code:
    #head {width:780px;margin:0 auto;padding:0;text-align:left;}
    But that's a personal preference really.

    You could shorten the #FFFFFF values to #FFF and #000000 to #000.

    That's all really! Keep going, I'm sure the end result will be great.

  • #5
    New to the CF scene
    Join Date
    Nov 2005
    Location
    Eurpoe/Slovenia
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    man tnx a lot! u cant imagine how happy i am that someone even take this time nowadays to keep helping others! i really appriciate it, thank you! about html tags's.. i just c/p some text, didnt yet clean out the code.. since i was testing my css design layout. will take your notes in mind when i get back to adding page content.

    I have another question ready ;-)

    My footer.. i managed to position it at the bottom of page, no matter on height of #content div.. but, there is ALLWAYS scroller.. it scrolls as much as footer is big? Do you see any mistakes, or do you have any other footer ideas how to dont have this scroller? I have checked the footer section on ALA but didnt find any better solution thought. I have tryed with css+js, but i dont like to handle with js anymore!

    tnx again!

  • #6
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I kind of see your problem, you want the footer to appear at the bottom of the page? Not half way down so to speak?

    Your menu has gone funny now also - is coming out of the container.

  • #7
    New to the CF scene
    Join Date
    Nov 2005
    Location
    Eurpoe/Slovenia
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    uf, i see it. i forgot to check in IE.. let me fix and i explain you my problem than. brb

  • #8
    New to the CF scene
    Join Date
    Nov 2005
    Location
    Eurpoe/Slovenia
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok.. i fixed the thing..

    on http://212.18.63.77/strick/ there should be now an ok version..

    now, the problem is, i cannot position the MENU ( <div id="head_menucontainer"> menu menu menu menu </div>) to be where i want.. let's say i want it to be on the RED tape.. .

    if i position it inside the <div id="headozadje"> (which holds the gfx for head) .. how can i tell him than that i want it to be let's say 50px from the TOP of the #headozadje ... i think absolute / relative position takes matter only if i have an absolute/relative positioned DIV anywhere.. but i dont.. so it would take browser window for positioning..?

    i tryed with

    position:relative;
    top:170px;
    left:50px;
    width:500px;

    which is all ok in mozzila/firefox.. but as soon i DO add position:relative; and try to publish the page in IE.. menue just dissapears..

    tnx for all help!


  •  

    Posting Permissions

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