Is there any way to have a custom-shape image container? To use something instead of <div />?
The problem appears when I need to add corners on top of the #content-box ( http://img855.imageshack.us/img855/8343/screenshot20111027at163.png ). The corner-images are using only half of the block element, the rest (the pink alpha-background) are blocking the active-elements underneath it.
Is there any workaround for this?
To answer my own questions:
It is not possible to have a custom shape HTML element without parent block element holding it anyway, e.g. in case of SVG.
However, the one workaround that I've managed to come across is magic CSS pointer-events rule, which, as you might have guessed already, helps to click through the element.
pointer-events: none;
That did solve my issue.
It's not possible to have custom shaped containers. You could do this though using <div> wrappers, each containing a different background image. For example:
html
<div id="content-wrapper">
<div id="content-box">
<!-- Upload photo content box --->
</div>
</div>
css
#content-wrapper,
#content-box{
width:500px;
height:500px;
}
#content-wrapper{background:url('images/four-corners.png') no-repeat}
#content-box{background:url('images/octagon.png') no-repeat}
This way the images won't block any active elements on the page.
Related
H everyone. Please help me out. I am using this grid based framework. in the middle I have 3 images like this
<section class="row">
<div class="col-4">
<img src="img/seo.jpg" alt="seo work" class="work-type">
<h3 class="work-title">seo specialist</h3>
</div>
<div class="col-4">
<img src="img/webdesign.jpg" alt="web design work" class="work-type">
<h3 class="work-title">web designer</h3>
And for the specific img class I am having this CSS for making it responsive
.work-type{
max-width: 100%;
height: auto;
}
Now. three images have different height and they are taking different space height wise inside the grid box. what CSS do I use to have them all appear with the same height?
You can do this easily with CSS and background images.
http://codepen.io/anon/pen/EyZxoP
In this codepen, I display your current issue with the proposed solution.
If you want the images to be a part of the markup, then you'll need to provide more information about the solution you're looking for. (What should happen with the images that are being forced to become the same dimensions? Are we stretching them? Cropping? Are these images dynamically loaded? Hardcoded in the source? Are they featured images for a custom post type, like a staff post-type? Is this wordpress? Contextual layout details would be good, too.)
I've given divs the background-image properties to quickly/easily avoid skewing and stretching, as well as any other form of distortion because of layout stuff. This method can be used for responsive layouts as well.
.img-cont{
height:200px;
width:200px;
}
I'm sure this is some stupid CSS mistake, but in this template website I'm making, whenever I put more than one line of text in the content div, it misplaces the two background divs on either side of it. Here is the HTML and CSS:
http://pastebin.com/txmQzbx3
I have tried everything I can think of, but I don't know what could be wrong with it.
First, there's no such thing as float:center. If you remove that and change the position value for your content div from relative to absolute, then it works.
http://pastebin.com/B9tXgXYj
If you want to keep it fixed width then just add float: left to the content css
If you want to have it fluid then you'll want to take a look at using the display: table|table-row|table-cell css properties to do it
Try placing your backgroundright div above content div,
<div id="backgroundright">
</div>
<div id="content">
<p></p>
</div>
Hope this helps
I am looking at different CSS modularising methodologies and trying to implement some of their ideas into a new project. Some I am looking at are SMACSS, BEM and MVCSS.
I understand that in SMACSS layout rules should be in my _layout.sass file which is fine so my styles are as follows:
.container
+container
+margin-leader
+margin-trailer
+container sets this element as a grid container from Compass Susy and then adds top and bottom margin.
I now want to add a border radius and box shadow to this element.
Where do I place these styles as they don't fit within the layout stylesheet?
2nd issue is:
I have created a media block which basically allows an image to be floated left and some text to be floated right. It has a flipped variation that flips the two around.
I need to be able to specify the width of the image but where does this go? I have for now placed it as part of the media block module code but surely that means that ALL images inside future media blocks will be that width. It seems like the width of the image needs to be elsewhere but I am just not sure where. I know I could add classes to the image in the markup like "small", "large" etc but to be that sounds like adding presentational stuff to the markup which I thought was what were were trying to get away from.
3rd issue:
I have created a title-box module that is marked up as follows:
<div class="title-box">
<h3 class="title-box__header">Upcoming Events</h3>
<div class="title-box__content">
</div>
</div>
I want 3 of these boxes side by side. I know how to do it but unsure of the correct modular way to do this. Any thoughts?
1) According to BEM methodology you can use mixes to solve your first issue:
<div class="container widget"></div>
This means that there are 2 different blocks on the same DOM-node: container (knows about layout) and widget (styles the block with border radius and shadow).
2) You can add class to these images making them elements of media block and then specify types of images with modifiers:
<div class="media-block">
<img class="media-block__image"/>
<div class="media-block__description">Some text</div>
</div>
<div class="media-block media-block_float_left">
<img class="media-block__image media-block__image_type_important"/>
<div class="media-block__description">Some text</div>
</div>
So image elements of media block which are important can be styled with bigger size.
Also you can use modifiers to set float direction.
3) I'm not sure if I got your question right but I think you have two options:
Style title-box itself (e.g. as float with some margins).
Add styles to title-box in it's parent file with cascade if it's possible to use title-box somewhere outside with different layout.
I am not very good with CSS, HTML and mark-up, but after having read many and many CSS articles, I just have no idea how to get the div-elements on the right place.
Current site in tables: http://daweb.nl/
Current attempt in div: http://daweb.nl/daweb/
I would like to have the right-menu and content in the right place. If you have general comments regarding the current state of my HTML and CSS, please feel free. I have worked with CSS, HTML much, but never built a site from scratch with div-elements.
http://jsfiddle.net/qJBpk/10/
Check the preview here.
This is a basic setup, you have a wrapper div which contain all your structure: a header, three columns and a footer.
Wrapper div has margin set to auto, this will allow it to be horizontally center placed (along with all its content) in the browser window.
The three columns have the float property set to left, so that each one is placed next to the other.
The footer has a clear property set to both, this will allow it to be placed after the most tall floated column, to avoid a layout crash.
Div elements are block level elements. This means, among other things, they take up all the avaiable width space, so no need to set a width for the #header and #footer divs.
EDIT
To avoid cross browser incompatibilities and issues, it's better to have a CSS reset (a set of CSS rules which will make all elements shows as much as possible the same across all browsers), like the YUI. Place it first before any other CSS code.
This is a good place to start learning about css positioning.
Also, after looking at your code, you may want to wrap certain elements in a wrapper div so you can position everything inside it with one CSS rule.
Instead of:
<div id="menu-header">
<h1>HEADER</h1>
</div>
<div id="menu-body">
<p>MENU BODY</p>
</div>
Try something like:
<div id="menu">
<div id="menu-header">
<h1>HEADER</h1>
</div>
<div id="menu-body">
<p>MENU BODY</p>
</div>
</div>
That way if you want to move the menu and everything in it you can write a CSS rule like this:
#menu {float:left;margin:15px 0 0 25px;}
just another one! ;-)
full-working-demo: http://so.devilmaycode.it/converting-tables-to-css-layers
hope this help!
Looks like a simple 3 div layout. You need to create 3 divs. One for the left, middle, and right-hand content. These three divs will be placed in a wrapper div.
So take your left_menu, content, and right_menu divs, give them a width and set them to float: left; so they will all be placed beside each other. Place them inside a wrapper div that is larger than all three. You're done!
Basically I'm having some problems with Z-Index. Although I'm not amazing at CSS I would reckon I was reasonably good, but really can't work this out.
You'll see at the URL...
http://howcode.com/code/
... that my problem is that links in the returned 'Popular' results aren't clickable or anything. I've concluded this is due to their Z-Index being messed up. I had to fiddle and tweak with Z-Index to get the tabs - Popular, Top Rated, Featured etc. - to show above the codebg div.
When I adjusted the Z-Index so that the results were definitely on top, they acted as normal - text could be selected, the ratings images hovered, etc. etc. However the downside to this was that my Popular, Top Rated, Featured tabs were all placed BENEATH the background image for the returned results.
If anyone can post a workaround or alteration to my CSS that would be much appreciated.
Please don't forget this is a test site and design and any other URLs are likely not to work, I haven't uploaded any database configs yet or whatever!
Attached are a couple of screenshots to clarify what I mean:
This is what I WANT to happen (not that in actual fact in this screenshots link aren't clickable, just to demo my point though):
This is what DOES happen when I adjust the Z-Index properties (I don't want this!):
Thanks y'all!
You need to remove this:
z-index: -1 !important;
From your .codebg class, which will result in your #2 screenshot above. (As a side note the children can't have a higher z-index than their parent, so everything inside .codbg is -1, behind the page) Then, you need to fix the tab images :) The problem is not that they're behind the background, it's that they're transparent, and look darker on top of a darker background. Here's the image (may change in this answer once you update it, pointing directly to it):
alt text http://howcode.com/images/tabs.png
They look fine here because of the white background, but if you open them up in an editor, you'll see they're transparent, just make the the three tabs fully (or at least more) opaque since that seems to be what you're after.
not the best solution but here it goes.
inside the content div move tabs div after codebg so this
<div id="content">
<div id="tabs">
</div>
<div id="codebg">
</div>
</div
becomes this
<div id="content">
<div id="codebg">
</div>
<div id="tabs">
</div>
</div
then add to #tabs
position:absolute; top:232px;
to #content
padding-top:53px;
this is a quick and dirty fix. otherwise you have to rethink your whole layout
You could also put your background-image from code-bg on content instead, and adjust content's width and border-radius