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.
Related
I am trying to get the whole div clickable and this works but only with a straight link to another site. Is there a way to make it work with this text in it also:
<div class='reddit' title='Share Us On Reddit' onclick="window.open('http://www.reddit.com/submit?url=httpsFwww.example.com&title=XXX is Cape Breton's Homepage. Start Your Web Search With Beautiful Cape Breton Island')">
Thanks
From CSS Tricks
This probably isn't a thing you need to rely on JavaScript for
anymore. Since HTML5, this is perfectly valid:
<a href="http://example.com">
<div>
anything
</div>
</a>
And remember you can make links display: block; so sometimes you
don't even need the div.
<div style="cursor:pointer" onclick="document.location='evenidontknow-page.html'">
<h2>Full Div Clickable</h2>
</div
The above code helped me very well, and this will not require any extra code.
Using a tag may solve the problem but we need to add extra code to it.
please check this link for more info w3schools
Bootstrap has a feature called "Stretched Link". From the documentation:
Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.
You can read more by visiting the following link:
https://getbootstrap.com/docs/4.4/utilities/stretched-link/
I have 3 divs parallel to each other holding some information. I want three new divs, in the same position as the previous ones (refer image), take the position of the last ones while pushing the same downwards.
I want this action to happen dynamically i.e. when someone enters information on the back-end module, the more recent information takes place of the older one.
I am pretty new to Ajax and jQuery but I am sure this is the way to go. Can someone please direct me to a suitable direction?
Image: http://img12.imageshack.us/img12/4149/us56.jpg
You are right, Ajax and jQuery can be the way to go.
Simplest solution is probably to put the three blocks into one div and call
$("#parent-div").prepend();
on it. You can arrange the blocks how you want using CSS
<div id='parent-div'>
<div class="col left">Hello World</div>
<div class="col">Hello World</div>
<div class="col">Hello World</div>
</div>
Tried it out on jsFiddle, just have a look.
http://api.jquery.com/insertBefore/
example:
$('<div>new div</div>').insertBefore('#divName');
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.
I am trying to mask an element that has some images inside of it, using only css.
i have done this and it works fine in webkit using -webkit-mask-box-image and its doing just what i want, but im having trouble using other browsers.
gecko is supposed to work using mask, and that tag does show up in firebug, but it doesnt actually use the mask.. i've also tried converting the png im using to base64 data uri, but to no avail.
example: http://jsfiddle.net/nNLta/
does anyone know the correct way for doing this?
HTML
<div id='wrap'>
<div class='masked flashing-anim'>
<div class='the-mask' >
<ul>
<li class='blink_1'></li>
<li class='blink_2'></li>
</ul>
</div>
</div>
<div class='the-outline'>
<img src='img/real-stuff.png' height=500 />
</div>
</div>
CSS
#wrap {
position: relative;
}
.the-outline, the-mask {
position: absolute;
top: 0;
}
.the-mask {
height: 500px;
width: 360px;
-webkit-mask-box-image: url(../img/the-mask.png);
-moz-mask-box-image: url(../img/the-mask.png);
-o-mask-box-image: url(../img/the-mask.png);
mask-box-image: url(../img/the-mask.png);
mask: url(data:lotsofchars);
}
example: http://jsfiddle.net/nNLta/
Part 1
mask is not the same as mask-box-image unfortunately. If you read the (rather sparse) docs you will see it is applicable to SVG only. More on this later.
Currently Gecko doesn't support 'mask-box-image' - if you search the MDN you'll see it applies to -webkit- only.
Additionally I don't think this is actually spec. Webkit has had this capability/concept for ages (in various forms like -webkit-box-reflect) and I think that it's just a hangover from those days. I'm not sure whether this will even be adopted by all browser vendors (although I hope, and it makes sense that, it will).
Part 2
To use the svg dependant mask: css property you need to create an SVG element and reference that. Here is a guide. I've not used this technique before so I'm afraid that's all the detail I'm going to go into right now.
An alternate option
If you don't need a clever repeating/growing mask why not create a large png and overlay the text/image you wish to hide. I'm not sure I understand what you are ultimately trying to do but this seems pretty simple to me. The obvious issue is when you need the stuff behind the mask to be selectable/interactable (err..interactive that is...); for instance when you wish to apply masking to text or links. A way around this is to use pointer-events:none which is supported in Gecko and Webkit (but nothing else...). Here's more from the MDN
Sorry I don't have better news - if none of the above is helpful please feel free to leave a comment with your specific requirement and we'll see if we can't work around the browser limitations.
Hope this is helpful!
I have following snippet to load the table generated by jqGrid.
<div id="result">
<table id="resultTable">
<tr>
<td />
</tr>
</table>
</div>
My other css interfering with jqGrid css, it causes the "caption layer" (The orange color bar at the very top of the table) height becomes very large and overlapped with other part of the page. Sorry, post image is not allowed.
The height is about 10 times larger and seems contains 3 rows with slightly different color in each. If I remove all my css, the "caption layer" display properly, but I lost all the headers, footers etc. I tried the suggestion by Tony in the link at jgGrid forum,
<style>
#result table.scroll thead th {height:30px;}
</style>
and suggestions by others, but none of them works for me. Please help me to set the "caption layer" height overwrite.
I suppose that you have some problem with CSS style "float:left" used somewhere on the page. I recommend you to look at the answer which solved close problem. If you have the same problem you should add to the <div id="result"> an additional style definition which set the floating like style="float:left" or which remove it like style="clear:left", style="clear:right" or style="clear:both".
If you have no "floating" problem and the title div will be just increased to some unwanted height you can fix the problem by setting additional CSS statically or set the height dynamically. The answer
shows how to find the caption of the grid and get its height. In the same way you can set the height.