So, I have this thing where this image sits on top of anything, regardless of how much I alter the z-index. I want to make it so that the bluff tag sits on top of the .quoteicon, but no matter what I do it just doesn't work. The little quotation mark I've put inside of it shows up, but the red background of it is hidden behind.
I want it to look like this (I had to do this in photoshop, just to explain what I want.):
http://i.gyazo.com/3eddbf25f79c97fb7d646d6050c1b23a.png
But it currently looks like this (You can see the little white quotation sitting in front of it.):
http://i.gyazo.com/0859417a1746ba934896dea46acc073d.png
The CSS:
.quotewrap{
margin-bottom:30px;
}
.quoteicon{
width:60px;
margin-bottom:-58px;
padding-right:5px;
border-right:5px #F0F0F0 solid;
z-index:998;
}
.quoteicon img{
border:5px solid white;
outline:1px solid #F4F4F4;
}
.bluff{
background-color:red;
text-shadow:1px 1px black;
height:34px;
width:34px;
color:white;
font-family:arial;
line-height:34px;
text-align:center;
font-size:20px;
margin-top:-10px;
z-index:999;
}
THE HTML:
<div class="quotewrap">
<div class="quoteicon">
<img src="https://33.media.tumblr.com/avatar_d020f5726f28_48.png">
</div>
<div class="bluff">❝</div>
</div>
See this fiddle: http://fiddle.jshell.net/d3cosgc7/
You have to understand the principles of position relative and position absolute.
That will help you a lot.
Take your time and go through the fiddle, if you have any questions, let me know.
Cheers,
z-index attribute works only for containers with position: relative|absolute|fixed;
Related
I am creating a web page that needs to be responsive.
Here is an image of it:
Here is the HTML:
<div class="smallBoxes">
<div class="leftHomeBox">
<a class="Description" id="Desc_1">WHEN?</a>
</div>
</div>
and the CSS:
.smallBoxes{
display:block;
margin-left:25%;
margin-right:20%;
width:auto;
}
.leftHomeBox{
width:100%;
float:left;
margin-bottom:10px;
padding:10px;
padding-bottom:0;
height:65px;
}
.Description{
border:5px solid #ffffff;
padding:5px;
}
I am trying to keep the "when" box in the centre of the div, for all screen sizes. AS things are now, both margins will change, but at different rates eg they do not stay consistent relative to each other and so the "when" box doe s not stay central.
I have looked at other websites and have not been able to find a working example.
I have tried using
margin-left:20%;
margin-right:20%;
width:auto;
but this does not work. I have been working on this all day and I have read all I can find but I cannot seem to get this to work. I have tried every possible thing I can think of.
Surely this is something that is required often and cannot be very difficult to achieve, but I am not able to find a clear answer to how to achieve this, or what I am doing wrong.
If someone could provide a fiddle of a working solution I would be very grateful.
use
CSS
.leftHomeBox{
text-align:center
}
DEMO
.Description
{
display:block;
margin-left:auto;
margin-right:auto;
}
This should be work.
You can apply a text-align: center on an <a> tag.
.leftHomeBox{
text-align:center
}
It will center the link without using margins
Fist of all, pls see this Question and the Demo
You can see even set the margin:0px; to the element, there's still a space between the text and the element border. It's a problem when I put Chinese and English text in one line, because the space for English and Chinese is not the same. Anybody know how to solve this?
I know it's not a big issue, but want to make it perfect to look, also want to learn more about css and html. Thank you for your attention.
You can reduce the height's lines of paragraphs with the line-height property:
* {
margin:0px !important;
padding:0px !important;
}
.di_header{
display:table;
width:100%;
}
.di_h_en{
width:30%;
height:100px;
display:table-cell;
vertical-align:bottom;
text-align:left;
border:solid 1px red;
}
.di_h_cn{
width:70%;
display:table-cell;
vertical-align: bottom;
text-align:right;
border:solid 1px red;
}
.di_h_en p{
font-size:32px;
line-height:30px;
border:dashed 1px black;
}
.di_h_cn p{
font-size:24px;
border:dashed 1px black;
}
<div class="di_header">
<div class="di_h_en"><p>I'm left</p></div>
<div class="di_h_cn"><p>I'm chinese 我是中文</p></div>
</div>
Here, I put a line-height a little smaller, so it reduces the margin with border. Play with the 30px value to see the change.
this is happening becuase both <p> contains different font-size.. you can fixed them by using line-height property.
Add the line-height in the CSS. you use 32px font-size on another p element.
.di_h_cn p{
font-size:24px;
border:dashed 1px black;
line-height:38px; /* Add this line*/
}
Here is a DEmo. http://jsfiddle.net/kheema/TkfSx/13/
Can you try using margin-bottom:0 for <p>.
Just keep font-size same for both or like mentioned above use line-height and play with it until you are satisfied.
demo:
Jsfiddle
or
Jsfiddle2
I think you want to remove the margin at the top of text inside the cell. If this is what you want then remove the height:100px from the .di_h_en{your-styles-here}
I am working on a webpage for MLA citation. In the top right corner I would like a little box with a gear to configure settings.
Here is the css:
#setings{
display:block;
height:50px;
width:50px;
background:#E1E1E1 url('gear.png') no-repeat fixed center;
background-size:45px 45px;
border: 2px solid #AEAEAE;
border-radius:5px;
position:absolute;
top: 5px;
right: 20px;
}
And here is the (very simple) html:
<div id="setings"></div>
The box does appear in the top right corner like I want it to, but the gear image doesn't show up. I have already searched stackoverflow and other websites for an answer but I not found anything so far.
Does anyone know what is wrong with me code?
Thank you so much!
Take "fixed" off of your "background:" line.
Maybe I'm stupid atm, but I can't figure out how to do this:
http://s24.postimg.org/k9fl1y2s5/arrow.png
As you can see, the pointer/arrow inside the nav-element is transparent, but shows the content instead of it's parent, the nav-element.
This is my HTML:
<nav>
...
<div id="pointer></div> <!-- this is the arrow -->
</nav>
<div id="content">...</div>
How can I achieve that? Ugh, hope you understand what I mean... :)
Ok it took some doing but I think I have a start for you:
http://jsfiddle.net/uLDzA/2/
The main problem here is that you can't just set the ARROW to transparent as the menu div will have some sort of solid color that won't let the transparent bleed through to the main background.
I solved this by busting up the menu item into a top and bottom section. The top has text and the bottom is constructed so that we "emulate" a triangle in the middle section and give it a transparent background.
Basically build the arrow into the menu item itself by piecing it together like a CSS puzzle.
<div class="con">
<div class="item">
<div class="item_top">
top
</div>
<div class="item_btm">
<div class="item_btm_lft"> </div>
<div class="item_btm_ptr"> </div>
<div class="item_btm_rgt"> </div>
</div>
</div>
</div>
.con {
width:100px;
height:40px;
padding:20px;
background:url('http://placekitten.com/g/100/100');
}
.item {
width:100px;
background:transparent;
}
.item_top {
background:orange;
text-align:center;
color:#fff
}
.item_btm {
width:100%;
overflow:hidden;
}
.item_btm_lft {
width:40px;
float:left;
background:orange;
border-bottom:2px solid orange;
}
.item_btm_ptr {
width: 0px;
height: 0px;
float:left;
border-style: solid;
border-width: 0 10px 20px 10px;
border-color: transparent orange transparent orange;
}
.item_btm_rgt {
width:40px;
float:left;
background:orange;
border-bottom:2px solid orange;
}
Well, not sure if i got you right but:
I am pretty sure that the pointer/arrow is a seperate img file that is loaded and shown in cases like: mouse-over, active (e.g).
That means, that you creat a new .png File make the background transparent and draw it as you want. All areas where you didn t draw on are transparent.
Let's make it a little easier to understand:
Your navigation is not active nor is your mouse hovering over it. Then you should see the standard loaded img (without the pointer/arrow).
--> we hover our mouse over it or click it:
Your navigation is active now and the new image (e.g. .png file) is shown instead of the old one. This image is drawn with some areas untouched so they are transparent.
You are looking at a modern application of CSS3 techniques as demonstrated by:
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
In your example, the border colors have been made semi-transparent using rgba to specify the color.
However, the reference will not tell you how to build exactly what your screen shot is showing. It will only explain how to create the triangle motif.
I am trying to center text that has a line going through the entire background. On either side of the text, there is some padding, where you cannot see the line at all. I am stumped as far as a good css-only way to go about this. Here is a jsfiddle that is obviously wrong, but its a start: http://jsfiddle.net/gtspk/
HTML
<span class="line">
<h2>Latest Track</h2>
</span>
CSS
.line{display:block; width:100%; border-bottom:1px solid red; margin-top:25px; text-align:center}
.line h2{font-size:15px; text-align:center; position:relative; top:10px; padding:0 15px; display:inline-block; background:white}
The problem here is that I DO NOT want to specify a width, because I will be reusing this for different headers (with different amounts of text). What is the best way to go about this via css?
UPDATE: HEre is a way to do it, but inline-block has fairly lousy browser support: http://jsfiddle.net/gtspk/3/
Here you go. Had to add a wrapping span (necessary so we can set the background to white so the line doesn't hit the text)
http://jsfiddle.net/gtspk/9/
<span class="line">
<h2><span>Latest Track</span></h2>
</span>
.line{display:block; margin:25px}
.line h2{font-size:15px; text-align:center; border-bottom:1px solid red; position:relative; }
.line h2 span { background-color: white; position: relative; top: 10px; padding: 0 10px;}
Right, sorry, misunderstood what you meant by padding. Fixed.