I wonder how can I make a gradient background to repeat outside the defined layout.
http://i.imgur.com/CYk2FiE.png
Needed to repeat the water green and orange, which are also gradients.
Thank you.
<body>
<div id="header" style="width:1316px;height:80px;">
<div style="width:150px;height:72px;background-color:white;float:left;">repeat</div>
<div id="header-internal" style="background-color:gray;float:left;">
1016px
</div>
<div style="background-color:white;width:150px;height:72px;float:left;">repeat</div>
</div>
<div id="content">
what repeat background header left and right? two colors different?
</div>
<div id="footer">
footer
</div>
<br /> <br /> <br />
Should look like:
<img src="http://i.stack.imgur.com/KCbiK.png" />
</body>
and Css would be
body {
margin:0;
padding:0;
}
#header {
background:url("http://s10.postimg.org/jfhegkq49/bg_center.jpg") no-repeat;
background-position: bottom center;
background-color: #EFEFEF;
background-size:100%;
height: 80px;
}
#header-internal{
margin: 0 auto;
height: 72px;
width: 1015px;
}
#footer {
background-color: red;
height: 80px;
margin-top:20px;
}
Related
the background image of my web doesn't fill all the height of the window when there isn't enough content, here is a example:
Without content:
With content:
here is the app.component.html:
<body>
<!-- Background -->
<div class="bg">
<!-- nav -->
<app-navbar></app-navbar>
<!-- Logo -->
<div style="text-align:center">
<img width="200" alt="BookCloud Logo" [routerLink]="['/books']" src="../assets/logo3.png">
</div>
<!-- App -->
<div class="container">
<app-alert></app-alert>
<router-outlet></router-outlet>
</div>
</div>
</body>
and here is the app.component.css:
.container {
width:100%;
height:100%;
}
img {
outline: none;
}
html, body{
height: 100%;
}
.bg{
position: relative;
display:block;
background: url('../assets/bg.jpg') no-repeat center center fixed;
background-size: cover;
}
What im doing wrong? Thanks for reading.
You css should be
.bg{
position: relative;
display:block;
background: url('../assets/bg.jpg') no-repeat center center fixed;
background-size: 100% 100%;
}
If that doesn't work, change .bg to body.
I am learning on how to work with CSS. Currently, I am trying to learn about CSS positioning. I use different background color for each div section, so I know which area of the page that gets affected when I make code changes.
I am working right now on my header page and stumbled into one thing that I do not understand. I have a logo and put it inside its own div. The problem that I can see, below the logo there is a whitespace (i use pink background color for the div) and I cannot get rid of it. So below is the code that I use and the screenshot of what the header looks like currently.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Print Repair Form</title>
<style type="text/css">
* {
margin:0;
padding:0;
font: 12px/1.5 Georgia, serif;
}
#page-wrap {
width: 800px;
margin: 0 auto;
}
#header {
background-color:#88d;
overflow: auto;
}
#logo {
float:left;
background-color: #ffccff;
}
#logo a img {
border:none;
}
#address-container {
display: table;
float: left;
width: 164px;
background-color: #FC730A;
height: 104px;
}
#address-content{
display:table-cell;
vertical-align: middle;
}
#repair-header {
background-color:#d4d4d4;
float:left;
width:380px;
}
#customer-info {
float: left;
width:220px;
background-color: #ffff99;
}
#wo-info {
background-color: #99ff99;
}
#content {
clear:both;
background-color:#33d;
}
</style>
</head>
<body>
<div id="page-wrap">
<div id="header">
<div id="logo">
<img src="/fms/images/windows8-cropped.jpg" />
</div> <!-- div logo -->
<div id="address-container">
<div id="address-content">
456 Some Addresses <br />
The City, XP 444411 <br />
1-800-000-0000 <br />
www.someaddress.com
</div>
</div>
<div id="repair-header">
<p>Repair Detail</p>
</div>
<div id="customer-info">
<p>12345678</p>
<p>Facility Name</p>
</div>
<div id="wo-info">
<p>WO: 12345789</p>
</div>
</div> <!-- div header -->
<div id="content">
<p>Content is here</p>
</div>
</div> <!-- div page-wrap -->
</body>
</html>
Add the property
line-height: 0;
to your logo div
#logo {
float:left;
background-color: #ffccff;
line-height: 0;
}
and modify your image css to:
#logo a img {
border:none;
vertical-align:bottom;
}
My aim is to place 3 images in one row with the same distance from each other, as it is shown in the picture below (assuming the 2 arrows have the same length).
By now my solution is a very ugly one, which breaks, if the window size is too small:
<h1>
<div style="width:105px; height:30px; float:left; margin-top:25px;">
<img src="image1.png"/>
</div>
<div style="width:190px; height:30px; float:left; margin-top:25px; margin-left:30%; margin-right:30%;">
<img src="image2.png"/>
</div>
<div style="width:102px; height:30px; float:right; margin-top:25px;">
<img src="image3.png"/>
</div>
<div style="clear: both;">
</div>
</h1>
I would really prefer a "clean" solution, but my HTML knowledge about positioning is too limited so far.
Any help would be appreciated.
Use text-align: justify:
<div class="outer">
<img src="http://placehold.it/50x100" />
<img src="http://placehold.it/150x100" />
<img src="http://placehold.it/50x100" />
<span class="fix"></span>
</div>
.outer {
text-align: justify;
}
.outer img {
display: inline-block;
vertical-align: center;
}
.outer .fix {
width: 100%;
height: 0;
display: inline-block;
}
In most browsers, you can remove that .fix span, and add:
.outer::after {
width: 100%;
height: 0;
display: inline-block;
content: "";
}
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'm really struggling with my footer. I've followed the instructions at http://www.cssstickyfooter.com/ to make my footer stick to the bottom of the page. It works fine until I add divs into the footer div - the purple background and image disappears. I would do it as a single div but I can't work out how to do the zigzag edge without creating a separate box.
Any help would be greatly appreciated! I've been trying for days to get this to work.
Here is my HTML:
<body>
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
<img src="images/logo.png" width="435px" height="112px" alt="Lauren Womack Logo" />
<div id="menu">
<img src="images/menu/home.png" width="142" height="160" alt="Home" />
<img src="images/menu/about.png" width="131" height="157" alt="About" />
<img src="images/menu/contact.png" width="128" height="160" alt="Contact" />
</div>
</div>
<!-- End Header -->
<!-- Begin Content -->
<div id="content">
<div id="rightholder">
<div class="outerleft">
<div class="inner"><h2>Animation and Interactive</h2>
</div>
</div>
<div class="outerright">
<div class="inner">
<h2>Web Design</h2>
</div>
</div>
<div class="outerleft">
<div class="inner">
<h2>Print Design</h2>
</div></div>
<div class="outerright">
<div class="inner">
<h2>Illustration</h2>
</div>
</div></div> <!-- End Content -->
</div>
</div><!-- Begin Footer -->
<div id="footer">
<div class="footeredge"> </div>
<div class="footerinner"> <p>© Lauren Womack 2012</p>
</div> </div> </div>
<!-- End Footer --></body></html>
And here's my css:
body {font-size: 13px; background: url(images/background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%;}
html {height: 100%;}
#wrapper{ min-height:100%; min-width:992px; margin-left:0px; margin-right:0px;}
#header {height: 170px; padding-top:36px; border: none;}
#menu {float:right;}
#content { position: relative; min-width: 1141px; border:none;background: none; overflow:auto; padding-right:32px; padding-left:32px; padding-bottom: 86px;}
#rightholder { float: right; clear: left;min-width: 639px;width: 60%;padding-top: 90px;}
.outerright {background-image:url(images/threadborder.jpg);min-width: 257px;width: 45%; height: 98px; margin-top: 22px; margin-bottom: 22px; margin-left: 20px;float: right;clear: right;}
.outerleft {background-image:url(images/threadborder.jpg);
min-width: 257px; width: 45%; height: 98px; margin-top: 22px;margin-bottom: 22px;margin-right: 20px; float: left;clear: left;}
.inner {padding: 5px; height: 87px;}
#footer {position: relative; margin-top:-86px; margin-left:0px; margin-right:0px; padding-left:0px; padding-right:0px; height:86px; clear:both; padding-right: 32px; margin-left:0px; margin-right:0px; border: none;
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
.footeredge {
background-color: none;
background-image:url(images/footer/zigzag.png);
background-repeat:repeat-x;
height: 20px;
}
.footerinner {
background-color:#663366;
height: 66px;
}
How I want it to look: http://tinypic.com/r/242swuc/6 The purple box at the bottom and the zigzag isn't showing though, just the text.
There's no closing curly brace for #footer, which in turn break's your style declarations after this point.