SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with CSS design (notebook like layout)

    Hello, I am trying to make a notebook like design using CSS. The attached image shows a basic sketch of what I am trying to achieve.

    Here are the key points:
    1) gradient page background
    2) the notebook has rounded corners
    3) menu in the left part of the notebook, and the current selected menu item is shown on a "sticky" on the top left corner.
    4) notebook must adjust in size depending on the menu length or content length.

    what would be the best approach for making this design?

    Thank you in advance
    Attached Images Attached Images

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    You can post images to image hosting sites like imageshack which is faster.

    1) gradient page background
    - repeat a background on the body.
    2) the notebook has rounded corners
    - I would use css3 border-radius for that
    3) menu in the left part of the notebook, and the current selected menu item is shown on a "sticky" on the top left corner.
    I'd just update the content on each page so the sticky has the content you want.
    4) notebook must adjust in size depending on the menu length or content length.
    This will happen automatically if you don't set heights on elements.

    Have you had a shot at writing the HTML / CSS or are you stuck where to begin?

    All the best,

  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, I did not know the border-radius existed, I'll definitely try that. I have VERY BASIC CSS knowledge and I use if for modifying basic elements of a page, but when it comes to the whole page layout I am not so sure how to place elements. I was a big fan of designing using tables but I have not grasped doing it with CSS. so if you can provide me some basic where to start elements I would really appreciate it.

    One additional question is regarding the notebook bind. I was thinking in using an image repeating in the y axis that includes the paper and the bind (in the left part), then on the right part repeating an image in x and y axis for the rest of the paper. the other possibility is having an image repeating for the paper and then just use an image with the bind and with transparency. how would you do it?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Given your screen shot, I'd say you are better off using a single, repeating background image. Generally with CSS you never have to slice up images, which is a big advantage over tables.

    You just need to isolate a section of the background that is repeatable. Make it the full width of the notepaper area and let it repeat vertically (y-axis).

    Set up a div for the notebook, say 800px wide:

    Code:
    <div class="notebook">
    
    </div>

    Basic CSS
    Code:
    .notebook {
    width: 800px; 
    background: white url(/images/note-bg.png) repeat-y;
    }
    You could center that div with

    Code:
    .notebook {
    width: 800px; 
    background: white url(/images/note-bg.png) repeat-y;
    margin: 0 auto;
    }
    However, it's more likely that this div will sit within a wrapping div that contains other elements like the header and footer, so it might be best to let that div do the centering (with the same margin: 0 auto; method).
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I am making good progress but now I have these problems:

    1) css3 border-radius does not work on IE. I tried a .js file called 'DD_roundies' but the background image is not displayed on IE8

    2) In the sticky note I am rotating the text so it matches the sticky rotation (just like 7 degrees) but I cant make it work on IE even though the code Im using it is supposed to work on IE:
    Code:
    -moz-transform: rotate(-7deg);  /* FF3.5+ */
    -o-transform: rotate(-7deg);  /* Opera 10.5 */
     -webkit-transform: rotate(-7deg);  /* Saf3.1+, Chrome */
     -ms-transform: rotate(-7deg);  /* IE9 */
    transform: rotate(-7deg);  
    filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
    M11=0.992546151641322, M12=0.12186934340514748, M21=-0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
    any clues?

  6. #6
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    UPDATE: I solved BOTH problems. The rotation DOES work when I change display to block.
    For the curved corners I found an awesome script called curvyCorners 2.0 !


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
  •