I'm attempting to use the CSS :before property to append a word in front of a regular paragraph. I want the remainder of the paragraph to be justified left, so that there is a margin underneath the appended word.
In order to achieve this effect, I've needed to set the height of the :before to an arbitrary height. But, if I don't know how much text will be in the actual paragraph, I have no idea what height I need to in the declaration.
.prereq:before {
content:"Prerequisite: ";
font-weight:700;
display:block;
float:left;
padding-right:30px;
height:70px;
}
The attached jFiddle might help better explain what I am trying to do.
http://jsfiddle.net/fgpj8w74/7/
Thanks for your help.
Check this Updated Fiddle
You can work with table-cell's so you wont concern about float or height, since they will fit each other automatically.
Just make your .prereq element a display: table, and the pseudo one a display: table-cell:
.prereq {
display: table;
}
.prereq:before {
content:"Prerequisite: ";
font-weight:700;
display:table-cell;
padding-right:30px;
}
Related
I made a small form that has potential to take credit-card details, as part of the Daily UI challenges (#002). I haven't implemented any functionality, just design.
Here is the form I made: http://codepen.io/alanbuchanan/pen/vGZPBp
My questions are regarding the two half-width sections of the form - Expiry Date and CC Number.
Here is the relevant code - this targets the two divs that wrap the two form elements:
div {
display: inline-block;
box-sizing: border-box;
width: 45%;
}
I wrapped these two sections in their own divs so that I could have more control over their positioning. Is it possible to position these at half-width without these wrapper divs?
In the example they are taking up 45% width because at 50%, the second div overflows onto the next line.
I just want to give it 50% and have it take up half the space as it should. Or should it not?
Even at 45% width, you can see there is about 1px difference between the height of these two divs.
After inspecting with Chrome Dev Tools, I can't find the problem behind this.
Any answers to my questions or different approaches to the situation will be very useful.
In most cases a setup as the following code, could be a best practice when aiming for creation of inline-block columns.
.column-container {
font-size:0;
line-height:0;
}
.column-container .column {
display:inline-block;
vertical-align:top;
width:50%;
font-size:16px;
line-height:120%;
}
You might wonder, why does the container have zero font-size and line-height?
This is often used because some HTML code cotains indented code, like so:
<div class="column-container">
<div class="column">text</div>
As of this example, you can see that the container div contains spaces/tabs before the column div is programmed. These spaces/tabs are rendered as characters and so they will obey to whatever the css is telling the characters to do in that container div.
You can use flexbox.
Create a outer div having id as flexdiv which will contain both the div of expiry and CC number.
Then write following code:
#flexdiv
{
display: flex;
justify-content: space-between;
div{
display:inline-block;
box-sizing: border-box;
width:49%;
}
}
Codepen Example
Here is the guide for flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Pen: http://codepen.io/anon/pen/jqwJMg
Comments: just add font-size:0 to the form.
These are the changes I made:
.minicontainer {
width:50%;
}
form {
font-size:0;
}
When you add two element inline(50%-50%) you should make sure that the font-size is zero
I'm trying to make a responsive version of the "Holy Grail" CSS layout by Matthew James Taylor
So that the Mobile page should render like this:
left
content
right
I tried changing the float rules as in this fiddle, but I couldn't make it work. Try to change viewport size around 600 px.
Is there a way to do this without JavaScript ?
Thanks for any help !
You could make the divs relative and change the margin-top so that it's in the right order.
This is pretty hackish, but it at least gets them in the right order. It only really works if you know what height column 1 will be.
.holygrail .col1
{
margin:0;
position:static;
width:100%;
margin-top: 3ex;
}
.holygrail .col3
{
left:0;
width:100%;
margin:0;
float:none;
}
.holygrail .col2
{
width:100%;
top:0;
margin:0;
right:0;
position:absolute;
}
(This goes inside the media query.)
I looked into this some more, and found another Stack Overflow question where the answers have some good discussion about what you're trying to do. (Basically, this isn't something that CSS can do reliably.) The answers also include some hacks that are better than the one I proposed earlier.
You can use direction to achieve this
The direction property in CSS sets the direction of of content flow
within a block-level element. This applies to text, inline, and
inline-block elements. It also sets the default alignment of text and
the direction that table cells flow within a table row.
CSS:
.main-content {
direction: rtl; /* Right to Left */
}
The valid values are:
ltr - Left to Right, the default rtl - Right to Left inherit -
inherits its value from the parent element
source: http://css-tricks.com/almanac/properties/d/direction/
I was creating a unordered list and in that list I wanted to add a color pallete type window and I tried to create one the following way
<ul><li><div style="width:10px; height:10px; background-color:#0066cc; float:left;"></div>test</li></ul>
http://jsfiddle.net/wNkmJ/
I am attaching a fiddle link to see the output.. Is there a good way to align the div to text or should I just adjust the margin of div element, but I dont think that is the best possible solution..
On your div, set:
text-align: center;
display: inline-block;
float: none;
This positions the div in much the same way that images are positioned.
In general, having line-height for li will be a good choice.
From your JSfiddle,
li{
line-height: 10px;
}
check out this JSFiddle.
I have DIVs which comes side by side of each other & but there only fourth DIV comes in the first row & other are shifted too the next row.
I want each row first div take no space from left side but is not happened. Here is my code
http://jsfiddle.net/25pwG/
I know i can do it with giving class manual to the new row DIV but i didn't want that. i want this with less css & i didn't want to change my markup
NOTE: i want capability till IE8.
Thanks in advance :)
UPDATED:
http://jsfiddle.net/25pwG/8/
First the .parent div is a common class which is used in other section also & second thing according to the design the parent DIVs touch the row last div so, there is no space from the right side.
Suggestion A:
Add margin-left:-16px to parent
Demo: http://jsfiddle.net/25pwG/1/
Suggestion B:
Use margin-right: 16px on the inner divs, instead of margin-left
Demo: http://jsfiddle.net/25pwG/4/
Suggestion C:
If the parent div width is fixed, you can remove margin on every 4th child like this:
.feature:nth-child(4n){
margin-right:0px;
}
Demo: http://jsfiddle.net/25pwG/15/
Suggestion d:
Wrap your inner divs in a wrapper, and set this to be wider that the parent div
Demo: http://jsfiddle.net/25pwG/17/
Avoid using negative margin and padding. In feature class use margin-right:16px and remove .feature + .feature class.
so your css will be
.parent{
width:480px;
}
.feature{
width:100px;
height:100px;
background:red;
display:inline-block;
margin-bottom:10px;
margin-right:16px;
}
See this http://jsfiddle.net/25pwG/7/
.parent{
width:480px;
text-align: center;
}
.feature{
width:100px;
height:100px;
background:red;
display:inline-block;
margin:0 6px 10px;
}
I suggest trying this one. Using a negative value might cause some problems later on. So as much as possible avoid using it.
It's quite simple, just change from
.feature + .feature { margin-left:16px; } /*Remove this*/
to
.feature { margin-right:16px; }
I am trying to achieve something and can't manage to do so.
I have a div with fixed HEIGHT & WIDTH.
I want the text to be centered vertically.
up till now I managed to do so:
<div>
<a>this is a long text</a>
</div>
and it will look like this
-------------
This is a long
text
-------------
which is great
But if the line won't wrap it will look like this
------------
This is short
-------------
.the-div
{
height:29px;
line-height:14px !important;
}
.the-a
{
font-size:12px;
}
I need this to be valigned as well!
I tried using line-height and to play with is with JS to understand if its wrapping or not and then changing the line-height accordingly
Thanks for the help
try this example
http://jsfiddle.net/fcalderan/3HBC4/1/
.the-a
{
font-size:12px;
vertical-align: middle;
}
if you make the line-height same as the height of div, it will automatically vertical centered
the-div
{
height:29px;
line-height:29px !important;
}
To be vertical aligned as well, you'll need to use some display as table hacks. This will allow you to use vertical-align:middle;, achieving the look I believe you desire.
Example
div a{
margin-top:auto;
margin-bottom:auto;
}