I want to have my UL have half triangles as their background. I would really like to use only CSS shapes for this project. I have used some code form this site, however I need some additional help. I am unable to have the text centered in the shapes. What can I adjust to accomplish this?
Code: http://jsfiddle.net/akAh9/
Swapping
right: 6em;
... for ...
right: 50%;
... seems to do the trick (with this you effectively move the lower point of that CSS triangle to the middle of the .diamond element).
Related
I'm using bootstrap 4 and I would want to achieve this layout for my website. I have the idea that we can use carousel since its a slider. When I click on the next or previous button, both the yellow slider and the image on the right changes. I also need the slider arrows to be on that position.
Although, I can achieve this through CSS position property for example.
position: absolute;
top: some value
left: some value
.....
which will be under the position relative. But I want to achieve this a bootstrap way with some custom CSS so that the responsiveness of this layout won't break.
What would be the best practice and approach to have such UI keeping in mind it should be responsive too.
Thank you in advance.
this is what I'm trying to achieve: http://imgur.com/2OqnSIu
Three hours passed and I still can't figure it out how to do this. I've tried everything with positions and z-index but nothing works. I really don't want to use everything in a single image(border + pictures) and using it as a background because I'm trying to do a responsive website. Any ideas ? Thanks
I've tried to understand your question, but without real examples it's very difficult to uderstand:
Anyway, here's a JsFiddle which I've created which I do believe is what you need.
I do have a container with a padding, which is holding another container with a border. On top of that particular border an image is showed.
The above example is achieved by using z-index and relative positioning:
img { position: relative; z-index: 100; top: 100px; left: -30px; }
So, for fun I'm building an iOS homescreen. I'm displaying the icons using <ul> and <li>.
The li's are build like this:
<li><img/><img/></li>
The first image is a delete button with display:none, the second image is the actual icon. If you long click the second image, the first one fades in. However, I do not know how to display the first image in the top right corner of the second image using css. Any help would be greatly appreciated.
There are tons of ways you can do that. Assuming the icon takes up the full space of the li, you could do this:
li {
position: relative;
}
li img:first-of-type {
position: absolute;
top: 0;
right: 0;
}
If you want it to be pure css you need these two to be positioned absolutely position:absolute;. Then make the 'x' button image the same size as the icon image. Then just give those two images the same left and top value.
#first_mage_id, #second_image_id {position:absolute; left:X; top:Y;}
Remember to replace X and Y with some values (depending on where you wish it to be). If it doesn't work show us your code so we can help you.
If you click here: http://www.ideagasms.net/index2 you'll see the nav menu surrounds the banner image, like a frame. It was put together that way using three div's, two of which are css rotate 90 deg, position absolute. Of course, as soon as you resize the window the navmenu breaks.
There must be a better way to build a frame-like menu. A couple suggestions, or examples, I just need ideas on how to build something like this. Maybe a jquery solution or something would do the trick.
You can change #nav-left and #nav-right positions to absolute, then center them with left: 50% (like you did with #headerwrapper), and correct their positions with margins, for example margin: 0 auto 20px 122px for #nav-right.
Mark their parent element with position: relative; (but without any top/left/bottom/right propertes), that way the rotated navigation elements will be positioned within their parent rather than the window.
However, I think your navigation concept is novel, but terrible (and also visually unappealing) from a usability perspective because people can't read rotated English text easily.
In here and here, there are some examples of the quiz questions that are used in Udacity.
How can I achieve such an effect ? (i.e. : how can I build a page where I have an image, and then some form elements over that image ?)
Maybe I could use a table with the image as background. Would that work ? Would it be reliable across browsers ?
There are different possibility.
You could place the elements with "absolute" or "relative" position in order to get the element exactly over the image.
You could also draw with a CSS3/HTML5 Canvas.
I think the best thing to do a simple form with an image should be following this tutorial
If you manage to create that then you can tweak the CSS code in order to be able to place the card where you want
They just have an image and then absolutely position form elements on top of it.
input {
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
Just need to change top and left until the input element is where you want it. The input elements can sit right on top of the image.