I'm trying to use CSS to create callouts in a block of text (for things like block quotes or relevant pictures). It has to be manipulable with Javascript and work with CMSs, so I can't just embed the callout in the middle of the text block and float it. Instead, the callouts are located at the top of the text block and I use a pusher div of a certain height to move it down to the desired location.
This technique works perfectly when all of the callouts are on the same side of the text block. The problem is when I want a callout on each side. The first pusher div pushes the second pusher div down, even though they are floated to different sides and both have a very small set width.
Here is an example of the problem. The pusher divs (normally 0px thick and transparent) are the red bars on the side. Both of them should start at the top of the block, just under the header. As you can see (at least if you're using Webkite/Gecko, I haven't tried anything else), the bar on the right starts underneath the bar on the left.
http://keaton.ws/Files/theCalloutProblem.html
I've tried playing around with the structure of the HTML (Taking the pusher and callout out of their parent div) and changing the display property of almost everything, and nothing has worked. Most of the changes I make result in the text not wrapping properly. I know this is a rather obscure problem, but any help would be greatly appreciated.
-Keaton
Here's the code, with styles inline:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style="width:750px; margin:0 auto;">
<div style="width:750px;text-align:center;"><h1>This is the header</h1></div>
<!-- Left Callout -->
<div>
<div style="width:0px;float:left;height:100px;"></div>
<div style="width:200px;float:left;clear:left;"><!-- Callout Text --></div>
</div>
<!-- Right Callout -->
<div>
<div style="width:0px;float:right;height:250px;"></div>
<div style="width:200px;float:right;clear:right;"><!-- Callout Text --></div>
</div>
<div style="width:700px; margin: 0 auto;">
<!-- Body Text -->
</div>
</div>
</body>
</html>
In these examples, the alternating left/right floats always have the same height.
http://meyerweb.com/eric/css/edge/slantastic/holiday.html
http://meyerweb.com/eric/css/edge/slantastic/demo2.html (<--why is this link unclickable?)
http://csstextwrap.com/#export
It seems that you have to sort the floats by height/position to achieve the desired effect:
http://jsfiddle.net/ge5YG/2/
Related
I have this page with a fixed nabber on top (using default bootstrap navbar).
The page holds a menu that includes links to different parts of the page using html anchors. The point is: the scrolling position is not perfect because I have this navbar occupying the first 50px of the page, so after clicking on the html link to anchor, the content is 50px hidden by the navbar.
What I want to do is: that the anchor link consider the first 50px to scroll it perfectly to the content.
Does anyone have an idea of how to fix it?
With Twitter Bootstrap there is a necessity to provide additional spacing when the navbar is fixed.
Underneath(or after, you might say) you'll want to provide the additional spacing required to unsheath the covered content out of mystery and into usefulness.
further reading: http://getbootstrap.com/components/#navbar-fixed-top (they actually recommend a padding-top of 70px to the body element)
You can either place a div that is 50px high over the content you want to scroll to, then anchor to that:
Link
<div id="link" style="height:50px;"></div>
<div class="content">
Content Here...
</div>
JSFiddle Demo
Or, give the content div a padding-top, or margin-top of the height of the nav bar:
Link
<div id="link" class="content">
Content Here...
</div>
CSS:
.content{
padding-top:50px;
}
JSFiddle Demo
Using Bootstrap Responsive - HTML appears like...
<div class="row-fluid Center">
<div id="divMapCanvas" class="span6">
<div id="map_canvas">
</div>
</div>
<div id="divMapPanel" class="span6">
<div id="map_panel">
</div>
</div>
</div>
Test Webpage: http://gfw.yyyz.net/Contact
What I would like to do is initially hide the divMapPanel div and have the divMapCanvas div centered on the page. Then after the directions button is pressed, the divMapCanvas would move to the left and the divMapPanel would appear. I have tried merely hiding the divMapPanel, but I can't get the divMapCanval centered.
Thanks in advance for any suggestions?
On the the div with class span6 that wrap your canvas, you need to set a fixed width (I used width: 526px; when I got it to work on your example page, but you could use % instead, or what have you, but it cannot be set to auto which is the default setting), you also have to get rid of the floating by adding float: none; and margin: 0 auto;.
On the divMapPanel you need to add display: none, to make sure that it doesn't take up any space in the DOM. Using visibility: hidden for instance will not work.
Then when the user click on direction and you want to display both elements side by side, you get rid of these settings by adding float: left etc. back in, and both elements should appear side by side.
I am trying to create a website where I have both the title bar and the page footer in fixed positions, i.e. title bar always top and footer always bottom.
This has created issue in that I need to push the content on the page upwards so that the page footer will not overlap the content.
I need to add some space to the bottom of the content so that the overlap doesn't occur when a user scrolls to the bottom of the page.
I have tried to add a margin-bottom css property to the bottom most DIV so that there should be some space added to the bottom of the page, this worked for the top most DIV using a margin-top css property but not for the bottom.
This is the main structure to my website, without content:
<html>
<head>
</head>
<body>
<div class="CONTAINER">
<div class="PAGENAVBAR">
</div>
<div class='CATEGORYNAVBAR'>
</div>
<div class='PAGE_CONTENT'>
<div class="LEFTCONTAINER">
</div>
<div class="RIGHTCONTAINER">
</div>
</div>
<div class="PAGEFOOTER">
</div>
</div>
</body>
Can someone please suggest a method to achieve this effect?
I've found this to be effective:
body {
padding-bottom: 50px;
}
margin-bottom moves the whole element, try padding-bottom instead.
adding padding-bottom to the last element should do this, or you could add padding-bottom to the container element, just remember that this will be added to the height if you have it set in your css
use paragraph to do this. html paragraph
Try using 'padding-bottom' instead. The behaviour of this is more consistent across different browsers than 'margin-bottom'.
But be aware this will add to the overall height of the element in question, if you're using this in any calculations.
I'd give PAGE_CONTENT a margin-bottom; you may need to also give it overflow:hidden if your LEFTCONTAINER and RIGHT_CONTAINER are floated.
In css give margin-bottom attribute to the container class.
.container{
margin-bottom:100px;
}
I have this page: http://jsfiddle.net/minitech/yU3aj/show/
If you look in the source, the CSS defines that the <header> should have side padding of 135px on each side, and the content should have 135px margin on each side. Why does the content end up having double that in spacing?
It doesn't. You're floating elements in the <header> and not clearing them.
Add clear: both; to your styles for the content div and it will move below the header and to the left.
It looks fine on my screen (Firefox 5.0)
Though I've read that some old IE versions have a problem called double margin
Also make sure to put a clearfix div after those two child elements in <header>:
<header>
<div id="notifications" class="left">notifications</div>
<div class="right">
<span class="dropdown">▾</span> username
</div>
<div style="clear: both;"></div>
</header>
EDIT: after checking out your screenshot it's obvious that you're missing that clearing div and the content below "floats after" your notifications box. Usually it is considered to be good practice to put a clearing element at the end of the floated elements, this way forcing the container to expand and "cover" all the contained elements.
This is the div for my product, you can see the demo like this:
<div class="productItem">
<div>
<!--image -->
</div>
<div>
<!--text -->
</div>
</div>
http://www.4freeimagehost.com/show.php?i=4aba7e2005a0.jpg
Each product has a product image and product text. The image is on the top, and the text is under each image. But you can see that, image can have different size, so I don't want the text always in the bottom instead of just below the image. How can I layout the text must in the bottom, except from assigning the absolute position.
It might be worth considering making your images a standard size. Perhaps a large and a smaller size? You could always have an option to show a larger image when someone clicks on the smaller one?
You could also simplify your HTML using something like this:
<div class="productItem">
<img class="large" />
<p>Text</p>
</div>
This would let you change the CSS depending upon the image (by giving it a class), and reduce unnecessary div's.
Perhaps force the image to display above the text using the block attribute?
img {display:block;}
I must be missing something because this seems fairly simple.
<style type="text/css">
.productItem {
text-align: center;
}
<div class="productItem">
<img src="whatever"><br style="clear: both;" />
Text
</div>
Perhaps there's more that I'm not understanding.
From your screenshot, it looks like your text is always below the image, but in the right half of your screenshot, when a small image is in the same row as a larger image, the text isn't lining up (the product descriptions aren't at the bottom of the cell). Is that what you're asking about? How to get the text all aligned to the bottom of the row when the image size varies?
You could set the table row that's containing all the products to be <tr valign="bottom">, which will push everything to the bottom, stacking the images on top of the text. This would mean that the small images would all have their bottoms aligned with each other, not their tops. If you want the images to stay up, but the text to go down, instead style the image DIV like this: <div style="height:200px; width:200px; overflow:hidden; text-align:center;">. This will create a larger placeholder for smaller images such that the text beneath them all lines up, and if an image is too big, it will get cropped rather than stretch out and cause the text to get all out of line.
i assume you have a container for productItem
so it should be something like that:
<div class="productList">
<div class="productItem">
<div>
<!--image -->
</div>
<div class="productText">
<!--text -->
</div>
</div>
<div class="productItem">
<div>
<!--image -->
</div>
<div class="productText">
<!--text -->
</div>
</div>
</div>
i don't know why you dont want to use absolute positioning but that's only solution in this case (without giving fixed height to image or divs).
This setting would not hurt anything and will work on all common modern browsers including ie6.
All you need to do is give a different classname for product text or use different tag for addressing it.
css:
.productsList {background:#f00; overflow:hidden;height:1%;position:relative;}
.productItem {float:left;background:#ff0;}
.productText {bottom:0;position:absolute;text-align}
try this. should work perfectly
other solution is written above by MidnightLightining. using fixed height for image container.