Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS support with layout scripting…

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #39912
    Ani_
    Participant

    Hey everyo,

    im back and on my way to script my third site. Now i do have some problems with this one.

    http://lerend-doen.nl/v2 (tthis is what im working on)

    as you can see somewhere my css code got f*ckd up so my question is can someone give it a fast peek and tell me whats wrong? The little creature is ment just above the content area as is the nav. The two blocks on the right originally have to be underneath eacht other and in a nice row with the content table.

    @charset "utf-8";
    /* CSS Document */

    Geschreven door: Jens de Koning
    [email protected]
    http://www.lerend-doen.nl

    /* Hier staan de standaard settings van een CSS script */
    * { margin:0; padding: 0; }
    html { overflow-y: scroll; }
    body {
    font: 85.5% Helvetico, sans-serif;
    background-color: #232323;
    background-image: url(images/bg_lijnen.png);
    }

    ul { list-style: none inside; }
    p { font-size: 1.2em; line height: 1.2em; margin-bottom: 1.2 em; }
    a img {border: none; }

    /*DIT IS EEN TEST */
    scrollbar-arrow-color: #1d2e3c;
    scrollbar-face-color: #273f51;
    scrollbar-highlight-color: #1d2e3c;
    scrollbar-3dlight-color: #1d2e3c;
    scrollbar-shadow-color: #1d2e3c;
    scrollbar-darkshadow-color: #1d2e3c;
    scrollbar-track-color: #1d2e3c;
    }

    /* Einde van de standaard settings */

    /* Code van de div tags */
    #wrap {
    width: 1200px;
    height: 800px;
    margin: 0px 0px 0px 0px;
    }

    #header {
    background-image: url(images/logo_creature.png);
    width: 1150px;
    height: 230px;
    z-index: -1;
    background-repeat: no-repeat;
    margin: -10px 0px 0px 150px
    }
    #nav {
    width: 650px;
    height: 10px;
    margin: -85px 340px;
    }

    #content {
    width: 825px;
    height: 478px;
    background-image: url(images/content_bg.png);
    background-repeat: no-repeat;
    z-index: -1;
    position: absolute;
    left: 125px;
    top: 206px;
    }

    #tekst {
    font-size: 16px;
    font: "Verdana", Geneva, sans-serif;
    overflow-y: scroll;
    width: auto;
    height: 430px;
    z-index: -1;
    margin: 45px 5px 0px 10px;

    }


    #intres {
    background-image: url(images/body_bg_intres.png);
    width: 240px;
    height: 255px;
    float: right;
    margin: -20px 0px;
    }
    #extra {
    background-image: url(images/body_bg_intres.png);
    width: 240px;
    height: 255px;
    float: right;
    margin: 250px 0px 0px 0px;
    /* Hier staat alles van het dropdown menu */


    /* Einde van het dropdown menu code */

    thanks alot already for the support.

    #110329
    Ani_
    Participant

    hej!

    thanks indeed it improved some but as you can see now they still wont stand along the content area, is there some code couse im realy in a blank right now :P

    and also when i view it in chrome it comes out completely diffrent than in dreamweaver preview :O not cool! sorry for this (A)

    @charset "utf-8";
    /* CSS Document */

    Geschreven door: Jens de Koning
    [email protected]
    http://www.lerend-doen.nl

    /* Hier staan de standaard settings van een CSS script */
    * { margin:0; padding: 0; }
    html { overflow-y: scroll; }
    body {
    font: 85.5% Helvetico, sans-serif;
    background-color: #232323;
    background-image: url(images/bg_lijnen.png);
    }

    ul { list-style: none inside; }
    p { font-size: 1.2em; line height: 1.2em; margin-bottom: 1.2 em; }
    a img {border: none; }

    /*DIT IS EEN TEST */
    scrollbar-arrow-color: #1d2e3c;
    scrollbar-face-color: #273f51;
    scrollbar-highlight-color: #1d2e3c;
    scrollbar-3dlight-color: #1d2e3c;
    scrollbar-shadow-color: #1d2e3c;
    scrollbar-darkshadow-color: #1d2e3c;
    scrollbar-track-color: #1d2e3c;
    }

    /* Einde van de standaard settings */

    /* Code van de div tags */
    #wrap {
    width: 1200px;
    height: 800px;
    margin: 0px 0px 0px 0px;
    }

    #header {
    background-image: url(images/logo_creature.png);
    width: 1150px;
    height: 208px;
    z-index: -1;
    background-repeat: no-repeat;
    margin: -20px 0px 0px 150px
    }
    #nav {
    width: 650px;
    height: 10px;
    margin: -65px 340px;
    }

    #content {
    width: 825px;
    height: 510px;
    background-image: url(images/content_bg.png);
    background-repeat: no-repeat;
    z-index: -1;
    position: absolute;
    left: 125px;
    top: 206px;
    }

    #tekst {
    font-size: 16px;
    font: "Verdana", Geneva, sans-serif;
    overflow-y: scroll;
    width: auto;
    height: 459px;
    z-index: -1;
    margin: 45px 5px 0px 20px;
    padding-right: 30px;

    }


    #intres {
    background-image: url(images/body_bg_intres.png);
    width: 240px;
    height: 255px;
    float: right;
    }
    #extra {
    background-image: url(images/body_bg_intres.png);
    width: 240px;
    height: 255px;
    float: right;
    clear: both;
    }
    /* Hier staat alles van het dropdown menu */


    /* Einde van het dropdown menu code */

    Thanks alot in advance!

    #110333
    Paulie_D
    Member

    I can see that you are at a an early stage in learning about layout but you might need to think about re-organising your HTML to make it more logical.

    You should also try not to use absolute positioning to move elements. Try using floats,margins and padding instead.

    Here’s something I have played with that might help. It’s not a complete reproduction of your work so far but it might help you.

    http://codepen.io/Paulie-D/pen/wrocp

    #110340
    Ani_
    Participant

    @kgscott284: thanks i will look that up and post what will happen.


    @Paulie_D
    : in what way is the HTmL diffrent from what I did in my files?

    #110369
    Paulie_D
    Member

    I’ve added a proper page wrap, centred it. Positioned the elements using floats instead of absolute position.

    The navigation now sits above the content in the document order as well as on the screen.

    On looking through what you have, I have also tried to avoid the use of background images for the content and aside elements.

    The navigation background images are fine but I haven’t played with those.

    #110392
    Ani_
    Participant

    okay, well you did see it right that i was a beginner! haha so i want to now what it exactly is that you did, so i can learn from it;)

    what are these tags, and what do they do:

    aside

    and did you put the navigation within the header? why is that a better solution? and the

    tag is it like the same as a div?

    thanks man! this is what i need explanation :D

    #110394
    Paulie_D
    Member

    ‘header’, ‘aside’ and other items that you may not recognise are HTML5 elements. They replace, in many instance, divs. Before you have written :

    div id="header"

    you can know just write

    header

    much easier.

    I didn’t have to put the nav/menu inside the header but as it was on the screen as being there it made sense.

    Otherwise, it would have appeared below the header and I would have had to move it with margins or positioning.

    You might find these useful:
    http://net.tutsplus.com/sessions/html5-and-you/
    http://net.tutsplus.com/sessions/web-design-from-scratch/
    http://net.tutsplus.com/tutorials/site-builds/convert-a-warm-cheerful-web-design-to-html-and-css/

    #110409
    Ani_
    Participant

    Okay so i took over most of the things. And now i got everything on its place i starteded using another editor bu now im struggling with the tekst in the two side blocks extra and intressant. This is the code as of now:

    @charset "utf-8";
    /* CSS Document */

    Geschreven door: Jens de Koning
    [email protected]
    http://www.lerend-doen.nl

    /* Hier staan de standaard settings van een CSS script */
    * { margin:0; padding: 0; }
    html { overflow-y: scroll; }
    body {
    font: 85.5% Helvetico, sans-serif;
    background-color: #232323;
    background-image: url(images/bg_lijnen.png);
    }

    ul { list-style: none inside; }
    p { font-size: 1.2em; line height: 1.2em; margin-bottom: 1.2 em; }
    a img {border: none; }

    /*DIT IS EEN TEST */
    scrollbar-arrow-color: #1d2e3c;
    scrollbar-face-color: #273f51;
    scrollbar-highlight-color: #1d2e3c;
    scrollbar-3dlight-color: #1d2e3c;
    scrollbar-shadow-color: #1d2e3c;
    scrollbar-darkshadow-color: #1d2e3c;
    scrollbar-track-color: #1d2e3c;
    }

    /* Einde van de standaard settings */

    /* Code van de div tags */
    #page-wrap {
    width: 1200px;
    margin: 0 auto;
    }

    header {
    background: url(images/logo_creature.png) no-repeat 100px;
    height: 208px;
    }
    nav {
    padding-left: 300px;
    padding-top: 140px;
    }

    #content {
    width: 825px;
    height: 510px;
    background-image: url(images/content_bg.png);
    background-repeat: no-repeat;
    z-index: -1;
    position: absolute;
    left: 125px;
    top: 206px;
    }

    #tekst {
    font-size: 16px;
    font: "Verdana", Geneva, sans-serif;
    overflow-y: scroll;
    width: auto;
    height: 459px;
    z-index: -1;
    margin: 35px 5px 0px 20px;
    padding-right: 30px;

    }

    #blocks {
    float: right;
    height: 510px;
    margin-right: 200px;
    margin-top: -28px;

    }

    #intres {
    background-image: url(images/body_bg_intres.png);
    height: 248px;
    width: 250px;
    }

    #extra {
    background-image: url(images/body_bg_extra.png);
    height: 248px;

    }

    And the HTML:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pretium auctor faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae posuere est. Maecenas mattis egestas arcu a posuere. Aliquam erat volutpat. Maecenas condimentum ante sit amet nunc aliquet fermentum. Duis scelerisque augue eget metus fringilla dictum. Curabitur luctus convallis quam, eget venenatis dolor dignissim sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sem tellus, vehicula a molestie ut, vehicula sit amet nisl. Ut suscipit, dui eget euismod consequat, nisi odio congue turpis, vel semper mauris nisl sed purus. Pellentesque in nulla sapien. Etiam blandit gravida dolor et ultricies. Nulla id sapien dui, at interdum est. Aliquam erat volutpat. Aenean arcu purus, condimentum vitae elementum id, posuere non metus. Sed tristique facilisis scelerisque. Sed congue, arcu quis pellentesque rhoncus, mauris velit posuere dolor, ac dignissim risus sapien placerat orci. Etiam tempor dolor ut dolor facilisis accumsan. Maecenas tortor purus, hendrerit non facilisis pulvinar, tristique vel leo. Ut in sollicitudin tortor. Pellentesque augue diam, sodales sed malesuada eu, malesuada vel nisl. Quisque scelerisque neque ut sapien volutpat ac luctus dui vulputate. Etiam ac diam neque, non rutrum metus. Pellentesque vel diam tortor. Vivamus tincidunt semper sapien, a dignissim ligula condimentum quis. Suspendisse euismod, mauris non mollis condimentum, orci ligula semper orci, et varius mauris nisl a eros. Pellentesque turpis magna, varius eu ultrices id, venenatis vitae erat. Praesent suscipit rhoncus odio, sed feugiat nisl tempus eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur congue ipsum sed nulla hendrerit vulputate. Proin aliquet nunc non quam laoreet porttitor. Ut mattis risus eget lorem sagittis ullamcorper. Proin rhoncus ipsum vitae sem rhoncus malesuada. In vel lacus eu sapien condimentum cursus. Praesent at justo quis erat sagittis malesuada. Mauris tristique purus sed metus rutrum lacinia scelerisque nisl venenatis. Integer faucibus felis sed nisl aliquam lobortis. Quisque quis imperdiet mi. Donec vehicula gravida metus, eget cursus leo molestie at. Etiam vel mi felis. Phasellus dapibus scelerisque mauris, id vulputate mi scelerisque vel. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent scelerisque, felis eget faucibus luctus, est nibh consectetur augue, et consectetur felis nunc eget nunc. Quisque id odio porttitor nibh lobortis mattis. Vestibulum venenatis congue justo. Nunc mollis dui ut justo iaculis ultricies. Nam laoreet, purus non tincidunt mattis, felis felis tempor sem, a sodales eros massa et tellus. Fusce bibendum dolor sed est sagittis elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam eget metus diam. Curabitur quis arcu sed odio imperdiet imperdiet sed vel ipsum. Nullam dapibus interdum ipsum, id adipiscing erat congue vel. Nunc felis leo, dictum sed egestas sodales, vehicula ac metus. Praesent gravida venenatis tellus, feugiat gravida est pellentesque et. Nunc congue sapien in arcu lacinia porta.

    Hoi

    Hoi

    #110459
    Ani_
    Participant

    No one that can help me? :)

    #110463
    TheDoc
    Member

    What’s happening that shouldn’t happen? Do you have a link to the site?

    #110477
    Ani_
    Participant

    http://lerend-doen.nl/v2/

    the two side blokcs dont stay in their position and i cant seem to get no text inside them. in IE it looks like nothing. i dont know how to handle now! :P

    #110481
    Paulie_D
    Member

    You do have text inside the side blocks already. It says ‘Hoi’.

    It works OK in IE9 so which version of IE is it a problem?

    You really don’t need those background images on the content block or side blocks.

    You can get what you want with regular (and simple) HTML & CSS and it won’t matter how big they get.

    #110482
    Paulie_D
    Member

    The boxes move because you are using fixed widths with absolute positioning.

    To make the boxes adaptable, you need to use percentage widths and floats.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.