22 replies [Last post]
Javaprogrammer
Javaprogrammer's picture
Offline
Regular
Sweden
Last seen: 9 years 40 weeks ago
Sweden
Timezone: GMT+1
Joined: 2007-06-07
Posts: 42
Points: 3

Hi!

How can I position a white square in every corner of a div?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

position:absolute

position:absolute

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Javaprogrammer
Javaprogrammer's picture
Offline
Regular
Sweden
Last seen: 9 years 40 weeks ago
Sweden
Timezone: GMT+1
Joined: 2007-06-07
Posts: 42
Points: 3

Position:absolute

Then I need 4 divs in every div for the squares or is there any other way?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

While you fail to supply any

While you fail to supply any information as to what markup/content you're dealing with no there isn't Smile

But you wouldn't necessarily have to use divs.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Javaprogrammer
Javaprogrammer's picture
Offline
Regular
Sweden
Last seen: 9 years 40 weeks ago
Sweden
Timezone: GMT+1
Joined: 2007-06-07
Posts: 42
Points: 3

Bad English

I will try to tell you but I'm having trouble expressing it in english.

All content in the menu, cart and so on have a border 3 solid white to make a border around every block of content. However, the designer ( not me ) has placed a 2 pixel wide and high square in every corner of every block. Not rounded block but square block with a square in every corner framing the content. Hope you know what I mean.

Now the menu altso has the squares in the corner with no image. Sometimes there is a background image. Sometimes just squares at the bottom.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Your English is fine This

Your English is fine Smile

This a typical situation heaped on us by so called 'designers' and why most of are in despair of these people calling the shots when it comes to web pages when they haven't a clue about how web coding works.

I see what they have done it's a frame that is so easy to produce in a graphics programe but a bit of a nonsense when it comes to coding, in reality the designer should be told that this is an irrelevent and unnecessary bit of design that should be dropped.

There may be some tricky ways of achieving this effect, but off the top of my head and without playing around with some code I can't think of anything other than four empty elements placed position absolute to the corners.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Javaprogrammer
Javaprogrammer's picture
Offline
Regular
Sweden
Last seen: 9 years 40 weeks ago
Sweden
Timezone: GMT+1
Joined: 2007-06-07
Posts: 42
Points: 3

Hehe

Thanks! I have tried talking him out of it but it won't work :rolleyes:
If I have about 40 divs using this technique and 4 divs in each of these divs doesn't this sounds like a heavy page to load?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Yes it does and more than

Yes it does and more than that it's absurd as it's not important, whereas bandwidth/pageloading times is important, but this is why I hate design led web development, designers simply must not be allowed to call the shots in this way, as it's saying the 'look' of a site or the designers 'efforts' are far more important, designers seriously piss me off.

There is a javascript based technique for curving corners 'curvy corners' that has been ported into the jQuery library and this allows a variety of different corners to be achieved, but I haven't the specific links to hand .

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 7 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

It will add maybe 1kb to the

It will add maybe 1kb to the html page. That is no big deal. It'll be far less if your server is set to compress html output. If that really does worry you, use some obscure html elements in a structure that removes the need for class names.

e.g.

That would take it down to ~600 bytes for 40.

If you're really clever you might be able to work out a way to do it with two elements, each 2 pixels high with 2 pixel wide solid left and white borders

Astigma
Astigma's picture
Offline
Regular
Ohio
Last seen: 10 years 4 weeks ago
Ohio
Timezone: GMT-4
Joined: 2007-05-03
Posts: 24
Points: 1

If all of these modules are

If all of these modules are going to be the exact same size, I would use the main picture as the first background. The next container would have the 4 white dots saved as a transparent gif, and would lay on top to produce the effect you want. This will of course only work if the module never changes height or width.

There is no problem which cannot be solved by a suitable application of high explosives.

Javaprogrammer
Javaprogrammer's picture
Offline
Regular
Sweden
Last seen: 9 years 40 weeks ago
Sweden
Timezone: GMT+1
Joined: 2007-06-07
Posts: 42
Points: 3

Not same size

There are no fixed size for every block but for some. So an image wouldn't work. I don't quite understand how the <b><li></li></b> should produce this. I mean <div class="someclass"/> is not far away and position absolute.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 7 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

its not an <LI> but <I>.

