I'm working on a personal project, but I'm having some difficulty with a div, which has some styling that I can't seem to get around. It's a thin strip at the top of my user interface, where users have a few controls over what's shown on the screen. Pretty important to keep around (so deleting it isn't an option). In case it helps at all, I am using Eric Meyer's CSS Reset as a normalizer.
My problem is that the div element seems to have some intrinsic margin or padding that I can't seem to work around in my css. I've included a photo here for reference; the div is in green.
I need to make that green div element thinner. It would help the layout a lot if I could move it closer to the top of the page. If you have any ideas or see something that I've missed, I would appreciate the help.
I'm also including the html code for that content as follows:
<div class="new_entry_control_container">
<p>You have <span class="credits">33 Credits</span> remaining.
<span class="button">Add More Credits</span>
<span class="button">Add More Items to Study List</span>
<span class="pagination">< 1 | 2 | 3 ></span>
</p>
</div>
As well as the CSS that applies here:
div.new_entry_control_container {
background-color: green;
max-width: 900px;
margin-left: auto;
margin-right: auto;}
div.new_entry_control_container p {
text-align: center;}
.credits {
color: #ffd400;}
.button {
background-color: #ffd400;
color: #3a0091;
border: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 1px 8px 4px 8px;
margin: 10px 0px 0px 3px;}
.pagination {
margin-left: 25px;
font-size: 17px;}
Not sure if it's caused by the padding of parent element of that green bar. A workaround would be using negative "margin-top". And to make it thinner (assuming there would only be one line in that bar), use "height" combined with "line-height".
So the css might look like this
div.new_entry_control_container {
background-color: green;
max-width: 900px;
margin-left: auto;
margin-right: auto;
margin-top: -10px;
height: 18px; line-height: 18px;
}
Hope that helps.
Try:
div.new_entry_control_container{
padding:0;
/* more CSS here */
}
.credits{
padding:0; margin:0;
/* other CSS here */
}
Related
I just started using css for a personal project where i want to show a set of icons one on the side of the other and aligned, i found a part of them on font-awesome and the others on aenter code herenother database.
The problem is the non font-awesome icons padding spills in the section above. I still can align them using more padding but in this way the design is not responsive anymore and resizing the window they get disaligned.
This is how it looks like without the 2.55% padding https://imgur.com/a/J4hNO
After reading about font-awesome default padding i tried resetting it but didn't work.
This is the css and html of one of the sections:
.one-fourth {
width: 20%;
float: left;
text-align: center;
color: #e0e0e0;
background-color: #4fb3bf;
}
#python i {
vertical-align: bottom;
border: 3px solid red;
padding-top: 2.55%;
}
.one-fourth i {
color: #e0e0e0;
max-height: 100px;
font-size: 500%;
padding: 13% 0 4%;
}
<section class="one-fourth" id="python">
<td>
<i class="icon-python"></i>
</td>
<h3>Python</h3>
</section>
After fiddling with the values and the various functions I found that the only way is to align the blocks not using the padding with a percentage value, but with a px value, so instead of
#python{
padding-top:2.55%;
}
.one-fourth{
:padding-top:13%;
}
I had to use
#python{
padding: 34px 0 0;
}
.one-fourth{
padding: 30px 0 20px;
}
I created multi-line-padded text based on Matthew Pennell's solution (codepen by CSS Tricks). In Chrome all looks fine, but in Firefox height of span elements bigger than height of their ancestor. If I adjust vertical padding for Firefox, in Chrome will be same problem, and vice versa.
Why it happens? What the real technical reasons of this problem?
HTML Code:
<div class="padded-multiline">
<h1>
<strong>How do I add padding to subsequent lines of an inline text element?</strong>
</h1>
</div>
CSS Code:
:root {
font-family: Arial, sans-serif;
font-size: 20px;
}
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
border-left: 20px solid #c0c;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #c0c;
padding: 4px 0;
color: #fff;
display: inline;
margin: 0;
}
.padded-multiline h1 strong {
position: relative;
left: -10px;
}
Setting a line-height: 1; on strong will fix the problem also read my comment.
Chrome and Firefox seems to use different text layout system.
In Chrome it will floor the line-height attribute and Firefox seems to use the correct one.
To achieve the same effect for title, just use only the outline.
H1 does not need strong.
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #c0c;
padding:1px;
color: #fff;
display: inline;
outline: 10px solid #c0c;
margin: 0;
font-size:16px;
}
<div class="padded-multiline">
<h1>How do I add padding to subsequent lines of an inline text element?</h1>
</div>
Here is codepen: http://codepen.io/anon/pen/vgRvjM
If you need exactly visual (that means less purple space from top and bottom, you can use for example border from after and before):
.padded-multiline:before{
content:'';
display:block;
border:5px solid #fff;
position:relative;
left:-10px;
top:-3px;
}
.padded-multiline:after{
content:'';
display:block;
border:5px solid #fff;
position:relative;
left:-10px;
bottom:-3px;
}
Codepen for this solution: http://codepen.io/anon/pen/QdmzxK
Unfortunately, there isn't a full and clean crossbrowser workaround. Because different UAs render text different, height of each textline may be taller a bit (or vice verca). So, I create a solution based on SCSS calculations of required box' sizes, and hide artefacts via overflow property.
Here is my solution, if you meet the same problem: http://codepen.io/ifiri/pen/ygEeeL
HTML:
<p class="multiline-text">
<span class="multiline-text__wrapper multiline-text__wrapper--outer">
<span class="multiline-text__wrapper multiline-text__wrapper--left">
<span class="multiline-text__wrapper multiline-text__wrapper--right">Multiline Padded text, which looks great on all browsers. No artefacts, no hacks, all clear and flexy, all alignment support. Change SCSS variables for see how it works.</span>
</span>
</span>
</p>
SCSS:
/*
Variables
*/
$base-line-height: 1.75;
$base-font-size: 1.25em;
$multiline-padding-base: ($base-line-height / 2) * 1em;
$multiline-padding-horizontal: $multiline-padding-base;
$multiline-padding-vertical: $multiline-padding-base - (1em / 2);
$multiline-bg-color: #a5555a;
$multiline-font-color: #fff;
/*
= Snippet Styles
This code is required
*/
.multiline-text {
color: $multiline-font-color;
padding: 0px $multiline-padding-horizontal;
// hide line-height artefacts
overflow: hidden;
position: relative;
}
.multiline-text__wrapper {
background-color: $multiline-bg-color;
padding: $multiline-padding-vertical 0px;
}
.multiline-text__wrapper--outer {
// Inner padding between text lines
line-height: $base-line-height;
}
.multiline-text__wrapper--left {
position: relative;
left: -($multiline-padding-horizontal);
}
.multiline-text__wrapper--right {
position: relative;
right: -($multiline-padding-horizontal / 2);
}
I have some text and want it to be higher and inline with the first icon. This is it live: http://www.penguinie.co.uk/#projects the css is:
.german img {
height: 100;
width: 100;
padding: 2px 2px 1px 2px;
}
.german img:hover {
border: 1px solid #2e8ece;
border-radius: 10px 10px 10px 10px;
}
.german-content {
display: none;
float: right;
width: 400px;
}
.german:hover .german-content {
display: inline-block;
border: 1px solid;
}
.german-content p {
font-size: 15px;
font-weight: normal;
line-height: 30px;
word-spacing: 5px;
color: black;
}
.chembond img {
height: 100;
width: 100;
padding: 2px 2px 1px 2px;
}
.chembond img:hover {
border: 1px solid #2e8ece;
border-radius: 10px 10px 10px 10px;
}
.chembond-content {
display: none;
float: right;
width: 400px;
}
.chembond:hover .chembond-content {
display: inline-block;
border: 1px solid;
}
.chembond-content p {
font-size: 15px;
font-weight: normal;
line-height: 30px;
word-spacing: 5px;
color: black;
overflow: scroll;
}
And this is the HTML:
<section id="projects-content">
<p>Projects</p>
<section class="german">
<img src="assets/img/german.png" height="60" width="50" />
<section class="german-content">
<p>I started this project because I have seen many students in my German class keep on getting the tenses wrong by putting verbs in the wrong places, missunderstanding past participles etc... so I started this to help students (or anyone) understand the sometimes confusing German tenses. Each tense page consistes of three sub-sections: a question, an answer and a statement. These then in turn include an example and an explanation. If you were to hover over some of the words then a popup box will appear, explaining the use of the word. You can see it here (please bare in mind that this is still a work in progress). If you want to email me a tip about it, or just ask me about it then don't hesitate to contact me.</p>
</section>
</section>
<section class="chembond">
<img src="assets/img/bonding.png" height="60" width="50" />
<section class="chembond-content">
<p>This isn't much of a project, more homework. In Science we were asked to create a poster on the different types of bonding (ionic, metallic, covalent, etc) and I naturally said no as I cannot draw and hate making posters. I then did it as homework and made a website. It was a joint website with my friend Elliott who did all the drawings/images, I then wrote the code. If you are wondering if my teacher like it then I can tell you that he did. If you want to see it then click here. I know there is one mistake in the image but I have put a note at the bottom of that section.</p>
</section>
</section>
</section>
So when I hover over the second icon I want the text in the box to be the same height as the first one is when you hover over it.
Here is what you should add to your css:
.chembond-content {
display: none;
float: right;
width: 400px;
position: relative;
top: -72px;
}
You could add margin-top with a negative value to your CSS, but NO.
A much more maintainable solution would be to have only one <section class="content"> tag, align it, and with JS change the text when hovering over the relevant icon.
when making a question here with simple CSS and HTML consider doing a jsFiddle and sharing that instead of a personal link, otherwise when this is working and your live link changes then the question will be irrelevant.
The CSS Position Approach
So here is my fiddle minus a bit of code clutter:
Demo
The reason the second image is hovered to reveal the the section element with the class of .chembond-content and the element is not at the top (like the first image) is because you are floating it to the right but it's still part of the document flow after that image that you have right before the section.
If you want to have both elements open up in the same spot then you would get them out of the document flow by giving them a fixed or absolute position which in this example I simple set it to 20 pixels from the top and from the right.
Since these elements are not taking up space in the flow of your markup then you are free to position both at the top if you want to.
So I'm working on a tumblr theme design and each post should has a wrapping container (.posts-wrapper) that has 66px of bottom-padding, 1px bottom border, and 84px of bottom-margin, then some page navigation at the bottom. I wanted to remove the margin and divder on the final post of the page so there's nothing between the navigation and the last post, but for some reason my css is not applying.
.index-wrapper {
background-color: #ffffff;
min-height: 600px;
}
.posts-wrapper {
margin: 0 auto;
margin-bottom: 84px;
padding-bottom: 66px;
border-bottom: 1px solid;
}
.posts-wrapper:last-child {
margin-bottom: 0px !important;
padding-bottom: 66px !important;
border-bottom: 0px solid !important;
}
.index-post {
max-width: 960px;
margin: 0 auto;
padding:0 50px;
position:relative;
}
Here is a reference link to my work in progress on dropbox: http://dl.dropboxusercontent.com/u/35202847/writersblock_theme/index.html
Maybe I'm being silly and forgot something simple to do. Any insight would be greatly appreciated
Your problem is that the last .posts-wrapper div you have is NOT the last child of its parent. You have the <nav> element as a sibling after it.
As you're already using CSS3 selectors, you can try the :last-of-type pseudo-selector to get the last .posts-wrapper element.
.posts-wrapper:last-of-type {
margin-bottom:0;
padding-bottom:66px;
border-bottom:0;
}
Problem
I am working on a project to theme a website, but I am not allowed to change the HTML or JavaScript. I can only update the CSS stylesheet and add/update images.
Requrements
I need to style a h3 tag to have an
underline/border after the content.
This h3 will be used multiple times
on the page, so the conent length can
vary
The solution needs to be
cross-browser (IE 6/7/8, FF 3, &
Safari)
Sample Code
<div class="a">
<div class="b"><!-- etc --></div>
<div class="c">
<h3>Sample Text To Have Line Afterwards</h3>
<ul><!-- etc --></ul>
<p class="d"><!-- etc --></p>
</div>
</div>
Sample Output
Sample Text to Have Line Afterwards ______________________________________
Another Example __________________________________________________________
And Yet Another Example __________________________________________________
Notes
I think #sample:after { content: "__________"; } option wouldn't work since that would only be the correct length for one of the tags
I tried a background-image, but if it gave me problems if I gave it one with a large width
Using text-indent didn't see to give me the effect I was looking for
I tried a combination of border-bottom and text-decoration: none, but that didn't seem to work either
Any ideas would be much appreciated!
This will work if class 'c' is always the parent of the h3...
.c {
position: relative;
margin-top: 25px;
border-top: 1px solid #000;
padding: 0px;
}
h3 {
font-size:20px;
margin-top: 0px;
position: absolute;
top: -18px;
background: #fff;
}
It lets the container have the border, then uses absolute positioning to move the h3 over it, and the background color lets it blot out the portion of c's border that it's covering.
try attaching a background image to class c of a repeating underline, then add a background color to the h3 to match the background of the container. I believe that you would have to float the h3 left in order to get the width to collapse. does that make sense?
.c {
background: #ffffff url(underline.gif) left 20px repeat-x;
}
.c h3 {
margin: 0;
padding: 0 0 2px 0;
float: left;
font-size: 20px;
background: #ffffff;
}
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c ul { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
http://besh.dwich.cz/tmp/h3.html
H3 {
border: 1px solid red;
border-width: 0 0 1px 0;
text-indent: -60px;
}
You need to know the width of the text, but works pretty well.
The only solution I've imagined so far is to make a PNG or GIF image, with 1px height and a very large width (depends on your project, could be like 1x2000px), and do something like this:
h3#main-title { background: url(line.png) no-repeat bottom XYZem; }
where the XYZ you'd set manually, for each title, in 'em' units. But I can't figure out a 100% dynamic solution for this one, without using JS or adding extra markup.
this worked for me
div.c
{
background-image:url(line.gif);background-repeat:repeat-x;width:100%;height:20px;
}
div.c h3
{
height:20px;background-color:white;display:inline;
}
you make the div the width of your content
then you set the background of the h3 to the background of your page. this will then overlap the background imageof the full div. You might want to play with background positioning depending on your image
Can you pad content in the UL tags? If so, this might work:
h3 { display: inline; margin: 0; padding: 0 10px 0 0; float: left;}
ul { display: inline; border-bottom: 1px solid black; }
check source code of: http://nonlinear.cc/lab/friends/elijahmanor.html
then again i have NO IDEA how to control the end of the line.
Assuming that you're working with dynamic content, the best I could suggest is to accept graceful degradation and use a mix of great_llama and Bohdan Ganicky
Imagine:
A long title that will wrap to two lines___________________
and leave you like this in great_llama's solution
and nothing appearing at all with Bohdan Ganicky's solution if ul isn't immediate preceded by ul.
Solution:
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c + * { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
We care about IE6, but accept that this is an aesthetic touch and IE6 users will not suffer. If you can't get the designer to accept this AND you can't alter the HTML, then do something else (before you find another job ;))
Here's a better answer:
.c {
background: url('line.png') repeat-x 0 20px;
}
H3 {
background-color: white;
display: inline;
position: relative;
top: 1px;
}
Use a small, 1px height, couple px wide image as your underline and occlude it with a background color on your H3.
h3:after {
content: '___________';
}