• 0

[Xhtml, Css, image] I can't achieve the following ;(


Question

Hello all,

I have 2 issues that I'd like to tackle. I've been trying to solve them but I couldn't and it's frustrating the **** out of me.

First issue:

I have the following image (which includes 2 problems):

rfift.jpg

The first problem is with the blur outside surrounding it. When I take a slice and put it as background image with image repeat, I'm loosing the blur effect. It's not that big of a deal, but I'd like to know why. This is going to be for navigation (OL with LI elements display: inline)

THE MOST IMPORTANT ISSUE: As you can see from the image, there are edges on the top left and bottom right. This is consistent throughout the design, and I have no idea how to implement it. I have boxes with the same design (different color of course). My question is: How do I make these edges? I did slice them but I have no idea how to put them ;(.

current code:

<body>
 <div id="wrapper">
 	<div id="header">
 	<img src="logo.png" />
 	</div>

 	<div id="nav">
 	<ol>
 	<li style="float: right; padding: 0; margin: 0; display: block;">Floating right</li>
 	<li>First</li>
 	<li>Second</li>
 	<li style="float: left; padding: 0; margin: 0; display: block;">Float Left</li>
 	</ol>
 	</div>

 	<div id="main">
 	main goes here, weeeeeeeeeeeeeeeee
 	</div>
 </div>
</body>

CSS:

 	body { 
 	background-color: #AE1E24; 
 	color: black; 
 	background-image: url('untitled.png'); 
 	background-repeat: repeat-x;
 	}

 	#wrapper {
 	margin-top: 4%;
 	background-color: white;
 	padding: 10px;
 	}

 	#header {
 	text-align: center;
 	margin-bottom: 10px;
 	}

 	#header img {
 	margin-top: 10px;
 	}

 	#nav ol {
 	background-color: #b21f25;
 	background-image: url('bg_nav.png');
 	background-repeat: repeat-x;
 	background-position: center;
 	}

 	#nav ol li {
 	display: inline;
 	padding: 0;
 	}

I also have this image. It's done in Photoshop and it has a layer of effect. How do I export the effect layer only?

With effect:

OYoQC.jpg

Without effect:

ne6xA.jpg

It's simple without effect I think. 1 div with 2 divs inside with the respective colors, but what about the effect that has on top of it? And as you can see, I have to do this bottom right edge thing ;(.

Thank you for all of your help. I hope it was clear. Any help would be appreciated.

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

You will need to use png format for the background images.

Markup...


<div>
          <span class="left edge"></span>
          <span class="right edge"></span>
          <p></p>
</div>

Now float the edges to the left and right. Say the edges have a width of 10px the the p tag would have a margin of 10px on the left and right and thats it.

Link to comment
Share on other sites

  • 0

I tried so many combination and yet yours worked perfectly. I thank you! could you explain what happened though? thanks a lot.

also, what about the boxes that have bottom right edge like the gray included image?

Link to comment
Share on other sites

  • 0

The edges float to the left and right. The p tag slides under the floats but since we set a margin corresponding to the width of the edges there is no overlap. Since there is no defined width for the p tag it expands when the parent expands horizontally.

For those boxes I would slice out the corner and position it using absolute positioning.

Link to comment
Share on other sites

This topic is now closed to further replies.