Alright, I am currently working on this website, http://www.katiesamsonlaxfest.com/preview.html. I would like to add some contact information in the bottom left hand corner of the page (below the content area,to the left of the footer navigation on the background). I also want to be able to keep the footer navigation centered. Any suggestions?
The easiest way, given your layout, may be to position things with a relative positioning. IE - in your footer div, specify 2 more divs. Make one 20%ish width and the second 80%ish wide. Put the current footer in div 2, left-align the text, then adjust the percentages until everything lines up nicely.
Try this:
<div id="footer">
<div id="left_footer">
some content
</div>
<ul>
<li>Home</li>
<li>The Event</li>
<li> The Cause </li>
<li> The Teams </li>
<li> To Donate </li>
<li> The Sponsors </li>
</ul>
<p> Copyright 2010, The Katie Samson Foundation</p>
</div>
I set footer to be positioned relative, and then the newly added div, left_footer, to be positioned absolute, left 0px, and top a few pixels down.
#footer
{
position: relative;
}
#left_footer
{
position: absolute;
left: 0px;
top: 28px;
}
Looks ok in Firefox and IE8.
Here's what I just came up with using JSBin: http://jsbin.com/exogi/edit
Seems to do exactly what you want, floats, and doesn't change the centering of your footer text. The important thing to note is that the margins on #footer are 0 for the up and down (can be changed) and left and right are equal to the width of #contact-info. In most browsers (I think IE6 & 7 don't like that) it should work pretty well.
Related
I am stuck and hope someone has an easy solution I've not thought about :-)
I have a 1040px centered div for page content, menu and footer.
The header image shall have the same left margin as the content div AND grow to the right side (for those with higher screen resolutions)
Is there any way to do this using CSS? I know, I could calculate the left margin of the content box with javascript and set the header-margin dynamically, but I would prefer a css solution.
Regards,
Martin
Why not just place the header outside of the sitecontainer?
And then giving it a width of 100%, and a min-width of 1040px.
(Or stretch the background image, depending on if it's 1 color, or an image.)
Is that what you meant? Maybe post the HTML and the CSS, by the way.
Alright, so what you mean is that the header does stretch across, but that the content inside the header (a menu, a logo, whatever) doesn't get centered like the sitecontainer.
If that's the case, here's what to do;
<div id="header">
<div id="headercontent">
<img src="logo.png">
<nav>
<ul>
<li>menuitem</li>
<li>menuitem</li>
<li>menuitem</li>
<li>menuitem</li>
</ul>
</nav>
</div>
</div>
And for the style something like;
#footer{
width: 100%;
min-width: 1040px;
color: [your header color];
}
#headercontent{
[in here you simply put the same styling as the sitecontainer]
}
Is that what you meant? I hope it helped.
At the get-go, here's the fiddle.
I want a <ul> in which each <li> has a <p> and then an icon floating on the rhs. The paragraph may take 1-4 lines, and I want the icon to sit nicely in the middle of the line no matter what. The double wrapping <p> is necessary, trust me :)
The width of the <p> has to be 100% less whatever space is necessary for the icon. Basically, I want the icon to sit halfway up the space left by the right-margin of the <p>.
The solution here uses background-image, but that's no good for me because the image has to serve as a draggable handle for mobile devices. (I'm using this approach to modify a jQuery sortable desktop site for touch screen.)
The fiddle uses a placeholder <img> because of the demands of jsfiddle, but I'll actually use an <a> with an image off a sprite.
I want to avoid having a negative top margin, because the margin will move into the preceding line and could mess up the dragging (i.e., you could inadvertently drag the wrong line).
Thanks.
Based on this answer by bfrohs,
DEMO here
HTML
<ul>
<li class="absoluteCenterWrapper">
<p class="text">This is some text that flows over multiple lines and I want it to have the icon on the rhs that stays in the middle of the line no matter how many lines of text (and I'd really like not to use a negative top margin on the image).</p>
<img class="icon" src="http://placekitten.com/g/20/20">
</li>
</ul>
CSS
.text {
margin-right:35px;
}
.absoluteCenterWrapper {
position:relative;
}
.icon {
margin:auto;
position:absolute;
max-height:100%;
max-width:100%;
top:0;
bottom:0;
right:0;
}
Change the position of the li element to be absolute and that of the img also absolute. Consider adding this code instead of using your css.
.icon{
margin:40% 5%;
float:right;position:absolute;
}
See this fiddle.
http://jsfiddle.net/NXWPE/47/
I would like to position a dynamically generated div directly above a button (higher in the page, not Z-index). When the button is clicked, I want to reveal the div with a reverse jQuery slideToggle().
I have set up an example in the fiddle: http://jsfiddle.net/sablefoste/YWnJE/30/
I am close, but I can't seem to position the reveal to appear directly above the button. I am able to get it to slide upward with by using my CSS position:absolute; left:0;bottom:0; following the first example in http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/.
If I change the left:0; bottom:0; to something else, I can position it correctly until the browser window is resized.
Is there a way to do this without brute force (specifically, identifying the top of the #storiesbutton, and jQuery to reposition the bottom of the #storylist)?
I appreciate any ideas! Thank you!
I'm going on pure guesswork here, but my thing is that you want the menu to appear above the button. I've tried it using
var list = $('#storylist'),
button = $('#storiesbutton'),
speed = 500;
list.hide().css('bottom', button.css('top'))
.css('margin-top', list.outerHeight() * -1);
So the position of the stories is set on load based on the position of the button and the height of the list.
Fiddle: http://jsfiddle.net/qt3LE/
Like I said though, I'm not 100% on what you are after. This may help with the positioning.
Also I used $.toggle(function(){}, function(){}) rather that toggleSlide as you have more control over the individual toggles.
So when you put position: absolute on that element, what you are doing it is positioning it as a fixed set of pixels according it's first non-static ancestor. In most cases and this case, that would be the body itself, which is why it was stuck at the bottom. What you want to do is constrain that absolutely positioned element inside another div so that it does not get positioned at the bottom of the page, but instead where you want it. So you would just wrap that element:
<div id="wrapper">
<div id="storylist" style="display:none;">
<ul>
<li>
Title 1 goes here.
</li>
<li>
Title 2 goes here.
</li>
<li>
Maybe a Title 3 goes here, but it is dynamically generated.
</li>
</ul>
</div>
</div>
inside another div, and give that new div
#wrapper{
position: relative;
}
Here's the example in a fiddle.
I am not sure but if you're looking for the information to be above the button you might try removing position:absolute
Like this
http://jsfiddle.net/cjds/AnpzK/
Put the buttonbar and the storyline in a container like this:
<div id="container">
<div id="storylist">
<ul>
<li>
Title 1 goes here.
</li>
<li>
Title 2 goes here.
</li>
<li>
Maybe a Title 3 goes here, but it is dynamically generated.
</li>
</ul>
</div>
<div class= "buttonbar">
<div>
<span class="navbutton" id="librarybutton" >
<a href ="#" title="Information">
Information
</a>
</span>
<span class="navbutton" id="storiesbutton" >
<a href ="#">
Stories
</a>
</span>
</div>
</div>
and here are the css for them:
#container {
position:relative;
background:#efefef;
}
#storylist{
height:60px;
position:absolute;
left:0;
bottom:0;
}
.buttonbar{
margin:20px 50px 20px 0;
text-align:center;
width:100%;
position:absolute;
bottom:-60px;
}
I have absolute positioned the button bar AND the storyline so you could get that desired "upward sliding" action. Hope this is what you want. Here's fiddle of what i did. http://jsfiddle.net/YWnJE/41/
I'm trying to create a horizontal (no line breaks) unordered list of images on my website using code as follows:
<ul class="ImageSet">
<li>
<img src="blah">
</li>
<li>
<img src="blah">
</li>
<li>
<img src="blah">
</li>
</ul>
In my CSS, I'm using the following rules:
.ImageSet { white-space: nowrap; }
.ImageSet li { display: inline; float: left; height: 100% }
This is working properly in Chrome, but not in Firefox, for some reason does anyone know why?
EDIT: To clarify, the problem in FF is that the li's still wrap. I'm trying to make them all appear in a single, unbroken horizontal line going off the rightmost edge of the page.
Try removing float:left as display:inline should suffice
When you float li's they will wrap when they reach the end of their parent container (which could be the body tag). If you are wanting the image to disappear out of the screen you will need to set the width of the parent container (the ul) and use overflow hidden or auto to get your desired effect.
I'm trying to place this menu on the left hand side of the page:
<div class="left-menu" style="left: 123px; top: 355px">
<ul>
<li> Categories </li>
<li> Weapons </li>
<li> Armor </li>
<li> Manuals </li>
<li> Sustenance </li>
<li> Test </li>
</ul>
</div>
The problem is that if I use absolute or fixed values, different screen sizes will render the navigation bar differently. I also have a second div that contains all the main content which also needs to be moved to the right, so far I'm using relative values which seems to work no matter the screen size.
float is indeed the right property to achieve this. However, the example given by bmatthews68 can be improved. The most important thing about floating boxes is that they must specify an explicit width. This can be rather inconvenient but this is the way CSS works. However, notice that px is a unit of measure that has no place in the world of HTML/CSS, at least not to specify widths.
Always resort to measures that will work with different font sizes, i.e. either use em or %. Now, if the menu is implemented as a floating body, then this means that the main content floats “around” it. If the main content is higher than the menu, this might not be what you want:
float1 http://page.mi.fu-berlin.de/krudolph/stuff/float1.png
<div style="width: 10em; float: left;">Left</div>
<div>Right, spanning<br/> multiple lines</div>
You can correct this behaviour by giving the main content a margin-left equal to the width of the menu:
float2 http://page.mi.fu-berlin.de/krudolph/stuff/float2.png
<div style="width: 10em; float: left;">Left</div>
<div style="margin-left: 10em;">Right, spanning<br/> multiple lines</div>
In most cases you also want to give the main content a padding-left so it doesn't “stick” to the menu too closely.
By the way, it's trivial to change the above so that the menu is on the right side instead of the left: simply change every occurrence of the word “left” to “right”.
Ah, one last thing. If the menu's content is higher than the main content, it will render oddly because float does some odd things. In that case, you will have to clear the box that comes below the floating body, as in bmatthews68's example.
/EDIT: Damn, HTML doesn't work the way the preview showed it. Well, I've included pictures instead.
I think you're supposed to use the float property for positioning things like that. You can read about it here.
All the answers saying to use floats (with explicit widths) are correct. But to answer the original question, what is the best way to position a <div>? It depends.
CSS is highly contextual, and the flow of a page is dependent on the structure of your HTML. Normal flow is how elements, and their children, will layout top to bottom (for block elements) and left to right (for inline elements) inside their containing block (usually the parent). This is how the majority of your layout should work. You will tend to rely on width, margin, and padding to define the spacing and layout of the elements to the other elements around it (be they <div>, <ul>, <p>, or otherwise, HTML is mostly semantic at this point).
Using styles like float or absolute or relative positioning can help you achieve very specific goals of your layout, but it's important to know how to use them. As has been explained, float is generally used to place block elements next to each other, and it really good for multi-column layouts.
I won't go into more details here, but you might want to check out the following:
SitePoint CSS References - probably the most straightforward and complete CSS reference I've found online.
W3C CSS2.1 Visual Formatting Model - Yes, its a tough read, but it does explain everything.
You should use the float and clear CSS attributes to get the desired effect.
First I defined styles for the called left and right for the two columns in my layout and a style called clearer used to reset the page flow.
<style type="text/css">
.left {
float: left;
width: 200px;
}
.right {
float: right;
width: 800px;
}
.clear {
clear: both;
height: 1px;
}
</style>
Then I use them to layout my page.
<div>
<div class="left">
<ul>
<li>Categories</li>
<li>Weapons</li>
<li>Armor</li>
<li>Manuals</li>
<li>Sustenance</li>
<li>Test</li>
</ul>
</div>
<div class="right">
Blah Blah Blah....
</div>
</div>
<div class="clear" />
you can use float
<div class="left-menu">
<ul>
<li> Categories </li>
<li> Weapons </li>
<li> Armor </li>
<li> Manuals </li>
<li> Sustenance </li>
<li> Test </li>
</ul>
</div>
in css file
.left-menu{float:left;width:200px;}