So I've been playing around with web development and I've noticed that in Firefox, my elements are getting pushed to the right versus down, which is what it should be (which happens in Chrome).
I am by no means a Guru. Is there any way to prioritize wrapping versus pushing? I have tried inserting line breaks and setting both to display:block. That does not seem to be the problem.
This is the CSS for the bar:
.tiq-editor-bar
{
z-index:1;
overflow:hidden;
float:left;
width:100%;
border-top: solid 1px #AAA;
text-align:center;
display:none;
position:relative;
color:#AAA;
font-weight:normal;
font-size:14px;
}
This is the CSS for the gallery wrapper (the white out-lined thing)
#tiq-ui-gallery-wrapper
{
min-height: 500px;
background:url(../img/portfolio/empty.png) center no-repeat;
overflow:hidden;
}
And for the gallery itself:
.tiq-theme-gallery
{
width:600px;
height:400px;
resize:vertical;
border:solid 1px #eee;
overflow:auto;
}
Thanks!
EDIT: The gallery is positioned relatively, BTW. I am using Galleria and that gives the container:
.galleria-container {
position: relative;
overflow: hidden;
background: #000;
display:block;
}
EDIT EDIT:
Here is a JSFiddle:
http://jsfiddle.net/RyBz9/2/
Change
.tiq-editor-bar
{
float:left;
}
to
.tiq-editor-bar
{
float:none;
}
Related
i've a problem with height:auto and overflow:auto;.
I've created a overlay with dynamical content. Sometimes the content leaves the visible screen and then a scrollbar should be shown to prevent cutting the content. My bad looking solution is setting height to 100% that fills the screen with a empty white area. If the height is missing or not set all browsers arn't able to reconize that the acp_message should have a scrollbar
How to be sure that the scrollbar will be shown if height is auto?
$(document).ready(function() {
var id;
$('.order_options').on('click', 'span', function (e) {
//$('#activator').click(function(){
$('#overlay').fadeIn('fast',function(){
$('#box').animate({'top':'60px'},500);
$('#box').css('height', '100%');
//$('#box').css('height', 'auto');
$('#acp_message').css('margin-bottom', '250px');
//$('#box').css('margin-bottom', '30px');
});
set_rechnung_erstellen(e.target.id);
});
});
now the css:
.overlay {
background:transparent url(../image/overlay.png) repeat top left;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
}
.box {
position:fixed;
top:-200px;
left:30%;
right:30%;
background-color:#fff;
color:#7F7F7F;
padding:20px;
border:2px solid #ccc;
-moz-border-radius: 20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index:101;
/*height:auto;*/
/*height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');*/
}
.box h1{
border-bottom: 1px dashed #7F7F7F;
margin:-20px -20px 0px -20px;
padding:10px;
background-color:#FFEFEF;
color:#EF7777;
-moz-border-radius:20px 20px 0px 0px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
}
.
#acp_message {
overflow:auto;
}
and finally the HTML
<div class="box" id="box" style="overflow:auto;">
<a class="boxclose" id="boxclose">Schließen</a>
<h1>Rechnung erstellen</h1>
<p id="acp_message">
Rechnung erstellen
</p>
</div>
Firstly, you have a . before your rule for #acp_message. This will break that rule, so make sure that is not in your code.
Secondly, use a max-height and overflow:auto to do what you are looking for. And these have to both be applied to the same element:
.box { height: auto; max-height:100%; overflow:auto; }
If you want to get the exact height of the screen and apply it in jQuery, you can do that as well:
$('.box').css('max-height', $(window).height() + 'px');
Issue #1
Trying to make 2 divs align with eachother,
the fist div doesnt have a scrollbar, but the second has one. The scrollbar cause the second div to be offset from the first one.
Is there a way to align those 2 divs?
Issue #2
Why is the second div not scrolling when it has the overflow-y:scroll; ?
body, html {
margin: 0;
padding: 0;
border: 0;
outline: 0;
overflow:hidden;
}
.fixed-top-container {
text-align:center;
top:0px;
height:100px;
min-height:100px;
max-height:100px;
width:100%;
display:inline-block;
margin:0 auto;
padding:0;
background-color:rgba(0, 0, 0, 0.5);
}
.container {
width:100%;
height:100%;
background-color:#F0F0F0;
overflow-y:scroll;
}
.content {
width: 800px;
height:100%;
margin:0 auto;
background-color:#FFFFFF;
}
View JSFiddle for issue: http://jsfiddle.net/Aaeijh/qAh9g/1/
How can we get the bottom div to scroll?
Use the user friendly <textarea> instead of old <div> technique
<textarea rows="10" cols="50" class="container">
//your text here
</textarea>
JSFiddle
remove overflow:hidden; and overflow-y:scroll; ..
So, I'm working on this JSFIDDLE (http://jsfiddle.net/dRpWv/248/) and I can't see why botcontainer div is bleeding into the footer. Other pages that I've created on the site don't have this problem.
I think it has to do with a recently JS coded div hide/reveal on the "vertical Expertise" tiles because I've checked all of the divs and made certain they're all closed. Also, tried display and position edits that had no effect.
Here's the basics of the CSS for content containers::
#topcontainer {
margin:75px 0 0 0;
}
#botcontainer {
margin:100px 0 0 0;
}
Here's the basic css for the "vertical expertise" area (which is wrapped in the botcontainer div)::
.vertTiles {
border: none;
margin-right: 3px;
margin-top:3px;
float:left;
}
.vertCont {
border: 1px solid black;
background-color: #ffffff;
display: none;
padding: 5px;
width:800px;
max-width:800px;
height:400px;
max-height:400px;
top:0;
left:0;
}
#xbox {
position:absolute;
width:75px;
height:75px;
bottom:20px;
right:20px;
}
Note that I've left out the MM_imageswap js just keep things clean in JSFIDDLE. ANy help from the community would be helpful!
Your code and CSS styles are Vast. It will take some time to go through it.
This is what i added. Is this what u want? Your question is a bit confusing.
CSS
#botcontainer {
margin:100px 0 0 0;
clear:both;
overflow:auto;
}
FIDDLE
I have a series of square divs with text in them, and I need to draw a line across those divs, over the text. Z-Index is not an option. Neither is <strike>, because it needs to extend across the entire div, not just the text.
What I need is for it to extend across the entire div, but to be ON TOP of the text, as if on a different layer, and I am trying to determine if it is possible without Z-Index.
With the help of :after - DEMO
div {
position: relative;
}
div:after {
position: absolute;
left: 0;
top: 50%;
height: 1px;
background: #c00;
content: "";
width: 100%;
display: block;
}
Link To Fiddle
.wrapper {
position:relative;
width:110px;
}
.square {
width:20px;
height:20px;
border:2px solid #000;
display:inline-block;
text-align:center;
}
.strike {
position:absolute;
width:100%;
height:2px;
background:black;
top:11px;
left:0px;
}
what about a background image as a solution?
I mean someCSS Code like:
.DIV.squarestroke {
background: url(img_with-line.gif) repeat;
}
If you can't use text-decoration:line-through it's likely you have padding or margin on your div which is why the line doesn't go all the way across. This snippet will draw a line the width of the div and through the text preserving your padding or margins.
<div style="border:solid 2px black; padding : 100px">
<div class="strike-through" style="border-bottom : solid 1px red; margin-bottom : -12px;"></div>
<div style="text-align : center; padding-left:50px; padding-right:50px; border : solid 1px green;">Lorem Ipsum Voluptatem</div>
</div>
A good old fashion hr might do it:
<hr style="position:absolute; width:50px; top:5px; left:5px;" />
Hi i have this a div called "nav" that contains divs with a class "thumbs". Im trying to create a table of contents like div that can be scrolled to display further thumbnails.
this is my CSS so far: (note that each thumbs are position:absolute and is left: positioned accordingly)
#nav {
position:absolute;
width:768px;
height:214px;
bottom:0px;
/*-webkit-transform:translateY(214px);*/
background:gray;
overflow:auto;
}
.thumbs {
position:absolute;
width:80px;
height:100px;
margin:10px 10px 10px 10px;
background:white;
}
I want it to be scrollable so that if the thumbnails exceed 768px (width of nav) it can be scrolled to the left to view more.
Thanks
edit: I forgot to mention that I am doing this in PhoneGap. It will be a mobile app. thanks!
Remove position: absolute; and add float: left; from your thumbs class. That should do it.
UPDATE
If the number of thumbs are known in advance, the inner div's width can be set via CSS. Otherwise, it can be set onload or whenever a thumb is added/removed via JS.
$('#div').css('width', ($('.thumbs').length * $('.thumbs:first').outerWidth(true)) + 'px');
You can achieve this with the combination with max-width, display:inline-block & white-space.
Like this:
#nav_outer {
position:absolute;
bottom:0px;
background:gray;
overflow:auto;
}
#nav {
height:214px;
max-width: 300px;
bottom:0px;
/*-webkit-transform:translateY(214px);*/
background:gray;
white-space:nowrap;
}
.thumbs {
white-space:normal;
display:inline-block;
*display:inline; /*IE7*/
*zoom:1; /*IE7*/
width:80px;
height:100px;
margin:10px 10px 10px 10px;
background:white;
}
http://jsfiddle.net/xzcDD/3/
In my example when the .thumbs less than the width of 300px then there is no scroll