I have this simple code-
<div>
<div>▼</div>
<div>▲</div>
<div>▼</div>
</div>
And I'm trying to make the arrows much more larger -
I've tried to play with this style rules -
div{
height:50px;
width: 50px;
}
But nothing is happening to the arrows sizes.
So what am I doing wrong here? Is it possible to change it's size anyway in css?
Thanks for any kind of help
Use font-size instead.
div {
font-size: 50px;
}
<div>
<div>▼</div>
<div>▲</div>
<div>▼</div>
</div>
It's text do font-size would work
div {
height:50px;
width: 50px;
font-size:50px;
color:green;
}
<div>
<div>▼</div>
<div>▲</div>
<div>▼</div>
</div>
Related
Please do not mark this as a duplicate as i have got all of the correct code (as far as i can see) in and i think something is somehow over riding it. Used Chrome Inspector but it isnt picking up any problems.
I am trying to vertically align the text in the boxes (i dont want to id them all separately and pad them as if the text needs updated then so will the css).
Here is the code:
CSS:
.draggable{
color: #ffffff;
background-color:#EE3C96;
display:table-cell;
vertical-align:middle;
font-size:12px;
font-weight:bold;
text-align: center;
width: 90px;
height:90px;
float: left;
margin-left: 10px;
padding: 5px;
}
HTML:
<div class="draggable">
Lost time - employee absence
</div>
<div class="draggable2">
"Safe Place" to work
</div>
<div class="draggable">
Lost resources - employees leaving
</div>
<div class="draggable">
Financial penalties
</div>
And here it is on Codepen:
http://codepen.io/lbarnes/pen/vkrib
draggable and draggable2 are essentially the same (need them separate as it is used in the jQuery :)
Thanks in advance, hopefully someone can find something as i have tried everything lol!!
I recommend you to use the double span tip to vertically align your multiline text.
First, a simple exemple
And now, adapted to your needs :
<div class="draggable">
<span><span>
Lost time - employee absence
</span></span>
</div>
<div class="draggable2">
<span><span>
"Safe Place" to work
</span></span>
</div>
You can keep your current HTML markup, and add these spans via jQuery (I won't recommend it) :
$('.draggable, .draggable2').contents().wrap('<span><span></span></span>');
Then, add this CSS to get your vertical alignment :
/* Vertical align */
.draggable, .draggable2 {
display: block;
width: 90px; height: 90px;
line-height: 90px;
}
.draggable>span, .draggable2>span {
display: inline-block;
vertical-align: middle;
line-height: 0;
}
.draggable>span>span, .draggable2>span>span {
line-height: 20px;
}
Your CodePen forked
You can put the text in the box between <p></p> tag than add in your css the following lines:
.draggable p {vertical-align: middle;}
.draggable2 p {vertical-align: middle;}
You can add the following code to the draggable classes to solve the issue.Remove the display:table-cell
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
This would center the text inside the div both horizontally and vertically
This works for webkit browsers.For Mozilla
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
and IE
display:-ms-box;
-ms-box-pack:center;
-ms-box-align:center;
More info on browser support
I'd like to force the text of a really long word to stay on the same line as my image. I know the word will need to wrap but I'd like the first line to stay aligned with the image instead of the first line jumping to the line after the image. My layout needs to be dynamic so setting a static width or height for the text is out of the question. Here's my code:
HTML:
<img class='inline-img' src='design/dislike.png'/>
<p class='inline-text'>LotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftextLotsoftext</p>
CSS:
img.inline-img { height: 24px; width: 24px; margin-right: 4px; float:left; }
p.inline-text { color:#F00; word-wrap:break-word; display: inline;}
Fiddle: http://jsfiddle.net/JvFAw/
UPDATE: I may put the image in the background of a parent DIV and use a margin to offset the text from the image unless somebody can suggest something more elegant
UPDATE2: Made a real world example as recommended by paulie_d
http://jsfiddle.net/JvFAw/4/
The pseudo-class "first-line" and "white-space" property might be what your looking for.
p:first-line {
white-space: nowrap;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
For lack of a more elegant solution, I think I'll do this:
HTML:
<div class="container">
<p class='inline-text'>antidisestablishmentarianismism</p>
</div>
CSS:
div.container {
max-width: 211.5px;
background: url(http://www.geoengineer.org/templates/rt_voxel/images/icons/icon-home.png) no-repeat left top;
padding-left: 20px;
}
p.inline-text {
color:#F00;
word-wrap:break-word;
font-size: 18px;
}
Fiddle: http://jsfiddle.net/JvFAw/7/
I'm trying to achieve, that the div's will behave like an example on picture, using css:
Is there any clean way to do this? I achieve this using javascript to calculate "left" div height and "main" div width and height. But i dont like this solution...is there any way to do this using css only?
Edit:
Page must not have scrollbar...so page's height is always max 100%, and no more...
thanks
If the sidebar (or any other div) is 100% height, and on top you have a 30px header, so that causes your container to be 100% + 30px height.
In the future you will have in css3 calc():
http://hacks.mozilla.org/2010/06/css3-calc/
This will solve your problem.
But for now you can add overflow: hidden; to the html and body section, but I recommend calculate the height of the sidebar ( container height - header height) using Javascript.
Check fiddle here
If you mean the two-column layout, you do it with pure CSS like this:
.container {
background-color: #aaaaaa;
}
.left {
float: left;
width: 100px;
clear: left;
}
.right {
margin-left: 100px;
background-color: #888888;
}
and HTML:
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
Live demo: jsFiddle
The div on top can be achieved without any special CSS. To place something below (a footer for example), you'll need to use clear: both.
Without any code it is hard to determine what you want. Here is a extremely simple version of what I believe you want.
HTML:
<div id="header">
</div>
<div id="side">
</div>
<div id="content">
</div>
CSS:
#header {
width:100%;
height:50px;
}
#side {
width:300px;
height:100%;
float:left;
}
#content {
width:660px;
height:100%;
float:left;
}
jsFiddle
So i need to make a div a link, and have the background colour change when hoverng over this div with the mouse. The problem is, this div has two child divs inside it and when i move the mouse in to the bounds pf the parent div it is actually on a child div. So while i can make it so that one of these child divs changes on hover the second one does not.
So i guess my question is, is there a way to make both child divs change when hovering one using css?
I dont mind changing code to use tables if thats easier but I need to find some way to make the entire div / tr change when hovering on one child / td.
What im actually looking to create here is something almost the same as th youtube recommended videos boxes (on teh right of the page)
Thanks in advance
CSS
#parent {
width: 318px;
height: 90px;
background-color: #FFFFFF;
margin: 5px 0px 5px 0px;
font-size: 10px;
}
#parent :hover {
background-color: #0000ff;
}
#child1 {
width:120px;
float:left;
}
child2 {
width:188px;
float:right;
}
HTML (with some other stuff)
<c:forEach var="item" items="${list}">
<a href="webpage?item.getinfo()">
<div id="parent">
<div id="child1">
<img src="img.jpg">
</div>
<div id="child2">
${item.getinfo2()} <br>
${item.getinfo3()} <br>
</div>
</div>
</a>
</c:forEach>
Code is something like that. Ive been hacking it up for the last while but that was something like what i had before
If the one you're able to hover over is the first, you only need CSS:
.mavehoverable > div:hover, .makehoverable > div:hover + div {
background-color: red;
}
With this HTML:
<div class="makehoverable">
<div>Child 1</div>
<div>Child 2</div>
</div>
Hovering over Child 1 will also highlight Child 2. Vice-versa doesn't work in CSS though, so that would need some JS.
I think you might just need to fix a line of your CSS. Change:
#parent :hover {
background-color: #0000ff;
}
to:
#parent:hover {
background-color: #0000ff;
}
That seemed to work for me.
Have you tried using jQuery? You could do something like this:
http://jsfiddle.net/UtdYY/
Html:
<div class='color'>
<div class='color child'>test123</div>
<div class='color child'>test456</div>
</div>
Javascript:
$('.color').hover(function(){ $(this).toggleClass('red'); });
CSS:
.red { color:red; }
.child {height: 50px; }
Edit: Cleaned up the javascript, thanks elclanrs
Try this http://jsfiddle.net/rsarika/rtGw5/1/
I am have buttons like this:
<button type="button" class="img img_button_bla" onclick="...">Bla!</button>
The img class is:
.img {
display:inline-block;
border:0 none;
background-image:url(/i_common/master.png) !important; /*regular sprite image*/
background-image:url(/i_common/master.gif); /*sprite image for ie*/
}
The img_button_bla class simply sets the width, height and background position.
What I am trying to do, is to style the button so the Bla! does not show on the button. I tried text-indent:-9999px; Which mostly worked, but not in IE7. For some reason, in IE7 only SOME of the buttons styled this way do not show up at all, but the space the button takes up is just blank.
I have also tried setting line-height:0;font-size:0 which almost works except for a little black line that shows.
I also tried changing it to block:display which fixes the problem in IE7, but then messes up the layout since needs to be a inline-block.
I have tried searching around, but couldn't find any answer where it is using a button tag, a display of inline-block and using a sprite image.
Anyone have any ideas of what I could do to get this to work? I don't want to remove the text inside the button tag(there where no problems before because they used to be empty) for accessibility reasons and so the buttons will still show up in the mobile version of the site(basically no css on it).
Edit:
I was able to make an example file showing the problem, although in the example it doesn't work in IE8 either. Below works in FF and Chrome
<html>
<head>
<STYLE TYPE="text/css">
#content {
width: 980px;
margin-left: auto;
margin-right: auto;
padding: .5em;
background-color: #fff;
text-size: 1.1em;
}
.left {
float: left;
}
.right {
float: right;
}
.img {
display:inline-block;
border:0 none;
background-color:red; /*using color instead of sprite image for easyer testing */
text-indent:-9999px;
}
.img_button {
width:50px;
height:25px;
}
</STYLE>
</head>
<body>
<div id="content">
<div class="left">
<button class="img img_button">Hi!</button>
</div>
<div class="right">
There
</div>
</div>
</body>
</html>
FYI, you can style input type=submit instead of having to rely on the buggy button element which is NOT recommended because in certain cases it passes the wrong information.
I have a snippet # http://work.arounds.org/using-css-sprites-with-input-type-submit-buttons/ which you can base it off..
<input type="submit" id="submit" value="Get rid of me please">
<style>
input#submit {
border:0;
background:url(sprite.gif) no-repeat 0 200px;
text-indent:-999em;
line-height:3000;
width:200px;
height:200px;
}
</style>
The line-height is for IE and text-indent is for modern browsers. You might need to specify a text-indent of 0 for IE since it doesn't apply text-indent offsetting.