SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)

    Presentational Element Problem

    Ok, so I have a little bit of a HTML / CSS problem. Have a look at the screenshot of the Web page below and see the sections highlighted within the green bars.

    2011-02-18_0748.png
    2011-02-18_0752.png

    How would I go about creating that effect through the use of HTML and CSS alone? I'm sure it can be done, but I just can't do it!

    The screenshot I've used above is using tables for the whole of the layout. What I'm doing is converting that from a table-based site to a semantic and division based Website. I've got everything else covered in the layout except for that which I've mentioned.

    Any and all help will be greatly appreciated! Thanks!

    Andrew Cooper

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    TBH, I can't really understand what effect you are talking about. What are the arrows indicating? I assume widening and closing the browser window, but I still don't get what's happening on the sides.

  3. #3
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I think the arrows are covering the site name and client details Ralph.
    If you mean the double bars either side Andrew, I would do them as an image and add them in as backgrounds to the body and wrapper if you have one
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    q: what do the bottoms of those bars look like, do they reach the bottom of the page?

    I think with some wrapers, margins, padding and negative margins you could do that effect with just HTML/CSS, but I'm not sure I'd want to pollute the markup that much. Images would be the simpler/faster/best solution IMHO.

    -- edit -- oops, didn't notice that was two separate screenshots. Yeah, I think it can be done, I'm just not sure it's worth the headache. Outer wrapper applies total width, next wrapper in applies the purple bar and pads the top and bottom, next wrapper uses negative margin to get the sides pushed out, possibly using border for the black so it doesn't erase the purple, then innermost wrapper uses negative top and bottom margins to ride over the padding on the purple area and side padding to push it in.

    Though you'd be unable to min-height that many wrappers, so your content would always need to be taller than the target display -- which is why I consider that a non-viable layout element -- typical of the "draw a pretty picture" first nonsense.

  5. #5
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    TBH, I can't really understand what effect you are talking about. What are the arrows indicating? I assume widening and closing the browser window, but I still don't get what's happening on the sides.
    Arrows are to hide the site name and client details, as spikeZ mentioned. There wasn't any other tool in Techsmith's Jing Pro to cover them up so I had to use arrows instead of filling them up.

    Quote Originally Posted by spikeZ View Post
    I think the arrows are covering the site name and client details Ralph.
    If you mean the double bars either side Andrew, I would do them as an image and add them in as backgrounds to the body and wrapper if you have one
    I do mean the double bars on both sides of the main centered container. I have a wrapper / container. Which one colour would you say for the container / wrapper and the one for the background? I've tried a few techniques myself but maybe I'm not being creative enough...

    Quote Originally Posted by deathshadow60 View Post
    q: what do the bottoms of those bars look like, do they reach the bottom of the page?

    I think with some wrapers, margins, padding and negative margins you could do that effect with just HTML/CSS, but I'm not sure I'd want to pollute the markup that much. Images would be the simpler/faster/best solution IMHO.

    -- edit -- oops, didn't notice that was two separate screenshots. Yeah, I think it can be done, I'm just not sure it's worth the headache. Outer wrapper applies total width, next wrapper in applies the purple bar and pads the top and bottom, next wrapper uses negative margin to get the sides pushed out, possibly using border for the black so it doesn't erase the purple, then innermost wrapper uses negative top and bottom margins to ride over the padding on the purple area and side padding to push it in.

    Though you'd be unable to min-height that many wrappers, so your content would always need to be taller than the target display -- which is why I consider that a non-viable layout element -- typical of the "draw a pretty picture" first nonsense.
    Could you translate that to HTML and CSS code pretty please ? I just lost you after "Outer wrapper applies total width..."

    Thanks for the replies guys! Was sat here waiting and waiting seeing the view count go up and the reply count stay the same!

    Andrew Cooper

    Side Note: Regarding your comment about it being a non-viable layout element. I think it looks better without the purple / black borders but the client is paying me money to keep it exactly the same but update the code, which I think is a rare but nice thing, so I can't do much about the design side of it.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If they are just solid colours then you can do it easily like this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #outer {
        position:relative;
        width:70%;
        border-left:41px solid #db4599;
        border-right:41px solid #db4599;
        padding:30px 0;
        margin:auto;
    }
    #inner {
        border-left:18px solid #000;
        border-right:18px solid #000;
        margin:0 -47px;
        padding:0 65px;
        zoom:1.0;
        position:relative;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="inner">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
        </div>
    </div>
    </body>
    </html>

    Or if you need content full height then add another inner.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #outer {
        position:relative;
        width:70%;
        border-left:41px solid #db4599;
        border-right:41px solid #db4599;
        padding:40px 0;
        margin:auto;
    }
    #inner {
        border-left:18px solid #000;
        border-right:18px solid #000;
        margin:0 -47px;
        padding:1px 65px;
        zoom:1.0;
        position:relative;
    }
    #content {
        position:relative;
        z-index:2;
        width:100%;
        margin:-50px 0;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="inner">
            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
            </div>
        </div>
    </div>
    </body>
    </html>

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Here's a live example of the last method if it helps.

  8. #8
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Paul, I don't know what this forum would do without you here to set us on the straight and narrow!

    I understand your solution, and it's almost perfect, it probably is perfect, but I can't seem to get it to work the way I want it to, my brain has turned to mush =/ So I've uploaded the the page that I have so far along with the CSS and images, etc.

    Can you see if you can give me some more guidance or adapt your CSS solution to fit that page structure, please? I've tried editing both solutions and neither of them work for me, but I've saved both of the solutions in their own .html file and I know they will work, providing that they've been used in the correct way, and I'm definitely not using them in the correct way!

    HTML Page and CSS File. This is the original Website which I'm converting from a table-based structure to a purely HTML and CSS structure .

    Thanks,

    Andrew Cooper

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Assuming you want to use nice clean borders rather than those mismatched images from the other site you can do it more or less the same as my demo.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title></title>
    <!-- <base href="http://www.guest-invitations.co.uk"> -->
    <link rel="stylesheet" type="text/css" media="screen" href="css/stylesheet.css">
    <style type="text/css">
    @charset "utf-8";
    /* CSS Document For - http://www.guest-invitations.co.uk - By Kaboom Studios - http://www.kaboomstudios.co.uk */
    
    body {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: x-small;
        color: #919295;
    }
    #container {
        position: relative;
        width: 923px;
        margin-left: auto;
        margin-right: auto;
        border-left:41px solid #db4599;
        border-right:41px solid #db4599;
        padding:40px 0;
    }
    #inner {
        border-left:18px solid #000;
        border-right:18px solid #000;
        margin:0 -47px;
        padding:1px 65px;
        zoom:1.0;
        position:relative;
    }
    #inner2 {
        position:relative;
        z-index:2;
        width:100%;
        margin:-50px 0;
    }
    #inner2:after{
        content:" ";
        clear:both;
        display:block;
        height:0;
    }
    #header {
        background-image: url("http://www.huffier.co.uk/sites/guest/images/border-right.gif");
        background-repeat: repeat-x;
    }
    #header h1 img {
        width: 240px;
        height: 189px;
        float: left;
        padding-left: 30px;
    }
    #header img {
        width: 514px;
        height: 131px;
        float: right;
    }
    ul#nav {
        list-style-type: none;
        float: right;
        font-size: small;
        margin-bottom: 30px;
    }
    ul#nav li {
        display: inline;
    }
    ul#nav li#current {
        font-weight: bold;
    }
    ul#nav li:after {
        margin-right: 10px;
        margin-left: 10px;
        content: " | ";
    }
    ul#nav li#end:after {
        content: "";
    }
    #sidebar {
        float: left;
        width: 312px;
    }
    #sidebar ul#side-nav {
        list-style-type: none;
        text-align: center;
        padding-left: 0;
        padding-bottom: 20px;
    }
    #sidebar ul#side-nav li {
        margin-bottom: 12px;
    }
    #sidebar ul#side-nav li a:link, #sidebar ul#side-nav li a:visited {
        color: #919295;
        font-size: 2.5em;
        padding-bottom: 2px;
        border-bottom: 2px solid #919295;
    }
    #sidebar p {
        text-align: center;
        font-size: 1.3em;
    }
    img#design-selection {
        margin-top: 40px;
    }
    b {
        color: #CC3399;
    }
    #content {
        float: right;
        width: 514px;
     font-size: 10px text-align: justify;
        font-weight: bold;
    }
    h2 {
        font-size: 11px;
        font-weight: bold;
    }
    #column-1 {
        float: left;
        width: 184px;
        font-weight: normal;
    }
    #column-2 {
        float: right;
        width: 257px;
        font-weight: normal;
    }
    img#look {
        margin-top: 20px;
        margin-left: 175px;
    }
    img#look-2 {
        margin-left: 40px;
    }
    #footer {
        clear: both;
        float: right;
    }
    a:link, a:visited {
        color: #CC3399;
        text-decoration: none;
    }
    a:hover {
    }
    a:focus {
    }
    a.skipto {
        display: none;
    }
    </style>
    <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7-stylesheet.css"><![endif]-->
    <!-- <link rel="stylesheet" type="text/css" media="print" href="css/print.css"> -->
    <!-- <link rel="alternative stylesheet" type="text/css" media="screen" href="css/accessibility.css"> -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
    <div id="container">
        <div id="inner">
            <div id="inner2">
                <div id="header">
                    <h1><img src="http://www.huffier.co.uk/sites/guest/images/logo.jpg" alt="Guest Invitations Logo" title="Guest Invitations Logo"></h1>
                    <img src="http://www.huffier.co.uk/sites/guest/images/header-banner.gif" alt="Header Banner" title="Header Banner">
                    <ul id="nav">
                        <li id="current"><a href="/" title="">Home</a></li>
                        <li><a href="/about-us/" title="">About us</a></li>
                        <li><a href="/delivery/" title="">Delivery</a></li>
                        <li><a href="/samples/" title="">Samples</a></li>
                        <li><a href="/info/" title="">Info</a></li>
                        <li id="end"><a href="/contact-us/" title="">Contact us</a></li>
                    </ul>
                    <a href="#content" title="Send yourself straight to the content." class="skipto">Skip to content</a> </div>
                <div id="sidebar">
                    <ul id="side-nav">
                        <li><a href="/invitations/">Invitations</a></li>
                        <li><a href="/pocket-invites/">Pocket Invites</a></li>
                        <li><a href="/table-plans/">Table Plans</a></li>
                        <li><a href="/design-service/">Design Service</a></li>
                        <li><a href="/accessories/">Accessories</a></li>
                        <li><a href="/ordering-and-prices/">Ordering &amp; Prices</a></li>
                    </ul>
                    <img src="http://www.huffier.co.uk/sites/guest/images/sidebar-1.png" alt="" title=""> <a href="mailto:guest-invitations@hotmail.co.uk"><img src="http://www.huffier.co.uk/sites/guest/images/sidebar-contact.png" alt="" title=""></a> <a href="/design/"><img src="http://www.huffier.co.uk/sites/guest/images/sidebar-design.png" alt="Design Selection" title="Design Selection" id="design-selection"></a> </div>
                <div id="content">
                    <p>Our hand made products are specially designed and produced with great care whilst paying particular attention to detail.
                        From initial contact and throughout the design and production process we hope to provide a personal service to our customers
                        ensuring help and support from beginning to end. Your wedding or event is very important to you and therefore it is very
                        important to us too.</p>
                    <p>Guest Invitations are able to create a unique and memorable range of stationery and associated items for your big day,
                        your theme can be carried through to all aspects of your occasion or event.</p>
                    <img src="http://www.huffier.co.uk/sites/guest/images/wedding.gif" alt="Wedding" title="Wedding"> <a href="/design/"><img src="http://www.huffier.co.uk/sites/guest/images/look.gif" alt="Take a look at our Design collection"
                     title="Take a look at our Design collection" id="look"></a>
                    <p>Guest Invitations specialises in offering an individual service to both traditional and more contemporary requirements.
                        Clients are invited to commission Rachael to interpret and develop their own ideas thereby creating a very personal and very
                        impressive range of stationery.</p>
                    <a href="/accessories/"><img src="http://www.huffier.co.uk/sites/guest/images/accessories-page.gif" alt="Accessories Page" title="Accessories Page"></a> </div>
                <div id="footer">
                    <p>Copyright &copy; <a href="http://www.guest-invitations.co.uk">Guest Invitations</a> 2008 - 2011. All rights reserved.</p>
                    <a href="#" title="Send yourself back to the top of the Web page." class="skipto">Back to top</a> </div>
            </div>
        </div>
    </div>
    </body>
    </html>
    You probably forgot to clear the floats or change the conflicting id names

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Your page is broken in iE7 you need to clear the sidebar.
    Code:
    #sidebar {
        float: left;
        width: 312px;
        clear:left
    }

  11. #11
    SitePoint Guru bronze trophy AndrewCooper's Avatar
    Join Date
    Sep 2008
    Location
    Manchester, UK
    Posts
    631
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Just wanted to say thanks a lot for the help with this problem and also for giving me the heads up about needing to clear the sidebar for it to work in IE7, everything is working perfectly now. I hadn't forgotten about your help! Seriously very much appreciated, as I needed the help and I couldn't figure it out for the life of me!

    Thanks again!

    Andrew Cooper

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    You're welcome Andrew . Glad that it worked out in the end.


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
  •