I wanted to make a site with the grid system. ( I have made one already, so I know/knew how it works )
This is my custum grid: http://grids.heroku.com/grid.css?column_width=100&column_amount=8&gutter_width=15
And now comes the problem: When I try to put prefix_1 as a class nothing happen it just stays in the same place. And I have one prefix_1 grid_3 and one grid_4. so it is 1+3+4=8. My grid is 8 columns wide so it has to fit together easily, but it doesn't.
http://jsfiddle.net/gekkeabt/5LA82/
<div class="container_8">
<span id="download" class="prefix_1 grid_3"><b>Download</b> Leasy CMS</span>
<span id="download" class="grid_4"><b>Download</b> Macha Webserver</span>
<span id="about" class="prefix_2 grid_4 suffix_2"><b>About</b> Me</span>
</div>
I checked my code 100 times. But I can't find where it went wrong.
Maybe someone can help me out?
Thanks!
EDIT:
I solved the prefix and suffix problem by defining the class in another div outside of the span.
So it looks like:
<div class="prefix_1 grid_3"><span id="download">The content....</span></div>
Try removing the
padding:10px 50px 10px 50px;
line from your #download,#about CSS declaration (or at least the horizontal padding of 2 x 50px).
It's that extra padding that makes the elements wider than one row.
Here's how it looks without that line: http://jsfiddle.net/WHG4u/
Please add this css to your /css/custom.css to make the page stop jumping each time the slide changes
.avia-content-slider-active .slide-entry-wrap { height: 275px; }
Related
This is a continuation of a small project I started on over the weekend (I raised a query re H1 header size). I've got this as far as I want to take it at this stage (simple to-do list - non-functional at the moment). I added a navbar and designed an imported my own logo (in the menu bar and at the bottom of the screen). I've included the code from a codepen but for some reason (not sure at the moment) it hasn't pulled through the background colour and logo PNG hence why I've included a screenshot too.
However, the issue is that I cannot locate where I'm going wrong with regard to the containers not lining up: you can see the first two containers (with one row each - with the ADD rect which I'm going to change to a box and the 'You have '3' complete tasks:" rect box) then the five containers/rows below that are offset from those above.
The code for the "container-row-col" is (as far as I can tell) the same, but would placing all these rows in one container (containing all the 7 rows plus their columns) make a difference?
Maybe the media queries need to be looked at?
<div class="row">
<div class="col-8 col-md-6 white-rect mr-4 mb-2 ">|.............................................
</div>
<div class="col-6 col-md-4 white-rect center-block">ADD</div>
</div>
</div>
Here's a snippet of the container-row-col code with a codepen link below. I can only apologise for the amount of commenting out I've done...part of my learning process I guess.
Many thanks.
Codepen
Screen Shot of Full Page as it appears in my browser
You have too many nested containers. Just put all your .rows into one parent .container or add some style to the nested .containers witch will remove the extra padding. Something like this:
.container .container {
padding: 0;
}
The HTML scheme is following:
<div class="items">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>
.item CSS style:
float: left;
And the result:
But the white boxes are not aligned right one after another one -- where could be the issue? I;ve tried also using display: inline-block; instead of float: left;, but the result was basically the same.
Thank you
You can use CSS 3 column-width and column-gap like this..
http://www.bootply.com/118335
I run into the exact same problem and I found this one that worked for me.
https://github.com/kudago/waterfall
It depends only on js no css, though I'm still using bootstrap for other styling. I also use jquery.infinitescroll.js to dynamically load items and after the items are appended, waterfall will do its magic and put everything in place.
The only glitch I found is sometimes items could overlap a bit vertically, as soon as you keep scrolling down they are put correctly. I'm not sure why this is happening, a bit annoying but till I find something better.
Hope this helps.
I'm creating a site with a horizontal navbar in which the buttons are designed as elements, making them easy to differentiate, and they individually light up when you a:hover over them. Here's a link: http://allpropestmanagement.net/commercial2.html
Obviously not a finished product.
My current problem involves that big purple field on the far right of the navbar, the one that's not a button. That too is an element, but with hover disabled and a whole load of nonbreaking spaces to pad it. That's the problem. I would like that purple field to extend all the way to the right end (with a tiny margin, like it does on the left side). The trouble with nbsp, as you can imagine, is that there's a finite number of them, and they don't scale. So if the navbar is the perfect length on my computer with, say, 16 nbsps, on someone else's machine it won't reach all the way and on yet another person's it will reach too far.
The html looks like this:
<div id="navmenu">
<form>
Home
Commercial
Meet The Pro
Contact
<a id="farright" style="border-top-right-radius:25px;">
<i> "We'll get the job done right!"
</i></a>
</form>
</div>
I feel odd saying this, but the css is kind of bulky and I'm having trouble formatting this post. Perhaps I'll add it in a few minutes once this post is visible, but the css file is "smithmicropurple.css".
Anyway, I would like a way to stretch that element so it always fits correctly, or if not, some other method that achieves the same effect. I have already tried setting widths individually for each element and that doesn't appear to work.
I like to do these types of things to "help" others (rarely, if I'm lucky), but also to help me learn more about html/css.
So I've given it the old college try with this FIDDLE.
HTML
<div class='holderdiv'>
<a href='#'>One</a>
<a href='#'>Two</a>
<a href='#'>Three</a>
<a href='#'>Four</a>
<a href='#'>We'll Get the Job Done Right!</a>
</div>
I won't post the CSS because it's pretty long. It's in the fiddle.
Please don't consider this a "real" answer. Perhaps just something to think about.
Semantically, I am not sure why the parent is a form element, i'd suggest changing that to a HTML5 <nav> element. (assuming you're using HTML5, of course)
The approach taken here is to set the child elements to display:table-cell, and give the targeted element, #farright a width of 100% to fill the remaining space. Also, text-align:center will effectively center all the child elements. No need for %nbsp;
#navmenu {
font-size: 14pt;
margin: 5px 0 0 5px;
}
#navmenu form {
width: 940px;
}
#navmenu form > a {
display: table-cell;
white-space: nowrap;
text-align:center;
}
#navmenu #farright {
width:100%;
}
Wondering if I can get some help here. In the fiddle I have most of the necessary markup.
http://jsfiddle.net/theDawckta/54z3J/
I cannot figure out how to make the columnItem in column 1 to extend to the bottom of the row. What I would like to see in column 1 is the green fill up the red row part while leaving the black content the same size.
I think it's impossible, so good luck, I have had enough of this.
I actually cut out quite a bit of your code, so apologies in advance if you needed those extra divs (but it shouldn't be too difficult to add them in later). Also, you may want to test this in IE--I'm not sure what version this cuts out on (but I think it works in IE7+).
HTML
<div class="row">
<div class="column">
<div class="columnItem">
<p>Content</p>
</div>
</div>
<div class="column">
<div class="columnItem">
<p>Content</p>
</div>
<div class="columnItem">
<p>Content</p>
</div>
</div>
</div>
CSS
.row {
overflow:hidden;
}
.column {
float:left;
width:50%;
padding-bottom:10000px;
margin-bottom:-10000px;
}
/* You can remove everything under this comment */
.columnItem {
padding:10px;
margin:5px;
background:blue;
}
.column:nth-of-type(1) {
background:yellow;
}
.column:nth-of-type(2) {
background:pink;
}
How it works
It's really quite simple. Each row hides everything past where the actual content is (with overflow:hidden; while each column pushes itself downward 10,000 pixels with padding-bottom:10000px;, and then back up again with margin-bottom:-10000px;. The number of pixels can be increased or decreased, just make sure it's large enough to fit your content.
P.S. - Anything is possible, the impossible just takes longer. ~ NSA
Omer Ben-Nahum suggested tables, but I'm not sure that is how you want to mark up your content. There really is no way to achieve this effect using CSS, but you can use some workarounds that give the site the appearance that you were able to get it to work. Look into using Faux Columns as an alternative to tables.
bfroh's solution is one i've used several times before, but in general I usually use a background image to emulate situations like this (where the content in one div isn't making it tall enough)
The wrapping container's background image could have the background color for the entire left div and just set that to 'repeat-y'
Dealing with these sort of issues (in my experience) either pretty much entails the hack that bfroh posted or a solution like this.
Hope it helped!
You cannot do it using css, but you can do this via javascript method.
I wouldn't recommend that because it means that you will have to run the script each time the content changes and I'm not sure you always know when it does.
If this issue is important to you, I suggest you use tables.
For a veeery long time I've had this problem but always I managed to avoid it somehow (by removing elements or changing order) and now here it is again and I have no idea how to get rid of it. First, it appeared in my admin panel, but only few users acces that so it's not big problem (nobody uses IE6), but now this problem is appearing on my index page of portal and I must get rid of it because 15% of portal visitors are IE6 visitors.
Here's LINK to test version of portal:
If you open this page in IE6 you can see that second news (titled: Test one) doesn't have any text, only image. Well, if you make mouseover on that image you will see that there is some text. This problem occurs only when I enter paragraf whose height isn't bigger that image's height. If I enter same image but with some more text this show/hide problem disappears. I hope someone knows why is this happening because this problem has been torturing me for few years but I never figured out what is the main cause of this problem and how to avoid it.
Any help is welcome!
Ile
EDIT:
Here is solution for this problem:
http://www.positioniseverything.net/explorer/peekaboo.html
Well, It's easiest to make copy paste from page where it's detailed explained:
HTML code:
<!--********** Start of demo ***********-->
<div id="floatholder">
<div id="float">
<br />
<span> Float
<br /><br />
test link
</span>
</div>
This is bare text. Test link
<div style="border: 3px solid #f00; background: #dde;">This is text inside a div.
Test link</div>
This is bare text. Test link
<div style="border: 3px solid #0c0; background: #dde;">This is text inside a div.
Test link</div>
This is bare text. Test link
<div style="border: 3px solid #00f; background: #dde;">This is text inside a div.
Test link</div>
This is bare text. Test link
<div id="clear">Clearing div</div> <!--******* Note: a cleared <br> will not prevent bug *******-->
<div style="border: 3px solid #00f; background: #dde;">This div is after the cleared div. (purple box) If cleared div
does not touch float, bug is not triggered. Test link</div>
</div>
<!--********** End of demo ***********-->
And here is screenshoot from IE6
Fixes:
The fixes:
Finally, this bug will be triggered
even if div#float preceeds
div#floatholder, provided that this
external float actually touches the
clearing div within div#floatholder!
There are three ways we know to
prevent this bug.
Keep the clearing div from touching the float, or avoid using a
background on div#floatholder. Not
exactly ideal.
Give both div#floatholder and div#float 'position: relative'. Be
sure to fully test this method.
Give div#floatholder hasLayout (now the preferred method)
We suggest using a conditional comment
to feed a hasLayout fix to IE6 and
below only. Further details helpful to
this method may be found in the Zoom
Fix page.
Thanks to Simon Willison for the
timely screenshot.
This bug is called Peekaboo, and here is detail explanation of everything:
http://www.positioniseverything.net/explorer/peekaboo.html
Although, I have to admit that for me it worked when I set all these 3 steps. After first two it didn't work, but after I added display: inline to floating div it worked.
Can you please post (the bare minimum example) the code here, so that we can reference it long after your server's copy goes away (... just like now)? Otherwise, this question will serve no one as a reference or learning tool.