Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am trying to put my second div box inside my first div box how would i implement that ..
<style>
div {
width: 400px;
height:50px;
padding: 25px;
margin: 25px;
border-style: solid;
border-width: 1px;
}
#knob {
width: 50px;
height:50px;
background-color: grey;
}
</style>
</head>
<body>
<h1>Grade me in chrome</h1>
<form action="">
<input type="radio" name="angle" value="Horizontal" checked>Horizontal
<input type="radio" name="angle" value="Vertical">Vertical
my second div would need to take up 25% of my first div how shall i do that or do i need to implement it another way?
Ideally you shouldn't be styling the div like this.
Add a class and style based on the class.
.outer-div{
width: 400px;
height:50px;
padding: 25px;
margin: 25px;
border-style: solid;
border-width: 1px;
}
.inner-div{
width: 25%;
height: auto;
padding: 25px;
border-style: solid;
border-width: 1px;
}
<div class="outer-div">
<div class="inner-div"></div>
http://jsbin.com/yaqovokuce/edit
I have updated your jsfiddle here
http://jsfiddle.net/qe81taap/
Element selector should be only used if the style needs to be reflected across all the element, otherwise use class or id selector
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I want to align this button centre of the web page; any ideas how to do that?
<button id="user-button" class="Sign-in"> Sign in </button>
<style>
.Sign-in{
background-color: springgreen;
border: none;
color: white;
padding: 15px 25px;
text-align: center;
font-size: 18px;
cursor: pointer;
border-radius: 10px;
font-family: Lobster, helvetica;
}
</style>
Try wrapping the button in a div and giving that div a text-align property of center.
CSS:
#button-container {
text-align: center;
}
<div id="button-container">
<button>Center Me</button>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Here is what I'm trying to do:
overlapping buttons http://dev.960design.com/98a5fad8-c3ed-4014-a732-15145a233b83.png
I would like the red, blue and green areas to be clickable links without overlapping in an HTML5 web page. For example, if I hover my mouse or tap on the far right edge of the Blue 'B' circle, I do not want the green to be clicked. I would also prefer to have the 'white-space' between the links to be inactive ( hover:pointer would sort of 'blink' as you hover from red to blue to green ).
My initial thoughts: SVG buttons. No problem creating/implementing the svg buttons, but the clickable areas (viewbox?) is causing me problems.
So what is the best way of accomplishing this?
Here's my try with SVG...
<a href="#">
<svg>
<path id="button-svg-right" d="M0,100 L100,100 L100,0 L0,0 C27.6142375,0 50,22.3857625 50,50 C50,77.6142375 27.6142375,100 0,100 L0,100 Z"></path>
</svg>
</a>
Add a central absolute white <span> circle that is not a button.
Play with paddings, borders, till you get the desired sizes.
.btns{
position: relative;
height: 30px;
}
.btns button{
cursor:pointer;
outline: none;
border:none;
height: inherit;
width: 50px;
color: #fff;
font-weight:bold;
font-size:24px;
}
.btns button:hover{
opacity:0.7;
}
.btns > button:first-child{
background: red;
padding-right:20px;
}
.btns > button:last-child{
background: green;
padding-left:20px;
}
.btns span{
left: 32px;
position: absolute;
z-index:1;
width: 30px;
height: inherit;
border-radius: 50%;
background: #fff;
border: 5px solid #fff; margin-top:-5px;
}
.btns span button{
width: inherit; border-radius: inherit;
background: blue;
}
<span class="btns">
<button>-</button>
<span>
<button>B</button>
</span>
<button>+</button>
</span>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I create the following text input:
<input type="text" class="signup-input text-value" name="" placeholder="e.g. example#url.com">
I have to implement a delete function (with an "x" icon which is displayed in the end of the input).
You could set the type to search :
<input type="search" class="signup-input text-value" name="" placeholder="e.g. example#url.com">
type="search" will add a x button inside the input, that deletes the content when clicked.
fiddle -> http://jsfiddle.net/rnfp59jg/
Support for type="search" by modern browsers, from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input :
Feature Chrome Firefox (Gecko) IE Opera Safari
type=search 5.0 4.0 (2.0) 10 11.01 (Yes)
A good cross browser option would be to:
Place your input in a div, and then you can position your 'x' absolutely.
That way you can control how your browser will render the 'X'.
I've also included a fading transition, as well as the event handler itself:
$(document).ready(function() {
$('.ex').click(function() {
$('.signup-input').val("");
});
});
.wrap input,
.wrap .ex {
display: inline-block;
}
.wrap {
position: relative;
width: 50%;
height: 30px;
}
.ex {
position: absolute;
right: 0;
top: 10%;
height: 30px;
width: 30px;
opacity: 0;
font-size: 30px;
line-height: 30px;
transition: all 0.8s;
border: 1px solid transparent;
text-align: center;
}
input {
width: 100%;
height: 100%;
}
.wrap input:focus ~ .ex {
opacity: 1;
}
.ex:hover {
border-radius: 50%;
background: tomato;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<input type="text" id="this" class="signup-input text-value" name="" placeholder="e.g. example#url.com">
<div class="ex">×</div>
</div>
Like given below code you can use it. It works in all browser
HTML:
<span class="surround">
<span class="tagsh"> Name </span>
</span>
JQuery:
var clearIcon ='<span id="icon_clear">X</span>';
$('<input type="input" class="textbox"/>'+clearIcon).appendTo('.surround')
.keyup(
function(e){
var $dad = $($(this).parent());
$(this).val().length>0?
$('#icon_clear').fadeIn(300).click(function() {
$('.textbox').val('');}):
$('#icon_clear').fadeOut(300);
if (e.keyCode in {13:"enter",32:"space"}){
var text = $(this).val();
$('#icon_clear').remove();
$dad.append($('<span class="tag"><span class="plus"></span><span class="minus"></span> '+text+'</span>'));
$dad.append($(this).val("").hide().show("slow").focus());
$dad.append(clearIcon);
} ;});
CSS:
.textbox{
width:70px;
border:1px dotted #ccc;
margin: 0 5px;
padding-right:18px;
}
span#icon_clear{
display:none;
cursor:pointer;
color:#38468F;
position:relative;
right:21px;
}
span#icon_clear:hover{
color:#ccc;
}
Here JSFiddle link: http://jsfiddle.net/ketan156/7PnKS/98/
<div class="search-wrp"><input type="text" class="signup-input text-value" name="" placeholder="e.g. example#url.com"><span class="close">x</span></div>
input{
border: 0px;
width: 100px;
}
.search-wrp{
border: 1px solid #ccc;
width: 120px;
}
.search-wrp span{
color: blue;
display: inline-block;
margin-left: 5px;
paddin: 3px;
cursor: pointer;
}
JS Code
$(function(){
$(".search-wrp .close").on("click",function(){
$(".search-wrp input").val("");
});
});
http://jsfiddle.net/bbw99eq8/2/
Elements within clickable h2
Introduction
I am creating a one-line menu in html. I have 3 options that work in a really similar way. The problem is that the one that has the html right, looks like it can fail more easily. I put the 3 examples here. I am looking for reliable, browser-compatible menu. The third option uses javascript so I don't really love it.
The menu has to be 100% width, within a gray rectangle and has to have some text at left and some at right. The entire menu has to be clickable with only one hyperlink. This is what I have tried so far:
Implemented examples
A link to see them all working is here (DISCLAIMER: yes, it is my own webpage). If you don't feel like clicking there, here's an image of how they look in the same order as the options:
Option 1.
This one is no html compliant, but I've found is the one more logical, it behaves better in general and it's not likely to give many troubles:
<a href="http://newfutureuniversity.org/test/hblock.php">
<h2 style="width:100%; height:100%; border: 1px solid #AAA; padding: 0px 0px 0px 5px; background-color: #EEE;">
Hello world
<span style="margin: 6px; color:gray; font-size: 15px; float:right; ">
Right text
</span>
</h2>
</a>
Option 2.
This one is html compliant, but I just hate to center things using pixels. I feel like it will break really easily. Besides, the text in the right is not fully clickable:
<h2 style="border: 1px solid #AAA; padding: 0px 0px 0px 5px; background-color: #EEE;">
<a href="http://newfutureuniversity.org/test/hblock.php" style="width:100%; height:100%; display:block;">
Hello world
</a>
<span style="position: relative; right: 6px; top:-23px; color:gray; font-size: 15px; float:right; ">
Right text
</span>
</h2>
Option 3.
This one uses javascript. I prefer not to bloat every menu like this one with javascript and to use html/css is available, but this is another option. It doesn't get the color that regular links do.
<h2 onclick="location.href='http://newfutureuniversity.org/test/hblock.php';" style="cursor:pointer; display: block; width:100%; height:100%; border: 1px solid #AAA; padding: 0px 0px 0px 5px; background-color: #EEE;">
Hello world
<span style="margin: 6px; color:gray; font-size: 15px; float:right; ">
Right text
</span>
</h2>
Question
Which one do is more browser compatible and unlikely to break? Do you have any other recommendation or improvement? Any feedback will be appreciated
PS, all the inline CSS will be put apart in a different css sheet.
I'd suggest that the better approach is to reorganise your HTML, to the following:
<h2>
Hello world<span>Right text</span>
</h2>
And then use the following CSS:
a {
display: block;
padding: 0.2em;
width: 80%;
margin: 0 auto;
border: 1px solid #000;
background-color: #aaa;
}
a span {
color: #000;
float: right;
text-decoration: none;
font-size: 0.8em;
padding-top: 0.2em;
}
JS Fiddle demo.
The validity of this depends on the elements you want to ultimately place within the h2 tag to remain clickable, though. Under HTML5 it's valid to nest block-level elements within an a tag, under HTML4, though, while it still seems to work it's not considered valid, according to the doctype.
But, for the posted requirements this seems to work; albeit it does require the restructuring of your HTML, which may not be possible. However:
it is valid HTML,
it's resistant to breaking (unless the content of the span exceeds a given width,
it doesn't rely on arbitrary px adjustments (albeit it does use padding to vertically centre the resized text within the a),
it doesn't require JavaScript
Edited to amend the CSS a little, to account for the potential for the right-floated text to become large enough to overflow to the next line, by simply adding overflow: hidden to the a element's CSS:
a {
display: block;
padding: 0.2em;
width: 80%;
margin: 0 auto;
border: 1px solid #000;
background-color: #aaa;
overflow: hidden;
}
JS Fiddle demo.
You could also, of course, add a max-width to the span:
a span {
color: #000;
float: right;
text-decoration: none;
font-size: 0.8em;
padding-top: 0.2em;
max-width: 80%;
}
JS Fiddle demo.
I agree with David Thomas on his mark up. Although I would alter the css slightly in order to make it more robust. If you resize your browser so that the right span gets pushed below the left text (make the browser smaller), then you'll see that the clearing properties that I have applied mean the a stays wrapped around the span rather than allowing the span to move outside of the a area.
HTML:
<h2 class="item ">
<a href="#" >Loads of left left Left Text<span>Right Text lots more</span></a>
</h2>
CSS:
.item a {
zoom:1;
border: 1px solid #666;
background: grey;
display: block;
}
.item a:before,
.item a:after {
content:"";
display:table;
}
.item a:after {
clear:both;
}
.item span {
background: green;
float: right;
}
DEMO:
http://jsfiddle.net/Vc3DA/
I need to shape ONE div tag in the following shape:
Is it possible to make it cross browser? I don't necessarily need rounded corners. I need it so I can change the color of the borders of the whole div on hover, so I assume it can't be achieved by using two divs.
Yeah, you can do that using HTML and CSS like this: http://jsfiddle.net/broofa/364Eq/
It's essentially using three divs to aggregate the mouse events, like so:
<div id="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
And I use a :hover rule on the outer element to affect the border colors on the inner divs:
#outer .inner {border-color: red}
#outer:hover .inner {border-color: blue}
The only quirk with this markup is that the content area - the area you drew in your image - is that it's two divs, not one. So text won't wrap and flow the way you might expect. Also, this may not work so well on older (IE6-7) browsers. But FF, Chrome, Safari, Opera should probably be okay.
A one div solution using pseudo elements:
/* relevant styles for shape */
.tab {
border-top-left-radius: 0px;
margin-left: 100px;
}
.tab:before {
content:"";
display: block;
position: relative;
height: 50px;
width: 50px;
right: 52px; /* width + border width */
top: -2px;
background-color: white;
border: inherit;
border-right-width: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
/* styles to look like example */
div{
box-sizing: border-box;
background-color: white;
border: 2px solid red;
height: 100px;
width: 200px;
border-radius: 5px;
}
div:hover {
border-color: green;
}
<div class="tab"></div>
See this jsFiddle example:
<div id="main">
<div id="div1" class="border">
</div>
<div id="div2" class="border">
</div>
</div>
You can either use a map or use 2 divs and alter the borders so it looks like one shape.
two options that I can think of:
1) give the div a background image and use CSS pseudo class :hover to change the background image to one that indicates a hover state
2) put three div's inside a wrapper, and position them so so you have one in the upper left hand corner, and then two stacked on top of each other, so that you can simulate the top half of a larger div missing the upper left half border. I don't think CSS alonw can target all the divs in order to change their borders, so will probably have to use JS to execute the hover behavior, by applying an event handler to all three divs.
No. Divs are ALWAYS rectangular. You could fake it in a number of ways (using a background image would be one option).
As for using two DIVs, sure you could. The hover could be done with CSS3 and child selectors of a parent div or you could JavaScript to change the class of both divs when hovering over either one of them.
Definitely requires two or three div's unless you use a background image
Here's a three-div solution
http://jsfiddle.net/pxfunc/SUuF6/
Its cross-browser compatible. The hover won't work in IE6, but it will in IE7+. The rounded corners will show based on browser support
HTML:
<div id="fancyShape">
<div id="main"><div></div>
<div id="panHandle"></div>
</div>
CSS:
#fancyShape {position:relative;width:504px;height:304px;}
#main {
margin-left:100px;
width:400px;
height:300px;
border:solid 2px #000;
border-radius:0 15px 15px 15px;
}
#panHandle {
width:100px;
height:120px;
position:absolute;
top:0;left:0;
border-top:solid 2px #000;
border-left:solid 2px #000;
border-bottom:solid 2px #000;
border-radius:15px 0 0 15px;
}
/* hover effect */
#fancyShape div {background-color:#fff;}
#fancyShape:hover div {background-color:#ff0;border-color:red;}
Perhaps you could use Border-radius along with 2 or 3 div's to get the look you want. The only issue then is it's not supported in all browsers.
Use multiple divs, as others have suggested.
http://jsfiddle.net/thomas4g/7B5MA/14/
Keep in mind that it'll be very hard to flow content in this.
<!DOCTYPE HTML>
<html>
<head>
<style>
html{height: 100%; width: 100%;}
body{height: 100%; width: 100%;}
#wrapper{
position: relative;
top: 50px;
right: 25%;
width: 565px;
height: 440px;
margin: 0 auto;
padding: 0px;
}
#left{
position: absolute;
width: 100px;
height: 50px;
border: 2px solid black;
border-right: none;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
background-color: #ffffff;
}
#right{
position: absolute;
left: 100px;
width: 440px;
height: 440px;
border: 2px solid black;
-moz-border-radius: 10px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
border-radius: 10px;
padding-left: 25px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('#wrapper').hover(
function () {
$(this).children('#left').css({'border':'2px solid red', 'border-right':'none'});
$(this).children('#right').css({'border':'2px solid red'});
},
function () {
$(this).children('#left').css({'border':'2px solid black', 'border-right':'none'});
$(this).children('#right').css({'border':'2px solid black'});
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="right">Some content here</div>
<div id = "left"></div>
</div>
</body>
</html>
You can use CSSPIE for rounded orners for IE