I want the red border to be tight around the blue text (e.g. no whitespace). What is causing the whitespace and how do I remove it?
#propertyDetails .display_address {
font-size: 1.75rem;
font-weight: bold;
color: #3498db;
margin:0px;
padding:0px;
border: 1px solid red;
}
<div id="propertyDetails">
<div class="display_address">Test Address</div>
</div>
Try line-height:16px; if that's not compatible with your screen, adjust the pixels.
The line-height is what is causing it. Make it equal to 1, which is relatively 100% of the font-size so that in the event of different font-size, you don't need to change the line-height again.
#propertyDetails .display_address {
font-size: 1.75rem;
font-weight: bold;
line-height: 1;
color: #3498db;
margin:0px;
padding:0px;
border: 1px solid red;
}
<div id="propertyDetails">
<div class="display_address">Test Address</div>
</div>
Related
At the moment, I have page headings which I want to style like this:
<div class="page_header">Categories</div>
My style looks like this:
.page_header {
font-family: markerfelt-thin-webfont;
text-shadow: 1px 1px 2px #000000;
font-size: x-large;
color: #bbbb75;
padding-bottom: 10px;
}
But I have been asked to add a small image to the left of the text.
So, I could go an edit every page header:
<div class="page_header"><img src="http://www.clker.com/cliparts/W/e/S/a/V/m/push-pin-th.png" />Categories</div>
But I was hoping I could edit the CSS to accomplish this for me. Is there a way I can add an image to the CSS, left of the text (With a (missing) gap between the image and the text)?
I have attempted the ::before in the css (New to me, so I am doing something wrong), like this:
.page_header {
font-family: markerfelt-thin-webfont;
text-shadow: 1px 1px 2px #000000;
font-size: x-large;
color: #bbbb75;
padding-bottom: 10px;
}
.page_header::before{
content: url('~/images/pushpin.png');
}
But all that happens is I get a huge gap before the heading. But if I use http:// to reference the image, it works. Using ~\images\myimage.png fails.
you try with code below maybe can help you:
.page_header {
font-family: markerfelt-thin-webfont;
text-shadow: 1px 1px 2px #000000;
font-size: x-large;
color: #bbbb75;
padding-bottom: 10px;
position:relative;
padding: 30px 0 0 120px;
}
.page_header::before{
position:absolute;
left:0;
top:0;
content:url('http://www.clker.com/cliparts/W/e/S/a/V/m/push-pin-th.png');
}
Working Demo
Here's how you can style all headers with the same image:
.page_header {
background: url('http://www.healthylivingjunkie.com/wp-content/uploads/2014/10/bulletPoints.png') left center no-repeat;
background-size: 14px;
font-family: markerfelt-thin-webfont;
text-shadow: 1px 1px 2px #000000;
font-size: x-large;
color: #bbbb75;
margin-bottom: 10px;
padding-left: 20px;
}
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
There's a few ways to achieve this. Either by use of the :before selector or by setting the background of the div to your image and pushing the text across using padding.
You could set the background image of the div and pad the left side to move the text over
padding-left:120px; // width of image + spacing
background: url("http://www.clker.com/cliparts/W/e/S/a/V/m/push-pin-th.png") no-repeat;
Yeah, you don't have to go to code part and you can do this with css using pseudo element before as you have to insert it before the element.
.page_header:before{
content:url('http://www.clker.com/cliparts/W/e/S/a/V/m/push-pin-th.png');
}
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
I'm trying to make a headers for the chapters in my short story using a collapsible div. I use two different fonts / styles and three layers of divs to make it look the way I want it to. Unfortunately the text is several pixels too low, and it hurts my eyes when I see it.
I know that inline display doesn't really allow for vertical align (my paddings are ignored). I tried using "inline-block" to no avail. I tried top-padding the left ">" symbol, but that makes the entire construction move downwards. I've been hammering at this for the past 2 hours, I give up :D.
Here is my HTML markup as well as the CSS.
<div class="ShortStoryHeaderDiv" onclick="toggleContentDiv('h1','c1');">
<div class="ShortStoryHeaderCenterDiv">
<div id="h1L" class="ShortStoryHeaderDivLeft">></div>
<div class="ShortStoryHeaderText">Must... align... text</div>
<div id="h1R" class="ShortStoryHeaderDivRight"><</div>
</div>
</div>
CSS:
.ShortStoryHeaderDiv
{
margin-top: 1em;
margin-bottom: 1em;
width: 100%;
height: 3em;
text-align: center;
background-color: #DDD;
cursor: pointer;
}
.ShortStoryHeaderCenterDiv
{
padding-top:0.2em;
width: 70%;
margin-left: auto;
margin-right: auto;
}
.ShortStoryHeaderDivLeft
{
display:inline-block;
padding-right: 3em;
font-family: Verdana;
font-weight: bold;
text-shadow: 0 0 4px #555;
color: #000;
font-size: 17pt;
}
.ShortStoryHeaderDivRight
{
display:inline-block;
padding-left: 3em;
font-family: Verdana;
font-weight: bold;
text-shadow: 0 0 4px #555;
color: #000;
font-size: 17pt;
}
.ShortStoryHeaderText
{
display:inline;
font-family: "Times New Roman", Times, serif;
font-size: 1.5em;
text-align: center;
text-decoration: underline;
color: #00F;
}
You could try and use display:table-cell to vertically-align:middle
or set a height and then set the line height to the same.
e.g. height: 40px; line-height:40px;
Managed to make it work by using this in ShortStoryHeaderText CSS class, thanks to SkelDave for reminding me about vertical align. It is awkward that the padding-top ONLY started to work once that vertical-align: top was specified. It is ignored otherwise.
display:inline-block;
padding-top:3px;
vertical-align:top;
I would love to style my input field very similar to the divs I am building. However, I am unable to solve sizing issues.
Here is an example
http://codepen.io/anon/pen/kLwlm
And here is one more (with overflow:visible and fixed height)
http://codepen.io/anon/pen/Fxjzf
As you can see, it looks very different than the divs, and no matter what I tried, I could not make them look similar. First of all, I would love to make the input in a way that the text will pop put (overflow: visible? not working).
Secondly, the height should be similar to the divs. Setting the height and line-height properties does seem to effect the temporary text, but when it's clicked (and started to type) it breaks. (check second example)
Shortly, open to suggestions.
Try this solution here:
#import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);
body {
margin: 100px;
background-color: #f7f7f7;
}
input{
border:0;
}
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
line-height: 40px;
}
div {
padding: 1px 0px 13px 2px;
color: #999;
}
I tried placing the input in div and then making the input background to transparent. YOu can play with the spacing to you liking, but it works http://codepen.io/anon/pen/Brcpl
I came up with this JSFiddle. I removed the line-height and positioned text using padding instead (that fixed the aligning of the input text).I also styled the placeholder. Here is a part of your CSS which I changed (do read the notes in it).
div, input{
font-family: 'Playfair Display', serif;
font-size: 40px;
background-color: #ff44ff;
width: 100%;
margin-top: 20px;
padding: 5px 0px 5px 0px;/*use padding to adapt the size*/
}
/*Change placeholder properties*/
#s::-webkit-input-placeholder {
color: black;
}
#s:-moz-placeholder { /* Firefox 18- */
color: black;
}
#s::-moz-placeholder { /* Firefox 19+ */
color: black;
}
#s:-ms-input-placeholder {
color: black;
}
PS: I do suggest styling the input-box differently so the visitors of your website notice it is actually a input-box.
What about this one: http://codepen.io/anon/pen/lcgAD
css
div input {
border: none;
font-size: 40px;
width: 100%;
background: transparent;
color: #000;
font-family: 'Playfair Display', serif;
}
div input:hover {
}
div {
color: #000;
background-color: #892;
height: 41px;
}
html
<div>
<input placeholder="Enter E-Mail ayxml#gmail.com" value="Enter E-Mail ayxml#gmail.com"/>
</div>
this is my html
<div class="logoArea">
<img src="images/oifcoman-logo.jpg"/>
<div class="titleClass">Call Center Dashboard</div>
</div>
this is my css
.logoArea {
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
}
.titleClass {
color: #343434;
font-weight: normal;
font-family: 'Ultra', sans-serif;
font-size: 36px;
line-height: 42px;
text-transform: uppercase;
text-shadow: 0 2px white, 0 3px #777;
margin:auto;
background-color:red;
width:40%;
top:10px;
}
This is what the result:
I want it to be this:
Set the image float:left; and the text display:inline-block; and the .logoArea text-align:center;.
Working fiddle
There are few ways to solve this. Here is one with minimal changes to your existing styling.
.logoArea img {
float: left;
}
Usually it requires additional changes in the code for actual centering in the parent window, but it seems to go well with the other styles you already have.
EDIT
Looking again at the result, I'm having second thoughts. My solution is good only for non-dynamic elements (elements that won't change dynamically but remain the same). Since it appears to be a header and therefore a relatively static element, my solution may still be valid, only with adding a required amount of padding-top to the center div. I don't know how much because in your example you used a very large font-size and I have no idea of the size of the image.
You can use CSS vertical-align:middle if the element is td (not div) or try this trick: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Try using:
<div class="logoArea" style="display:table-cell; vertical-align:middle">
<img src="images/oifcoman-logo.jpg"/>
<div class="titleClass">Call Center Dashboard</div>
</div>
Try this:
HTML:
<div class="logoArea">
<img src="http://i.stack.imgur.com/O3d6S.jpg?s=128&g=1"/>
<div class="titleClass">Call Center Dashboard</div>
<div style='clear:both;'></div> </div>
CSS:
.logoArea {
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
}
.logoArea img {display:block;width:100px;height:100px;float:left;}
.logoArea .titleClass {float:left;}
JavaScript (must include jQuery first)
$(document).ready(function(){
var h=$('.logoArea').height();var ch=$('.logoArea .titleClass').height();
var pTop=((h-ch)/2)+'px';
$('.logoArea .titleClass').css('paddingTop',pTop);
});
Demo: http://jsfiddle.net/zcAjq/
I want to wrap an <a> around a div. When I add that, the border's colour remains the same orange the text is colored.
The orange turns to black when I toggle color rule in Chrome's developer tools, however I obviously don't want the viewer to be required to do the same.
Notice that only the Block Fuse project box has this issue, none of the other boxes do because they do not have an <a> tag.
I have reproduced this issue in:
Chrome Version 23.0.1271.95
Chrome Canary Version 25.0.1342.0
Here is the relavent html:
<a href="projects/blockfuse.html">
<div class="project">
<div class="projectTitle">Block Fuse</div>
<div class="projectDescription">Block Fuse is a game about knocking as many blocks onto the floor as possible.
<div class="projectImage"><img class="projectImage" src="images/BlockFuse.png"></img></div>
</div>
</div>
</a>
Here is the relavant css:
div.projectTitle {
text-align: center;
font-size: 20pt;
color: #F90;
padding: 20px 0px 15px 0px;
font-family: "Arial", "Helvetica", Sans-Serif;
border-radius: 20px 20px 0px 0px;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: black;
background-color: #444;
}
div.projectDescription {
height: 310px;
font-family: "Arial", "Helvetica", Sans-Serif;
font-size: 12pt;
color: #EEE;
text-shadow: 1px 1px 1px #000;
background-color: #777;
padding: 17px;
border-radius: 0px 0px 20px 20px;
}
Try it live on my website: http://www.rollingkinetics.com/index.html
I think the issue here is that you need to set the color for the a:visited selector. I did not see the issue initially, but i did after I clicked on the link.
I recommend to place the hyperlink inside the div. This makes a better behavior as I experienced.
(in this case the link will be applied for the children of the div and the outer wont get additional a:link color)
make text decoration none on hyper link just add this
a{
text-decoration:none;}