I am working on a website design based upon a company's print branding, and one aspect that I'd like to mimic is the break in the dot border for a header surrounding the content. (Here's an example.) As you can see, the header text is vertically centered against the dot border, so half of it sits above the edge, and the length of the break will differ based upon the word length (though the amount of white space before and after each word should be consistent). In some instances, like the one in the photo, there will be multiple headers in the same rectangle, so it won't just be the top border that needs to be addressed. The background in this design will be an image, not a solid color. In addition, this site is responsive so will require the workaround to function in various mobile environments, and the width of the border will vary as the space changes.
I'm primarily a web designer with some front end coding abilities, but nothing too advanced, so I'm wondering if this is possible (in general, and for my experience level) or if I should just change the design entirely. Any suggestions?
Edit: I've added a new photo to clarify my question, still hoping there is a feasible way to do this with a photographic background element. Thanks!
Yes, it's possible, try to make header display: inline block, add side padding to it and color with it's parent background. After that you can raise this header to top with it's half-height. For example:
1) Position: relative; line-height: 1em: top: -.5em;
2) Transform: translateY(-50%);
Here's an example https://jsfiddle.net/5w4hanu3/2/
h2 {
position: relative;
display: inline-block;
margin: 0;
}
.top h2,
.bottom h2 {
transform: translateY(-50%);
padding: 0 20px;
background: #fff;
}
Related
I'm really new to programming and trying to customize a theme that I am using. However I am having several issues where if I fix one thing something else breaks. I've researched solutions for about 3 days and I think it's time I reach out to some more experienced with CSS for help.
I tried setting up a JSFiddle but it's not working correctly as I can't access the HTML file directly. The website is www.preethijagadeesh.com. Would it be possible to review the html/css files and provide suggestions for the following requirements?
Center the title (I believe this is found in the 'site_header'
class which is pasted below). I am using margin to change the percentage and it looks
different on various browsers.
I would also like to 'fix' the title so that when I scroll the title
goes with me. I used 'position: fixed' but it cause all the
content in the 'index' ID (pasted below) to overlay on the title/site_header.
The text in the 'About' page appears to be more on the left with
a lot of white space on the right. No matter what I am unable to get
the content to center regardless of which class I update.
The line/border_bottom that appears under the navigation items should be
the same length as the text. I tried updating it but now every time
I hover over the items the text/options move around
overlay a
black color on the thumbnails on hover. I got it to 'kind of' work.
It's just when I hover on the thumbnails, the images and the
'background color' flicker
Widen the gap between the thumbnails.
Right now, there are two columns, it would be great to just put some
space in between them.
Please let me know if there's any other information I can provide.
Change
.header_image {
float: left;
margin-top: 80px;
max-width: 100%;
}
to
.header_image {
text-align: center
margin-top: 80px;
max-width: 100%;
}
Add these to .site_header:
.site_header{
/* old css remains here... */
position: fixed;
top: 0;
left: 0;
right: 0;
}
Move the padding properties from the a to their parent instead (the .page_link div).
and 5. I can't get the thumbnails to display on your jsfiddle so I can't really give the answer. But for 4 I think something like this will help:
put a <div class="thumbnail-overlay"></div> inside your thumbnail html.
For the css:
.thumbnail-overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
/* this z-index should be higher than the thumbnails' child element. If no z-index is set for their child element leave it at 1 */
}
.thumbnail-overlay:hover{
background-color: rgba(0,0,0,0.5);
}
Hopefully this helps.
.header_image is floating, so you can't center it nicely. If you remove the float and then use text-align: center;, the image should center.
Not really sure where you are wanting the title to appear - should it be above the content or to the left of the content?
You have removed the padding from the links to resize the underline, but it's only been changed on hover. This is what is causing the "jumping" navigation links. If you add this code to .navigation a (instead of .navigation a:hover), this should work nicely:
.navigation a {
padding: 0;
margin-right: 6px;
margin-left: 7px;
}
Instead of using .thumb_image:hover, try using .thumbnail:hover .thumb_image and see if that's helps with the flickering. Also, maybe remove the background-position: 0 -30px;.
Is a plugin being used to generate and control the thumbnail images? The absolute positioning being used on the thumbnail images will make it difficult to reposition them.
You should be creating the site offline and reviewing your work before migrating the site to your host.
If your host does not allow you to migrate your site and/or denies you access to your HTML files, you need find a new web host.
I'm trying to build a rather complicated header. This is what it should look like:
As you can see, the header needs to be centered on the page, but the elements need to expand the width of the page. The issue I'm running in to is that I can't get the white part to extend properly. This is what I currently have:
I can't figure out any way to extend the white background over the black bar on the left side. I can kind of get it working using :before, but only at certain zoom levels (at certain points, a gap would appear between the logo and the overlapping :before, causing a bit of the black bar to bleed through), and we need this to work at all zoom levels.
My only other thought would be to use an extremely wide background image for the entire navigation, but I don't think that's an acceptable solution either.
Does anyone have any suggestions?
Demo: http://www.weblinxinc.com/beta/header/
Try that, on your current code (I used your current #headerLeft:after pseudo element) :
#headerWrapper header #headerLeft:after {
/* clear: both; */
content: "\0020";
display: block;
/* visibility: hidden; */
/* zoom: 1; */
width: 1000px;
height: 50px;
background: white;
top: 50px;
right: 100%;
position: absolute;
margin-right: -60px;
}
In a word, I just use a pseudo element to cover the left part in white. So I put it a very high width, and I position it relatively to the logo.
Feel free to put it on another element / pseudo element : I guess this one is making a clearfix.
We have some minor formating issues with the main page of our site Batoku when we switch to an alternative language (change to italian to test).
1) 'Swap' text is not centered between the arrows upon changing languages.
(#wrap-main #main-home #items a#swap )
a#swap {
color: #449AC2;
font-size: 26px;
font-weight: bold;
left: 467px;
max-width: 135px;
position: absolute;
top: 194px;
word-wrap: break-word;
}
2)The footer is not centered and doesn't look good it is inconsistent in terms of items per line when a language changes and if you like this page at the bottom for the first time, there is no space to write a comment and like.
3)Potentially if there is a very large text for any of the languages the header will look completely all over the place.. to test under <li id="add-item"> modify the span to say <span>I will destroy your header!!! </span> (please use firebug)
Thanks
1) About the swap, there is a fixed left position, that means that it will always stay there. It's better to be wrapped via some div with width: 100%; text-align: center; or something like that in other to center the text, and not the element itself.
2) About the footer. There is fixed width to the ul. You should remove it, add 'text-align:center' to it, remove the float from li elements and make them display: inline;
3) For the header you should blame the designer. :) They are not coders but at least they should ask their self "What if there are more links?" or "What will happens once the language is changed?", they should think a little outside of the frame.
There is nothing here to prevent the site from braking. You can make it absolute, but once it's to large it will start to go over the text field. And that will not be ok too. You can use some kind of javascript to check if the elements it's breaking and apply some kind of class to the navigation in order to decrease the font-size or change the position of the elements.
I've a problem laying out an e-commerce page with very strict layout requirements. We want to show a product image alongside a product description, with some optional extra information about the product below the image. The width is constrained by our overall page layout, while height can be variable. The answer seems to be "you can't do this with pure CSS".
Here's a mock up:
The marked widths are 372+12+178=562 leaving 8px in borders. The image and description areas have 2px borders, making a total of 8px horizontal pixels, and 562+8=570.
I've got the vertical centering of the image mostly sorted, what breaks the design is the optional 'extra info' panel. The site is generated by PHP, which optionally includes the <div> for that extra info if the data is available for the product. I'd be happy to always include the 'extra info' element and style it to be invisible if it's empty, if it helps solve the design problem.
Requirements:
Product image can be any aspect ratio. Some are thin and tall, some wide and short, some square.
Product image should fill its area horizontally and naturally size itself vertically by its aspect ratio.
Product image should be vertically centered in its area (blue). When extra info is not visible, image would be vertically centered alongside the Description area. When extra info is visible, image should be vertically centered in the remaining space.
Extra info can be any amount of text and aligned to bottom of product image area. So, cannot have fixed height.
Product Description can be any amount of text.
The 'image and extra info' column should vertically match the size of the 'description' column and vice versa.
Description and Extra Info boxes employ CSS gradient backgrounds and borders. All these divs must actually size themselves accordingly, I cannot get away with 'faux columns' as described here http://www.alistapart.com/articles/fauxcolumns/.
Do not want to use Javascript to align elements. Yes, I'm sure we're all jQuery masters and it's a wonderful tool, but it shouldn't be required for this layout.
My design so far employs pure CSS and no tables, using the table-cell style to center the image, but there is some fudgery to do with min-height that breaks when different size images are used. A jsfiddle: http://jsfiddle.net/GJVbX/
That fiddle is easily broken by e.g. tripling the Product Description text content, or adding "width: 370px; height: 400px;" to the so it's not a nice height.
An example of my design that works well:
However, it's not hard to find an image size that breaks it:
Note how the tall product image makes the image div extend vertically and the Description column cannot keep up.
I've been on #css IRC channel on Freenode and was told that this is possible using pure CSS, using tables for this layout task is a sign I don't understand CSS layout and should hire a professional, and that to achieve the vertical centering I should use "display: table-cell". However, extremely helpful as they were, the discussion was too complex to continue on IRC. I understand that <table> brings with it all sorts of horrible layout mechanics that is simply broken for accurate page layout, however, I can't think of a better solution, mostly because of my requirement to keep the columns the same height.
Would appreciate constructive criticism, alternative solutions, or even just confirmation of my plight :)
EDIT - here is the HTML and CSS content from the jsfiddle given above, for those who prefer this content contained within the stackoverflow question. This is extracted from the live site, cleaned a little for indentation, with a dummy product image (produced by the thumbnailer script employed in the live site) and dummy text.
HTML:
<div class="productInfo">
<div class="productTopWrapper">
<div class="productImgWrapper"><div class="wraptocenter"><span></span><img src="http://nickfenwick.com/hood.jpg"></div></div><div class="extraInfoWrapper gradientBackground"><div class="extraInfoInner">Extra info goes here.</div>
</div>
<div class="productDescription gradientBackground"><div class="productDescriptionInner">
Product Description goes here.<br/>
Product Description goes here.<br/>
Product Description goes here.<br/>
Product Description goes here.<br/>
Product Description goes here.<br/>
Yet the gradient ends too soon because this div doesn't fill its space vertically!
</div>
</div>
</div>
</div>
CSS:
DIV.productInfo {
max-width: 570px;
font-family: Verdana,Geneva,'DejaVu Sans',sans-serif;
font-size: 12px; /* Just for this fiddle */
}
.productInfo .productTopWrapper {
overflow: hidden;
margin-bottom: 12px;
position: relative;
}
.productInfo .productImgWrapper {
width: 372px;
min-height: 353px;
float: left;
border: 2px solid #cbcbcb;
text-align: center;
}
/* BEGIN css wrap from http://www.brunildo.org/test/img_center.html */
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 372px;
height: 309px;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
*:first-child+html {} * html .wraptocenter span {
display: inline-block;
height: 100%;
}
/* END css wrap */
.productInfo .extraInfoWrapper {
position: absolute;
left: 0;
bottom: 0;
width: 376px;
}
.productInfo .extraInfoInner {
padding: 5px;
border: 2px solid #cbcbcb;
text-align: center;
}
.productInfo .gradientBackground {
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0d1d3', endColorstr='#fefefe'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#d0d1d3), to(#fefefe)); /* for webkit browsers */
background: -moz-linear-gradient(top, #d0d1d3, #fefefe); /* for firefox 3.6+ */
background: -ms-repeating-linear-gradient(top, #d0d1d3, #fefefe);
background: repeating-linear-gradient(top, #d0d1d3, #fefefe);
}.productInfo .productDescription {
width: 178px;
min-height: 353px;
margin-left: 388px;
border: 2px solid #cbcbcb;
}
.productInfo .productDescriptionInner {
padding: 5px;
font-size: 1.2em;
line-height: 1.2em;
}
Unfortunately, which versions of IE you are required to support affects more than just CSS3 eye-candy. display: table-cell, for example, isn't avilable in IE7. And a myriad of other things present in other browsers are missing or buggy in IE7 and IE8. IE9 is a considerable improvement however.
To be honest, even if you were restricting yourself to latest version of all browsers, this layout would still be difficult in pure CSS, whatever people on IRC may claim. When new layout managers such as Flexible Box and Grid Layout are ubiquitously available, it will be easy, but we are a few years off from that, I'm afraid.
Anyway, here is my attempt at your required layout:
http://jsfiddle.net/amtiskaw/tNywn/
It requires IE8 and above, as it uses display: table-cell to vertically centre the product image. It also has a quirk where the content of the extra-info box will never overlap vertically with the content of the product-info box, although their borders will look correct.
The stretched borders and gradients are achieved by using additional elements which are sized to vertically fill the product container element using absolute positioning, then placed behind the content using negative z-indexes.
Personally, I'd me more inclined in this case to use tables or a bit of jQuery to get the sizing right, rather than this kind of CSS hackery. If you use a table, you can give it an attribute role="presentation" to indicate to screen readers and other semantic tools that it is being used for layout purposes, rather than to express tabular data. This pattern was approved by the W3C.
You can do this with a tall height set with a negative margin. (your height minus the minimum height of your div, in this case 353px) The only problem is that the border bottom will disappear into the parent's overflow (which should stay hidden). Not sure how important the border is to you or even if that's what you were looking for, but perhaps it might point you in the right direction?
.productInfo .productDescription {
width: 178px;
min-height: 353px;
margin-left: 388px;
border: 2px solid #cbcbcb;
height: 1000px;
margin-bottom: -647px;
}
I remember having this problem some time ago and ended up resorting to JS to resolve it. Unforunately the constraints you have are making it very difficult to come up with a working example with pure CSS. The problem as I see it is that as soon as the image increases in size the containing div no longer has a specific width or height and with CSS alone you can't make the calculations needed to expand the description div to the correct height. Browsers won't do this automatically if the element that's size changes is not the direct parent, leaving children of the parent at the heights they were pre-height / width change.
Yes tables will solve the problem with a fixed row height but as you say, they come at a price that I try to stick clear of as much as possible.
I'm presuming you've considered using JS / Jquery to solve this problem already.
Jquery example
$(function()
{
var height = $('.productImgWrapper').innerHeight();
$('.productDescription').css('height', height);
});
Note that .innerHeight() includes padding but not the border or margin. To include the border use .outerHeight().
I know it's not ideal but I can't see any other way of solving your problem. Maybe someone with higher CSS powers than I can come up with a solution.
So, I'm getting married. Hooray!
I'm building a website for the event and HTML/CSS isn't my normal area of expertise.
I've got the site sliced and diced, and most of the important structure laid out in divs.
One thing I'm not sure of though, is that the design calls for an image to spill over both edges of the wrapper. What's the best way to do that in HTML/CSS? Or should I make the wrapper the full image width wide and make another container inside for the other content?
Thanks for your help!
Here's the design comp:
website_comp.jpg
Here's the
image that needs to spill over the
div: ribbon.png
Here's what the
site looks like now:
DierksAndEmster.com
add position:relative and overflow:visible for your #container. Then modify your menu like the following:
#menu {
background: url("http://www.dierksandemster.com/wp/wp-content/themes/et-starter-1-4/images/ribbon.png") repeat scroll 0 0 transparent;
color: black;
display: block;
float: left;
font-family: 'Walter Turncoat',arial,serif;
font-size: 20px;
height: 93px;
left: -71px;
line-height: 22px;
position: absolute;
width: 942px;
}
You could attempt to position the image with position: absolute. Another way could be to use three columns. (~50px wide left column, main area, ~50px wide right column).
You could also take a look how csswizardry has done this, it's a bit advanced though, but might be helpful: http://csswizardry.com/demos/css-powered-ribbons/
Last but not least, if you wan't to be quick and know the navigation panel that has the fancy ribbons never changes place, why not just make a big background image and build the site on top of it? :)