I'm having some nested divs and I'd like to 'glue together' the text of the divs such that it seems to be a single sentence. This is my code (http://jsfiddle.net/gorwmgj1/):
<div class="content">
<div class="field-name-field-plaats">
<div class="field-items">
<div class="field-item even">This is some random text.</div>
</div>
</div>
<div class="field-name-field-aantal">
<div class="field-items">
<div class="field-item even">10</div>
</div>
</div>
</div>
.content {
width: 100px;
background-color: #ccc;
padding: 5px;
}
.field-name-field-plaats::before {
content:"# ";
}
.field-name-field-plaats {
display: inline;
}
.field-name-field-aantal::before {
content:" (";
}
.field-name-field-aantal::after {
content:"x)";
}
.field-name-field-aantal {
display: inline;
}
.field-items {
display: inline-block;
}
So, for example, the output should be something like
# This is
some random
text. (10x)
instead of
#
This is some
random text.
(10x)
How can I change my CSS to achieve this?
Simple add this:
div{
display: inline;
}
not too sure html is wise structured, but just turn your div into inline boxe :
.field-name-field-plaats div {
display:inline;
}
http://jsfiddle.net/gorwmgj1/1/
Related
I am trying to display a div (.mydiv3) when another is hovered, but the div I want to display...
.mydiv1, .mydiv2, .mydiv3 {
display:none;
}
.trigger {
text-align:center;
padding:10px;
color:teal;
}
.trigger:hover{
background:red;
}
<div class="trigger">
Hover Trigger
</div>
<div class="mydiv1">
Text Content 1
</div>
<div class="mydiv2">
Text Content 2
</div>
<div class="mydiv3">
Text Content 3
</div>
Is there a way to do this with CSS or is jQuery my best bet?
You can use ~ in CSS to get the desired result. Check the snippet.
.mydiv1, .mydiv2, .mydiv3 {
display:none;
}
.trigger {
text-align:center;
padding:10px;
color:teal;
}
.trigger:hover{
background:red;
}
.trigger:hover~.mydiv3{
display: block;
}
<div class="trigger">
Hover Trigger
</div>
<div class="mydiv1">
Text Content 1
</div>
<div class="mydiv2">
Text Content 2
</div>
<div class="mydiv3">
Text Content 3
</div>
Edit : With jQuery in case elements are not siblings
$(.trigger).on('mouseenter', function(){
$('.mydiv3').show();
};
$(.trigger).on('mouseleave', function(){
$('.mydiv3').hide();
};
Hope this helps
You can use the general sibling selector for this.
.mydiv1,
.mydiv2,
.mydiv3 {
display: none;
}
.trigger {
text-align: center;
padding: 10px;
color: teal;
}
.trigger:hover {
background: red;
}
.trigger:hover~.mydiv3 {
display: block;
}
<div class="trigger">
Hover Trigger
</div>
<div class="mydiv1">
Text Content 1
</div>
<div class="mydiv2">
Text Content 2
</div>
<div class="mydiv3">
Text Content 3
</div>
With JQuery:
$(".trigger").mouseout(function() {
$(".mydiv3").hide();
})
.mouseover(function() {
$(".mydiv3").show();
});
I am having a problem getting the bootstrap grid to display properly. My code is as follows
<div class="container">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
All I see is:
grid
Anyone know what's happening here? I have all the bootstrap.css, bootstrap-theme.css, and bootstrap.js properly included. Other things such as buttons are bring properly formatted by bootstrap.
As far as I see your 2 div's are formatted as they should? (Using Boostraps md-6).
You don't need the .col-md-6 value in your div though:
<div class="container">
<div class="row">
<div class="col-md-6">Your text here</div>
<div class="col-md-6">Your text here</div>
</div>
</div>
For more information check out the official Bootstrap Documentation page on Grid Templates
For the grid view used in the documentation (grid.css) add the following CSS:
h4 {
margin-top: 25px;
}
.row {
margin-bottom: 20px;
}
.row .row {
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86,61,124,.15);
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.2);
}
hr {
margin-top: 40px;
margin-bottom: 40px;
}
Modify as below
<div class="container show-grid">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
add the following css to your style sheet
.show-grid div{
border:1px solid ;
}
Bootstrap makes an "invisible" grid if you want to see it that way, if you want to make the grid visible you can do it with css either adding a background color or border, my favorite is background color:
css:
.y0 { background-color: #CCC; }
.y1 { background-color: #9FF; }
.y2 { background-color: #F9F; }
.y3 { background-color: #F99; }
.y4 { background-color: #FF6; }
.y5 { background-color: #3C3; }
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 y0">Your text here</div>
<div class="col-md-6 y1">Your text here</div>
</div>
</div>
I want to create a grid with two columns whose width will be equal. My base HTML code looks like this:
<div class="linkgrid">
<div class="gridentry">
Loooooooooooooong
</div>
<div class="gridentry">
Short
</div>
<div class="gridentry">
Meeeedium
</div>
</div>
In this example, the first and the second gridentry should lie in the the first row. The thrid gridentry should lie in the second row. All gridentrys should have the same width.
~~~
I came up with a solution that uses a CSS table. However, to make sure the row "breaks" after every second cell, it currently requires non-semantic elements to force these "row breaks":
.linkgrid {
display: table;
border-spacing: 2px;
table-layout: fixed;
width: 50%;
}
.gridentry {
display: table-cell;
background-color: red;
padding: 5px;
text-align: center;
}
.gridentry a {
color: white;
}
.THIS-SHOULD-BE-A-PSEUDO-ELEMENT-BEFORE-EVERY-ODD-CHILD {
/* I imagine a selector that looks somewhat like this:
.linkgrid .gridentry:nth-child(odd):outsidebefore {
*/
display: table-row;
}
<div class="linkgrid">
<span class="THIS-SHOULD-BE-A-PSEUDO-ELEMENT-BEFORE-EVERY-ODD-CHILD"></span>
<div class="gridentry">
Loooooooooooooong
</div>
<div class="gridentry">
Short
</div>
<span class="THIS-SHOULD-BE-A-PSEUDO-ELEMENT-BEFORE-EVERY-ODD-CHILD"></span>
<div class="gridentry">
Meeeedium
</div>
</div>
Is there a way to remove my <span>s from my HTML (because they do not have any semantics) and use a clever CSS selector that adds them as pseudo elements at the right positions instead?
I do know that :before will "create" a pseudo-element within the selected element. Is there a non-JavaScript, CSS-only way to add a pseudo-element outside of the selected element like required in this example?
Another edit: For all those familiar with the Chrome developer tools, I want my result to look somewhat like this in the DOM tree:
<div class="linkgrid">
::outsidebefore
<div class="gridentry">
Loooooooooooooong
</div>
<div class="gridentry">
Short
</div>
::outsidebefore
<div class="gridentry">
Meeeedium
</div>
</div>
...where the ::outsidebefore pseudo-elements should have the CSS property display: table-row;.
Update 2016-01-04: While this specific question remains unanswered, my original problem was solved another way: https://stackoverflow.com/a/34588007/1560865
So please only post replies to this question that answer precisely the given question.
Display Level 3 introduces display: contents:
The element itself does not generate any boxes, but its children and
pseudo-elements still generate boxes as normal. For the purposes of
box generation and layout, the element must be treated as if it had
been replaced with its children and pseudo-elements in the document
tree.
Then, you can:
Wrap each cell in a container element
Set display: contents to those containers
Add ::before or ::after pseudo-elements to those containers
The result will look like as if the pseudo-elements were added to the cell, but outside it.
.wrapper {
display: contents;
}
.wrapper:nth-child(odd)::before {
content: '';
display: table-row;
}
.linkgrid {
display: table;
border-spacing: 2px;
table-layout: fixed;
width: 50%;
}
.wrapper {
display: contents;
}
.wrapper:nth-child(odd)::before {
content: '';
display: table-row;
}
.gridentry {
display: table-cell;
background-color: red;
padding: 5px;
text-align: center;
}
.gridentry a {
color: white;
}
<div class="linkgrid">
<div class="wrapper">
<div class="gridentry">
Loooooooooooooong
</div>
</div>
<div class="wrapper">
<div class="gridentry">
Short
</div>
</div>
<div class="wrapper">
<div class="gridentry">
Meeeedium
</div>
</div>
</div>
Note display: contents is not widely supported yet, but works on Firefox.
The most straightforward way is using an actual table structure. That is, one table divided into rows, in which the entries sit.
Also, you had width:50% on the table, but I believe from the question text that you meant every table cell to be 50% wide, rather than the table taking up 50% of the window width; so I corrected that.
.linkgrid {
display: table;
border-spacing: 2px;
}
.gridrow { /* new */
display: table-row;
}
.gridentry {
display: table-cell;
background-color: red;
padding: 5px;
text-align: center;
width: 50%; /* moved */
}
.gridentry a {
color: white;
}
<div class="linkgrid">
<div class="gridrow">
<div class="gridentry">
Loooooooooooooong
</div>
<div class="gridentry">
Short
</div>
</div>
<div class="gridrow">
<div class="gridentry">
Meeeedium
</div>
</div>
</div>
I'm trying to add a subtitle below the title on my page. I've got an image to the left of the existing title, and the title is centered to the middle of the image. I'm trying to add a subtitle in a smaller font below the title and I can't seem to figure it out. The code I'm using is like so:
<div class="top_bg">
<div class="wrap">
<div class="container">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<div class="text">This is the Title</div>
<div class="clear"></div>
</div>
</div>
</div>
.container {
display:table;
width:100%;
height:auto;
background-color:#171717;
}
.container .text {
display:table-cell;
height:100%;
vertical-align:middle;
font: bold 70px Verdana;
color: #666666;
}
and here's what that looks like:
(I'm not including the code for the menu even though it's in the picture).
And what I'm trying to achieve is this:
Does anyone have any ideas?
You have a div.text which contains your title. Underneath that you need to place your subtitle. This code is called "html markup". You should use <h1> - <h6> tags for titles.
Here is an example (fiddle)
.header {
text-align: center;
}
.header img {
float: left;
}
.clear {
clear: both;
}
<div class="header">
<img src="http://dummyimage.com/100/000000/fff" />
<h1>Hello world</h1>
<h2>This is a subtitle</h2>
<div class="clear"></div>
</div>
Preview:
You can in fact do this with CSS.
div.text {
font-size: 32px;
font-weight: bold;
display: inline-block;
color: #fff;
vertical-align: top;
padding: 2px 1em;
}
div.text:after {
display: block;
text-align: center;
font-size: 20px;
margin-top: 1em;
content: "This is the subtitle";
}
.container {
background-color: #111;
display: inline-block;
}
.container img {
display: inline-block;
}
Now, whether you should do that with CSS is another question entirely. Content that's actually part of your page's message should be part of the page, not part of a style sheet.
Also, your "container" should probably be an <h1> tag. Also you don't need to close <img> tags, and self-closing tags are pointless in an HTML5 document (which yours may or may not be I suppose).
Try this:
<div class="top_bg">
<div class="wrap">
<div class="container">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<div class="text">This is the Title</div>
<div class="subtitle">My subtitle</div>
<div class="clear"></div>
</div>
</div>
</div>
.text {
margin-bottom: 0px;
padding-bottom: 0px;
}
.subtitle {
margin-top: 0px;
padding-top: 0px;
}
There's probably 100 different ways to do this... Here's one. In your line of text, just use a <br /> and a <span>
<div class="text">This is the Title<br /><span>The SubTitle would go here</span></div>
Then style your subtitle like so:
.container .text span {
/* Something styled here */
}
The html your using could be improved as it is not really appropriate.
Try something like this
<div class="header">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<h1>this is the title</h1>
<h3>This is the subtitle<h3>
</div>
.header{
overflow:hidden
}
.header img {
float:left;
}
.header{
text-align:center;
}
Thanks, #Sergio S. That worked for me. A more general way of doing this, based on Sergio's answer (is the following):
CSS:
.classofheadertext {
margin-bottom: 0px;
padding-bottom: 0px;
}
.classofsubtitletext {
margin-top: 0px;
padding-top: 0px;
}
Full credit once again to Sergio. I've just put this in simple form :D
I have this code and I would like the paragraph that follows to be left aligned and below:
<div class="content_hdr clearfix">
<div class="clearfix content_hdr_heading">System Test</div>
<div class="content_hdr_intro">
<p>
Some text
</p></div>
</div>
.clearfix:after{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
div.content_hdr_heading {
float: left;
background: #ff9999;
}
I created this fiddle
Hope someone can help.
<div class="content_hdr">
<div class="content_hdr_heading">System Test</div>
<div class="content_hdr_intro">
<p>Some text</p>
</div>
</div>
.content_hdr_heading {
float: left;
background: #ff9999;
}
.content_hdr_intro {
clear: left;
}
Since in this case there's a clearing element after the float, it's not necessary, but I usually put this on the containing element of floats to save headaches with following content:
.content_hdr {
overflow: hidden;
}
Consider this:
HTML:
<div class="content_hdr">
<div class="content_hdr_heading">
<h2>System Test</h2>
</div>
<div class="content_hdr_intro">
<p>Some text</p>
</div>
</div>
CSS:
div.content_hdr_heading {
overflow:auto;
}
div.content_hdr_heading h2 {
float: left;
background: #ff9999;
}
Live demo: http://jsfiddle.net/simevidas/HmkMj/3/
p { clear:both; }
You do not need the clearfix you have there. That seems redundant. If its a heading tag using an h1,h2 etc.