I'm running foundation 5 and using magellan, and try as i might it consistently breaks out of the grid. I'm new to this, any insight would be helpful. When I first load the page, it is positioned correctly inside the grid. As I scroll down, the magellan menu jumps to the left and fills the entire width of the page. I scroll up again, and it does not change (meaning it is still all the way to the left) even though it "unsticks" itself from the top of the browser window. I currently only have it on my localhost testserver. I'm seeing the same problem on firefox and chrome for windows.
Here is my code:
<div class="row">
<div class="large-10" column>
<div data-magellan-expedition="fixed">
<dl class="sub-nav">
<dd data-magellan-arrival="arrival">
Arrival
</dd>
<dd data-magellan-arrival="destination">
Destination
</dd>
</dl>
</div>
</div>
<div class="large-2" column>nothing</div>
<div class="large-10" column>
<a name="arrival"></a>
<span data-magellan-destination="arrival">Arrival</span>
<a name="destination"></a>
<span data-magellan-destination="destination">DEstination</span>
</div>
<div class="large-2" column>nothing</div>
</div> <!--closes div class row-->
I'd really appreciate any insight. I've been driving myself crazy with this for way too long. It must be possible - on the docs page it seems magellan stays correctly in the middle column of the grid: http://foundation.zurb.com/docs/components/magellan.html
On the docs a left: auto !important has been set for the .fixed class. Even when applying that, your issue is still related to: Fixed position but relative to container (and Position Fixed width 100%).
A possible fix (or something which may help) will be using the following CSS for the large grid:
.fixed {
background-color:transparent;
position: fixed;
left: 50%;
top: 0%;
transform: translateX(calc(-41.66% + 30px));
}
.fixed .sub-nav {
background-color:white;
margin-right: calc(41.66% + 30px);
padding: 15px;
}
Related
I am learning HTML5. I am trying to create a section in the browser that is a certain size and things like buttons text etc are placed inside it depending on what button is pressed. The trouble is I cant seem to make the section smaller than the screen or start a set amount below the header so that is has a "boarder" all the way around it showing the background image. Here is the HTML5 I have
<body>
<header>
<nav id="nav1">
<button id="b1"> Goals </button>
<button id="b2"> Habits </button>
<button id="b3"> Diary </button>
</nav>
</header>
<section id="goals">
</section>
Here is the CSS I have for the section
section
{
height: 700px;
background-color:blue;
overflow:auto;
top:50px;
transform:translateY(20px);
}
http://jsfiddle.net/wcpkM/
see this Fiddle, also look at #TylerH comment.
When using
top: 50px;
like you did, you either need position: absolute, relative or fixed.
Would not recommend doing that unless absolute necessary.
Instead of top:50px do margin-top: 50px. Top: 50px will only work if you have a position: rule.
Your sizing problem is because you haven't defined a width.
my html looks like this:
<div class="container">
<div class="header-content">
hello!
</div>
</div>
i've recently come into a situation where I need the 'header' to be 100% the window for a full-width background. usually i would do this css:
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
unfortunately, i am fairly deep into a framework and can't wrap the container. i need to construct it within the container.
<div class="container">
<div class="header-background-color">
<div class="container">
<div class="header-content">
hi!
</div>
</div>
</div>
</div>
i can't figure out a way to accomplish this, and am wondering if this is possible.
if i use this css for header-background-color
background: blue;
left:0;
position: absolute;
width: 100%;
the element looks right, but the page flow is interrupted.
does anyone know if my target goal is reachable?
i made a bootply to illustrate this http://www.bootply.com/129060
You can use a child (>) selector to select the first container element and set its width to 100% and remove the padding.
.example-3 > .container {
width: 100%;
padding: 0;
}
This assumes you'll always have a wrapper around it with a unique class name (or use body if it's the first div), but this also allows you to remove the position: absolute which is causing the overlap and the height can stay dynamic.
See forked bootply: http://www.bootply.com/129065
I've added a button that inserts a paragraph into the div so you can see how it's not affected by changes in height.
Only thing I can think of is using a dumby element to maintain the vertical space (i.e. set the height), and then use absolute positioning on the full width content (as you mention). This is really ugly and won't be a good solution if the height of the content is dynamic.
See #content_dumby element in forked bootply: http://www.bootply.com/129063
I have this div:
<div style="padding:5px 100px 0px 100px; bottom:5px; position:absolute">
<div class="divLine" style="margin:5px 0px 10px 0px;"></div>
<div>
<p class="pull-right titleLink">© Ofir Messing 2013-2014 · <a class="titleLink" href="#">Link</a></p>
<p style="text-align:left;">למעלה</p>
</div>
</div>
</div>
I want it in the bottom of the page I tried everything. How can I do that?
I have an image under it.
http://jsbin.com/ginoveja/2
Hi just remove position:fixed it will solve the issue.
Don't position your images with position: fixed; for your current situation. position: fixed; is for keep an element fixed on the screen so that it never moves. When you view your images on a smaller screen, the text must move somewhere, so it overlaps the fixed images.
I have verified it in Mozilla Firefox fire bug by removing position:fixed attribute, it was working.
Best of luck.
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/
I'm new to CSS and racking my brain on the following:
I have a row of images that are sourced from a database query. I display the photos in a row which wraps within a page. For example, if there are 20 photos, it will display 5 per row based on the width of the page and the photo.
My challenge: I want to position a DIV in the same relative spot on each photo. This div will contain a link to take an action on the photo. All of the action code is working, but I cannot, for the life of me, correctly position the DIV.
I can't post an image of the mockup I'm trying to achieve (I'm too new), but here's a description:
Imagine a row of photos the size of a postage stamp. In the upper right corner of each, is a gray box containing a link. I'm unable to consistently position the gray box in the same relative position on each photo. Each photo is the same size, but since the number of photos is unknown, I can't simply "position:abosulte;" the action box manually.
My HTML looks roughly as follows: I've simplified the loop; its a dump of a query from ColdFusion of an indeterminate number of photos.
<LOOP>
<div id="photo" style="display:inline;"><img src="abc"></div>
<div id="redBox" style="????">ACTION</div>
</LOOP>
Thoughts?
Many kind thanks in advance.
Probably easier to add your box within this div, something like:
<div id="photo" style="display:inline;">
<div id="redBox" style="position:relative;top:-10px;left:-10px">ACTION</div>
<img src="abc">
</div>
You could then offset as required using position:relative (you'll see I've guessed the amounts above, but you can obviously tweak to suit!)
Hope this helps!
Try <style>
#photo {
display: inline-block;
position: relative;
}
.action {
/* Optional */
background: #CCC;
color: #FFF;
padding: 2px 3px;
/* Necessary */
display: inline-block;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
</style>
<div id="photo">
<div class="action">Foo</div>
<img src="abc">
</div>
maybe you could wrap it all in another div?
<LOOP>
<div class="container" style="display: inline-block;">
<div class="photo"><img src="abc"></div>
<div class="redBox" style="position:relative; top: -20px; right; 10px;">ACTION</div>
</div>
</LOOP>
I may be wrong, but it looks like you're trying to reinvent the wheel...
Check out the map element (HTML4, HTML 5)