I am making a Web page with a slideshow, using the same technique used on http://zine.pocoo.org/. The person I'm making the site for wants the slideshow to be centered. However, some of the photos are portrait layout and some are landscape. (This was not my choice.) I need a position: absolute to get the li's containing the items in the right place, so centering them does not work. (At least, not by normal methods.)
So, I thought that it might work to insert a 124-pixel "spacer" before the image on the portrait pictures. I tried it with a <span style="width: 124px;"> </span>, but it only inserts a single space, not the full 124 pixels. The slideshow fades in and out OK, though, so I think that it would work if I could get the proper spacing.
My question is this: does anyone know a way to have 124px of space inline in HTML (preferably without using images), or another way to center the pictures in the li items?
This is way old, but I guess it's still worth answering. The reason your span isn't expanding is because it's still an inline element. set display:inline-block to get it to behave more like a block element
I think you need to add margin-left instead of padding-left, because the margin is outside an element, and the padding is inside.
Try to avoid putting large spacers on elements and especially on multiple elements. The only way to add a spacer on your element would be relative positioning or an inline-block element (use carefully.)
Your best bet for the slideshow is to have a relative positioned <ul>. Since the <ul> is relative positioned you can set the <li>s to be position:absolute; within the <ul>. At this point you can set the <li>s to width:100%; and text-align:center; so that anything inside is positioned in the horizontal center (vertical centering in CSS2 is tricky.) Check out http://jquery.malsup.com/cycle/ which outputs inline styling by default but is still really nice.
Related
Since I am having trouble with Firefox about positioning a block element by nature (header) to be inline by using display:run-in; i'm asking you for your help ! been searching for quite some time now and I cant find which CSS method could be used instead of just applying display:run-in; to the element, which is supported in all the major browsers. It is crucial that i position the element this way.
Anyone knows a method how to do this ?
If you'd like to display your element as a block element, but would position it inline, then
display: inline-block;
will do the trick for you.
The MDN still lists run-in as an experimental value, so we shouldn't be too surprised if it doesn't fully function in Firefox at this time.
As for options, there are at least two you could use: display: inline and display: inline-block.
Inline might suffice if you don't need the properties of a block element on your header. Inline-block keeps it as a block element, so you can still do nice things like give it width, height, margin and so on.
View them on JSFiddle.
Alright i found a solution ! :) Using display:inline; in a combination with float:left; will make a block element by nature use space only as much as he needs, not full 100% of its parent element.
There is just one problem with this tecnhique if you are using bigger font for lets say a heading and want to add a paragraph right after it (on the same line). If the headings font-size is a bit bigger, heading could take 2 or even more lines of space in height where paragraphs text should be,and you will have a small gap between header and another row of paragraph under it. The solution is to add display:block; and margin-top:Xpx; to the paragraph element to align it as needed.
so what I'm trying to do basically is have the HTML document extend vertically as I add more text, and at the moment it's just giving me some really weird problems, such as:
The body won't extend downward as I add more text
The footer isn't displaying at all at this point
There are some weird symbols being inserted into the document
The only way I know how to position things is absolute, and I don't know if this is causing some problems (such as getting text under the "Home" image?)
Here's the jFiddle: http://jsfiddle.net/9nYgb/
Any help is appreciated greatly, thank you!
Absolute positioning does tend to cause problems like that. Relative positioning is simple ... instead of using the top-left corner of the document as the origin for reference, the top-left corner of where the element was supposed to be is used as a reference. So <div style="position:relative;top:10px;"> will result in the element being 10px below where it would have been had no style information been provided.
When you position elements absolutely, you take them out of the document flow. This means that other elements will act as if they aren't there. It's good for placing a modal popup div on top of a page, but it's not good for laying out a whole page.
In general, when it comes to laying out a page, I try to stick to a series of divs with height and width set. You can use margin and padding to adjust layout, and float to make items stack up horizontally to one side or the other. Sometimes I also need to set a div's display to inline or inline-block to get them to appear next to one another and act like inline elements. You can also place divs within divs to group elements together and treat them as one by manipulating the outer container(s).
In general I don't find much need for absolute positioning in a page layout.
How positioning can save our time if we use in place of float on some place in layout coding?
How we can judge where positioning would give better result?
For example (i added just for example) if this is a design
So far i only use float + margin + padding, now if i can mix positioning and save time and get pixel perfection easily then float.
Guide me
Thanks in advance.
Update 1:
these are common elements of website. should i use positioning for any of them?
The Header
---logo
---serch box
---The Navigation Menu
---top links
---Breadcrumbs
The Text Area
---Paragraphs
---images( left , right or center align)
---Tables
---vertical ordered and unordered list
The Sidebar
---vertical ordered and unordered list
The Footer
---copyright
---Important Links (horizontal list)
Form elements
Update 2:
Does positioning have any
Compatibility issue(including IE6) than float?
Is positioning is only good for fixed
width design or it's good for both
liquid and fixed?
For that layout, you don't need to use nothing else than floats, margins and paddings. Positioning (relative, absolute, fixed) should be used only in 'special occasions', eg. when you want to lift an element out of the document flow and place it somewhere it would be otherwise hard to place.
You won't save any time and won't get any more 'pixel perfect' results with positioning. You should be able to do that using traditional methods.
The only reason you should use absolute positioning in that layout is because of the RSS icon, that's a 'special occasion' I was talking about.
Looking at the design there is minimal need to using positioning, the only I can see it may be need is t give the overlapping effect on the RSS icon but even then you could do some trickery with background images to give the effect that it is overlapping.
On my sites I use position if I need to give the user the experince that elements overlap outside of the box model. Otherwise you should be fine floating, padding and using margins.
One tip howerver if you are using position:absolute; make sure the parent element has position:relative;
I have a bunch of float: left elements and some are SLIGHTLY bigger than others. I want the newline to break and have the images float all the way to the left instead of getting stuck on a bigger element.
Here is the page I'm talking about : link
If they are all the same size if works beautifully : link
Thanks! (I'd rather not get into javascript or server side scripting if I don't have to)
Well, if you really need to use float declarations, you have two options:
Use clear: left on the leftmost items - the con is that you'll have a fixed number of columns
Make the items equal in height - either by script or by hard-coding the height in the CSS
Both of these are limiting, because they work around how floats work. However, you may consider using display: inline-block instead of float, which will achieve the similar layout. You can then adjust their alignment using vertical-align.
I fixed it by removing float:left, and adding display:inline-block instead. Haven't used it for images, but should work fine, there, too.
Use display:inline-block
You may also find vertical-align: top or vertical-align:middle useful.
This is what I did. Seems to work in forcing a new line, but I'm not an html/css guru by any measure.
<p> </p>
You can wrap them in a div and give the div a set width (the width of the widest image + margin maybe?) and then float the divs. Then, set the images to the center of their containing divs. Your margins between images won't be consistent for the differently sized images but it'll lay out much more nicely on the page.
This is an old post and the links are no longer valid but because it came up early in a search I was doing I thought I should comment to help others understand the problem better.
By using float you are asking the browser to arrange your controls automatically. It responds by wrapping when the controls don't fit the width for their specified float arrangement. float:left, float:right or clear:left,clear:right,clear:both.
So if you want to force a bunch of float:left items to float uniformly into one left column then you need to make the browser decide to wrap/unwrap them at the same width. Because you don't want to do any scripting you can wrap all of the controls you want to float together in a single div. You would want to add a new wrapping div with a class like:
.LeftImages{
float:left;
}
html
<div class="LeftImages">
<img...>
<img...>
</div>
This div will automatically adjust to the width of the largest image and all the images will be floated left with the div all the time (no wrapping).
If you still want them to wrap you can give the div a width like width:30% and each of the images the float:left; style. Rather than adjust to the largest image it will vary in size and allow the contained images to wrap.
Add to .icons div {width:160px; height:130px;} will work out very nicely
Hope it will help
What's the most common way to deal with a series of block elements that need to be on a line (if javascript needs to be able to modify their widths, for example)? What are the pros and cons to applying float:left to each of them vs. using positioning to place them?
Well, if you're not too concerned with older browsers (I'm looking at you, IE6) the best way here is to go with
display:inline-block;
Basically, it creates a box-model element without clearing before or after it, so it remains in the line. Every modern browser interprets it well.
Floating would be my choice, but it really depends on what you wish to achieve. If you can provide a more specific example I would be able to give you a clear reason as to what and why I think you should use. However here is a brief set of pros and cons that I have come accross (I'm assuming that by positioning you mean absolute positioning):
Positioning pros:
very precise positioning in relation to the next ancestor marked as position relative - allows for great flexibility
allows for elements to be in a different order visually than they are in the DOM
Positioning cons:
Harder to line up with other elements since the positioned element is no longer in the document flow and also because of the level of precision required.
Other elements ignore the absolutely positioned element which means you could have a potential overlap, unless you account for the minimum and maximum size of the positioned element
harder to implement a footer if you are using absolute positioning for your columns.
Float pros:
really easy to construct simple and advanced layouts
no footer problem
no worrying about precision, browser takes care of that for you
parent container stretches
Float cons:
Lots of pitfalls for those less experienced with float layouts that may lead to many questions being asked on SO :)
As to the clear:both element that Sebastian mentioned, There's a simple way around that. Lets say you have a container div and 2 floated divs inside.
Html:
<div id="con">
<div class="float"></div>
<div class="float"></div>
</div>
CSS:
#con { background:#f0f; }
.float { float:left; width:100px; height:100px; background:#0ff; }
if you were to run this code you would notice that the container div (the magenta coloured one) is only a single pixel high whereas the floated divs were correct - which is the problem Sebastian mentioned. Now you could take his advice and add a br or float the container which would not be very semantic - so here is a slightly more elegant solution. Just add overflow:hidden; to the container div like so:
#con { background:#f0f; overflow:hidden; }
Now your container should wrap the floated divs properly.
The parent container does not stretch with them unless it is also assigned a float tag or there is a br with clear:both; at the bottom.
I would go with the float:left instead of the positioning. The browser does all the aligning when one object stretches. So there is less for you to care about.
I think i wouldn't explicitly position the elements but rather instruct the browser to use an inline layout for the elements using display:inline and let the browser handle the positioning.
regarding float vs positioning i think the only way to line them up using positioning is by using absolute positioning, and that means you need to handle re-sizes(of the browser view port) in order to keep the elements in place.
I think that by using the float property the browser handles the re-sizing issues for you and re-renders the element in the correct place.
Only disadvantage to float in situations like this for me has been that you'll either need to left justify them or right justify them -- centering is not an option. However you've mentioned you're using absolute values for widths, so you could just nest all the floated elements in a DIV element and add either margin-right or margin-left to the parent DIV to simulate center alignment.