I am nearing completion of my site http://csgoshack.com/shop/
I need to do one thing and this is to put a white box in the center of the screen so I am able to see the site.
I tried to do this by photoshoping a white box onto the background image but that didn't work.
How would I go about doing this?
.whitebg {
width: 1250px;
padding: 10px;
border: 1px solid black;
margin: 0;
background-color:#ffffff;
margin:auto;
position: absolute-center;
top:0;
}
First you would need to design your box using CSS and call it in using HTML.
HTML:
<div class="body-content">Insert Lists, Text, and other body content here</div>
CSS:
.body-content {
width:80%;
height:80%;
top:10%;
position:absolute;
background-color: white;
margin-left:auto;
margin-right:auto;
}
Adjust the width, the height, the positioning, and the colors to your specifications. I wouldn't change the margin-left and right because that centers the div inside of the body ( unless you don't want it exactly centered ).
Hope this helped!
Related
I'm working on a web design project for one of my classes. I cannot figure how to make the divs go down the whole page (the color)
http://jsfiddle.net/vmm1s4Lt/
http://codepen.io/bmxatvman14/pen/fihwD
Excerpt:
nav {
background: black;
color: white;
float:left;
width:20%;
height:800px;
display:inline-block;
/*margin-top: 40px;*/
padding-bottom: 40px;
position: relative;
z-index: 10;
}
#main {
background-color:#04cfe1;
float:right;
width:80%;
/*margin-right:10px;*/
}
Notes: I'm a pretty moderate coder, so I have tried height: 100% and that didn't do anything.
I'm trying to make the black side bar go all the way, and the blue span across the rest of the page.
Full page site: http://rubergaming.com/project/
Thanks a ton!
You can achieve this by using height 100%, but you may have forgotten that you also need to give container elements a height of 100% in order for that to work when you are giving your #main div that 100% height. I also slightly modified some of your other styles, you may need to tweak as needed. http://jsfiddle.net/ngz6e5p1/.
/*Give containing elements, as well as our main div, a height of 100%*/
html, body, #wrapper, div#main {
height: 100%;
}
/*This is overriding styles you already had - I changed the nav's height from 800px to 100%, and removed padding which will cause there to be an extra white space under the main blue nav if present */
nav {
height: 100%;
padding-top: 0px;
padding-bottom:0px;
}
What do you mean for the black bar to go all the way? And to span the blue div across the rest of the page try this:
<div id="main" style="
position: absolute;
margin-left: 20%;
bottom: 0;
top: 0;
">
//ALL THE OTHER STRUFF INSIDE THIS DIV
</div>
I am facing very simple problem with margin-top and its freaking me out. I have simplified my document to make it readable.
Here is my structure of html document
<body>
<section>
</section>
<section>
<div></div>
</section>
</body>
Here is my CSS
section{
width: 100%;
height:768px;
background-color: red;
border-bottom: 1px solid yellow;
position: relative;
}
div{
background-color:green;
height:50px;
width:50px;
margin-top:0px;
}
When div's margin-top is 0, it looks like this:
But when I change it to margin-top to 10px, it looks like this:
I could not point out how that white space is added. Inspection shows that it is the part of body. Section is actually pushed down. I was expecting that small div to be pushed down relative to section. Can anyone explain this weired behavior?
here the fiddle http://jsfiddle.net/suriyag/UhqX9/1/ that has solution for your requirements
section{
position:relative;
width: 100%;
height:768px;
background-color: red;
border-bottom: 1px solid yellow;
position: relative;
}
div{
position:absolute;
top:10px;
background-color:green;
height:50px;
width:50px;
}
did some little changes in your code
From w3.org:
In CSS, the adjoining margins of two or more boxes (which might or
might not be siblings) can combine to form a single margin. Margins
that combine this way are said to collapse, and the resulting combined
margin is called a collapsed margin.
Now to prevent collapsed margin, you should add overflow:auto to the parent element.
try
float: left;
for section tag if you can
http://jsfiddle.net/dcTw3/2/
I have two divs that I have have positioned on the left and right sides of the screen (using float and/or absolute positioning, I have found many ways to position them). In the middle I have a single div that keeps the content of my website centered. My problem is that when I have my browser at a small width those outside divs are forced in and mess everything up in the center. When I have my browser at a small width I want a scroll bar to appear so that a user and scroll left or right to see the divs outside the center content. I am using overflow:scroll on the body element but that doesn't do anything. I also need to use
Here is the basic structure
<body>
<div id="navLeft">
<div id="navRight">
<centered content/all of webpage>
</body>
Here is the CSS for the body and side divs
body {
background: #A2F0FA url('images/bg_site.jpg');
background-repeat: repeat-x;
font: 13px Arial, Sans-Serif;
color: #525252;
overflow:scroll;
}
#navLeft {
border: 5px solid #fff;
width:220px;
height: 260px;
float:left;
position:absolute;
top:10%;
left:28%;
opacity:0.85;
}
#navRight {
border: 5px solid #fff;
width:220px;
height: 260px;
float:right;
position:absolute;
top:10%;
left:85%;
opacity:0.85;
}
you can try some negative margin on body's side.
but you won'nt be able to show the left aside on small screen so if content is important, you loose it :
body {margin:0 -220px ; /* width of aside element */.
Test the idea here
Best is to check via javaScript on load and resize width of window & body & if an horizontal scroll is there and its scrollright value.
Then reset the scrollright to a proper value without annoying your visitor.
I need to give access to the users to upload what ever pixels they want but it will be over 100x100 for their profile pic. The pic will be contained in SQUARE box.
But the problem is, when I upload a 100x100 or sizes similiar to that, it works good as expected. But when I upload an image with the pixels of 640x360 or anything similar to that sort (or widescreened), the image is scaled into the box well but however, it is not vertically aligned. I want the vertical-align to be in the middle, so how do I do that?
CSS:
#imgbox {
height:100px;
width:100px;
overflow:hidden;
border:solid 1px #000;
margin-left:10px;
margin-top:10px;
}
#imgbox img {
width:100%;
position:relative;
//I want the vertical align of the image to be in the center
}
Here: http://jsfiddle.net/ZdW9h/1/
A couple things -
Use a class for your imgbox elements, IDs are used for selecting a single element in a given document.
Secondly, I suggest using one div with background-image properties, this way you can position it relatively.
HTML
<div class="imgbox" style="background-image: url(http://plants.montara.com/ListPages/FamPages/showpix/ranunculaS/aqufor_a.JPEG)"></div>
<div class="imgbox" style="background-image: url(http://pictures.inspirationfeed.netdna-cdn.com/wp-content/uploads/2010/06/Evolution_by_will_yen-500x500.png)"></div>
CSS
.imgbox {
height: 100px;
width: 100px;
overflow: hidden;
border: solid 1px #000;
margin-left: 10px;
margin-top: 10px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
JSFiddle
If you set a line-height on your container div, you can then use vertical-align on the image to position it. Also, you should use max-width and max-height to make sure the image is always contained within the box (assuming that's what you want).
http://jsfiddle.net/ZdW9h/7/
And here is the updated CSS:
#imgbox {
height:100px;
width:100px;
line-height: 100px;
overflow:hidden;
border:solid 1px #000;
margin-left:10px;
margin-top:10px;
}
#imgbox img {
max-width:100%;
max-height: 100%;
vertical-align: middle;
}
Just set the width and height attributes on img to 100: http://jsfiddle.net/ZdW9h/4/
Resizing images in this way is generally not the best idea, though. If you can resize the image with some sort of image library like GD I'd recommend doing that first. It will save you some space on your server too.
This thing should fix your problem:
#imgbox img {
width:100px;
height: 100px;
position:relative;
}
Let me know if you are looking for something else.
You can try :
#imgbox { display:table-cell; }
with css, can I put a div under another div without using absolute positioning?
I have these two divs, and I would like the solid white one to appear directly under the one with the yellow opacity (but not direct in the corner, at the corner of the outline).
How can this be accomplished. I've been experimenting with z-index and relative positioning, but to no avail.
Thanks
http://jsfiddle.net/loren_hibbard/WtGsv/
Without using positioning, I added a style to your content div using negative margins:
.content {
margin-top:-100px;
}
Working demo here: http://jsfiddle.net/WtGsv/3/
I suggest adding an id to your .fixed_width div which houses the .content div though, and using the id to give the negative margin to, that way the parent div has the negative margin, not the child div.
However if you want to use absolute positioning, I have updated your jsfiddle here:
http://jsfiddle.net/WtGsv/12/
Basically, you add a parent div with position:relative; around your other two divs that you want to use position:absolute;
I guess you should rewrite the markup, it is very simple, I don't know whether you are aware of this or not but you can pick up the div and place it in a relative positioned container, than you wont need negative margins
Demo
HTML
<div class="wrap">
Add a line item
<div class="inner_wrap"><textarea></textarea></div>
</div>
CSS
body {
background-color: #aaaaaa;
}
.wrap {
border: 4px dashed #ff0000;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 20px;
font-family: Arial;
position: relative;
}
.inner_wrap {
position: absolute;
width: 100%;
height: 100%;
background-color: #919191;
top: 0;
}
Yuu can use position: relative; top -100px, http://jsfiddle.net/WtGsv/1/
or you can use negative margins margin-top: -100px http://jsfiddle.net/WtGsv/5/
With both solutions, the div at the bottom still takes space where it would be originally
Note that adding a div dynamically doesn't preclude you from making it absolutely positioned, you just have to make the parent be positioned relative, and the dynamic absolutely positioned div will be inserted right where you want it http://jsfiddle.net/WtGsv/10/
You can place the div you want to be on top inside the div you want underneath, and position the one on top absolutely inside the parent.
Example HTML:
<div id="bottom">
lorem ipsum
<div id="top">
hello world
</div>
</div>
CSS:
#bottom {
background:red; /* to see dimensions */
position:relative;
}
#top {
background:rgba(0, 255, 0, 0.3); /* only to prove that it's on top */
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Here is a JSfiddle.
If you put them both inside a parent div, and set that to have a width equal on the width of the yellow box, then by default the white one would be placed directly below.
I did this way
.mainUnderline{
height:8px;
background-color:yellow;
margin-top:-15px;
}
.header{
width:400px;
text-align:center;
font-weight:900;
font-size:30px;
color:black;
padding-bottom: 2%;
margin-left: auto;
margin-right: auto;
}
<div class="header">
“See line under me”
<div class="mainUnderline"></div>
</div>