Here is the
http://jsfiddle.net/vicky081/jmGwX/5/ I want to change the width of the div which is now 100% when i change the width to 50% the div appear left side. How can i make that div as center by this when i reduce the size of the div it appear from the center is it possible?
I know the width of the div is 100% then it appear like from left 0 to right 100 if i change the width to 50 also it appear from left to 50% right Is there is a way to show it from center when i change the width it appear both for example: if i reduce the width of the div is 50% then it appear like 25% from center of left and 25% center of right
Here is the code CSS:
.notify {
background: #FFFFFF;
width:50%;
position: relative;
margin:-13px 0px 0px -5px;
padding: 2px 0px 0px 0px;
border-bottom:2px solid #CC0000;
box-shadow: 0px 4px 5px #AAAAAA;
font-size:14px;
font-family: 'Lato Regular', Arial;
text-transform:uppercase;
text-align:center;
}
Edit your CSS like here:
.notify {
....
margin: 0 auto 0 auto;
....
}
http://jsfiddle.net/wRM8j/
EDIT:
If position is fixed add
.notify {
....
position: fixed;
left: 0;
right: 0;
....
}
http://jsfiddle.net/vZexH/
The first Solution is perfect but in case you want to play with that using javascript.
Just include this line.
<script>
var decider=parseInt(document.defaultView.getComputedStyle(document.getElementsByTagName("div")[0]).width)/2;
document.getElementsByTagName("div")[0].style.left=(window.innerWidth/2)-decider;
</script>
Related
I'm using a theme where it's content is set to 1200px. The problem is I want to create a DIV that is full width to the screen's edge and then offset the margin-left to offset the difference. (I'm guessing this is the easiest way)
How do I calculate the width of the column between the side of the screen to the left side of the 1200px grid? And then calculate that difference into the width of the DIV I'm trying to create so that the DIV is full width, regardless of what screen size it's being viewed on?
I'm aware I can do this with fancy editors like Visual Composer, but they are too clunky and make the site slower..
the following seems to work for text, but I can't get an image to stretch across the screen full width unless I make it larger and overlap the screen size. I need it to touch from screen side to screen side
.blue_section {
width: 200% !important;
margin: 0px -50% 0px -50% !important;
padding: 0px 0px 0px 0px !important;
background-color: #0088CC;
}
.blue_content {
width: 1200px !important;
height: 100% !important;
margin: 0px auto 0px auto !important;
padding: 10px !important;
}
If you want to make a div to the full width of the screen, then simply use this code:
div {
/* I added this just for fun */
background-color: skyblue;
color: white;
font-family: Century Gothic;
padding: 5px;
text-align: center;
/* The code that you need to copy */
position: absolute;
left: 0px;
right: 0px;
top: 0px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>Hello World!</div>
</body>
</html>
Here is an example right from w3schools:
https://www.w3schools.com/cssref/func_calc.asp
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
<p>Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</p>
<div id="div1">Some text...</div>
Do you mean something like this?
<div style="width:1200px;right:0px; top:100px; height:200px;background-color:lightgray;">Hello</div>
What you could do is set your div to be position: absolute so your div is independent of the rest of the layout. Then say width: 100% to have it fill the screen width. Now just use margin-left: 30px (or whatever px you need) and you should be done.
About calculating the width of the column: If it's not an issue, this is easily resolvable using Javascript.
var col = document.findElementById("id-of-your-column-div");
var screenFill = document.findViewById("screen-filler");
screenFill.style.marginLeft = col.clientWidth;
You can do:
<style>
.mydiv{
width:1150px;
margin: auto 0;
}
</style>
the width:1150px it for using 25px the margin on each side left and right
Just add css to your div and add following code -
div {
height: 100px;
background-color: blue;
margin -8px;
}
This should probably work.
You need to add negative margin because browsers usually tends to add some margins to the contents of its webpages.
I have the following box shadow with the effect attached. Right now the top of the element has the box shadow effect (see attached), but the bottom does not have the same effect.
How can I make it so that the bottom of the element looks exactly like the top of the element. (see attached for an image)
box-shadow: 0px 0px 60px -18px #CACACA;
Here is your shadow setting applied to a DIV that's 500px x 200px:
http://codepen.io/anon/pen/aNxWgE
If (in that codepen) you change margin: 100px auto; to margin: 0 auto;, you won't see the top shadow anymore. If you erase the width (thereby making the DIV 100% wide), you won't see the side shadows anymore. So probably something similar happens with your bottom shadow.
To avoid that, use margins which are at least as wide as the shadow.
We have not enough infos to tell you where you really go wrong but:
if shadow is too light and spread, you may not see it
when you downscale a shadow, you need enough height and width so it can be produced
body * {
box-shadow: 0px 0px 60px -18px #000;
background:white;
margin: 2em;
}
.minH {
min-height: 38px;
box-shadow: 0 0 60px -18px #000;/* black to make see it better */
}
.show {
float:left;
margin-left:2em;
height:60px;
width:60px;
/* even then , black blured on 60px doesn't show much;*/
}
.show + .show {
height:120px;
width:120px;
/* even then , black blured on 60px doesn't show much;
}
<hr/>
<p>hello</p>
<div></div>
<p class="minH">min-height is necessary to give room to draw box-shadow: here - 18px on each sides makes a min width and height of 18x2 =36px <b>But it will start to show at 37px if your eye can see it </b></p>
<p class="show">make bigger to show</p><p class="show">make twice bigger to show</p>
To understand through example what happens :
offset shadow far enough and without blur to see if it is there or not and how big it is (using black again)
hover the snippet to activate the blur effect and see what becomes the 60px - 18px black shadow.
body {
display: flex;
justify-content: space-around;
background: gold;
}
div {
box-sizing: border-box;
height: 20px;
width: 20px;
background: gray;
box-shadow: 0 65px 0 -18px;
}
div:nth-child(2) {
height: 36px;
width: 36px;
}
div:nth-child(3) {
height: 38px;
width: 38px;
}
div:nth-child(4) {
height: 60px;
width: 60px;
}
/* add blur on hover */
html:hover div {
box-shadow: 0 65px 60px -18px;
}
<div>20px</div>
<div>36px</div>
<div>38px</div>
<div>60px</div>
I've got an issue when i try to put 2 divs, both them them floating to the left side, one with width 80% and the other the 20%. Then i'd like to draw a border on the right side of the first div and a box-shadow of 5px, because each div has a different color.
So I've just searched on this site and i've found this solution:
Border issue in Floating div
But it's bad idea IMHO.... i've a resolution of 1920px width and i can't put 48% for the width of a DIV.... for 4px border i'll got a white space in the webpage for the 2% - 2px.
You could say, just add the background color to the body: i could because each DIV has already it's own, but it's also a problem OF SPACE, PROPORTIONS!!!
Another problem i'm experiencing with: i've set the height 100% (on the second div, 20% width)and it works in the example; but in the real website, which is the height also set to 100% the DIV doesn't occupy the whole height of the column but just until the margin limit of the last image.
The last problem: box-shadow with floating div it's bad idea...
should i put the box-shadow on the last div, just for the left side, instead of the right side for the previous div?
Look at my code here http://jsfiddle.net/9gp6J/
div#contenuto_body{
margin: 0 0;
padding: 0 0;
float: left;
width: 80%;
height: 100%;
background-color: #C90;
-moz-box-shadow: 0 0 5px 1px #333;
-webkit-box-shadow: 0 0 5px 1px #333;
-ms-box-shadow: 0 0 5px 1px #333;
box-shadow: 0 0 5px 1px #333;
border-right: 4px solid #E6B800;
}
body{
margin: 0 0;
padding: 0 0;
}
div#ads{
margin: 0 0;
padding: 0 0;
width: 20%;
float: left;
height: 100%;
background-color: #CCC;
}
div#ads img{
width: 70%;
max-width: 200px;
display: block;
margin: 25% auto;
}
You could use the css3 feature calc(...) available in css3 depending on which browsers you are supporting this may suitable. Anything below IE9 doesn't support this so keep that in mind. Here's a fiddle:
http://jsfiddle.net/9gp6J/9/
Any other solution would have to involve negative margins such as:
div#contenuto_body{
...
margin-right: -4;
}
That should work anything IE7 and up.
for the border issue add a div inside the left div and give a right border to that inner div. This way the outer left div can remain 80% without the added 4px border problem.
HTML:
<div id="container">
<div id="left">
<div id="inner_left">
content left
</div>
</div>
<div id="right">
content right
</div>
</div>
CSS:
div#container {
height:200px;
}
div#left {
float:left;
width:80%;
height:100%;
background:red;
}
div#inner_left {
border-right:4px solid black;
height:100%;
}
div#right {
float:left;
width:20%;
height:100%;
background:green;
}
Check this jsfiddle
I have, for some reason extra white space at the bottom of my div name 'profile-stuff'. I can't seem to figure out why it is there. What could I be doing wrong.
JSFIDDLE: http://jsfiddle.net/8kvwC/
My CSS:
#profile-stuff {
margin: 0px 0px 20px 0px;
height: auto;
width: 100%;
box-shadow: rgba(0, 0, 0, 0.498039) 0px 6px 16px -9px;
background-color: #fff;
}
Alright, extending from comment:
Just as #Adrift has explained, position:relative elements still occupy the space they require, no matter how top/left/etc. offset they are assigned.
So to avoid this, change
#cover-wrap {
top:-100px;
margin-bottom:-100px;
}
to
#cover-wrap {
margin-top:-100px;
}
http://jsfiddle.net/8kvwC/3/
In your #cover-wrap, change your position to absolute and change the top -100px to 50px.
Should fix your problem.
you can use that answer if u want the space for the bottom means you have to add
div{
float:left;
margin-bottom:100px;
}
i have a simple form with css, and there is a select with this style:
.mysub_item select {
height: 29px;
width: 142px;
background: url("/images/input-background.png") no-repeat scroll 0 4px transparent;
border: 0;
font-size: 12px;
font-weight: bold;
color: #4B4B4D;
}
and the text inside that select is always align to the top and left; is there a way that i can move that text?
surprise that IE7, IE8 and IE9 set that text center vertically.
You will just need to add padding to the style and then adjust the height and width accordingly.
e.g.
padding: 5px;
Height now equals your original height - 10px ( 5px padding on the top and bottom )
Width now equals your original width - 10px ( 5px padding on the left and right )
Also as #peduarte suggested, you can add line-height which actually gives the same sort of results as padding.
Add this property to the CSS
text-align:center
try this, may help you
.mysub_item select {
height: 29px;
width: 142px;
background: url("/images/input-background.png") no-repeat scroll 0 4px transparent;
border: 0;
font-size: 12px;
font-weight: bold;
color: #4B4B4D;
vertical-align:middle;
line-height:1.8;
}
Change height to height: 22px;