I know this is bit difficlut to explain but you'll get an idea by seeing my code below, the situation is I've a textarea which having a line background(something like notebook and the image style is repeat), also the textarea become fixed height for eg. 300px, so my question is when a scroller comes I want to stick the lines with the text, now the text is scrolling and the background lines stay back into a fixed position..
Just tell me your suggetions, is that possible to scroll the background lines together with the text?
Here is my html code..
<div style="width:500px; height:300px; margin:0px auto; background:#ebebeb;">
<textarea style="width:100%; height:300px; background:url(line.jpg) repeat; line-height:30px; font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif;" name="" cols="" rows=""></textarea>
</div>
and here you can see the image - {
}
Use background-attachment: local; after you set your background image.
demo
Works in IE9+, Firefox 5+, Safari 5+, Chrome and Opera
HTML:
<div>
<textarea>
background-attachment: local;
<!-- and so on, many more lines -->
background-attachment: local;
</textarea>
</div>
CSS:
div {
width: 500px;
margin: 0 auto;
background: #ebebeb;
}
textarea {
display: block;
width: 100%;
height: 300px;
background: url(http://i.stack.imgur.com/EN81e.jpg);
background-attachment: local;
font: 20px/1.5 Georgia, 'Times New Roman', Times, serif;
}
EDIT
Another better compatibility solution (only browsers in which this doesn't work are Opera Mobile and Opera Mini) would be not to use a textarea, but another div with a contenteditable attribute.
demo
HTML:
<div class='outer'>
<div class='inner' contenteditable='true'>
background-attachment: local;
<!-- more stuff -->
background-attachment: local;
</div>
</div>
CSS:
.outer {
overflow-y: scroll;
width: 500px;
height: 300px;
margin: 0 auto;
background: #ebebeb;
}
.inner {
width: 100%;
min-height: 300px;
background: url(http://i.stack.imgur.com/EN81e.jpg);
font: 20px/1.5 Georgia, 'Times New Roman', Times, serif;
}
Related
I use something similar to this for my menu - the red line in reality has an image background and should underline the whole content or go to the full width.
It works fine on large screen, but on small (here simulated by setting width), the red line ends before the actual content.
Any way to make it expand to the full width?
(I can use javascript (even jquery), but I'd prefer not to)
.outer {
font-size: 16pt;
}
.menu {
width: 100%;
overflow-x: auto;
white-space: nowrap;
position:relative;
}
.menu:after {
content:'';
background-color:red;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
}
<div class="outer">
<div class="menu">
This is on desktop and everything is fine.
</div>
</div>
<div class="outer" style="width: 200px">
<div class="menu">
This is on phone, the content overflows as you can see.
</div>
</div>
You can use a media query to target mobile only and reset your CSS (replace the 200px with your mobile screen resolution, typically 480px):
#media screen and (max-width: 200px) {
.menu {
overflow-x: initial;
white-space: normal;
}
}
i may have a simple solution for you problem : set a border and delet the after element.
.menu {
width: 100%;
overflow-x: auto;
white-space: nowrap;
position:relative;
border-bottom:2px solid red;
}
http://jsfiddle.net/ex0p6thd/
I am having problems with some content not fixed into one place when I resize the window on a browser, I basically have 3 div id box elements placed next to each other.
They are positioned fine however when I resize the screen they seem to fall below one another.
I have min-width: 947px; in the body of the CSS however this does not do anything.
HTML:
<div id ="featured1">
</div>
<div id ="featured3">
</div>
<div id ="featured2">
</div>
CSS:
#featured1{
float:left;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
margin-left:150px;
border:1px solid black;
width:250px;
height:150px;
}
#featured2 {
display: inline-block;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
}
#featured3 {
float:right;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
margin-right:200px;
}
For some reason when I try resizing the screen with this code the elements fall below each other, I am looking for the content to completely remain the same and not resize at all.
Here is the working example: jsFiddle link
use
display: inline-block;
on all 3 divs, then they wont go down.
Note: this property will not work on IE7 and smaller versions.
You have given your body a min-width:947px but the actual width occupied by all divs including the margin and borders, etc is 1150px.
Thats why its breaking.
Please add vertical-align: top; property on all the divs
This should help. FYI. When writing in CSS make sure you minify the code. Google developer has a great section on this (https://developers.google.com/speed/pagespeed/service/MinifyCSS).
HTML:
<div id="container">
<div id="featured1">
Featured 1
</div>
<div id="featured2">
Featured 2
</div>
<div id="featured3">
Featured 3
</div>
</div>
CSS:
#container {
position: absolute;
width: 836px;
height: 190px;
}
#featured1, #featured2, #featured3 {
position: relative;
font-family: 'Lobster13Regular';
font-size: 35px;
float: left;
left: 20px;
top: 20px;
width: 250px;
height: 150px;
border: 1px solid #000;
overflow: hidden; /*Remove if you are not going to overflow text in each element*/
}
#featured2, #featured3 {
margin-left: 20px;
}
I am trying to change the color of the text and underline it, when a user hovers over a text.
I tried the following and it doesn't work. I did look for a solution all over the internet and I didn't find any that suited my particular need.
<style type="text/css">
.container{ width: 100px; float: left; background: #e2edf9; overflow: hidden; }
.content {width: 10px; height:20px; cursor: pointer; color: black; }
.content:hover{color: orange;}
</style>
<div class="container">
<div class="content" onclick="search(this)" >**EWR**</div>
<div class="content" onclick="search(this)" >**NRT**</div>
</div>
CSS:
.container{ width: 100px; float: left; background: #e2edf9; overflow: hidden; }
.content {width: 10px; height:20px; cursor: pointer; color: #000000; }
.content:hover{color: #FFA500; text-decoration: underline;}
Not all browsers accept words as colors try using HEX-code or rgb().
See: http://jsfiddle.net/davcpas123/3S4xN/2/
Update:
Strange seems fine to me:
In IE there must be declared a <!DOCTYPE> for the :hover selector to work on other elements than the <a> element.
I'm not so sure about :hover support on elements other than link in <IE6.
If push comes to shove there is always your javascript whip:
<div class="content" onmouseover="this.style.color = 'orange'" onmouseout="this.style.color = 'black'" ></div>
What's wrong with this?
<style type="text/css">
.container{ width: 100px; float: left; background: #e2edf9; overflow: hidden; }
.content {width: 10px; height:20px; cursor: pointer; color: black; }
.content:hover{color: #FFFFFF;text-decoration:underline;}
</style>
<div class="container">
<div class="content" onclick="search(this)" >**EWR**</div>
<div class="content" onclick="search(this)" >**NRT**</div>
</div>
Demo: http://jsfiddle.net/m4m7B/1/
This fiddle works for me in IE8, see fiddle here, except when running in quirks mode, do you have quirks mode on?
Is javascript an option, seems like the best solution for you.
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
I am having an issue with a layout I am trying to develop.
I basically have split the view-port into 2 equal width divs with a different background tiled image in each.
I have it stretching full screen 100%, but have a problem on scrolling.
The background image is cropped to the original height of the view-port..!
Here's the html:
<body>
<div id="container">
<div id="left" class="half">
left content here
</div>
<div id="right" class="half">
right content here
</div>
</div>
</body>
Here's the css:
html, body {
margin:0;
padding:0;
height:100%;
font: 14px Gotham, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
color: #505050;
}
div#container {
height: 100%;
min-width: 800px;
min-height: 500px;
}
div.half {
height: 100%;
width: 50%;
}
div.half#left {
float: left;
text-shadow: 0px 1px 1px white;
background-image: url(images/metalBG.jpg);
}
div.half#right {
float: right;
text-shadow: 0px -1px 1px black;
background-image: url(images/fabricBG.jpg);
}
I'm wondering if the is maybe a javascript, hence included in this cat also.
I would use Firebug or similar to verify that it's a background problem, not a DIV sizing problem. Maybe what's clipped is not your BG image, but rather the height of your DIVs.
If this is not the case, you can try adding
background-repeat:repeat,
to your CSS for div.half, but this is already the default value, so unless you have some CSS somewhere overriding it, should be in place anyway.
This seems to get me the result i want, not tested in explorer yet though.
html {
margin:0;
padding:0;
font: 14px Gotham, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
color: #505050;
background-image: url(images/metalBG.jpg);
}
body {
float:right;
margin:0;
padding:0;
width:50%;
background-image: url(images/fabricBG.jpg);
}
#left {
float:left;
margin-left:-600px;
width:550px;
}
I haven't run this code but adding it to the existing code should work (I hope :P).
You can keep the divs and their backgrounds fixed where they are using something like:
.half{
position:fixed; /* keeps the divs in the same place */
overflow:auto; /* overflowing content will scroll */
background-attachment:fixed; /* the background won't scroll with content */
}