This is my code:
<div id="divSpinner" style="margin-top:30px; visibility:collapse;">
</div>
<br />
<div id="divPaging">
</div>
I'm trying to show a spinner, and afterwards show some content in the 'Paging' div (Using Javascript).
The spinner and the 'Paging' div are not visible at the same time, so I've tried to collapse the Spinner visibility, but the 'margin-top' still effects the position of the 'Paging' div.
What should I do ?
you must use position: absolute; or position: relative; on your divPaging css selecting between them related to your code ,if you put link from web page i can say you witch one and how.
I've set 'display: none;' instead of 'visibility:collapse;'
Related
I have HTML structure as shown below. I want to relocate the position of divs such that 'calc' div should move to 'region-content' div and should appear on the right end. Is it possible to achieve this using css? Can any one provide me some references to work on this using css, etc.
<div class='region-content'>
<form id='responseform'>
<div class='content '>
<div class ='formulation '>
<div class='qtext '>
<div class='calc '></div>
</div>
</div>
</div>
</form>
</div>
You cannot achieve the change in DOM structure with CSS. So, calc div can't be moved to region-content div. You need to do some javascript work for that.
However, styling it to appear where you want should be possible. Please provide your css code, if possible a jsfiddle, if this part is still troubling you.
You may try this.
.region-content { position: relative; }
.calc { position: absolute; top: 0; right: 0; }
Other then this you will also need to change parameter for width to make this possible. Since you just posted html structure and not content within it including respective css, this is how I can guess the solution for you.
I am trying to position a loading image in the buttom right of the page, but everything works fine except margin-bottom.
<div id="preload">
<div align="right" style="margin-bottom:40px; margin-right:50px;">
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
<br>
<a style="color:#00ff24;"><b>Please wait while the page is loading...
<br>If the website doesn't load within one minute please refresh your page!</b>
</a>
</div>
</div>
Can anybody tell me what or how to make it work?
Thanks
It's the nature of margins vs padding. Since margins sit outside of the element, they won't render unless there's another element following. You could use bottom-padding of 1px on the parent; that should trigger the render.
You should assign position absolute and use bottom and right proprietes.
http://jsfiddle.net/7yrUy/
<div id="preload">
<div align="right" style="position:absolute; bottom:40px; right:50px">
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
<br><a style="color:#00ff24;"><b>Please wait while the page is loading...<br>If the website doesn't load within one minute please refresh your page!</b></a>
</div>
try absolute position and use bottom/right instead of respective margins:
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" style="position: absolute; bottom:40px; right:50px;"/>
Here - http://jsfiddle.net/maximua/SKcvr/
If you want it in the bottom right of the page just use this css:
.yourClass {
position: absolute;
right: 0;
bottom: 0;
}
If you want to change the amount of pixels change 0 to what you want
I had a case where I needed to add display: inline-block.
I can't explain why this worked, but it did! :-) Hope it helps someone.
Even when set display:block to parents and child divs, the margin bottom may not work. The best thing to solve this, after testing with paddings and big margin top values, is using position:relative; for the parent container, and position:absolute; for the child div. The div and other elements have already the display-block for default, so we don‘t need to declare it, as follows:
.parent{
position:relative;
height: 20rem;
/* A big value for height will help you to see the “margin-bottom” with clarity. */
}
.child{
position:absolute;
bottom:0.25rem;
/* or whatever measurement you want: 1rem, 1em, 15px, etc. Be AWARE that it‘s not “margin-bottom” property; it‘s just “bottom” within the absolute position. */
}
In the HTML just consider:
<header class="parent">
<p>This is your main container which has 20rem of height.</p>
<div class="child">
<p>This text is very close to the bottom.</p>
</div>
</header>
In the CSS I consider only the most relevant properties. You can add colors, backgrounds, font-families and so on, which will not affect the layout. I just coded the key properties to create the “effect margin-bottom”.
Example more fancy.
I am trying to line this bottom shadow up as in the top shadow but I cannot seem to get the firgured out. The only time it collapses is when I remove the line-height or font-size much further down in the css file using Developer Toolbars but of course this affects everything else too. Here's my basic html structure:
<div class="banner-image">
<div class="banner-image-wrapper">
<div class="shadow-top"></div>
<a class="header-image">
<img />
</a>
<div class="shadow-bottom"></div>
</div>
</div>
On the tag, if I remove the font-size and line-height, everything collapses nicely on itself but I cannot seem to force this just on the tag.
I know this is going to be a ridiculous issue once it's been solved.
Thanks!
The answer is actually pretty simple, you just need to use some clever positioning & take advantage of the parent's box-model:
.banner-image{
position:relative;
}
.shadow-bottom{
position:absolute;
height: x;
bottom: -x;
}
Here's the formula you need:
Take the height of the bottom shadow ( some value x )
Then make sure the parent of that element has a position of 'relative' (~important~)
Make the position of the bottom shadow 'absolute'
Position it at the bottom minus the value of it's height ( -x )
Here's a jsFiddle illustrating the effect: http://jsfiddle.net/k7CmJ/
I know this is old, but for anybody else looking for an answer to this, where absolute positioning won't work, setting display:block on the img tag will get rid of that space:
.header-image > img {
display:block;
}
Normally an image is an inline block, and because it's inline, white-space around it is preserved.
Here is the problem: http://jsfiddle.net/3Kd3f/
And here is the exact same code, only with display:block added to the img tag: http://jsfiddle.net/3Kd3f/1/
I am a total newbie at CSS. The problem I have is really simple.
<section>
<fieldset>
<div>
This div block contains the label field and the files.
</div>
</fieldset>
</section>
This is a part of my HTML code. Inside the div block I have a field and some script that helps me in uploading multiple files. What I want to do is show something like a grey-div-block over the section or div itself that takes up the space and shows a gif image while the files are being uploaded.
The problem: I don't know how to work out with css. I am looking only for some css classes that I can add to my code and do what I want. I know how to fix the jquery.
Use html like this
<div class="load">
<img src="../path">
</div>
And the css is
.load{background-color: Gray; filter: alpha(opacity=80); opacity: 0.8; z-index: 10000; text-align:center; position:absolute;}
may it will help you
just insert wherever you want it placed.
<div class="loading">
<img src="loading.gif">
</div>
EDITED:demo with gif , here when you click on the button the popup appears and when you click on gray backgrond the popup dissappears.
Include your gif inside the div popup and ofcourse style it according to your needs , this will display a centered loading gif , use display:none to both the divs initially and then using some jquery try to make them visible , I hope it helps you
If I understand you correctly, you want something like a modal popup, but just over that section (not the whole page), showing progress image and preventing further clicks on the upload field? If so, then just use this:
<section>
<div id="modal" style="display: none"><img src="..."></div>
<fieldset>
<div>
This div block contains the label field and the files.
</div>
</fieldset>
</section>
You show it with:
document.getElementById('modal').setAttribute('style', 'height: 100%; width: 100%; z-index: 1000; background-color: Gray; opacity: 0.5');
And hide it again with:
document.getElementById('modal').setAttribute('style', 'display: none');
Here is what I am trying to accomplish in HTML/CSS:
I have images in different heights and widths, but they are all under 180x235. So what I want to do is create a div with border and vertical-align: middle them all. I have successfully done that but now I am stuck on how to properly a href link the entire div.
Here is my code:
<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
<div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
<img src="myimage.jpg" height="62" width="180">
</div>
</div>
Please note that for the sake of copy pasting here easily, the style code is inline.
I read somewhere that I can simply add another parent div on top of the code and then do a href inside that. However, based on some research it won't be valid code.
So to sum it up again, I need the entire div (#parentdivimage) to be a href link.
UPDATE 06/10/2014: using div's inside a's is semantically correct in HTML5.
You'll need to choose between the following scenarios:
<a href="http://google.com">
<div>
Hello world
</div>
</a>
which is semantically incorrect, but it will work.
<div style="cursor: pointer;" onclick="window.location='http://google.com';">
Hello world
</div>
which is semantically correct but it involves using JS.
<a href="http://google.com">
<span style="display: block;">
Hello world
</span>
</a>
which is semantically correct and works as expected but is not a div any more.
Why don't you strip out the <div> element and replace it with an <a> instead? Just because the anchor tag isn't a div doesn't mean you can't style it with display:block, a height, width, background, border, etc. You can make it look like a div but still act like a link. Then you're not relying on invalid code or JavaScript that may not be enabled for some users.
Do it like this:
Parentdivimage should have specified width and height, and its position should be:
position: relative;
Just inside the parentdivimage, next to other divs that parent contains you should put:
<span class="clickable"></span>
Then in css file:
.clickable {
height: 100%;
width: 100%;
left: 0;
top: 0;
position: absolute;
z-index: 1;
}
The span tag will fill out its parent block which is parentdiv, because of height and width set to 100%. Span will be on the top of all of surrounding elements because of setting z-index higher than other elements. Finally span will be clickable, because it's inside of an 'a' tag.
Going off of what Surreal Dreams said, it's probably best to style the anchor tag in my experience, but it really does depend on what you are doing. Here's an example:
Html:
<div class="parent-div">
Test
Test
Test
</div>
Then the CSS:
.parent-div {
width: 200px;
}
a {
display:block;
background-color: #ccc;
color: #000;
text-decoration:none;
padding:10px;
margin-bottom:1px;
}
a:hover {
background-color: #ddd;
}
http://jsbin.com/zijijuduqo/1/edit?html,css,output
Two things you can do:
Change #childdivimage to a span element, and change #parentdivimage to an anchor tag. This may require you to add some more styling to get things looking perfect. This is preffered, since it uses semantic markup, and does not rely on javascript.
Use Javascript to bind a click event to #parentdivimage. You must redirect the browser window by modifying window.location inside this event. This is TheEasyWayTM, but will not degrade gracefully.
I'm surprised no one suggested this simple trick so far! (denu does something similar though.)
If you want a link to cover an entire div, an idea would be to create an empty <a> tag as the first child:
<div class="covered-div">
<a class="cover-link" href="/my-link"></a>
<!-- other content as usual -->
</div>
div.covered-div {
position: relative;
}
a.cover-link {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
This works especially great when using <ul> to create block sections or slideshows and you want the whole slide to be a link (instead of simply the text on the slide). In the case of an <li> it's not valid to wrap it with an <a> so you'd have to put the cover link inside the item and use CSS to expand it over the entire <li> block.
Do note that having it as the first child means it will make other links or buttons inside the text unreachable by clicks. If you want them to be clickable, then you'd have to make it the last child instead.
In the case of the original question:
<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
<a class="cover-link" href="/my-link"></a> <!-- Insert this empty link here and use CSS to expand it over the entire div -->
<div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
<img src="myimage.jpg" height="62" width="180">
</div>
<!-- OR: it can also be here if the childdivimage divs should have their own clickable links -->
</div>
Make the div of id="childdivimag" a span instead, and wrap that in an a element. As the span and img are in-line elements by default this remains valid, whereas a div is a block level element, and therefore invalid mark-up when contained within an a.
put display:block on the anchor element. and/or zoom:1;
but you should just really do this.
a#parentdivimage{position:relative; width:184px; height:235px;
border:2px solid #000; text-align:center;
background-image:url("myimage.jpg");
background-position: 50% 50%;
background-repeat:no-repeat; display:block;
text-indent:-9999px}
<a id="parentdivimage">whatever your alt attribute was</a>
This can be done in many ways.
a. Using nested inside a tag.
<a href="link1.html">
<div> Something in the div </div>
</a>
b. Using the Inline JavaScript Method
<div onclick="javascript:window.location.href='link1.html' ">
Some Text
</div>
c. Using jQuery inside tag
HTML:
<div class="demo" > Some text here </div>
jQuery:
$(".demo").click( function() {
window.location.href="link1.html";
});
I simply do
onClick="location.href='url or path here'"
What I would do is put a span inside the <a> tag, set the span to block, and add size to the span, or just apply the styling to the <a> tag. Definitely handle the positioning in the <a> tag style. Add an onclick event to the a where JavaScript will catch the event, then return false at the end of the JavaScript event to prevent default action of the href and bubbling of the click. This works in cases with or without JavaScript enabled, and any AJAX can be handled in the Javascript listener.
If you're using jQuery, you can use this as your listener and omit the onclick in the a tag.
$('#idofdiv').live("click", function(e) {
//add stuff here
e.preventDefault; //or use return false
});
this allows you to attach listeners to any changed elements as necessary.
A link with <div> tags:
<div style="cursor: pointer;" onclick="window.location='http://www.google.com';">
Something in the div
</div>
A link with <a> tags:
<a href="http://www.google.com">
<div>
Something in the div
</div>
</a>