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.
Related
I have a list of product divs containing two more divs each displayed vertically within - top one containing an image and bottom one text. The text is variable in size so the outer divs size also is variable. These outer divs float left and go 3 to a row until a div with long text happens then the next row starts immediately after that column, leaving a gap.
So if I have a row where the 2nd div has 3 lines of text to the other two's 1, the 4th div will start not in the first position on the next line but in the 3rd.
Here is an image demonstrating what I see now vs a second what I would like to do:
And what I'm aiming to do
Do not use float. Take a look at this fiddle:
JSFiddle Demo
CSS:
.block {
width: 33.33%;
display: inline-block;
vertical-align: top;
margin-right: -3px;
}
.inner {
min-height: 100px;
margin-bottom: 10px;
background: #000;
}
You can create a row for the div elements, this will produce the layout you need! I have also provided a CSS only solution where the class clearfix will do the same thing as row class!
CSS3:
.row{
display:flex;
}
.box{
background-color:grey;
float:left;
margin:3px;
width:100px;
height:100px;
}
<div class="row">
<div class="box">1</div>
<div class="box" style="height:200px;">2</div>
<div class="box">3</div>
</div>
<div class="row">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
CSS:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.box{
background-color:grey;
float:left;
margin:3px;
width:100px;
height:100px;
}
<div class="clearfix">
<div class="box">1</div>
<div class="box" style="height:200px;">2</div>
<div class="box">3</div>
</div>
<div class="clearfix">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
HTML
<div class="flex-container">
<div class="box">img</div>
<div class="box">img</div>
<div class="box">img</div>
</div>
<div class="flex-container">
<div class="box">txt</div>
<div class="box">txt</div>
<div class="box">txt</div>
</div>
CSS
.flex-container{
background:red;
display:flex;
width:100%;
height:auto;
margin:0% auto;
padding:1% 0;
}
.box{
min-width:100px;
height:auto;
padding:1%;
margin:0 1%;
flex-grow:1;
background:green;
}
Also, Please chech whether you have cleared all floats
Please see Using CSS Flexible Boxes MDNweb docs
I want the div #aboutBlurb to appear on #aboutLink:hover. I am using Foundation 5.2's grid system if that is of any relevance. Here is my code:
<div id="navBar">
<div class="row">
<div class="large-3 medium-3 small-3 columns">
<span>About</span>
</div>
</div>
<div id="aboutBlurb"><h3>blah</h3></div>
</div>
#navBar a.circleLink:hover
{
background-color: #bc2029;
color:white;
}
#aboutBlurb
{
text-align: center;
position: absolute;
width:100%;
font-size: 2em;
display:none;
}
#navBar #aboutLink:hover + #aboutBlurb
{
display:block;
}
I have tried using the ~ and > selectors as well as no selector also.
I know you asked for a CSS answer, but doing this with JavaScript is fairly easy. If you have jQuery installed just add this line:
$( "#aboutLink" ).hover(function() {
$( '#aboutBlurb' ).show();
});
To fix this need to change your DOM order please check this
#navBar a.circleLink:hover
{
background-color: #bc2029;
color:white;
}
#aboutBlurb
{
text-align: center;
position: absolute;
width:80%;
font-size: 2em;
color: red;
display: none;
}
#aboutLink:hover + #aboutBlurb
{
display:block;
}
<div id="navBar">
<div class="row">
<div class="large-3 medium-3 small-3 columns">
<span>About</span>
<div id="aboutBlurb"><h3>blah</h3></div>
</div>
</div>
</div>
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/
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
the code i have tried is
CSS Code
#tools
{
float:left;
}
#sketch
{
border: 10px solid grey;
float:left;
width: 700px;
height: 500px;
position: relative;
}
HTML code:
<div id="tools">
<p>These are my tools</p>
</div>
<div id="sketch">
<p>This is my sketch</p>
</div>
<button type="button">Click</button>
I am placing the two divs side-by-side
the button is geting displyed side to the divs
but I want the button below the div
Fiddle here
Clear the float:
button { clear: both; }
Add wrapper with a clearfix:
<div class="wrapper cf">
<div id="tools">
<p>These are my tools</p>
</div>
<div id="sketch">
<p>This is my sketch</p>
</div>
</div>
<button type="button" >Click</button>
http://jsfiddle.net/brutusmaximus/5KmK6/3/
Try to use "clear: left;" for the button to cancel the "float: left" of the previous div element.
See http://www.w3schools.com/cssref/pr_class_clear.asp for more details.
You can use any of the two :
1) button {
clear : both;
}
2) Add a class clearfix to the Div - "sketch" that adds a pseudo element to the DOM after it to clear the float added.
<div id="sketch" class="clearfix">
<p>This is my sketch</p>
</div>
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}