So here's what it looks like:
http://www.whybaguio.com/php/visit/attractions.php
How can I put on three images per row without using the float element. If I use the float, the background of the wrapper gets removed :( I have no idea how to fix this, I tried using the display: inline, using of span instead of div but nothing didn't work :(
Please help!
Thaanks.
Just add overflow: hidden; to the #wrapperatt div as the floated children elements are out of the document flow causing the container to collapse - this is pretty typical float behaviour and is why you see the background disappear.
Related
I'm trying to do jquery pagination, however I'm having a problem keeping the navigator on the bottom, even with clear: both.
The problem is that the navigation div <div class="alt_page_navigation"></div> needs to be right where </ul> ends and cannot be in another div, or else the pagination get's broken.
Another problem is that because the page is dynamic, I don't know the width of the alt_page_navigation beforehand.
Here's a live page example, I've tried everything google spit up, to no avail.
If anyone knows of a simple solution, please let me know :)
Thank you :))
Clear won't work with your inline-block display, but you need that for centering.
Try this solution for creating a clearing div, then put
<div class="clearfix"></div>
between your products and your pager.
Put padding at the bottom equal to the height of your nav, and position like so:
.wrapper { position:relative; padding-bottom:1.5em }
.nav { height:1.5em; position:absolute; bottom:0 }
For example: http://jsfiddle.net/CwrMq/
But there's no reason to use absolute positioning, either; just make it a proper display:block item. For example: http://jsfiddle.net/CwrMq/1/
Your .alt_page_navigation div has display: inline-block set on it. If you delete this line in css - your div will clear the floats. If you want its content to be in the center of the page simply add text-align: center to it and make sure that its content is inline-block (now your a are block-level). You can see the working example here: http://jsfiddle.net/6FNH6/
Here is a solution i tend to use in situations like this.
Your paginator needs to go inside a container that positions it horizontally
See this fiddle - http://jsfiddle.net/94MwF/1/
Basically you are using text-align to horizontally center it, and position absolute to put it at the bottom.
My page looks like this: http://ink-12.terc.edu/index.cfm
I want to get the picture (kids' drawings) on the left to follow the rest of the centered content, when the window expands:
Per the suggestions I found in other answers, I added an outer div (#maincontent) to hold my two divs that I want to scroll instead of wrap (#tbltframe and #drawings), and some additional coding (overflow:auto; display:inline-block; white-space:nowrap).
Now my page looks like this:
http://ink-12.web5test.terc.edu/index.cfm
So now it doesn't wrap (great!), but it cut off my drop shadow on the right side (you can still see it on the bottom). And I need to get the main content centered again (following the centered header and footer)--similar to the first webpage I listed. After the changes, the main content aligns left. I tried adding margin-right and margin-left:auto, as well as text-align:center, but neither did it. I also added a min-width, which doesn't seem to do it either. I can see the drop shadow again when I change the min-width to something significantly larger (74em), then but I don't know why, because #tbltframe (50em) and #drawings (14em) = 64em total.
Any help would be very much appreciated. Suggestions to move forward with the code on either webpage I listed would be fine. Thank you!
Please try the below css on skeleton.css line 64
#maincontent {
display: inline-block;
overflow: auto;
white-space: nowrap;
width: 1169px;
}
It will increase the width of the main content div so the images will not cut from sides..
Found a solution: http://www.search-this.com/2008/08/28/lets-all-get-inline-in-a-block-in-a-block/
Have to:
Create a min-width or width on the outer div (#maincontent)
Make #maincontent a block element with display:block
Center #maincontent with text-align:center
Make the inside divs (#drawings and #tbltframe)not wrap in #maincontent with white-space:nowrap;
Make the inside divs inline block elements with display:inline-block
Then make the text inside wrap again (if you want) with white-space:normal
I have a drop down navigation that works perfectly when positioned via a left CSS property.
http://jsfiddle.net/durilai/nmME4/1/
You can see that the dropdown adjusts to the width of the content, however I would like to position right. When I do the width of the drop down will not adjust to the content. You can see this behavior at the fiddle below.
http://jsfiddle.net/durilai/cTSJt/2/
Any help is appreciated, also any knowledge into what is causing this behavior is also appreciated.
The right: 100px in ul seems to be setting a width of 100px.
If that does not need to be positioned absolute, then use float: right; and use margin-right: 100px; instead.
JSFiddle: http://jsfiddle.net/cTSJt/12/
Ok so basically, from what I can see, the issue was being caused by using the element (in this case ul) directly as the selector.
I believe this was interfering with the below ul elements within your CSS. Simply changing the first CSS rule from ul to your ID (Navigation_Main) fixes the issue.
Fixed example > http://jsfiddle.net/cTSJt/10/
Thanks
Have you tried using div's instead of the unorder list (ul) element. As you are using CSS to striping off all the default styling that makes a "ul" a list element why not use a div to start with. I can't guarantee it will solve the problem but it eliminates unnecessary CSS and you might beable to spot the issue more easily
And in reality shouldn't a ul only be used for bullet point items, in a text document?
I have list items, with a span, set to inline-block and floated right. This is the result
Here's a link to jsFiddle: http://jsfiddle.net/8bR3u/.
I've seen several suggestions to fix this by putting the span in front of the rest of the list item content, but I want a solution that doesn't jack up the markup. Anyone know of one?
The fix required can be found at http://jsfiddle.net/8bR3u/4/
The fix is to add position:relative to the ul and add position:absolute and top:5px and right:0px to the span and remove the float.
The solution is to use Relatively Absolute positioning. More info on it can be found here http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I need help to align CSS buttons. I tried many different variations and I just cannot center my button the way I want.
Firstly, have a look at this url: http://www.front-end-developer.net/cssbuttons/example.htm
I'm using 2 images to form a button (this could be done on 1 image, but in this case we've got two). Everything works as expected as long as we apply float:left or float:right to the parent div element, to 'limit' width of the div and close it as soon as the content of the div ends. You can remove float:left from the button to see what I mean.
But what about center positioned buttons? I cannot add float:left/right because I want align it in the middle.
In theory, I could set
{
width:XXpx;
margin:0 auto;
}
And I will get what you can see on this picture:
(source: front-end-developer.net)
But I don't know the length of the text inside. Having different translations my button can be very short, or 5 times that long.
I also tried to use <span> instead of <div>, but unfortunately nested inline elements don't respect their padding correctly...
And yes, I must use <a> inside, so buttons can be accessed by web crawlers.
I'm really stuck on this one.
.button {display:inline-block;}
Seems to do the trick.
inline-block browser-support: http://www.quirksmode.org/css/display.html
More about how to work around the browser issues related to inline-block:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/