Be Excellent To Each Other

And, you know, party on. Dude.

All times are UTC [ DST ]




Reply to topic  [ 11 posts ] 
Author Message
 Post subject: CSS Help
PostPosted: Thu Aug 17, 2017 14:55 
Awesome
User avatar
Yes

Joined: 6th Apr, 2008
Posts: 12240
I am having a complete moment and cannot get this to work.
Attachment:
css.png

In the above image there is a red div of 100% width and unknown height. The height is controlled by the height of the orange div plus some padding maybe.

The height and width of the orange div are controlled by dynamic text content which we do not know ahead of time, but the orange div should be centred horizontally within the red div with equal width on both sides.

The blue div will be a fixed width and height (lets say 50px x 50px, smaller than the orange div), and placed over on the left hand side. It will sometimes be visible and sometimes not (controlled by javascript - either visibility or display, whichever works best), but in either case it should not affect the horizontal centring of the orange div. However, the vertical center of the blue div should be vertically aligned to match the vertical centre of the orange div.

I can add extra divs, or change things to spans, anything like that, but at the moment anything I try means that the flow of the horizontal centering for the orange div is taking into account the blue div when I need the blue div kind of taking out of the flow entirely.

Any ideas?


You do not have the required permissions to view the files attached to this post.

_________________
Always proof read carefully in case you any words out


Top
 Profile  
 
 Post subject: Re: CSS Help
PostPosted: Thu Aug 17, 2017 15:10 
User avatar
Heavy Metal Tough Guy

Joined: 31st Mar, 2008
Posts: 6493
I have no idea about CSS, but I like the way your squares look like a wonky Mondiraan.


Top
 Profile  
 
 Post subject: Re: CSS Help
PostPosted: Thu Aug 17, 2017 15:11 
User avatar
Comfortably Dumb

Joined: 30th Mar, 2008
Posts: 12034
Location: Sunny Stoke
I'm certainly no expert on CSS, but wouldn't using absolute positioning on the blue div help to stop it getting in the way of the yellow one?

_________________
Consolemad | Under Logic
Curse, the day is long
Realise you don't belong


Top
 Profile  
 
 Post subject: Re: CSS Help
PostPosted: Thu Aug 17, 2017 15:12 
User avatar
sneering elitist

Joined: 25th May, 2014
Posts: 3987
Location: Broseley
http://www.jemjabella.co.uk/russ/

Things to note: calc is not supported < IE11

-75px is half of the height of the padding of the red box. If you don't add padding to red, this is unnecessary - you can just use top: 50%;

In fact, if you add another div just inside red, you can apply the position: relative; to the inner div, apply padding to red, and remove the need for calc which increases your backward compatibility.

_________________
i make websites


Top
 Profile  
 
 Post subject: Re: CSS Help
PostPosted: Thu Aug 17, 2017 15:18 
User avatar

Joined: 30th Mar, 2008
Posts: 16551
All the cool kids are using tables and one pixel transparent gifs for this sort of thing these days.


Top
 Profile  
 
 Post subject: Re: CSS Help
PostPosted: Thu Aug 17, 2017 15:19 
Awesome
User avatar
Yes

Joined: 6th Apr, 2008
Posts: 12240
Thank you both, will have a look and get my teeth into working out if I can get that to work :)

I also asked this on Stack Overflow, and you answered quicker :D

_________________
Always proof read carefully in case you any words out


Top
 Profile  
 
 Post subject: Re: CSS Help
PostPosted: Thu Aug 17, 2017 15:29 
User avatar
sneering elitist

Joined: 25th May, 2014
Posts: 3987
Location: Broseley
Mr Russell wrote:
I also asked this on Stack Overflow, and you answered quicker :D


And I read all your requirements which the stackoverflow people didn't :p :DD

Incidentally, fyi flexbox support is dodgier than calc in IE.

_________________
i make websites


Top
 Profile  
 
 Post subject: Re: CSS Help
PostPosted: Thu Aug 17, 2017 15:42 
User avatar
Hibernating Druid

Joined: 27th Mar, 2008
Posts: 49092
Location: Standing on your mother's Porsche
Image

_________________
SD&DG Illustrated! Behance Bleep Bloop

'Not without talent but dragged down by bass turgidity'


Top
 Profile  
 
 Post subject: Re: CSS Help
PostPosted: Thu Aug 17, 2017 15:46 
User avatar

Joined: 27th Mar, 2008
Posts: 25544
Zardoz wrote:
Image

:luv: :luv: :luv:

Thank you for this cheer x

_________________
Image


Top
 Profile  
 
 Post subject: Re: CSS Help
PostPosted: Thu Aug 17, 2017 15:47 
User avatar
sneering elitist

Joined: 25th May, 2014
Posts: 3987
Location: Broseley
Zardoz wrote:
Image



:DD

_________________
i make websites


Top
 Profile  
 
 Post subject: Re: CSS Help
PostPosted: Thu Aug 17, 2017 17:04 
User avatar
Excellent Member

Joined: 25th Jul, 2010
Posts: 11128
I think the problem is that you don't have any orange divs and seem to have a yellow one instead; that's probably breaking it.


Top
 Profile  
 
Display posts from previous:  Sort by  
Reply to topic  [ 11 posts ] 

All times are UTC [ DST ]


Who is online

Users browsing this forum: The Greys and 0 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search within this thread:
You are using the 'Ted' forum. Bill doesn't really exist any more. Bogus!
Want to help out with the hosting / advertising costs? That's very nice of you.
Are you on a mobile phone? Try http://beex.co.uk/m/
RIP, Owen. RIP, MrC.

Powered by a very Grim... version of phpBB © 2000, 2002, 2005, 2007 phpBB Group.