I have a rather crude implementation of corners for (main_bg.gif) within the wrapping global-inner div. Although now this functions with inner divs to represent each corner, I was told its not the best implementation, so if anyone has a cleaner solution, well that would be great!
The bottom corner images utilize: margin-top: -8px;
You can see this inner image (very light blue) with its corners: http://www.davincispainting.com
Also I cant utilize CSS3 unfortunately.
Here is the HTML:
<body>
<div id="global-wrap>
<div id="global-inner">
<div class="topleft">
</div>
<div class="topright">
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<br style="clear: both" />
<div id="bottom-wrap"></div>
<div class="bottomleft">
</div>
<div class="bottomright">
</div>
</div>
</div>
</body>
Here is the relevant CSS:
body
{
background-color: #9EB0C8;
font-family: Arial,Helvetica,sans-serif;
font-size: 62.5%;
}
#global-wrap
{
margin: 0 auto;
text-align: left;
width: 880px;
overflow: hidden;
}
#global-inner
{
background: url("/images/main_bg.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 55px 0;
overflow: hidden;
text-align: left;
width: 880px;
}
#global-inner .topleft
{
background: url("/images/main_left_top_corner2.jpg") no-repeat scroll left top transparent;
float: left;
height: 9px;
width: 9px;
}
#global-inner .topright
{
background: url("/images/main_right_top_corner2.jpg") no-repeat scroll right top transparent;
float: right;
height: 9px;
width: 9px;
}
#global-inner .bottomleft
{
background: url("/images/main_left_bottom_corner.jpg") no-repeat scroll left bottom transparent;
float: left;
height: 9px;
margin-top: -8px;
width: 9px;
}
#global-inner .bottomright
{
background: url("/images/main_right_bottom_corner.jpg") no-repeat scroll right bottom transparent;
float: right;
height: 9px;
margin-top: -8px;
width: 9px;
}
How would I implement this Corner for 2 CSS items?
<script type="text/javascript">
$('#global-inner').corner('15px');
</script>
#global-inner
{
background: url("/images/main_bg2.gif") repeat-y scroll 0 0 #E4EAEF;
font-family: Arial;
font-size: 1.2em;
margin: 15px 0 55px 0;
overflow: hidden;
text-align: left;
width: 882px;
}
#mid-featureleft-faq .contentbox
{
/*height:260px;*/
width:536px;
padding:3px 7px 0 7px;
margin:0 0 0 0;
position:relative;
}
Use jQuery round corner plugin.
http://jquery.malsup.com/corner/
It's supported in all browsers including IE. It draws corners in IE using nested divs (no images). It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property instead.
Here's How to use it
You need to include the jQuery and the Corner js script before </body>. Then write your jQuery like $('div, p').corner('10px'); and place before ''. So your html will look like the below code. Here i'm making round corners for all div and p tags. If you want to do it for specific id or class then you can do something like $('#myid').corner();
<body>
<div class="x"></div>
<p class="y"></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<script>$('div, p').corner();</script>
</body>
Check working example at http://jsfiddle.net/VLPpk/1
.rounded {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
}
Hope that helps :)
You can use the the jQuery Curvy Corners Plugin.
It will use in modern Browsers the CSS3 Version, but with browsers without the css3 border-radius (IE aso) the plugin create the border radius with javascript.
Related
Within my website, I am making this section inside the <body> tag. Here is a snippet:
<div id="section" class="featurecontent">
<section>
<img src="image.jpg" alt="Featured article">
<p class="pnews">Featured Article - Description </p>
<hr>
</section>
</div>
This is the relevant CSS code, including the section being relative to the browser stated via position: relative; statement.
#section{
display: block;
padding:3px;
margin-right: auto;
margin-left: auto;
position: relative;
height:70%;
width: 35%;
border-width: 3px;
}
.featurecontent{
height: 1100px;
vertical-align: middle;
border-width: 2px;
line-height: 0.5;
padding: 1px;
}
How would I place the image relatively center to the section block (instead of being placed in the left), and adjust itself relative to the size of the browser similar to the section block? I am aware align="middle" does not work for HTML5.
You have a whole bunch of unnecessary code... all you need is:
#section {
position: relative;
width: 35%;
margin: 0 auto;
}
.featurecontent {
text-align: center;
}
To center the image, which I assume is the aim, simply add the code next to the comment to your current CSS.
.featurecontent{
height: 1100px;
vertical-align: middle;
border-width: 2px;
line-height: 0.5;
padding: 1px;
text-align: center; /* New line of code to center img */
}
I am just a beginner in coding with HTML/CSS, and I am having trouble trying to float a specific div. Every time a type: "float:center" it will not work. Any ideas? (The div bellow will have "*" around it.)
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Java Source-Home</title>
<link rel="stylesheet" type="text/css" href="Java-Source-CSS.css">
</head>
<body>
***<div id="buttons">***
Home
Videos
Downloads
Help
Contact
<div id="header">
<h1>Java Source_</h1>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="Java-Source-JS.js"></script>
</body>
</html>
CSS Code
body {
background-color: white;
}
#header {
float: right;
background-color: orange;
font-family: Courier;
border-radius: 5px;
margin-right: 30px;
margin-top: 40px;
height: 70px;
padding-left: 5px;
padding-right: 5px;
}
#buttons {
background-color: grey;
height: 80px;
width: 1260px;
float: center;
clear: both;
}
a {
text-decoration: none;
color: black;
font-family: Courier;
font-size: 18px;
padding: 5px;
background-color: orange;
margin-left: 30px;
text-align: center;
clear:both;
}
a:hover {
font-size: 20px;
color: red;
}
Keep in mind I'm just a beginner with HTML/CSS.
float: center doesn't exist. Only possible properties are right, left, none, and inherit. If you use right or left, the element will be taken from the normal flow of the web page and placed at either right or left side of its parent element. Text and inline elements will wrap around the floated element.
To know more about float you can have a read on this page: http://css-tricks.com/all-about-floats/
To center your block-level element horizonally you can use margin: 0 auto. The element needs to have a width speciefied, in your case it's 1260px. What auto will do, is that the remaining space right and left of the element is split evenly between margin-right and margin-left.
And here's a little example: http://jsfiddle.net/4yw3M/
You can see, the yellow div is centered horizontally with margin: 0 auto.
There is no such CSS rule as float: center.
You need to use other methods to center such as text-align: center or margin-right: auto.
See this post for help: Align a div to center
I have a DIV with the text TRANSLATE in it and when hovered it shows a box below with some text the Google Translate plugin, where you can choose to translate to English.
Though, my problem is that after Choose language is clicked and you hover the options (only English in this case) the box with some text and the Google Translate plugin disappears (not the language options though).
Any ideas for a solution? Are there any Google id/class for their DIV of the options, so you maybe can like "when hovered" the "box" is still visable trough display :block;.
See the demonstration at JSFiddle
PS. the code in the demo and below is slightly different, colors and so, just to make it easier to see in the demo.
HTML:
<div id="translate-container">
<div id="translate-text"> TRANSLATE
<div class="translate-box">
<div class="load">Let it load...</div>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'sv', includedLanguages: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false},
'google_translate_element');
} </script>
<script type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>
<br /><br />
<div class="translate-info">We use Google Translate for translating. We take no
responsibility for the accuracy of the translation.</div>
</div>
</div>
</div>
There is also a meta-tag with the Google Translate "connection code" to my account, but it's not necessary post it here.
CSS:
#translate-container {
background: transparent;
}
#translate-text {
padding-top: 6px;
padding-right: 5px;
text-align: right;
font-family:verdana;
font-weight: 700;
color: #9e9e9e;
}
#translate-text:hover {
color: #aeaeae;
}
#google_translate_element {
float: left;
margin-top: 0px;
z-index: 1000;
}
.translate-box {
display: none;
color: #4b4b4b;
font-size: 14px;
font-weight: 500;
position: absolute;
margin-left: -80px;
text-align:left;
background: rgba(255,255,255,0.9);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
height: 180px;
width: 160px;
padding: 10px 10px 10px 10px;
box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.33);
border-top: 3px solid #c83232;
z-index: 100;
}
#translate-text:hover .translate-box {
display: block;
}
.load {
opacity: 1.0;
transition: 0.5s;
-webkit-transition: 0.5s; /* Safari */
transition-delay: 1s;
-webkit-transition-delay: 1s; /* Safari */
}
.translate-box:hover .load {
opacity: 0.0;
}
.translate-info {
font-size:11px;
color: #4b4b4b;
font-weight: 500;
}
Managed to do a work-around by choosing to use the Google's In text and Vertical, NOT the Only drop down menu option (Webmaster Tools for Google Translate).
In IE it's still a bit messy... You have to wait until the drop down menu has fully expanded before you move your cursor. You need to keep it absolutely still, otherwise it will disappear and the translate-box that pops up when hovering translate.
Any suggestions for that issue?
I have one more question. In what language is the Google Translate drop down in? What does it say? Is it in my native language Swedish, or is it adjusted to which country the visitors see it from?
What it looks like now: JSFiddle
HTML:
<div id="translate-container">
<div id="translate-text"> <p class="notranslate">TRANSLATE</p>
<div class="translate-box">
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'sv', autoDisplay: false},
'google_translate_element');
}
</script><script type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>
<br /> <br />
<div class="translate-info">Use Google to translate the website. <br /><br />
<span>Note: If you are using Internet Explorer, hold your cursor still until the drop
down menu has fully expanded.</span></div>
</div>
</div>
</div>
CSS:
#translate-container {
background: #c8c8c8;
}
#translate-text {
background: #969696;
width:110px;
padding-top: 0px;
padding-bottom: 5px;
padding-right: 0px;
padding-left: 0px;
text-align: left;
font-family:verdana;
font-weight: 700;
color: #fff;
overflow: visible;
}
#translate-text:hover {
color: #000;
}
#google_translate_element {
float: left;
text-align: left;
margin-top: 0px;
z-index: 1000;
}
.translate-box {
display: none;
color: #4b4b4b;
font-size: 14px;
font-weight: 500;
position: absolute;
margin-left: 0px;
margin-top: 0px;
text-align:left;
background: rgba(255,255,255,0.9);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
width: 220px;
padding: 15px 15px 25px 15px;
box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.33);
border-top: 3px solid #000;
z-index: 100;
overflow:hidden;
}
#translate-text:hover .translate-box {
display: block;
height: auto;
}
.translate-info {
font-size:11px;
color: #4b4b4b;
font-weight: 500;
}
.translate-info span {
font-size:9px;
color: #4b4b4b;
font-weight: 500;
}
I would recommend posting your questions in your self-answer to a separate question. I will address the original question about the disappearing box.
The selection box is made visible when the cursor hovers over the div with id="translate-text". The contents are then hidden again when no longer hovering over said box.
The panel of languages to select that appears when clicking the drop-down is rendered in its own iframe above the underlying content. This iframe is outside the translate-text div with the :hover CSS rule. Thus, when hovering over the iframe contents, browser treats this as no longer hovering over the translate-text div. This is why the box contents are being concealed.
To have the box remain, you would need the language selection iframe to be contained within the translate-text div so the :hover rule would still apply. In order to do that, you'd have to get a reference to the iframe when its created/loaded to insert it at the appropriate position in the DOM hierarchy.
I just recently added the JQuery accordion affect to my site and applied the heightStyle: fill so that it would fill up the entire window.
However, it's filling up what looks like an extra 1px or maybe 2px, and now it's causing the vertical scroll bar to appear. I'm thinking I have extra padding that may be causing it, or some margin somewhere, but I've tried everything and can't seem to figure out where the extra pixel or two are coming from.
Can you guys figure out where? I just want to get rid of it so that it fills the entire page, but doesn't cause the vertical scrollbar.
Live Example: http://jsfiddle.net/r2Vra/ (If you resize the result window you will need to re-run)
HTML:
<body>
<div id="palette">
<div id="accordion">
<h3>Upper Case</h3>
<div id="upperCase"></div>
<h3>Lower Case</h3>
<div id="lowerCase"></div>
<h3>Numbers</h3>
<div id="numbers"></div>
<h3>Punctuation</h3>
<div id="punctuation"></div>
</div>
</div>
<div id="canvas">
<div id="trash"></div>
</div>
</body>
CSS:
/****************************************************************************************
* GENERAL
*****************************************************************************************/
html, body {
height: 100%;
margin: 0;
padding: 0;
}
/****************************************************************************************
* PALETTE
*****************************************************************************************/
#palette {
float: left;
width: 320px;
height: 100%;
background-color: #888;
padding: 0 5px;
background: url(../img/texture.png) repeat;
}
#palette .letter {
font-family: 'Chango', cursive;
display: inline-block;
font-size: 4em;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
cursor: move;
}
/****************************************************************************************
* CANVAS
*****************************************************************************************/
#canvas {
margin-left: 320px;
height: 100%;
z-index: 0;
background: url(../img/refrigerator.jpg) no-repeat center center fixed;
background-position: left 200px center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#canvas .newLetter {
font-family: 'Chango', cursive;
display: inline-block;
font-size: 4.4em;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
cursor: move;
}
#trash {
position:fixed;
right:0;
bottom:10px;
z-index: 100;
}
#trash a{
display: block;
background: url(../img/trashcan-sprite-tiny2.png) no-repeat;
height: 110px;
width: 125px;
}
#trash a:hover{
background-position: 0px -113px;
}
#trash img {
border: none;
}
/****************************************************************************************
* JQUERY UI CSS OVERRIDE
*****************************************************************************************/
#accordion .ui-accordion-content {
padding: 0 .5em;
}
/*
.ui-helper-reset {
line-height: 1.2;
}
.ui-widget {
font-size: 1em;
} */
JavaScript:
$(function() {
$( "#accordion" ).accordion({ heightStyle: "fill" });
});
You can fix this by adding this:
#accordion .ui-accordion-content {
margin-bottom: -2px;
}
It's not perfect solution but it works.
I figured out a solution that works for me.
I just added an extra div and made it's boundaries a bit smaller than the parent div.
NOTE: It's unfortunate that I had to add an extra div, so if anyone still knows an alternative then let me know.
HTML:
<div id="palette">
<div id="container">
<div id="accordion">
<h3>Upper Case</h3>
<div id="upperCase"></div>
<h3>Lower Case</h3>
<div id="lowerCase"></div>
<h3>Numbers</h3>
<div id="numbers"></div>
<h3>Punctuation</h3>
<div id="punctuation"></div>
</div>
</div>
</div>
CSS:
#container {
height: 99.5%;
}
so, i made a simple animated progress bar in jQuery. you can view it here.
I need some code in this post, so here's my CSS:
.progress {
height: 14px;
width: 300px;
background: #111;
border-radius: 5px;
vertical-align: middle;
display: inline-block;
overflow: hidden;
color: white;
}
.filename {
font-size: 10px;
color: white;
position: relative;
}
.progresstop {
padding: 4px;
width: 40px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
height: 8px;
float: left;
background: #c44639;
vertical-align: middle;
display: inline-block;
}
.arrow-right {
width: 0px;
height: 0px;
border-style: solid;
background: #111;
border-width: 7px 7px 7px ;
border-color: transparent transparent transparent #c44639;
float: left;
display: inline-block;
}
my question: as the progress bar reaches the end, the elements "pop" out of existence when they overflow the div and are hidden, instead of staying visible until they're completely out of the div. specifically, when the CSS arrow disappears as it reaches the end, the end of the progress bar changes from a triangle to a line, which is really visually jarring. is there any way to change this behavior, either in CSS or jQuery, to have elements hide "smoothly"?
Altenatively to JoshC's answer,
you could wrap it in a container like this fiddle
HTML
<div id="progress-container">
<div class='progress'>
<div class='progresstop'></div>
<div class='arrow-right'></div>
<div class='filename'>FILENAME</div>
</div>
</div>
CSS
#progress-container {
height: 14px;
width: 300px;
background: #111;
border-radius: 5px;
vertical-align: middle;
display: inline-block;
overflow: hidden;
color: white;
}
.progress {
height: 14px;
width: 500px; /* large value */
}
Just make sure that the .progess width is larger than what you need (text, arrow, and bar)
You are looking for white-space: pre.
Here is an updated example - it works how you want it to now.
.filename {
white-space: pre;
}
EDIT
If you want to remove the glitch at the end of the animation (where the arrow jumps to a new line), use the following markup/CSS:
jsFiddle example - less HTML now, since the arrow is a pseudo element.
HTML
<div class='progress'>
<div class='progresstop'></div>
<div class='arrow-right'></div> /* Removed this, and made the arrow a psuedo element. */
<div class='filename'>FILENAME</div>
</div>
CSS
.filename:before {
content:"\A";
width: 0px;
height: 0px;
border-style: solid;
border-width: 7px 7px 7px;
border-color: transparent transparent transparent #c44639;
position:absolute;
}