I want to create a horizontal nav that sometimes has multiline link text (not always; it's dynamically generated), and that has all the text vertically centered.
The caveat is that I'd also like to make the nav so that the a elements fill up the entirety of their containing element so that the clickable and hoverable area is much bigger for each link.
Is this possible with just CSS? Thank you.
full disclosure: I don't typically use this technique, but if you think that sometimes links will wrap, this is a pretty easy solution. Also, this does not work in ie7 and below
Every frontend developer will tell you that using tables for non-tabular data is a no-no, but using table styles is going to help you here.
If you apply display:table; to your containing div/ul/whatever, and display:table-cell to each item in your navigation, you will then be able to use properties like vertical-align:middle;.
Do you know how many elements you will have in your navigation? If not, create a few css properties that look like something like this:
.container.items-2 .item { width 50%; }
.container.items-3 .item { width 33%; }
.container.items-4 .item { width 25%; }
.container.items-5 .item { width 20%; }
/* ...etc... */
Related
I am now using the Envo Magazine Theme for Wordpress. I switched themes recently. I have a wider post area to work with. However, that means for older posts with smaller images, the images are floating on the left and text is wrapping around the images.
I don't want any text wrapping around images.
How do I force all post images to be center-aligned and not floating?
I tried forcing the post area to be a smaller width and that takes care of the overflow text, but that defeats the purpose of switching to a wider theme. I can't seem to find the right code to select all post-attached images. Please advise. Thank you!
Here is one example of a code I tried. I wanted to force all post images to be center-aligned with no text overwrap.
.single-entry-summary img {display: block; margin: 0 auto;}
It looks like you can't simply select all images on the page, because they are not build with the same structure. You can prevent the text from wrapping around the first image by removing the class pibfi_float_left from the span that is surrounding it. Or you can edit the class and remove the float: left.
For the other pictures, you need to remove the class alignleft from the surrounding div. Or you can edit the class and remove the float: left.
To center the images, you also need to add display: block to the surrounding span:
.single-entry-summary span {
display: block;
}
.single-entry-summary img {
display: block;
margin: 0 auto;
}
Important note: For all images except the first one, you need to adjust the width of the attachment divs (which have an id starting with attachment), otherwise they won't be centered. You can do it like that:
.single-entry-summary div[id^='attachment'] {
width: 1000px !important;
}
I have a layout as shown in this fiddle: https://jsfiddle.net/4dbgnqha/4/. For reasons that you can read about in this post, I don't want to change the way the page is laid out.
Now, it works fairly well, but the issue is that when I add a border to the bottom of the .item divs, I realize that they don't span the full width of the page. As you can see in the above fiddle, the second .item down doesn't have enough content to fill the width, so its border doesn't reach the full width.
I thought I could fix this by just adding .item { width: 100%; }, but when I do that, the image gets added enough additional width to center the p, which looks really weird. Demo of that: https://jsfiddle.net/4dbgnqha/7/
I know it will fix if I add a set width to the image, but as I mentioned in my original post, I want it to be really flexible, able to have many image widths. I also know that if I wrap the image in an element and set that element to a really small width, like 1px, it will work, but that seems like a hack, and the reason I'm doing this stupid table layout in the first place is that I'm trying to avoid any such hacks.
How can I fix this issue?
You can add this into the CSS, it's a hack, but works very well with table layout.
.item p {
width: 100%;
}
https://jsfiddle.net/4dbgnqha/8/
you need to add width 100% to the .item p element so it gets the maximum available width, otherwise that element will get width:auto. So just add width:100% like this:
.item p {
margin: 0px;
display: table-cell;
vertical-align: top;
width: 100%;
}
edit: well, now I see it was already answered, but for anyone looking for info, this is why it happens
I would like to create a grid with 4 columns. Columns width should fit to there respective contents, and gutters should all share the same width changing depending on the columns width. The tricky thing is that the total width of the container / grid should be adjustable dynamically, as it should be a responsive design.
Here is a scheme that's explains what i want to achieve :
And here is a fiddle trying with margin-left:auto (doesn't work)
nav ul {
width:80%; /* fluid design */
}
nav ul li {
display:inline-block;
}
nav ul li:not(:first-child) {
margin-left:auto;
}
I can use latest CSS3, Sass, Compass and Susy. But i haven't found any way to do it yet. It seems Susy doesn't allow me to have columns adjusting their width to their content - or i haven't found how. Does anyone have any idea ? thanks !
As in the link I posted as a comment, you may use flexboxes to achieve your layout.
Basically if you give your container this CSS:
.flexbox-container {
display: flex;
justify-content: space-between;
}
your content will adapt to the 100% of the container and space between elements will always be the same.
Here you have a FIDDLE as an example. Try writting more on any div to see it growing.
I've added a margin right to the elements so there's always a gap between elements. If you remove that margin, when no room the space between elements will be 0.
There's more options avalaibles like giving your elements the option to shrink if no room enough with flex-shrink: and many others...
More info about flexboxes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
At this point in time the only way to achieve this is through Javascript. CSS is not capable of finding the width based on your content.
My page I'm working on is at http://www.derekbeck.com/1775/excerpts/
It looks all fine in desktop browsers, but on mobile screenshots, like below, it is forced to wrap. (see below the image for my questions...)
(full sized image)
I've tried to make it wrap gracefully, but I have two questions:
1) Is there some CSS way to control how the div inline-block (class="exnote2") Want the entire chapter?<BR>Sign up for the newsletter! wraps?
Specifically, I want:
1a) that padding-left: 20px; on the left side of it to be non-existent if it is on a second line as below (but it is necessary to keep it 20px from the PDF icon if it is indeed all on one line),
1b) some whitespace above the div inline-block (class="exnote2"), so that it is not so close to the "Read Online" icon. If I add padding-top or margin-top however, it effects the nice layout for the desktop version (linked above).
For what it's worth, for 1b) above, I did jury-rig a solution together for the entire inline block that follows the image, the entire div inline block that contains text (class="exitemdetails"). I did it this way:
.exitemdetails {
margin-left: 25px;
/* The following allows for graceful wrapping for mobile phones */
padding-top: 20px;
position: relative;
top: -10px; /* half the padding-top */
}
I could jury-rig something for the Want the entire chapter?<BR>Sign up for the newsletter! line too, but I suspect under different conditions it would not display as I hoped. Hence, I post here hoping for a better, more elegant solution, namely, how to use CSS to control the way div's wrap, and the spacing between them only if they do wrap.
2) I have one other question related to this: is there no simple CSS way to shrink that book cover image down when there is not space enough? I tried this, but it does nothing:
.eximage {
width: auto;
height: auto;
}
.eximage img {
max-width: 100%;
height: auto;
}
Thanks for looking!
Derek
Have you considered using css media queries to change the layout of your page at different screen sizes? Might be worth a shot.
http://www.w3.org/TR/css3-mediaqueries/
Inline elements are great, because their width is the width of the content and because it's possible to center them with on rule of CSS:
text-align: center
But inline elements stay on the same line. Is it possible to align them vertically?
Fiddle: http://jsfiddle.net/_bop/NhVaF/
Full screen fiddle: http://jsfiddle.net/_bop/NhVaF/show
Please don't:
Change the HTML in the example. Change the CSS!
Come up with other techniques to center elements, unless you have a better solution that works on elements with unspecified width and doesn't need tons of containers and/or float hacks.
Thanks in advance!
In your markup, if the span are on different rows you could add on the parent container:
white-space: pre-line;
With this CSS declaration, your span are still centered, and you don`t have to add HTML markup.
pre-line
- This value will cause sequences of whitespace to collapse into a single space character. Line breaks will occur wherever
necessary to fill line boxes, and at new lines in the markup (or at
occurrences of "\a" in generated content). In other words, it’s like
normal except that it’ll honor explicit line breaks.
You can find more informations here about white-space:
http://reference.sitepoint.com/css/white-space
http://www.w3.org/TR/css3-text/#white-space
For an IE7 compatibility, you could also add on the parent container:
*white-space: pre /*FixIE7*/;
You need some holding block to hold your spans if you want to display it on top of another. This is the best I can do.
http://jsfiddle.net/NhVaF/5/
If you want to make it work without altering the html, then your best bet is to simply float: left; clear: left; like so:
span {
float: left;
clear: left;
color: #FFF;
padding: 30px;
}
display: block; will not work because it requires you to set a width (or else they'll fill the available space).
display: inline-block; will not work because still display on the same line.
I was just playing around with this too, and found my solution by simply placing <br> after each inline-block element. I know it's altering the html but only slightly!
If you want to create line breaks with CSS try using the :after pseudo class. Would something like this work?
div.class:after {
content:"\a";
white-space: pre;
}
break :after trick: https://stackoverflow.com/a/10934138/6586407