Im trying to create a horizontally scrolling gallery but I would like to avoid defining the width on the div. Someone else is touching the html - I want her to be able to drop in as many li as possible without having to touch the css and redefining the width.
The mock site is here: rachelbeen.com/Carmen.
Safari recognizes where the content ends and stops the horizontal scroll - but firefox maintains that extra space as defined by the width:6600px; on the #gallery ul. How do I stop that from happening?
Would like to avoid plugins if possible and use only CSS.
Thanks,
-Rachel
I had the same problem and I tried this:
#full{margin:0 auto; overflow:auto; height:100%; width:1050px;}
// width is just for controlling the viewport.
#holder{float:left; margin-right:-30000px;}
.box{float:left; margin:2px;}
and HTML should be like:
<div id="full">
<div id="holder">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
</div>
</div>
add many DIVs as you want and it'll make more space for you boxes without giving it a specific width. I hope it helps you.
Related
According to the fullpages.js documentation, it should be possible to vertically center the contents of .sections with the parameter verticallyCentered (which defaults to true).
However, I can't get this feature to work with the following HTML structure:
<div id="content">
<div class="section container">
<div class="row">
<div class="col-xs-12">
<h1 class="title">Title</h1>
</div>
</div>
</div>
</div>
The content of the .col-xs-12 div (i.e. the heading) remains at the top of the window.
I am using Bootstrap for scaffolding (if that is of any relevance). Also, the basic functionality of fullpage.js (i.e. the single-page scrolling) is working without any problems.
You are probably using some absolute positioned element and that's the reason why fullpage.js can not deal with it.
You can easily see in the examples that fullpage.js centers the content correctly when using verticalCentered:true, which is the default value.
I had the same issue.
I fixed it by styling the default class, added by fullpage.js:
.fp-tableCell {
display: flex;
align-items: center;
justify-content: center;
}
Since I couldn't get the vertical centering functionality to work, I ended up disabling it by setting verticalCentered to false. As a replacement I am now using jQuery-Flex-Vertical-Center which works out of the box.
Sorry to resurrect this question but the problem is that you didn't include the css file of FullPage.js
how can I remove z-index of the kendo window? I don`t want window to be modal, so I did like this .Modal(false). But of no use , window is rendering with z-index of 10003 like a popup. My intention is to render 9 windows on a same page ,put 3 windows per row in a table. Because of z-index , layout is distracting. If I can able to remove z-index, I can succeed.
#(Html.Kendo().Window()
.Name("window")
.Title("About Alvar Aalto")
.Modal(false)
.Content(#<text>
<div class="armchair">
<img src="#Url.Content("~/content/web/window/armchair-402.png")"
alt="Artek Alvar Aalto - Armchair 402" />
Artek Alvar Aalto - Armchair 402
</div>
<p>
Alvar Aalto is one of the greatest names in modern architecture and design.
Glassblowers at the iittala factory still meticulously handcraft the legendary
vases that are variations on one theme, fluid organic shapes that let the end user
ecide the use. Interpretations of the shape in new colors and materials add to the
growing Alvar Aalto Collection that remains true to his original design.
</p>
</text>)
.Draggable()
.Resizable()
.Width(600)
.Actions(actions => actions.Pin().Minimize().Maximize().Close())
)
I don't believe this can be done with the available configuration options. You could try using .Visible(false) and then manually adjust the z-index for each window to make it visible, but I imagine this would be brittle.
So I would recommend extending the window widget to create your own window type which doesn't manipulate the z-index in this way; this would keep your code encapsulated in its own class. See my answer here for some more information regarding extending kendoWindow (and a simple example). As far as I can see, the main method responsible for the z-index behavior is window.toFront(), so you'd probably have to rewrite that.
Since you plan to render the windows in a 3 by 3 grid I guess that you don't want to move or resize them and what you need from a KendoUI window is just the styling, correct? If so, you should take a look into panels styling (see KendoUI demo here) where you can style your code as a KendoUI window but, of course, you can neither move, nor hide nor resize.
You just need to use the following HTML:
<div class="k-block"><div class="k-header">Header</div>Block with header</div>
the z-index is set on the "style" property dynamically of the div.
with css all you need is an !important rule that will override styles defined on the element.
#mycontainer .k-window{
z-index: 3 !important;
}
This is my first post here.
I was wondering whether you could suggest to me how to make the footer in this image:
http://i5.minus.com/ik0O1e7e2qWQd.jpg
So far I have this: http://www.seann.biz/testflight But I can't quite get the footer right. I am using bootstrap by the way.
As you can see there are two columns of the same width but of varying colour and I would love to get these two sorted first then the rest to follow later.
This is the first full website I have coded so sorry if its a bit messy
you can use css width:50% then float:left, add it at the end
Something like this:
<div id="footer" style="width:100%;height:300px">
<div id="footerleft" style="width:50%;height:300px;background-color:#000;float: left;"></div>
<div id="footerright" style="width:50%;height:300px;background-color:#ccc;float: left;"></div>
</div>
hope this helps
EDIT
check this fiddle http://jsfiddle.net/X4tdz/
Add the following css to the image
position:absolute
left:50%
top:50%
margin-left:-50px // half of the image width
margin-top:-50px // half of the image height
Make sure the parent div of the image is set to position:relative
PS: If you have any NEW questions make a new question about it so that others can also contribute.
I've created a scrollview with some pages. Inside the first page there's something like :
A very very long text which cannot be in the screen, [...]
But the text does not fit in the whole screen, it looks like this :
If I disable the scrollview :
Do you have any idea how I can wrap the content of a page to fit the screen ?
I find it.
Kendo UI has in its CSS (for the Scrollview) :
white-space: nowrap;
But you can't change it because it'll broke all the scrollview.
You must change your div-page like this :
<div data-role="page" style="white-space : normal;">
<p>SOME VERY LONG TEXT</p>
</div>
Make this for every page you want to be wrapped (very useful for small screen like iPhone)
I am customizing my website using Twitter Bootstrap. I am trying to insert an image positioned as the top layer, is located slightly "outside of the container", and can responsively resize while staying proportionate / in relation to the other elements. I would like to use position: relative, but the image seems forced into a box within the container. When I use position: absolute, the image displays correctly at first on my web browser, but it does not behave as intended when the screen is resized.
Can anyone help me figure out a good solution to this issue?
HTML: I do not have the image contained within it's own , but is still located within the overall . Here's the code:
<img src="images/hero-babee.png" alt="Babee blowing bubbles." id="babee-bubbles">
CSS: Here's my custom css.
img#babee-bubbles {
z-index: 100;
position: relative;
top: 51%;
left: 7.5%;
}
I'd appreciate any help finding a solution and/or help with my code / syntax. Thanks in advance.
To design responsive website using bootstrap you can use bootstrap layout.
Fluid layout has class "row-fluid" and you can specify width in using class as span.
this structure will be responsive. to test it just resize your browser window.
<div class="row-fluid">
<div class="span2">
<img>....</img>
......
</div>
<div class="span2">
</div>
......
</div>
Bootstrap devide screen size in 12 part. we can use that part by giving
class="span*"
* is no of part.