I was working on a personal website for someone, and I came across an issue centering his portfolio section on his page. The concerned page can be viewed at http://websitetesting.pro/portfolio.html, my website for testing purposes. The portfolio images are under the "figure" tag, but the problem should be under the class "rowone", as that's the parent element to the figure images. Here's the code for row one.
.rowone {
height:240px;
margin-left: 25%;
margin-right: 25%;
line-height: 240px;
text-align: center;
margin: auto;
}
If not in there, the error should be somewhere in either the "main" css, or the "portfolio" css which refers directly to the portfolio page.
The .column class is a block element which it fills the whole page by width. When set to inline block it retains a certain width and it can be moved around.
.column {
display: inline-block;
}
or
hover01 {
display: inline-block;
}
options 2 is better. SO you wouldn't target a general class
.rowone {
height: 240px;
line-height: 240px;
text-align: center;
display: table;
margin: 0 auto;
}
Related
I have been developing a Kanban board for a generic system we maintain in work. I have the core functionality all working but am getting a little stuck on the styling. The following screenshot shows what I currently have:
There is a main DIV that contains all the 'columns/containers' and this is styled:
.kanban-board {
height: calc(100% - 60px);
width: calc(100% + 20px);
display: normal;
padding-bottom: 0px;
overflow-y: scroll;
}
This div contains a series of 'containers' - each grey column which is another DIV styled:
.kanban-container {
float: left;
clear: right;
margin: 20px 10px 0px 10px;
border-radius: 5px;
background-color: #eaebed;
width: 300px;
padding-bottom: 0px;
padding-left: 6px;
min-height: calc(50% - 20px);
display: table;
}
and to note - there could be any number of these 'containers' so they currently wrap to the next line as per the above screen shot. Each 'container' DIV contains an UnOrdered sortable List (UL) and this is styled:
.kanban-sortable {
list-style-type: none;
margin: 0;
padding: 2px;
min-height: 30px;
border-radius: 5px;
height: 100%;
width: 285px;
display: table-row;
}
If you look back to the screenshot, the last 'container' of the first row extends beyond the (min) height of the other containers... Seems okay until the longest is NOT the last in the row:
Now it just looks rubbish... And I have not a clue on how to get this sorted. I have checked some other Kanban examples and my other option is to just flow off page to the right with an X-Scroll bar - but my current spec requires me to fix this issue.
I hope I have supplied enough info for a quick fix.
BTW - im happy to address any other rookie mistakes I may have made from my example.
UPDATE
I have had tried the advice given to use display: inline-block;(in the .kanban-container) instead of:
float: left;
display: table;
And its difficult to see if it has fixed my issue as the auto-resize of the 'containers' height is no longer working
Since you are using floats, you'll need a container for each row that clears the previous one. Another way would be to remove the float, and set the .kanban-container to display: inline-block. If you need table properties in that, you'll have to add an inner container, but frankly I'm a little confused by all the styles used here and the !importants that go with them.
<div class="kanban-row">
<div class="kanban-container">
<div class="kanban-container">
...
</div>
<div class="kanban-row">
...
css:
.kanban-row {
clear: left;
overflow: hidden; // may not be necessary
}
.kanban-container {
float: left;
}
or (without rows):
.kanban-container {
display: inline-block;
}
So, currently, I have three buttons down one side and when I reduce the screen size, they stay there, after flexing and putting fixed widths on them. Here is the CodePen, if anyone could have a look for what I am missing.
I have this for now which I thought would work:
.buttons {
width: 100%;
}
.button-container {
width: 100%;
margin: auto;
}
.button-strip img {
width: 30%;
float: left;
overflow: hidden;
}
Still very new to all of this :)
Some images aren't showing up on the CodePen you linked, but here's what I worked out, perhaps it's what you're looking for:
.button-strip {
width: 30%;
display: inline-block; /* Stop them from breaking lines */
}
.button-container {
width: 100%;
text-align: center; /* Not really required, but I thought it looked best centered */
}
This is what it looks like to me, so hopefully I could still manage to help you
I am making a grid of logos for a client's site. I am wondering how to make them centered within the grids in rows and columns. I have for css:
.center-block {
display: block;
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
}
let me know if any solutions exist.
If you want the logo centered horizontally you can do something like this and replace .center-me with your class for the element you want centered.
if it's a block element do this.
.center-me {
margin: 0 auto;
}
if it's inline (text or links) do this
.center-me {
text-align: center;
}
I've been learning HTML and CSS for around 2 months, but apparently I'm still a neophyte. I'm trying to create somewhat of a header nav bar here, but when ever I set the property display:inline, poof ! They disappear. I'm pretty sure this problem is rudimentary but any input you have helps.
div {
border-radius: 5px 55px 5px 55px;
}
#Header {
height: 50px;
width: 200px;
background-color: #f38630;
margin-bottom: 10px;
margin-top: 10px;
display: inline;
}
.Left {
height: 300px;
width: 150px;
background-color: #A7DBD8;
float: left;
margin-bottom: 10px;
}
.Right {
height: 300px;
width: 450px;
background-color: #E0E4CC;
float: right;
margin-bottom: 10px;
}
#Footer {
height: 50px;
background-color: #69D2E7;
clear: both;
}
In nutshell, you should not be using display: inline for anything that is not intended to be a displayed inside a block of text.
This is a good site for learning layout basics: http://learnlayout.com
If you really want to learn this stuff though, this is the best place I know: https://dash.generalassemb.ly :)
Hope that helps. Let me know if you don’t feel I’ve answered your question.
I would not use display : inline -block for divs but apply it to the list items or a tags.
It has to do with the generation of containing blocks, whether or not your element is inline or block, also the type of positioning. An inline element without content will not show.
Here is the de facto resource for your problem:
de facto web standards
visual rendering
I have following fiddle: http://jsfiddle.net/BFSH4/
As you see there are two issues:
The h1 and h2 aren't vertically aligned.
The nav and the content aren't horzontal alligned.
For the 1. I already tried margin and padding. No success...
The second one also isn't that easy the common ways of floating and using inline-block don't work...
What am I doing wrong?
I finally managed floating the header. The problem was that hgroup isn't a block element.
However even it worked after all I think it is better to use a real image for the enterprise name and slogan.
Now only the issue with the horizontal alignment fails.
I don't know why:
http://jsfiddle.net/BFSH4/2/
I can do what I want there is no way that they wan't to be side by side!
Solution for your first problem (found here):
HTML
<div class="header">
<span></span><img src="images/prototype.png" /><hgroup><h1>Prototype</h1><h2>SideBySide</h2></hgroup>
</div>
CSS
.header {
height: 160px;
border: 1px solid #8a2be2;
/* text-align: center; */
}
.header span {
height: 100%;
vertical-align: middle;
display: inline-block;
}
.header img {
display: inline-block;
height: 160px;
float: left; /* added, so the image will appear left to the text correctly */
}
.header hgroup {
margin: 0;
vertical-align: middle;
display: inline-block;
}
This solution depends on display: inline-block
Solution for the second problem:
.nav {
width: 229px;
display: block;
margin: 0 auto;
}
Live demo: http://jsfiddle.net/BFSH4/4/