its not an <LI> but <I>.

If you don't use those elements anywhere else, you can style them without referring to a class. Even if you do use them somewhere else, you may well be able to style them for your purpose as descendent selectors.

b { position: absolute; top 0; left: 0; width: 100%; height: 2px; border-left: 2px solid white; } i { position: absolute; bottom: 0; right: 0; width: 100%; height: 2px; border-right: 2px solid white; } b i { right: 2px; } i b { left: 2px; }

Those styles aren't tested, but they should be pretty close to what you are after.

Javaprogrammer
Javaprogrammer's picture
Offline
Regular
Sweden
Last seen: 9 years 40 weeks ago
Sweden
Timezone: GMT+1
Joined: 2007-06-07
Posts: 42
Points: 3

Thanks!

This will work, thank you Smile. Just wondering. If I should create 4 classes instead and put these div on top there would be the same wouldn't it?

<div class="container">
  <div class="someclass"/>
  <div class="someclass1"/>
  <div class="someclass2"/>
  <div class="someclass3"/>
  
  here is my content

</div>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I would go with Chris's

I would go with Chris's suggestion it's rather smart and neat.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 12 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

I'd have just embedded an

I'd have just embedded an overlay image.

Verschwindende wrote:
  • CSS doesn't make pies

Javaprogrammer
Javaprogrammer's picture
Offline
Regular
Sweden
Last seen: 9 years 40 weeks ago
Sweden
Timezone: GMT+1
Joined: 2007-06-07
Posts: 42
Points: 3

How!

How when the block width and height is not determined?

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 12 years 17 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

Why not put a DIV at the top

Why not put a DIV at the top and bottom of the box that has an extra wide border (extra 2px) and is 2px in height.

Set the background of these divs to transparent and the picture should show through and the designer gets his little corner thingies.

Post the code for us to have a go.
HTH

Fat Freddy

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

Javaprogrammer
Javaprogrammer's picture
Offline
Regular
Sweden
Last seen: 9 years 40 weeks ago
Sweden
Timezone: GMT+1
Joined: 2007-06-07
Posts: 42
Points: 3

Please elborate. I'm very

Please elborate. I'm very new to css. Sorry. :?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 7 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

fatfreddy wrote:Post the

fatfreddy wrote:
Post the code for us to have a go.

You shouldn't need the code. He wants an image with a border + blocks in the corners. Also you didn't mention a couple of vital ingredients. The container needs to be shrink to fit and you'll need position:relative or negative margins to get the divs to overlap the image. But for all that, its not x-browser, it doesn't work in IE.

sample (my version above doesn't work in IE6).

I also used 4px blocks for added visibility.

Astigma
Astigma's picture
Offline
Regular
Ohio
Last seen: 10 years 4 weeks ago
Ohio
Timezone: GMT-4
Joined: 2007-05-03
Posts: 24
Points: 1

If it is possible, I would

If it is possible, I would just Photoshop the white blocks and border into the image itself, since its all presentational anyhow.
Otherwise, you may be able to set the image as a background to a div, and use a transparent gif with the 4 white blocks. Put the gif in the container and set the width to 100%.

.image-border { background: url(yourimage.jpg) 0 0 no-repeat; border: 2px solid #ffffff; margin:0; padding:0; }

There is no problem which cannot be solved by a suitable application of high explosives.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 7 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Your first way obviously

Your first way obviously will work, but requires modification of the images. Doing this in photoshop isn't likely to be a reasonable solution if there are lots of images or they change regularly. However doing it on the fly in PHP or similar and caching the modified version is reasonable.

Your second method falls down with varying image sizes - as the border thickness and corner block size will stretch.

Server side modification does have the advantage of not polluting your html with presentational markup.

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 12 years 17 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

Here's an example The top

Here's an example

The top squares will work regardless of image size and width.

the bottom squares are dependant on knowing the height of the image.

Fat Freddy

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

Javaprogrammer
Javaprogrammer's picture
Offline
Regular
Sweden
Last seen: 9 years 40 weeks ago
Sweden
Timezone: GMT+1
Joined: 2007-06-07
Posts: 42
Points: 3

Thanks!

Thanks for all replies. The above example doesn't work in Explorer 6. So I'm basically stuck where I begun. Still have problem in Firefox