2 replies [Last post]
millers
millers's picture
Offline
Enthusiast
Last seen: 2 years 11 weeks ago
Timezone: GMT+1
Joined: 2004-11-22
Posts: 70
Points: 41

Hi

I thought it would be good to break up the uniform straight lines on a web design, take a look at the attached. Obviously I didn't consider coding it up when I designed it.

Is it possible to create the attached (there will be a strapline in the centre) using just css, I was thinking maybe with borders but am struggling.

Thanks

AttachmentSize
Untitled-1.png3.3 KB
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 5 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Border will work

Does this do what you want?

<!DOCTYPE HTML>
 
<html>
<head>
  <meta content="text/html; charset=utf-8"
        http-equiv="Content-Type">
 
  <title>Test page</title>
  <style type="text/css">
/*<![CDATA[*/
 
  body {
    background-color: #003642;
    font: normal 100%/125% sans-serif;
    }
 
p {
    font-size: 1em;
    margin: 1.25em 0;
    padding: 1px;
    }
 
  .container {
    background-color: #919FA3;
    margin: 20px 0;
    }
 
  .buffer {
    border: white solid;
    border-width: 3px 0;
    margin: 0 auto;
    width: 95%;
    }
 
  .content {
    background-color: #005063;
    border-style: solid;
    border-color: #003642 #919FA3  #2D6F7F;
    border-width: 20px 10px;
    color: white;
    text-align: center;
    }
 
  /*]]>*/
  </style>
</head>
 
<body>
  <div class="container">
    <div class="buffer">
      <div class="content">
      </div><!-- content -->
    </div><!-- buffer -->
  </div><!-- container -->
 
  <div class="container">
    <div class="buffer">
      <div class="content">
        <p>Here is a line of text. You could put an image here.</p>
      </div><!-- content -->
    </div><!-- buffer -->
  </div><!-- container -->
 
  <div class="container">
    <div class="buffer">
      <div class="content">
        <p>Here are multiple lines of text. You could put an image here.</p>
 
        <p>See?</p>
 
        <p>The box grows with content.</p>
      </div><!-- content -->
    </div><!-- buffer -->
  </div><!-- container -->
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

millers
millers's picture
Offline
Enthusiast
Last seen: 2 years 11 weeks ago
Timezone: GMT+1
Joined: 2004-11-22
Posts: 70
Points: 41

Aha yes that's brilliant

Aha yes that's brilliant thanks Gary.