I have a dropdown with content. I'm trying to make the content align at 0px at the left of the screen. No matter what I try, it still remains aligned within its parent container.
Since the dropdowns are centred in the browser, I'm having difficulty getting it work go where I want.
http://jsfiddle.net/XkuHy/2/
<div id="sticky">
<div id="nav">
<div class="logo">logo</div>
<span class="n list">browse</span>
<span class="n list">search</span>
<div class="n drop">
<span>My Account</span>
<div>
hello, world!
</div>
</div>
</div>
NOTE: CSS is not my strong suit.
NOTE 2: StackOverflow kept banging on about needed code and not just a link to jsFiddle - not sure why so ignore the code dumped as you can see it in the fiddle.
The .content box is being positioned relative to its parent, the .n.drop div because it has a relative positioning. If you remove the relative positioning from the .n.drop element you will find the .content element to position itself about where you want it. You may need to also add a margin-top: 16px; to the .content element to make it clear the menu.
You can see the updated demo here: http://jsfiddle.net/XkuHy/14/
When you make its margin to 0px. It is going to 0px but with respect to its parent. So you can try margin of negative values to its css:
margin-left:-205%;
like this: http://jsfiddle.net/XkuHy/13/
or
left: -345px;
like this: http://jsfiddle.net/XkuHy/13/
But both of them has cross browser comparability issue.
I have solved this issue by adding this to css, where "hello world" has a class name of "dropmenu":
.drop:hover .dropmenu{
position: fixed;
top: 100px;
left: 0;
width: 100%;
height:100px;
padding:0;
margin:0;
z-index:998;
background-color:white;
}
Surprise! surprise! I think it works! Check out:
http://jsfiddle.net/XkuHy/10/
Related
I have a box which displays the contents of a chosen file using jquery.
The code for the box is
<div class="lightbox">
<div class="lightbox-content"></div>
<div id="close-lightbox">Close</div>
</div>
I want the close-lightbox div to be always at the bottom of the box.So the css for it is
#close-lightbox{color:red;position:absolute;bottom:0;padding-left:30%;}
Div lightbox has overflow:auto.
Now, what happens is that if the lightbox-content is not big and it fits the fixed size of lightbox then there is no scrolling and the close-ligthbox does appear at the bottom as I wanted.
But if the lightbox-content is big and doesn't fit the fixed size of lightbox then there is scrolling but the close-lightbox appears at the bottom of the lightbox BEFORE that scrolls down which means it appears on the middle of the lightbox-content.
Any suggestions how I can fix that?
.lightbox{
height:auto;
overflow:hidden;
}
.lightbox-content{
height:270px;
overflow:auto;
}
Change the height of this based on your needs of your lightbox.
You could wrap lightbox in its own wrapper, and position the close-lightbox relative to it.
HTML
<div class="lightbox-wrapper">
<div class="lightbox">
<div class="lightbox-content"></div>
<div id="close-lightbox">Close</div>
</div>
</div>
CSS
.lightbox-wrapper {
position: relative;
}
#close-lightbox {
position: absolute;
bottom: 5px;
left: 30%;
}
Take a look at this fiddle - http://jsfiddle.net/joplomacedo/4chu6/
EDIT Ohgodwhy's solution is actually cleaner if you're able to move lightbox's overflow:auto to lightbox-content -> While I was at it, I made fiddle with his solution - http://jsfiddle.net/joplomacedo/4chu6/2/
I am trying to build a simple slideshow. So far, the basic markup looks like this:
<h1>My Slideshow</h1>
<p>This paragraph behaves as expected.</p>
<div class="slide-container">
<div class="slide">
<h2>First Slide</h2>
<p>Some stuff on this slide…</p>
</div>
<div class="slide">
<h2>Second Slide</h2>
<p>And some more stuff here…</p>
</div>
</div>
<p>This paragraph will disappear beneath the stacked images.</p>
This is the corresponding CSS:
.slide-container {
position: relative;
}
.slide {
position: absolute;
top: 0;
/* just for the looks */
width: 20em;
padding: 0 1em;
border: 1px solid steelblue;
background: white;
}
The problem is, that the .slide-container does not fit to the height of its child (or children) .slide (see screenshot).
I know i can set the height of the .slide-container manually, but i want to put this in a fluid grid, where the height is variable. Is there any way to achieve this?
Absolutely-positioned items are logically-associated with their parent, but not "physically". They're not part of the layout, so the parent item can't really see how big they are. You need to code the size yourself, or sniff it with JavaScript and set it at run-time.
You can use this using jquery:
function sliderheight(){
divHeight = $('.slide').height();
$('.slide-container').css({'height' : divHeight});
}
sliderheight();
This will resize the 'slide-container' div to have the same height as the 'slide' div.
You can make it responsive by calling the function on the firing of a 'resize' event:
$(window).resize(sliderheight);
Hope this helps.
Perfect way of doing this is to set the relative parent's dimensions i.e. height & width to fit the absolute children.
http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/
This guy wrote enough to understand the basics of css positioning. Actually the relative parent is used to position all its absolute child logically. But it does not share the physical position as a result it does not stretch itself to cover the relative children.
I am attempting to create a visual element using DIV elements and CSS which should display data in the format demonstrated below.
[-----50%-----|--25%--|--25%--]
When using the code and CSS I've specified below, my final element always spills onto the next line and the CSS percentage values I'm specifying don't seem to create the layout properly.
Could anybody suggest a better way to do this?
My HTML
<div class="visual-indicator-title">
All Items</div>
<div class="visual-indicator-holder">
<div class="vi-internal-element" style="width: 25%; background-color: #5E9BD1;">
25%</div>
<div class="vi-internal-element" style="width: 25%; background-color: #AB884D;">
25%</div>
<div class="vi-internal-element" style="width: 50%;">
50%</div>
</div>
<div class="visual-legend">
<ul class="inline-block">
<li>
<div class="legend-blue">
</div>
Sales</li>
<li><span class="legend-tan"></span>Processed</li>
<li><span class="legend-grey"></span>Pending Processing</li>
</ul>
My CSS
.visual-indicator-title{
font-size:12px;
font-weight:bold;
color:#777777;
}
.visual-indicator-holder
{
width:100%;
background-color:#666666;
height:28px;
border-radius: 8px;
}
.visual-indicator-holder .vi-internal-element
{
font-size:11px;
text-align:center;
color:#ffffff;
background-color:#777777;
border-radius: 6px;
display:inline-block;
}
The reason this happens is that with inline or inline-block, white space in the element will affect the rendering (adds space). Here is your demo working with white space removed, no changes to the CSS: http://jsfiddle.net/fZXnU/
Removing white space is not trivial though, so you'd be better off floating the elements (which triggers display:block). Working demo with plenty of white space: http://jsfiddle.net/fZXnU/1/
You can use float: left, position: relative, and then define width in percentage as you are.
I modified your code to use float here: http://jsfiddle.net/Z3kdP/.
If you remove the white-space between the divs then it works as intended.
http://jsfiddle.net/TeJuU/
EDIT: See this question: How to remove the space between inline-block elements?
You can make font-size: 0 on the parent element if you don't want to edit your html.
http://jsfiddle.net/TeJuU/1/
All of those elements have margin and padding with them as well as the percentages creating rounding errors during calculation. So you need to make sure you set, or take into consideration, what margin is doing to this. For rounding errors, it's typical to let the percentages add up to something less than 100% but then add margin: auto to center the whole thing.
I recently start to learn CSS and table less design.
After reviewing some tutorials now I am involved with converting PSD Mockup to XHTML and CSS.
Most often my problem is to positioning elements and containers.
for example this below design:
I am converting this to CSS and HTML.
I have no problem with styling Input elements.
about main layout it seems two columns layout , right ?
How do I style containers ?
I wrote this code It displays better here.
I divided my page to two containers and valued (float:left) to left container.
As specified in jsFiddle link elements on the left side container had come out of the box (I think its because of float).
I can't set containers position to absolute.
Now please help me to refactor and change my code. And please explain to me how to position elements right ?
i think a
<div style="clear:both;"></div>
before the </div> of the container will work.
edit:
http://jsfiddle.net/xNwAc/5/
Try and have a wrapping element to contain your two columns. with W3C code, you'll want to use floated elements. The elements don't have any padding, you can work on them yourself, but it's a very basic structure to follow:
The CSS:
#wrapper { width: 960px; margin: 0 auto; background: blue; } /* positions it center of page */
#left { float: left; width: 50%; background: red;}
#right { float: right; width: 50%; background: green;}
The HTML:
<div id="wrapper">
<div id="left"> Left content </div>
<div id="right"> Right content </div>
</div>
You have to set a new formating context on the container, with overflow:auto; eg.
I sugger you to read the specification which is very clear and useful.
As the exclamation point is not a part of the content you can place it as a background image.
I have the page with the structure:
<div id="container">
<div id="header">top menu</div>
<div id="content">content</div>
<div id ="footer" align="center">
<div class="left">left part of footer menu</div>
<div class="right">right part of footer menu</div>
</div>
</div>
Css style:
#container {
position:relative;
height:auto !important;
height:100%;
min-height:100%;
}
#content {
padding:0em 0em 12em;
}
#footer {
position:absolute;
width:100%;
bottom:0;
}
.left {
float: left;
}
.right {
float: right;
}
That works fine in all browsers. But when I add
<script type="text/javascript"></script>
inside
<div class="left">
in FireFox(only) the part of footer after the script come up to the top - between header and content divs.
What's wrong with it?
UPD
This all was about wrong mark-up inside #content. And only FireFox didn't understand when I missed one of closed table tag:) Thank you guys, you helped me to sort it out.
The #footer has absolute position and is inside the relatively positioned #container div so I would expect this. Maybe try making container absolutley positioned.
Also I think your markup is not what you intended. There are one too many opening div tags.
change the #container height from auto to 100% and remove the extra lines for height.
The auto is messing up the calculations as it overrides the 100% lines due to the !important value
Since #footer's position is absolute, with bottom 0, it will be positioned relative to its first (non statically positioned) parent, which is #container. Essentially what's happening here is that #container is becoming mush less high, and dragging #footer with it.
That's happening because you have two height: settings in the css for #container (somehow the script tag triggers it to refresh) so the behaviour would be undefined.
If you're trying to make the footer stick to the bottom of the window, including as it's resized, I'd advise having a javascript function handle it, triggered by the window's resize event (it's fairly simple, see this question on javascript window resize event
You could try the CSS a different way with absolute positioning. I try and avoid float as it can lead to unexpected rendering issues. See this jsFiddle for an alternate approach. Working in IE6, Chrome12 and FF3.6 and FF4 for me.