CSS
#container {
width: 1000px;
margin: 0 auto;
background-color: #000000;
}
#header {
width: 884px;
height: 300px;
position: relative;
margin: auto;
background-image: url(babygoatbooksbanner.png); text-align:center;
background-repeat: no-repeat;
}
HTML
<body>
<div id="container">
<div id="header"></div>
<div id="headertoo"></div>
<div id="leftnav"> dude wheres my car</div>
<div id="body"></div>
</div>
</body>
Do you mean the background-image?
Try this:
background: url(babygoatbooksbanner.png) scroll no-repeat center transparent;
Related
What I am trying to achieve:
image link
What my code currently looks like:
.half-circle {
background-color: white;
}
<div style="background-color: black;">
<div class="half-circle">
<img src="https://i.imgur.com/WBtkahj.png" />
</div>
</div>
<div>Some text here that should't be moved</div>
I've tried using padding with a white background and 500 radius, but it pushes the text down.
You can take a look at radial-gradient() and tune a bit the sizing
.half-circle {
min-height: 12vw;
padding-bottom: 4%;
background: radial-gradient(circle at top, white 17vw, transparent 17.1vw)
}
.half-circle img {
display: block;
margin: auto;
max-width: 15vw
}
<div style="background-color: black;">
<div class="half-circle">
<img src="https://i.imgur.com/WBtkahj.png" />
</div>
</div>
<div>Some text here that should'nt be moved</div>
This can be achieved with CSS if you give your .half-circle a border-bottom-left-radius and border-bottom-right-radius. That will round the bottom corners of the shape into a half circle. I also added some extra style to match your screenshot a little better.
.container {
padding-bottom: 10px;
text-align: center;
}
.half-circle {
background-color: white;
margin: 0 auto;
height: 100px;
width: 400px;
border-bottom-left-radius: 800px;
border-bottom-right-radius: 800px;
padding: 10px 0 20px;
text-align: center;
}
img {
max-height: 100%;
width: auto;
}
<div class="container" style="background-color: #000;">
<div class="half-circle">
<img src="https://i.imgur.com/WBtkahj.png" />
</div>
</div>
<div>Some text here that should't be moved</div>
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 5 years ago.
I want to make my div2 to centre align and div3 to be at right.
I tried doing that with text align: center for main div and making float right to div3 but it is making it center align by considering main div's remaining part. I have given display: inline-flex to main div
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>
Please try with this code:
<div style="height: 40px;width:120px;background-color: yellow;align-items: center; position:relative;">
<div style="height: 20px;width:40px;background-color: red; overflow:auto; margin:0 auto">
Hello
</div>
<div style="height: 20px;position:absolute; right:0px; top:0px; width:20px;background-color: red;">
</div>
</div>
.main {
display: block;
position: relative;
width:100%;
text-align: center;
border: 1px solid red;
}
.main .div1 {
display: inline-block;
border: 1px solid;
}
.main .div2 {
float: right;
border: 1px solid;
display: inline-block;
}
<div class="main">
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
</div>
Divs are block level elements, so you can use a margin of auto on the left and right to place it in the middle.
.center {
margin: 0 auto;
}
.right {
float: right;
}
In the HTML you will need to adjust the ordering of the divs. Put div 3 before div 2 so that when you float it, they appear on the same line:
<div class="outer">
<div class="right"></div>
<div class="center"></div>
</div>
https://jsfiddle.net/dcqpw12u/1/
You can use position:relative for the main, and position:absolute to the other div, and it also centers it vertically
.main {
text-align: center;
background-color: red;
height: 50px;
position: relative;
}
.div2 {
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.div3 {
background-color: green;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
}
<div class="main">
<div class="div2">SOME DIV 2</div>
<div class="div3">SOME DIV 3</div>
</div>
Add style="margin: auto;" to your div2 element. And
style="margin-left: auto;" to your div3 element.
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="margin:auto; height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="margin-left:auto; height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>
.contentmain{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: left;
background:red;
}
.contentCenter{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 30%;
float: left;
background:yellow;
}
.contentRight{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: right;
background:red;
}
<div class="contentmain">
Main<br/>
Content<br/>
</div>
<div class="contentCenter">
Center<br/>
Content<br/>
</div>
<div class="contentRight">
Right<br/>
Content<br/>
</div>
This might be fulfill your requirement.
<!DOCTYPE html>
<head>
<style>
.div0 {
text-align: center;
border-style: solid;
border-width: 5px;
height: 50px;
border-color: red;
position: relative ;
}
.div1 {
border-style: solid;
border-width: 4px;
right: 0%;
height: 40px;
width:40px;
border-color: green;
position: absolute;
}
.div2 {
left: 50%;
right:50%;
width:40px;
position: absolute;
border-style: solid;
height: 40px;
border-width: 4px;
border-color: green;
}
</style>
</head>
<body>
<div class="div0">
<div class="div1"><p>div1</p></div>
<div class="div2"><p>div2</p></div>
</div>
</body>
</html>
basically you can achieve this by using the position property and the right and left properties of CSS which you can refer to more on
Position and right property left property could be found on the site.
what i've done in my answer is set the main div as position relative and the other sub divs(div2 and div3) as absoulute
To get one div to the right most corner you set the right property to 0%
and to center a div i used 50% on both right and left properties.
here is my html:
<div id="banner" style="background-image: url("img/banner.jpg")">
<img src="img/logo.png" alt="logo" />
</div>
and this is my css:
#banner {
width: auto;
height: 100vw;
background: url("/img/banner.jpg");
I want the banner.jpg to be the background of that div with full viewport fill... what to do?
Add the following CSS code:
#banner{
width: %100;
}
This is how I would achieve the effect https://jsfiddle.net/d5Lptwut/10/
<div id="banner">
<img src="img/logo.png" alt="logo" />
</div>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#banner {
background: url('/img/banner.jpg') no-repeat center center;
height: 100%;
width: 100%;
background-size: cover;
}
I have a 9-box with a div structure like so:
<div class="NBWrapper">
<div class="NBTopRow">
<div class="NBLeft" />
<div class="NBRight" />
<div class="NBMiddle" />
</div>
<div class="NBMiddleRow">
<div class="NBLeft"> </div>
<div class="NBRight"> </div>
<div class="NBMiddle">SharePoint WebPart goes here</div>
</div>
<div class="NBBottomRow">
<div class="NBLeft" />
<div class="NBRight" />
<div class="NBMiddle" />
</div>
</div>
And have the following CSS Rules:
.NBTopRow .NBLeft {
height: 18px;
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-top-left.png') no-repeat;
}
.NBTopRow .NBRight {
height: 18px;
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-top-right.png') no-repeat;
}
.NBTopRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
height: 18px;
background: transparent url('/Style Library/Images/qp-bg-top.png') repeat-x;
}
.NBMiddleRow .NBLeft {
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-left.png') repeat-y;
}
.NBMiddleRow .NBRight {
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-right.png') repeat-y;
}
.NBMiddleRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
background-color: #ffffff;
}
.NBMiddleRow {
height: 100%;
}
.NBBottomRow .NBLeft {
height: 18px;
width: 18px;
float: left;
background: transparent url('/Style Library/Images/qp-bg-bottom-left.png') no-repeat;
}
.NBBottomRow .NBRight {
height: 18px;
width: 18px;
float: right;
background: transparent url('/Style Library/Images/qp-bg-bottom-right.png') no-repeat;
}
.NBBottomRow .NBMiddle {
margin-left: 18px;
margin-right: 18px;
height: 18px;
background: transparent url('/Style Library/Images/qp-bg-bottom.png') repeat-x;
}
Everything is in the right place and has the right attributes however, the NBLeft and NBRight elements of the middle row are not taking up any height. Using height:100% does not have any effect.
I have added   and still nothing.
I am usually good with this sort of stuff, but I am stumped. Does anyone have any advice?
your NBleft & NBright are self closing make it like <div></div>
Are self closing divs supported correctly in the HTML Version you're using? You could try using instead?
I can see...
<div class="NBMiddle">SharePoint WebPart goes here<div>
Should be ...
<div class="NBMiddle">SharePoint WebPart goes here</div>
Other thing to try is overflow:auto in the CSS class of the div givin you trouble. As long as the div has content, the CSS will make sure it's displayed.
I'm not 100% sure what you're trying to do, but does the below help? I've added borders to everything so you can see what's happening.
The HTML...
<html>
<head>
<link rel="stylesheet" media="screen" href="bla.css" >
</head>
<body>
<div class="NBWrapper">
<div class="NBrow">
<div class="NBcell">Top Left</div>
<div class="NBcell">Top Middle</div>
<div class="NBcell">Top Right</div>
</div>
<div class="NBrow">
<div class="NBcellFullHeight">Middle Left</div>
<div class="NBcellFullHeight">Middle Middle</div>
<div class="NBcellFullHeight">Middle Right</div>
</div>
<div class="NBrow">
<div class="NBcell">Bottom Left</div>
<div class="NBcell">Bottom Middle</div>
<div class="NBcell">Bottom Right</div>
</div>
</div>
</body>
</html>
Then the CSS...
.NBWrapper {
width: 800px;
margin: auto;
}
.NBcell {
width: 266px;
float: left;
border: 1px solid #000000;
}
.NBrow {
float: left;
width: 804px;
border: 1px solid #000000;
}
.NBcellFullHeight {
width: 266px;
float: left;
height: 500px;
border: 1px solid #000000;
}
What i ended up doing was restructuring the divs:
<div class="NBWrapper">
<div class="NBTopRow">
<div class="NBLeft" />
<div class="NBMiddle" />
<div class="NBRight" />
</div>
<div class="NBMiddleRow">
<div class="NBLeft"> </div>
<div class="NBMiddle">SharePoint WebPart goes here</div>
<div class="NBRight"> </div>
</div>
<div class="NBBottomRow">
<div class="NBLeft" />
<div class="NBMiddle" />
<div class="NBRight" />
</div>
</div>
Taking away the floats and the margins in the attributes and adding this:
.NBWrapper {
display: table;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.NBTopRow, .NBMiddleRow, .NBBottomRow {
display: table-row;
}
.NBLeft, .NBRight, .NBMiddle {
display: table-cell;
}
You might ask, why not just use a table? SharePoint 2010 may use less of them, but but its still tables all the way down. I prefer using div structures.
i have a page with 3 parent divs , now im having problems positioning the divs inside the header div.
my code is something like this:
divs layout:
<div id="layout">
<div id="header" class="body">
header
<div id="logo">logo</div>
<div id="menu">menu</div>
</div>
<div id="main">
<div id="left">left</div>
<div id="right">right</div>
<div id="body">body</div>
<div id="clear"></div>
</div>
<div id="footer">footer</div>
</div>
css is something like this:
.body {
background-color: #ffffff;
margin: 0px;
background-repeat: repeat-x;
background-image: url(imgs/back.png);
}
#layout {
margin:auto;
width: 1024px;
background-color: #ffffff;
}
#main {
background-color: #ffffff;
}
#header {
background-color:#0F0;
height: 300px;
}
#body {
margin-left: 180px;
margin-right: 180px;
padding: 5px;
background-color: #ffffff;
}
#footer {
margin-left: 180px;
margin-right: 180px;
padding: 0px;
background-color: #ffffff;
}
#right {
float: right;
width: 180px;
padding: 0px;
margin: 0px;
right: 0px;
background-color: #ffffff;
}
#left {
float: left;
width: 180px;
padding: 0px;
margin: 0px;
left: 0px;
background-color: #ffffff;
}
#clear {
clear:both;
}
i want to put in a position of header div (e.g. vertical: center , horizontal: 0 px (0 pixels of the header div not of the total page) on left side) and menu in other position (e.g. vertial: top , horizontal: between the center and right side (center and right side of header div only again).
i would appreciate a solution.
thanks to all.
I could be more helpful if you could clarify your question.
I am not sure of what your are asking for in terms of the location for the header.
Here is an approach to move the menu between the center and the right column. Nest the menu and the right hand column in another right aligned div. For the purposes of example I have called it right-container.
Here is the HTML
<div id="layout">
<div id="header" class="body">
header
<div id="logo">logo</div>
</div>
<div id="main">
<div id="left">left</div>
<div id="right-container">
<div id="menu">menu</div>
<div id="right">right</div>
</div>
<div id="body">body</div>
<div id="clear"></div>
</div>
<div id="footer">footer</div>
</div>
And here are the css statements I added:
#right-container {
float: right;
width: 360px;
padding: 0px;
margin: 0px;
right: 0px;
background-color: #ffffff;
}
#menu {
float: left;
width: 180px;
padding: 0px;
margin: 0px;
left: 0px;
background-color: #ffffff;
}
You can see the fiddle here:
http://jsfiddle.net/SkLvX/