Presentational Element Problem

HTML & CSS
1

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.

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! :frowning:

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! :slight_smile: Thanks!

Andrew Cooper

2

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

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

4

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

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.

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…

Could you translate that to HTML and CSS code pretty please :D? I just lost you after “Outer wrapper applies total width…” :frowning: :blush:

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

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

Hi,

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


<!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.


<!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

Here’s a live example of the last method if it helps.

8

Paul, I don’t know what this forum would do without you here to set us on the straight and narrow! :slight_smile:

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 [URL=“http://www.huffier.co.uk/sites/guest/css/stylesheet.css”]CSS File. [URL=“http://www.guest-invitations.co.uk”]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

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.


<!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 :slight_smile:

10

Your page is broken in iE7 you need to clear the sidebar.


#sidebar {
    float: left;
    width: 312px;
[B]    clear:left[/B]
}
11

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! :nono:

Thanks again!

Andrew Cooper

12

You’re welcome Andrew :). Glad that it worked out in the end.