I am stuck with this simple thing. Basically, i want to make something like this:
but my username view covers the whole width of the page and i get something like this:
My css style:
h3{
font-weight: bold;
color: #675eaf;
background-color: #f2f2f2;
padding: 8px;
font-size: 1.5vw;
}
Ok, so i set the max-width to about 20% and added margin:auto and it works.
Related
How to remove spacing from top and bottom on Ion Icons?
I use it in my html like :
<div><i className="close ion-ios-close-empty" /></div>
and this is default style for all ionicons:
display:inline-block;
font-family:"Ionicons";
speak:none;
font-style:normal;
font-weight:normal;
font-variant:normal;
text-transform:none;
text-rendering:auto;
line-height:1;
font-size: inherit;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
And close class is as follows :
.close{
color: #ffffff;
font-size: 50px;
}
I didn't add any style to it, I only increased font-size, but the icon is shown like on the photo.
Is there any way to remove the spacing on top and bottom?
It's a little bit later, but my solution is to set the line-height to 0.6 em:
.close{
color: #ffffff;
font-size: 50px;
line-height: 0.6em;
}
It's more like a work around, but if you play a liite bit with the line-height property, you can get good results.
Hint: If you want to choose shadow, use text-shadow and not box-shadow.
Use line height property if you want 20px height.
Example:
[selector] {
line-height: 20px;
}
I have a right sidebar in my design that pulls in testimonials dynamically, if there are any.
The HTML looks like:
<h4> dynamic content</h4>
Here is my CSS:
#testimonials {
background: #eeeeee;
padding: 30px;
width: auto;
height: auto;
}
#testimonials h4{
font-size: 20px;
line-height: 30px;
font-family: "freight-big-pro";
font-style: italic;
border-bottom: 1px solid #666;
padding-bottom: 20px;
padding-top: 20px;
}
#testimonials h4 strong{
display: block;
font-family:"freight-sans-pro", sans-serif;
font-style: normal;
font-size: 12px;
}
The issue is that when there is no content in the <h4> element, the style is still being picked up and adds a background and a border as specified in the CSS. I am assuming that it's generating the h4. Is there a way to have it be empty if there is not any content?
Update:
I am trying this and it seems to work in jsfiddle, but not in the file:
<script type="text/javascript"> $(document).ready(function(){ if ($("#testimonials").text().length < 65) { $('#testimonials').hide(); } });</script>
It counts the HTML inside as text, I think.
Update
Here is another JsFiddle, but this also probably won't work for the OP as it uses jQuery.
jQuery
//onload:
checkStyle();
//checks if the h4 is empty, and hides the whole div if so.
function checkStyle ()
{
if ($('#testimonials h4').is(':empty'))
$('#testimonials').hide();
else
$('#testimonials').show();
}
This does not necessarily work for what the asker is looking for, but could be beneficial for future readers. It is for not styling the h4, not the parent div as op wants.
Assuming you are ok with CSS3, and the <h4> is literally empty, you can modify your CSS to use the :not and :empty selectors.
CSS
#testimonials h4:not(:empty) {
font-size: 20px;
line-height: 30px;
font-family:"freight-big-pro";
font-style: italic;
border-bottom: 1px solid #666;
padding-bottom: 20px;
padding-top: 20px;
}
#testimonials h4:not(:empty) strong {
display: block;
font-family:"freight-sans-pro", sans-serif;
font-style: normal;
font-size: 12px;
}
Here is a JsFiddle. You can add content to the h4 to see how it works.
Alternatively, you could even do the opposite, and have a display:none; for empty <h4>s:
#testimonials h4:empty{
display:none;
}
Give #testimonials a display: none; property in your CSS; then, just before whatever Javascript code you use to pull in testimonials finishes running, have it check whether it actually retrieved any, and set display: block; on #testimonials if so.
Somewhat related: When asking questions on Stack Overflow, it's ideal to post as much information as possible, as for example the code you're using to retrieve testimonials dynamically -- it's mentioned in the question and its behavior affects what you're asking about, which makes it well within scope. If you'll update your question with your testimonial-retrieving code, I'll update my answer to show a specific solution.
Do a display:none on your css initially when there is no content.
Use javascript or jquery to show content. Styling will be applied when the content gets displayed.
Initially when there is no content:
#testimonials {
background: #eeeeee; padding: 30px; width: auto; height: auto;
display :none;
}
When content gets generated dynamically use:
$("#testimonials").show();
This seems like alot of front side work when it isn't needed. If you are able to output content into the h4, then you are able to output and additional tag.
<section id="testimonials"></section>
Server Side pushes out:
<h4>all my content</h4>
Then your CSS will work without any work from js.
Most likely you have one for each testimonial?
http://codepen.io/maxwbailey/pen/nxaFr
I'm trying to get the text to center vertically. This is only important when there is white space (I.E. when the auto height would be less than min-height). How can I accomplish this? I've seen this question asked several times, but none of the answers I've yet found apply to my application.
Thanks! ^_^
Given the fact that you've set a min-height of 75px, you can just add padding of half that to the top and bottom of the text, like so:
.warning {
display:block;
font-family: sans-serif;
font-weight: bold;
padding: 32.5px 0;
/*vertical-align: middle;*/
}
.warning needs to be display: block; to accept padding, but those are the only changes that are necessary to accomplish your objective, I think. Check it out: http://codepen.io/maxwbailey/pen/qcvre
EDIT
If you want to keep the text centered until the container gets small enough that it fills the min-height, you need to use display: table-cell, like so:
.warning {
display:table-cell;
font-family: sans-serif;
font-weight: bold;
vertical-align: middle;
height: 75px;
}
http://codepen.io/maxwbailey/pen/dwfar
UPDATE
In my style sheet I have a conflict with these snippets. If I keep this one
<style type="text/css">
::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
then, the gradient effect of the one below works, but the header banner is displaced towards the right. If I remove that, the header banner positions itself correctly, but the gradient effect of the code below does not work :/
body {
background-image:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
a {
UPDATE II
These 3 lines
::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
have a huge impact on the rest of the page
They make this code:
body {
background-image:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
be effective. If I remove those 3 lines, the gradient effect will not take effect and the font letters will not be of that family but the standard times roman. However, the negative effect is, like I said, that it displaces to the right a banner that I have as header
I have one header page, one controller and one view and the style sheet to which I have a link in the View
Like the others have said the code doesn't affect the positioning of the elements. Only way that it can affect the header would be if that piece of code is not treated as css at all. Check if the code is in the correct style tags.
The moz is for Firefox and as stated already its for styling. Are you using IE? as if so Id suggest trying alternate browser as well as IE has issues with the double colon which is for css3(no suprise there). have a look here
as I used this when I first came across these and it described them well.
That code shouldn't affect what you're doing. It is code that will change the background colour and text colour of text when it is selected by the user using their mouse.
Could you give us an example link of this happening with it commented out, please?
EDIT
What is the center: attribute supposed to be doing? It isn't valid CSS...
I am having some trouble with a font size with CSS. Below you see I have .post I have < pre > tags that are nested inside of the post class so should the css I have for the pre tags work below? It is not working but I can't figure out why? The text inside my pre tags end up being 15px instead of 12px
.post {
width: 100%;
clear: both;
padding: 10px 0;
border-bottom: #CBCBCB 1px solid;
background: url(images/post_element.gif) no-repeat 126px 21px;
font-family: arial;
font-size: 15px;
}
.post pre{
font-size: 12px;
}
http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
.post pre{
font-size: 12px !important;
}
Should work, but to answer your questing we need to view all html + css because it really depends...
In a vacuum, that code should work. However, base tag styling can vary browser-to-browser and <pre> tends to be a bit of an odd one. My first thought is that some other style is overriding it.
Have you used Firebug (or some other developer console) to take a look at the styles being applied and the computed style for the element? That should put you on the right track.
This was a weird issue, I had to end up changing the class and font size for all the other text, everything except the pre tags to get it to finally quit resizing after page load from my JS syntax highlighter