So I'm working on a page for a friend ( http://jojorules.com/index.php/our-pillows/ ) and I have 4 rows, with 3 columns each. Each column needs to have 80px of space between eachother, HOWEVER, the first and last column of each row needs to align with the logo/navbar links (indicated by the red lines on the image at the bottom).
Where I want the 80px spacing is indicated by the blue line/text in the image at the bottom as well.
These padding will only be on desktop, which I will add later, but I've been having issues coming up with a clean way that works well, and sticks with those red line alignments.
for the space between the columns remove left padding of first column and right padding of last column to align the content with navbar.
and to make the 80px work use this snippet (Assuming you are using col-md-4):
.col-md-4:first-child { padding-left: 0; padding-right: 40px; }
.col-md-4:last-child { padding-right: 0; padding-left: 40px; }
.col-md-4:nth-child(2) { padding-right: 40px; padding-left: 40px; }
Note: To make the text on right column to be exactly aligned with navbar, You must use text-align: justify in order to force the text for alignment.
Related
i have a table that have tooltip on mouseover, i would like to show 20px x 20px outside of the parent div
so for example if the cell is on the top left quarter of the table it the top tooltip appear 20 px below the bottom of the cell and 20 px to the right this works awesome, but i can't figure how to make the rest work properly, how can i go above or on the left of a div, ex, how can i make my div at the bottom right not over flow with the outside of the page.
i have tried this:
.HeatMapTooltip.rightHM.topHM{
right:-115px;
margin-bottom:-118px;
}
But with no success
This image is an example of the 4 quarters of my table.
thank you in advance
https://jsfiddle.net/vnLxe23b/2/
You want to make use of margin-left and margin-top rather than right and bottom.
The following should overwrite your existing rules:
.HeatMapTooltip.rightHM.topHM {
margin-left: -154px;
margin-top: 20px;
}
.HeatMapTooltip.leftHM.bottomHM {
margin-left: 20px;
margin-top: -114px;
}
.HeatMapTooltip.rightHM.bottomHM {
margin-left: -154px;
margin-top: -65px;
}
This can be seen working here.
You may need to adjust the values to suit.
I'm trying to build a website with bootstrap and other css resources and I'm trying to fix the following issue in the last 2 days and I think I won't be able to fix it.
I have a row of 50 250x250 cards with a left-margin of 30px. When I'm on the full screen, I get no problems. However, when I change the screen size, a huge gap between the latest card and the screen borders occurs. This continues until the browser can fill the empty space with the following card.
I don't want to have this empty space and want the cards to automatically align themselves to the center.
I've also divided the columns to 10 rows but still, there was no change.
Is there a way to fix this issue? Screenshots are attached for fullscreen and smaller screen.
You can also see it yourself from: http://sagtekin.com/letseat/maintest.php
Thank you very much for your valuable help.
I have to say your code is a bit of a mess, I would encourage you to go back and reference the bootstrap documentation for proper semantic and structural code as you have a bunch of unnecessary stuff happening.
In a nutshell you have to make your containing div has a text-align: center applied. I also gave a margin-right and left of 15px to offset spacing and maintain centering.
Secondly make sure your column classes make sense and fit into each other mathematically! I've wrapped your images in a col-lg-12 and wrap your images in a col-lg-4 so that there will be at least 3 up. Adjust image sizing as you see fit I made smaller images so you could see the responsiveness in the fiddle more.
.container {
text-align: center;
}
#card {
background: #FAFAFA;
width: 150px;
height: 150px;
margin-bottom: 30px;
margin-left: 15px;
margin-right: 15px;
overflow: hidden;
display: inline-block;
}
#card h2 {
background-color: #3F51B5;
opacity: 0.9;
text-align: center;
position: absolute;
margin: 0px;
width: 150px;
}
img {
float: left;
}
Here is a Fiddle
https://jsfiddle.net/gward90/oygyj9qd/
You have several times id card, use class.
Don't set the width of the column divs, let bootstrap do it. (Fixed size and responsive design don't mix too well.)
Use the img tag unless you really want the image in the background and then put something over it which dictates the size.
If you do it like that, then the container will behave as you expect it.
I have this code: http://jsfiddle.net/mVX93/48/
Is it possible to remove the border from the far left side and far right hand side of the table?
I want to align it to either side of the page, and you can see it doesn't align with the test text. My idea would be to use nth item to apply border-left: 0px; to the first item and border-right: 0px to the last item however this doesn't seem to work.
Can anyone show me if this is possible and how it should be implemented please?
Since you have border-spacing:10px; there will be space remaining on the right and left side to separate the td. However, you could put a div around the table and change it's margin-left and margin-right.
Try this:
body {
background-color: gray;
overflow: hidden;
}
.grid {
margin-left: -20px;
margin-right: -20px;
}
You cell 4's text is overflowing but it is because you have a lot of . or dots without a space so when you enter text it should be fine.
DEMO
If you change the border-spacing to border-spacing-left:0px it aligns with Test but reduces the space between the cells. If you also add another Test and float it right it aligns with the right side of the table.
So, I have this layout looks like this
As you can see there, the div is floating/aligned to the right side perfectly but on the left side there's a gap between it, how do I clear the gap?
DIV CSS:
.thread-list{
width: 40%;
background-color: #fff;
padding: 10px;
border-style:solid;
border-width:1px;
border-color:#F0F0F0;
margin-bottom: 3px;
margin-right: 10px;
margin-bottom: 10px;
overflow: auto;
float: left;
}
NOTE: The div is showing content dynamically (from database), and I can't make the div in 2 separated columns.
Sorry, if I'm being not clear enough.
DEMO
If you float multiple elements & one of the div has larger height then others, then these types of effect are created (the one you showed in your screenshot).
Solution 1: clear float left from 1st element of each row using :nth-child(2n+1) in your case its ..2n.. cuz you have 2 elements in one row.
Add this css in your style-sheet:
.thread-list:nth-child(2n+1){
clear:left;
}
Solution 2: Solution 1 will align all the div's but there will still be a negative space beneath, if you dont want that then you have to use plugins like Masonry Layout, this effect can not be achieved with pure css.
I am having trouble with a list which has items with alternating heights based on the content. This causes the rows to break as seen here: http://jsfiddle.net/PYRGb/ Try re-sizing the display view to see the effect.
What i would ideally like is for the list item to continue to the next row with space enough to make a row without hitting the edge of the above row. Is this possible?
I know i have mentioned 'rows' and a table could be a solution but I
am using lists to keep the display fluid and adaptable to a range of
devices.
Only solution i have found is to set a min-height that i am certain
content will not overflow like so: http://jsfiddle.net/PYRGb/1/ But i
really cannot predict the amount of content in the list items and
would like the list item to adapt height if possible.
EDIT: Just a note, if you see the resize the display to have 3 columns, you can see the effect I need but it doesn't work in other situations. (Not sure if this is the same in all browsers, I am using Chrome 26)
Thanks
remove the float and make the li display as inline-block with vertical align top.
http://jsfiddle.net/stevendwood/PYRGb/2/
ul li{
width: 100px;
padding: 10px;
margin: 0 0 20px 20px;
border: 1px solid red;
background: #eaeaea;
display: inline-block;
vertical-align: top;
}
You can set vertical align to middle or whatever you prefer.