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
Related
I made a layout in css using floats:
.thumb{
border-radius:20px;
border: RGB(245, 245, 220);
border-width: 10px;
border-style:solid;
float:left;
margin:20px;
padding:0px
}
Then I wrote some javascript to make the images expand with mouse-overs.
$(".thumb img").mouseover(function() {
$(this).animate({'width':204, 'height':252}, {duration:300});
}).mouseout(function(){
$(this).animate({'width':195, 'height':240}, {duration:100});
});
I suppose I should have anticipated that this would mess up the layout - when ever you scroll over an image, the next row moves down a row - is there a way to fix this?
Fiddle
Make your image elements in a .thumb absolutes and make .thumb elements relative. Make your .thumb elements absolute and it should do the trick.
Roughly it should look like this:
.thumb{
border-radius:20px;
border: RGB(245, 245, 220);
border-width: 10px;
border-style:solid;
float:left;
margin:20px;
padding:0px;
position: relative;
}
.thumb img {
position: absolute;
top: 0;
left: 0;
}
I recently found the tablesort.js component, which allows to make the rows of a plain HTML table sortable. Please see this fiddle for a small example.
I'm trying to understand how the sort-indicators (up/down arrows) in the table header are created.
The CSS used by tablesort.js is very minimal and does not contain any (background-) images. Also looking at the javascript code and using the browser's developer tools did not help me to understand how the indicators are created.
Can someone please explain how these indicators are created?
Here is the CSS used by tablesort.js:
th.sort-header {
cursor:pointer;
}
th.sort-header::-moz-selection,
th.sort-header::selection {
background:transparent;
}
table th.sort-header:after {
content:'';
float:right;
margin-top:7px;
border-width:0 4px 4px;
border-style:solid;
border-color:#404040 transparent;
visibility:hidden;
}
table th.sort-header:hover:after {
visibility:visible;
}
table th.sort-up:after,
table th.sort-down:after,
table th.sort-down:hover:after {
visibility:visible;
opacity:0.4;
}
table th.sort-up:after {
border-bottom:none;
border-width:4px 4px 0;
}
They are using pseudo elements:
table th.sort-header:hover:after {
visibility: visible;
}
table th.sort-header:after {
content: '';
float: right;
margin-top: 7px;
border-width: 0 4px 4px;
border-style: solid;
border-color: #404040 transparent;
visibility: hidden;
}
They then toggle a class to change the border-width style which changes the arrow.
Edit: To clarify, the border-width style is what makes the arrow shape.
I found a lot of examples regarding images that didn't work exactly for what I need. I have a simple footer that I use for copyright/social media linking information and I would like it to float to the right so that on screen resize it doesn't interfere with the navigation that is at the upper left.
/* footer */
footer {
position:fixed;
left:20px;
bottom:20px;
z-index:1;
}
footer small {
float:right;
clear:both;
margin:0 0 5px 0;
In the html:
<footer>
<small>© 2003-<script language="javascript" type="text/javascript">
var today = new Date()
var year = today.getFullYear()
document.write(year)
</script> Name of Site | The Site
| Site #2
</small>
</footer>
Its a pretty minimal design and I'm trying to keep it really simple so when its time for me to try to optimize for mobile it will work. Any help is appreciated.
Just add right:0 (or some number) to pull it to the right.
footer {
position:fixed;
left:20px;
bottom:20px;
z-index:1;
right:0;
}
jsFiddle example
You need to set a width on the footer
DEMO
footer {
position:fixed;
left:20px;
bottom:20px;
z-index:1;
width:100%; /*Added*/
}
footer small {
float:right;
clear:both;
margin:0 30px 5px 0;
}
I would try to assign a height and width to your footer. Also make sure you give it a display type of block. Not all browsers respect footer as a block element.
Maybe something like this:
footer {
position: fixed;
display: block;
right: 0;
bottom: 0;
height: 20px;
width: 100px;
}
I've modified your code a little bit to do the job.
footer {
position:fixed;
left:0px;
right: 0px;
bottom:20px;
z-index:1;
text-align: right;
}
footer small {
margin:0 20px 5px 0;
}
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;" />
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;
}