I'm trying to understand how to change a small thing in a website, but I can't figure out how to do it.
I have a grid of articles organized in two columns, and I would like the various blocks to be separated avoiding the blank space as in figure http://i.stack.imgur.com/tNCFd.png
But I don't know which kind of properties I should set.
EDIT - Clarified answer (to clarified question in comments)
There's a rule in the parent theme:
#content .post { margin-bottom: 12px; }
You need to override this rule in your child theme and set
#content > div.articolo .post { margin-bottom:0; }
ORIGINAL ANSWER
First off, I strongly suggest that you don't just throw a heavy jQuery library (i.e. masonry) at a project that can be fixed with simple CSS.
Secondly, from the code in your comments - which is this:
#content div.articolo { display:inline-block; clear:none; min-height: 10px; }
#content > div.articolo:nth-child(even) { width:48%; float:left; clear:both; }
#content > div.articolo:nth-child(odd) { width:48%; float:right; }
#content > div.articolo:first-child { width:100%; float:none; clear:both; }
You should change it to this:
#content div.articolo { display:block; clear:none; min-height: 10px; }
#content > div.articolo:nth-child(even) { width:50%; float:left; clear:both; }
#content > div.articolo:nth-child(odd) { width:50%; float:right; }
#content > div.articolo:first-child { width:100%; float:none; clear:both; }
Note the only things that I changed were the width (changed to 50%) and I changed display: inline-block to display: block
display: inline-block preserves whitespace (converts many to one) in the markup, so if you have a space in your markup after a closing div that is display: inline-block, you'll see a space in your browser. Chances are, that is why the developer set the widths to 48%, to (poorly) account for the fact that there was a space appearing after each article block (because it was display: inline-block) meaning that each block couldn't be set to 50% width, because then they wouldn't appear next to each other (because 50% + 50% + a space > 100%)
Try setting the height of each article to 'auto' with suitable margin-bottom. You'll still get some space below where two articles height are less than the corresponding articles in the other column.
Look at the item columns on http://www.ebuyer.com/ - this illustrates the effect.
Pretty difficult to say from just an image. If the margin is in the html elements, you can try to set margin and padding to 0px; if the whitespace is in the bitmaps, crop them.
Related
A basic sounding question I can't find an answer for.
Making an element stretch to use the remaining width of a page is nothing new. Same with changing side by side elements to be stacked on small screens. These are both situations that allow you to pick the element order/composition (E.g. float: direction; and DOM element order for top/bottom) but how do you set the order when doing both? I guess you could say I want to control my element stack overflow. wink wink nudge nudge
The "block formatting context" trick has gotten me so close to what I want.
html:
<div class="blue">Some navigation list items.</div>
<div class="red">Search box expanding to cover empty space.</div>
css:
.red {
width:auto;
height:150px;
background:red;
min-width:200px;
overflow:hidden;
}
.blue {
height:150px;
width:300px;
background:blue;
float:left;
}
http://jsfiddle.net/A8zLY/5503/
In my case, how do I get "red" (the dynamicly sized box) to be on top when it meets its threshold (min-width)? I can't use a media query as navigation list items can change.
Well, here goes.
Although I am not sure what you are trying to accomplish and this solution might not fit your layout needs, here is a solution to the problem - switch the position of the two elements and add this css:
html, body {
padding:0;
margin:0;
}
.red {
position:relative;
margin-left:300px;
height:150px;
background:red;
}
.blue {
position:absolute;
left:0;
top:0;
height: 150px;
width: 300px;
background: blue;
}
#media (max-width:300px) {
.blue {
position:static;
width:100%;
}
.red {
margin-left:0;
}
}
http://jsfiddle.net/A8zLY/5506/
I used a media query breakpoint to wrap the two elements.
The only way for elements to be placed on top of others when they are wrapping is to be placed first in the HTML markup.
I have the following set up
http://codepen.io/anon/pen/WQoqrz
The placeholder (Gray image) represents a national flag. Flags have varying proportions so I set the height to be 100% and the width to auto, then I have the next element in the row (a table) take the remaining (dynamic) width of the row.
This is the strange part:
.player-card td, .player-card th{
/*width can be any value 1-13%*/
width:13%;
height:19px;
vertical-align:middle;
text-align:center;
border:2px solid #FFD200;
vertical-align:middle;
}
For some reason if the width is set to any value greater than 13% the table will not take up the remaining width. There are four example divs. Can anybody explain what is happening here?
I apologize for the confusing magic numbers and border set up that's happening. The strange colors and apparent missing pieces are a result of ripping this out of my files.
This is happening because the css which you have written for all the things at start.
Just remove table from that, and for table write css for that like
table{
padding:1px;
}
Padding you can write whatever value you want.
Now its is working fine for me. I think it should solve your problem.
I've come up with a solution. Here's a fiddle based off another similar question's fiddle.
http://jsfiddle.net/ux4L4n74/
div.something { float: left; height: 30px; }
div.fill {
font-size:0px;
height: 30px;
float: none;
overflow: hidden;
background: #390; }
.fiddy{
font-size:12px;
display:inline-block;
width:50%;
height:10px;
background:blue;
text-align:center;
}
Abandon the table. The css is still very sensitive and less clear than I hoped.
The font-size:0 just lets fiddy's 50% width inline-blocks split as expected (the alternative is to remove whitespace in the html).
I am making a navigation bar and I want all of the links in it to be 30px high. When I set this - height:20px; (20 pixels because there is 5px padding all around) - the height just stays normal. My full code for the a's is:
#header a {
height:20px;
background-color:#666666;
color:white;
text-decoration:none;
border:none;
padding:5px;
}
#header a:hover {
background-color:#CCCCCC;
color:black;
}
JSFiddle: http://jsfiddle.net/Lcupj/
The height property does not apply to elements that are display: inline and <a> elements are display: inline by default.
Set a different value for the display property (such as inline-block) or use line-height instead.
You can also use a padding on A tag, and use line-height either.
example :
a {
padding : 9px;
line-height : 20px;
}
Bye.
height won't apply to inline blocks.
Use display: inline-block in your CSS to make the element behave like an inline element but with some of the block element properties.
use display: inline-block;
#header a {
height:30px;
background-color:#666666;
color:white;
text-decoration:none;
border:none;
padding:5px;
display: inline-block;
}
DEMO
you can also try the following
#header a {
position:absolute;
margin:0;
padding:0;
height:20px;
background-color:#666666;
color:white;
text-decoration:none;
border:none;
padding:5px;
}
sometimes you have to manually set the height or padding of a given element, or the element would be squashed to fit inside the other other element. I also use position:absolute this gives 100% control over your elements position, size etc.
http://jsfiddle.net/Lcupj/
A is an inline element, you can't use height on it. If you want to do so you must first change it into a block element. You can do so with display: block; however this will put your element on a new "line" on your screen, if you want it to stay like an inline element, you should use display: inline-block; Or you could use line-height.
Add to the a rule display:inline-block in CSS
I'm trying to replicate the following table of contents:
You can see my attempt here and see the problem: I don't know how to keep the chapter titles restricted to a specific width so that they don't wander over to the page numbers. I've tried things like width:250px and margin-right:30px; and padding-right:30px;, but to no avail.
Here's some of the code:
.conts {
font-size:80%;
text-align:justify;
text-indent:-1em;
margin-left:1em;
margin-bottom:1.5em;
}
<div style="text-align:center;font-size:80%">CHAP. IX.</div>
<div class="conts"><span><em>Of the different Degrees of Virtue and Vice</em>, <em>and the methods of estimating them</em>. <em>Of Difficulties attending the practice of Virtue the use of Trial and Discipline in forming reasonable Beings to Virtue</em>, <em>and the Essentials of a good and bad Character</em>.</span><span style="float:right;">p. 200</span>
</div>
Any help would be appreciated.
You should use p to wrap the text instead of a span element, assign some fixed width to p and float that to the left
Demo
.conts {
font-size:80%;
text-align:justify;
text-indent:-1em;
margin-left:1em;
margin-bottom:1.5em;
width: 600px;
}
.conts p {
float: left;
width: 500px;
}
.conts span {
margin-top: 10px;
}
If you want to position the number at the end of the line, use position: absolute; wrapped inside position: relative; container.
Demo 2
First. change all this code <span style="float:right;"> Page number here </span> into <p>Page number</p>. then change your CSS like this.
.entry {
width: 450px;
padding-left: 90px;
}
strong {
font-variant:small-caps;
font-weight:normal;
}
.conts {
width:100%;
}
.conts span {
float:left;
width:80%;
font-size:80%;
text-align:justify;
text-indent:-1em;
margin-left:1em;
margin-bottom:1.5em;
}
.conts p {
float:right;
width:10%;
font-size:80%;
margin-top: 0px;
}
Last, add <br clear="all"/> after <p>Page Number</p>. hope this help :)
See Demo Here
Try adding a padding-right:100px; to the contents and margin-right:-100px; to the floated page number. That should make sure the full contents are correctly made to stay a certain width while pulling your page numbers out of that space and into the right margin.
wrap all of the chapters up into one main div. Float that left, width 80% (or whatever works). then wrap your page numbers into a second div, and float that right with a width of 20% or less, depending on your margins. MAKE SURE YOU GIVE YOUR WRAPPER DIV (or whatever div you wrapped the entire code in) A WIDTH OR THE WIDTHS YOU ASSIGN TO INSIDE DIVS WILL NOT WORK.
I'm trying to make a simple, fluid, responsive two column layout (just for the sake of learning CSS), consisting of a sidebar and a main section.
I was able to create the sidebar with 100% height, position the main content at its side, but when I put a H1 inside my main section... tada! Its margin created a margin for the sidebar as well.
Here's a minimum code that presents the problem:
<!DOCTYPE html>
<html>
<head>
<style>
html,body {
margin:0;
padding:0;
width:100%;
height:100%;
}
#sidebar {
display:block;
position:absolute;
width:25%;
min-height:100%;
border-right:1px solid #222;
background-color: #E0E0E0;
}
#main {
margin-left:25%;
display:block;
}
h1 {
padding:2%;
/* margin:0; */
/* defining the margin as zero aligns
* everything at the top */
}
</style>
</head>
<body>
<header id="sidebar">
Let's reach for the stars!
</header>
<section id="main">
<h1>Nope!</h1>
</section>
</body>
</html>
I've tested it in Chrome and Firefox, happened in both.
I've created this JSFiddle, and thanks to a comment from cimmanon, the behavior is the same.
Well, I'm lost. Am I missing something really simple?
Is this approach a good way to make a two column layout? I inspired myself reading the CSS from the Svbtle blogs.
Generally speaking, absolute positioning should be avoided unless you really do want the element removed from the document's flow. If you have a page where #main ends up having shorter content than #sidebar and the user's display isn't tall enough to display all of #sidebar's contents, you're going to have your content clipped off.
My favored way of achieving equal height columns is to use the display: table CSS properties.
http://jsfiddle.net/PmkCQ/3/
html,body {
margin:0;
padding:0;
width:100%;
height:100%;
}
body { display: table }
#sidebar {
width:25%;
border-right:1px solid #222;
background-color: #E0E0E0;
}
#sidebar, #main {
display:table-cell;
vertical-align: top; /* optional */
}
h1 {
padding:2%;
margin-top: 0;
/* margin:0; */
/* defining the margin as zero aligns
* everything at the top */
}
There's other ways, of course, but this one is less brittle than floats or absolute positioning. The only down side is that IE7 doesn't support these properties, so they'll continue using the element's previously defined (or default) display setting (for div, it will be block).
Add display: inline-block to the h1 and it won't influence the side bar. Then you can set any margin you want.
The reason it seemed fine in JSFiddle is probably the styles applied from their styles (inspect the h1 and you'll see it has margin:0).