I've run into an issue where the thumbnail spacing in my image gallery is all over the place and I'm burnt out, lol.
Here are a few example pages of what it's supposed to look like across all pages that contain thumbnails: Good | Good | Good
However, on most of the album pages, they get crunched together, like this page for example: Bad
Then there's this page, where it seems to have completely gone kablooey: Really Bad
I'm sure I'm missing a margin or padding somewhere, but it's eluding me at the moment. Anyone able to sort this out?
thanks!
You should re-write the CSS to have all lis float either left or right with a margin to taste.
This will ensure that all elements will stay within the specified distance of each other and removes the need for positioning and tons of unique IDs when one class will solve the issue.
Don't forget to add a clearing element before you close the div ;)
CSS:
#wrap
{
width: 450px;
margin: 0 auto;
border: 1px dashed #000;
}
.imageHolder
{
float: left;
width: 100px;
margin: 5px;
border: 1px dashed #00f;
}
.clear
{
display: block;
clear: both;
}
http://jsfiddle.net/Kyle_Sevenoaks/a6JGm/
Related
With the help of the nice people here I got a reasonably decent mock-up: http://jsfiddle.net/CecilWesterhof/4kLwK/2
In the middle there is a main document and besides this there is a comment section.
It looks reasonable, but there are two problems with it.
When the document becomes less high, the position of the comments is not really correct. It should be top, middle and bottom. But currently (in FireFox, which is the most important) when the document height is lowered the middle section gets into the bottom section.
What should I change in this code?
The other problem is the next button. I would like to have it on the right, but I did not get this to work.
I tried:
button.next {
background: #84a0C4;
border-radius: 10px;
clear: both;
color: #FFFFFF;
float: right;
font-size: 200%;
overflow: hidden;
}
But that places the button at the right, but also makes the comment section bigger and gives you a scrollbar when you do not need one.
EDIT
For the button problem I found a hack. Using the above style and adding a few breaks like:
<button class="next" id="next">Next</button>
<br/><br/><br/>
solves the button problem. Not really neat, so if there is a better way …
To see the problem with the float without the hack:
How it looks in FF under Linux without the hack http://decebal.nl/images/2014-04-30ButtonRightProblem.png
About the alignment problem, this picture displays it:
wrong alignment http://decebal.nl/images/2014-04-30AlignProblem.png
Questioning is merged into ‘Always check for a reference’ instead of being halfway between ‘Be short …’ and ‘Always check …’.
You have to pick minimum min-height for your comment div, as you will always have an issue with that.
Also I've found some weird positioning logic in your css file including tranformations of Y scale... No idea why you need that. It'll probably cause many troubles in IE browsers.
Anyway, here is the fiddle -> http://jsfiddle.net/4kLwK/7/
and in a summary my modifications of the CSS file:
added:
#comment
{ position:relative;
min-height:250px;
height:100%;
}
modified:
.middle {
position: absolute;
border:1px solid red;
top: 40%;
}
.bottom {
position: absolute;
bottom: 0px;
}
Edit:
With one little addition it did the trick.
.bottom {
position: absolute;
bottom: 0px;
width: 99%; /*
In this way the button stays right.
I have here a code in Dabblet: http://dabblet.com/gist/5705036
I wanted to have these segment to stick at their position even if the browser is re-sized without using absolute positioning. Like for example, The main content container breaks a new line when the browser is re-sized [I use CSS Floats in most of my containers].
Is there something wrong with my coding?
Do floats proper for layouts ? or I need to use anything else?..
I just can't fix it by myself and by doing a lot of research , still, haven't got a good idea to use it as a way to fix this. [Also, I use HTML5 tags such as: section, article, nav, etc.. ]
Just remove the float:left; from maincontent id and apply a display:table-cell;. Your issue will be resolved.
Here is the code.
#maincontent {
border: 1px solid #BBBBBB;
border-radius: 5px 5px 5px 5px;
display: table-cell;
margin-top: 15px;
min-height: 400px;
padding: 2px 6px;
width: 700px;
}
Hope this helps.
First of all You should always clear parent element if You use floats inside the parent element. Your right element go down because You don't have minimal width of container, ther is sample of code:
#contentWrapper {
width: 1000px;
overflow: hidden; /*scroll / auto it's depends on You */
}
I noticed that in your code you had a space in <div id="contentWrapper "> which stopped your CSS for that element from appearing. Also, you needed 2 more pixels of width on your #contentWrapper.
#contentWrapper {
width: 992px;
}
Removing the space and changing the width of #contentWrapper worked for me. I had a quick look at the maths but haven't worked out why it needs to be 992px. Anyone?
So, in answer to your question, I'd say floats are fine and your approach is good, there were just those two minor errors.
I want to nest a div inside another div so that the outer div grows with the inner div as the inner div has text placed inside it. Would appreciate any help. Here is a link so you get the idea. You will need to open your browser up to full screen to see the bottom of it correctly.
Hello Slalvenko, Have posted up both your code (thank you kindly) and my code which I know is not perfect but I'm learning. Yes I am aware of css reset styles that set browser default values to 0 and I did download one once. But I'm hoping that in a years time I will be aware of all of this and just write it into my code. I suppose a reset saves time and trouble but I'm enjoying pottering around what with all of this being new to me. Here is your code and my code. Mine is slightly different because I was wanting to add two more divs to it later which I will show you when I get there. Mike http://www.hnw7.com
.outer {
background-color: #CCF;
margin-top: 0px;
right: 0px;
margin-right: 0px;
bottom: 0px;
margin-bottom: 0px;
}
.inner {
width: 535px;
background-color: #E6E6FF;
color: black;
padding: 20px 50px 20px 50px;
overflow: hidden;
margin: 0 auto;
}
I'm not sure if this was your question but try this. The floats in your .inner div are making the parent's height 0, since the floats take those elements from the document flow. You need to clear those floats if you want your parent to have actual height. I find that easiest way to do so is to add overflow:hidden; to the parent element.
You can read about clearing floats here
Live demo: http://jsfiddle.net/9Y7Cm/1/
I want the text to be placed at the 50% of the image height - so just in the middle of the box.
I was searching a lot on SO and google - there are a lot of questions like this, but each other is about another problem... I was tried the solutions given by people but none of them worked so thats why I'm asking you here for any solution!
Just set vertical-align: middle on the img.
http://jsfiddle.net/9Y7Cm/2/
replace the following with these:
#column-content {
display: table-cell;
border: 1px solid red;
padding: 10px;
}
img{
vertical-align:middle;
}
it's the image you want to center.
i tried to display a bar at the top of the web page but the bar appears about 5 px empty place at the top, right and left sides of the page. The image was 1 black line and i wanted to repeat it from left to right. How can i fix it?
ul.postinge
{
width:auto;
position:relative;
margin:0cm 0cm 0cm 0 cm;
display:block;
height:105px;
background:url(images/bar.jpg) repeat-x top left;
}
Thanks
in some browsers the body and or html elements have margins or padding. Many experienced CSS developers use CSS resets, but all you should need is:
html, body
{
margin: 0;
padding: 0;
}
I typically discourage people from using pre-built CSS resets, as I believe it's more important to have a good understanding of what styles are being set and why. That being said, re-using a core stylesheet that resets styles to the site-specific format is a good idea.
That being said, you're liable to come across:
*
{
margin: 0;
padding: 0;
}
Which may help in this particular case, however you're likely going to come across unexpected issues involving forms and tables by using this "simple" style.
Use a CSS reset like: http://developer.yahoo.com/yui/reset/
You need to reset the body tag:
body {margin:0;padding:0}
Using a reset will allow you to "normalize" the margins and padding for your lists as well, among other things
Same as others are saying, only thing I'd add is list-style and border are other good things to reset too. Generally you never want things unless you specifically specify them.
* { margin: 0; padding: 0; list-style: none; border: none; }
What * does, is it's a wildcard that effects all elements on the page. It can be used in more specific cases as well, for example: if you have container with an id of container you could make all elements within it have a red border with the following code:
#container * {
border: 1px solid #F00;
}
body { margin: 0; padding: 0; }
Also:
margin:0cm 0cm 0cm 0 cm;
are we really measuring in centimeters?
also note the extra space after the last 0
ul.postinge { width: auto; position: relative; margin: 0; padding: 0; display: block; height: 105px; background: url('images/bar.jpg') repeat-x top left; }
add this style in ur css
*{margin:0; padding:0;}
you have to do this because every element has its default margin and padding. By doing this u r setting all elements default padding and margin to zero.