This is kind of a peculiar problem. I am working on a header for a custom form where a logo is on the right side of the header and header text is centered within the logo banner.
In general, logos are narrow, so I want to center the text in the main container div like this:
In a few cases, if the logo is very long, I want to center the text on the left side. This is easy enough to do by creating a div that floats left and centering the text within:
The tricky part here (and I'm not sure it is even possible) is making the header text centered on the left side if and only if the image size is beyond a certain length. Oh--and I can't use Javascript.
Wondering if there are any CSS tricks that can get me there...
Related
I'm struggling to build an iOS-style table cell component, with title, subtitle, info text on right side, disclosure arrow (chevron) and optional icon. From left-to-right, this can be thought of as:
fixed-width icon
variable-width title/subtitle
variable-width info text
fixed-width chevron image
Without the icon, I have this, which looks pretty good:
But once I make the icon visible, it pushes the chevron off the screen:
Because both text fields are variable-width, I cannot set a width on them (instead I have flex: 0 on the left one, and flex: 1 on the right, which causes the left one to be as big as it needs to be, and the right one to resize to fill whatever remaining space there is). In general, this all works well, except that the fixed images on left and right (icon and chevron) cause the left text to start pushing the chevron off the screen (the right text is zero-width at this point, so whether it's off-screen doesn't really matter).
I've tried all manner of fixes, but the only things I've come up with require measuring the size of components. The two hacks were:
1) Set maxWidth on the left text, subtracting the icon / chevron sizes from the total container width.
2) Set paddingRight on the top-most View, to include the measure width of the icon.
I'm trying to avoid either of these, because the size of the icon/container are unknown, and I don't want to have to add an onLayout handler to measure them and recompute. Any ideas how this would be possible?
Here's a gist of where I'm at, I've replaced the chevron with a fixed-size orange view: https://gist.github.com/jd20/36456c95011b65c0280cba920365b1f6
For me it helped to simply add flex: 1 to the styling of the Text. Then it adjusts appropriately and lets everything else fit in.
You can try to give position: 'absolute' into styling & some padding according to if need be.
I have a layering issue with a site that I can't seem to figure out how to get around.
Essentially, I have a float:right div that contains some linked images and a bunch of block divs on the same page (in the same wrapper). The text (content) all wraps as expected, but the block elements overlap the floated elements making the image links non-clickable. It becomes quite obvious when viewed using chrome/firebug/whatever that the blocks are getting in the way of the floats but nothing I have tried as yet has floated them to the top.
example from: http://wanganuilibrary.recollect.co.nz/nodes/view/280
What I need is a way of allowing the links on the images in the float to be clickable. The float can have a set width but not height, and the rest of the content needs to be free flowing and wrap under the float if/when required, so no forced padding or margins, e.g.: http://wanganuilibrary.recollect.co.nz/nodes/view/1519
Any ideas on how this could be achieved would be appreciated.
Usually columns like this are built using floats.
The left content column would be float: left with a set width.
The right content would be float: right with a smaller width.
Otherwise you can set the z-index of the anchors around the images to higher than the other content,
In the normal prestashop theme, there is a box at the top of the category pages for a description of the category as a whole. The box has an outline and contains a picture and some text.
The text is normally below the image, so the block takes up a lot of room. I would like to float the image to the left, and wrap the text around it, so it's smaller.
I suspected this would be easy, because the image and text are in divs, and both of them are in another div for the outline. So I simply added float:left to the image's DIV.
The image moved to the right OK, and the text flowed too. However, the surrounding DIV did not resize properly, so the image now runs right out of the box.
How do I get the enclosing DIV to resize properly?
You need to force the containing div to wrap the floated contents. You can do this a few ways, one being to add overflow:hidden.
.content_scene_cat {overflow:hidden;}
I have a common problem, although I have not been able to solve it with solutions found elsewehere on Stack Overflow. I'm trying to vertically align a logo and a search bar overlayed on an image in a header with unknown height (since the image shrinks when browser width decreases, since it's responsive)
The challenges are:
I have a header image (img, not a CSS background image) in one div block and a logo & search bar in two other div blocks that need to be overlayed on the background image.
The header image will shrink in size as browse width decreases, as it's a responsive site. That means I don't know the height of the header.
The logo is to be floated left and the search bar to the right.
I need to somehow center the logo and search bar vertically, so that they always appear nicely, regardless of the height of the header image that they are overlayed on.
Example: http://www-dev.channelaustin.org/about
Any suggestion?
The first answer here, essentially answers your question. As you only want vertical centring, you should remove the:
top: 50%;
I'm trying for the life of me to figure out what should be an excruciatingly simple CSS task: aligning a block of text to the right of an image and vertically positioning the block so it aligns with the bottom of the image; and I'd prefer to not have to declare a height for the containing element as this is for a lengthy image listing and the dimensions will vary (but all with a certain max width/height). I've attempted to define a parent element with "position:relative" containing two left-floated divs, one with the image and the other with the text block, positioned "absolute" and "bottom:0" and I can't seem to get the text block to align with the bottom of the image...
any assistance here may very well help me stave off a fit of insanity ;)
If the text go to the right of the image, just use an element with display:inline-block after the image, and enclose everything in a block (like div). See it here