I am working on website that have in the header "two lines" must repeat Horizontally
and footer,
I have already made a background repeat imgage for the two lines
How to make the "second background repeat image" position same as "footer div" position ..
Actually I make the two line in the top to be one "background repeat image"...
HTML Code:
<body>
<div id="websiteContents">
<div id="header">
<div id="headerLine"></div>
contents
<div id="headerLine_down"></div>
</div>
vary contents
<div class="footer">
Home
about
contact us
</div>
</div>
</body>
CSS Code:
body {
background: url(../images/standard/repeat_header.png) #FFF repeat-x 0 165px;
}
#websiteContents {
width: 1150px;
margin: 0 auto;
}
#headerLine {
width: 1150px;
height: 4px;
background-color: #647193;
float: left;
margin-top: 14px;
}
#headerLine_down {
width: 1150px;
height: 9px;
background-color: #2B303E;
}
.footer {
width: 1150px;
background-color: #2A2F3D;
other styles...
}
The Screenshot
The web site is too large so if you want the full code I will give you
Thank you all
I think this will help you
I have changed your html structure
html
<div id="websiteContents">
<div id="header">
<div class="headerContainer">
<div id="headerLine"></div>
contents
<div id="headerLine_down"></div>
</div>
</div>
<div class="bodyContainer">
vary contents
</div>
<div class="footer">
<div class="footerContainer">
Home
about
contact us
</div>
</div>
</div>
css
body {
background: url(../images/standard/repeat_header.png) #FFF repeat-x 0 165px;
}
body, html{
height:100%;
}
#websiteContents {
height:100%;
}
#headerLine {
width: 1150px;
height: 4px;
background-color: #647193;
float: left;
margin-top: 14px;
}
#headerLine_down {
width: 1150px;
height: 9px;
background-color: #2B303E;
}
.footer {
background-color: #2A2F3D;
height:100%;
}
.headerContainer{
width:1150px;
margin:0 auto;
}
.bodyContainer{
width:1150px;
margin:0 auto;
}
.footerContainer{
width:1150px;
margin:0 auto;
}
I'm stil not sure, if I understood... but do you think something like this ?
jsFIddle demo
CSS
.footer {
width: 1150px;
background-color: #2A2F3D;
background-image:url('http://www.w3schools.com/cssref/smiley.gif');
background-repeat:no-repeat;
background-position: left top;
height:100px;
}
Related
I have a web page with a header, content and footer.
There is a background image in the content. I would like the image to fill the remaining space between the header and footer. There are divs that are children of the content div with the image that will sometimes have content and other times will not.
HTML:
<body>
<div id='main'>
<div id='header'>
<div id='logoCompany'>
<img class='headerGraphics' src='Graphics\logo smaller.jpg'><img class='headerGraphics' src='Graphics\Marvelous Header3 small.png'>
</div>
</div>
<div id='contentParent' class='floatClear'>
<div id='content' style = "text-align: center;">
<div id='leftPane'>
Left Col
</div>
<div id='rightPane'>
Right Col
</div>
</div>
</div>
<div id='footer'>
Footer
</div>
</div>
</body>
CSS:
* {
margin: 0px;
}
.floatClear {
clear: both;
}
.headerGraphics {
display: inline;
}
#header {
background: #023489;
text-align: center;
}
#logoCompany {
display: inline;
}
#contentParent {
height: 373px;
width: 100%;
background-image: url(../Graphics/background.jpg);
}
#leftPane {
background: yellow;
float: left;
margin: 100px 0 0 10%;
opacity: .5;
width:40%;
}
#rightPane {
background: green;
float: right;
margin: 100px 10% 0 0;
opacity: .5;
width:40%;
}
#footer {
width:100%;
}
I tried height: 100% but I suspect this fails without content. In fact I think that's why everything fails except when I hard code a height. But that is not a good solution for obvious reasons.
Here's an example
Anyone have any ideas how to make this work?
EDIT:
I tried changing this:
#contentParent {
height: 373px;
width: 100%;
background-image: url(../Graphics/background.jpg);
}
to this:
#contentParent {
flex: 1;
background-image: url(../Graphics/background.jpg);
}
But it shrunk the div to the size of the child div, making things worse..
Here is a solution which defines header, footer and #contentParent as position: fixed and gives #contentParent 100% height minus the height of header and footer (= 80px in this example - this depends on your own settings).
Any additional content has to be added inside #contentParent - this element will then scroll since it has overflow-y:auto;. The header and footer will always remain on the screen due to their absolute position and won't cover any part of the content since #contentParent has according margins at top and bottom which equal the height of the header and footer.
The background image will cover #contentParent completely and won't scroll diue to background-attachment: fixed (integrated in the shortcut background property)
html,
body,
#main {
height: 100%;
margin: 0px;
}
.floatClear {
clear: both;
}
.headerGraphics {
display: inline;
}
#header {
position: fixed;
top: 0;
width: 100%;
height: 40px;
background: #023489;
text-align: center;
}
#logoCompany {
display: inline;
}
#contentParent {
position: fixed;
height: calc(100% - 80px);
width: 100%;
overflow-Y: auto;
margin: 40px 0;
background: url(http://placehold.it/1500x800/fc7) center center no-repeat;
background-position: fixed;
background-size: cover;
}
#leftPane {
background: yellow;
float: left;
margin: 100px 0 0 10%;
opacity: .5;
width: 40%;
}
#rightPane {
background: green;
float: right;
margin: 100px 10% 0 0;
opacity: .5;
width: 40%;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
width: 100%;
background: lightblue;
}
<body>
<div id='main'>
<div id='header'>
<div id='logoCompany'>
<img class='headerGraphics' src='Graphics\logo smaller.jpg'><img class='headerGraphics' src='Graphics\Marvelous Header3 small.png'>
</div>
</div>
<div id='contentParent' class='floatClear'>
<div id='content' style="text-align: center;">
<div id='leftPane'>
Left Col
</div>
<div id='rightPane'>
Right Col
</div>
</div>
</div>
<div id='footer'>
Footer
</div>
</div>
</body>
You can do that using flexbox,
here is a simplified version from your code.
body {
margin: 0
}
#main {
display: flex;
flex-direction: column;
height: 100vh
}
#header,
#footer {
background: green;
padding: 10px;
}
#contentParent {
flex: 1;
background: red;
}
#content {
display: flex;
justify-content:center;
align-items:center;
height:100%
}
<div id='main'>
<div id='header'>
<div id='logoCompany'>
Logo Name
</div>
</div>
<div id='contentParent'>
<div id='content'>
<div id='leftPane'>
Left Col
</div>
<div id='rightPane'>
Right Col
</div>
</div>
</div>
<div id='footer'>
Footer
</div>
</div>
Not sure if I understood your question correctly, but if you want to display stretch the image over the whole screen you can use the css tag:
background-size: cover;
You can read more here about the css tag
I have a problem with a picture going out of its container.
<div id="home" class="cadre">
<div id="photo">
<img style="height:80%;float:right;max-height:250px;" src="images/photo.jpg"/>
</div>
<div style="width:70%;">
Some text
</div>
</div>
And here is the relevant content of the CSS stylesheet:
img{
max-width:100%;
max-height:100%;
}
#photo{
float: right;
max-width:45%;
height:90%;
margin: 0 auto;
}
.cadre {
color: black;
border-width: 0;
border-radius: 10px;
margin: 40px auto;
padding: 20px;
width: 95%;
background-color: rgba(200,200,200,.2);
box-shadow: 0px 1px 8px 0px rgba(0,0,0,.4) inset;
}
I am new to CSS so I probably made design mistakes, but still I don't understand how it is possible that the pictures goes out of the frame.
It also seems to depend on the OS/explorer, as it works fine on Windows/Chrome but not on Linux/Firefox.
Try this to solve your parent-to-child width problem:
<div class="wrapper">
<div class="inner">
<div id="pic">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT6xO92YTljrxvGfxHRnZ_F-jjYGQvfRST-18K3cJhJYPNfBlLTdg"/>
</div>
<div id="text">
some text
<br/><br/><br/><br/><br/><br/><br/>
other text
</div>
</div>
</div>
And CSS:
.wrapper {
max-height: auto;
background: red;
display: table;
}
.inner {
display: table-row;
}
#pic {
float: right;
height: 180px;
max-height: 100%
}
#text {
width:70%;
}
You need to define parent div where the photo is embedded in a way that it does not allow for any element to go "overboard".
#photo {
overflow: hidden;
}
#photo img {
max-width: 100%;
max-height: 100%;
}
Should do the trick in your situation.
I have a header in my web page where logo, application name, help link and logout are shown. Logo is placed left top, logout is placed right top, help is placed before logout link. The rest of the space should be occupied by the application name. I tried to float all the divs and then my divs lost width and when I try to set width on my app name div I get unexpected results when I try to set width: 100%. Even I dont set the width to 100% if the application name text increases I get unexpected results.
This is the code
<!DOCTYPE html>
<html>
<head>
<title>Mock UI</title>
<style>
body {
margin: 0px;
}
.oss-gradient {
height: 5px;
min-width: 1024px;
background: yellow;
}
.header {
height: 40px;
min-width: 1024px;
background: #def;
}
.logo {
background-image: url("logo_top_small.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
width: 50px;
height: 100%;
float: left;
}
.product-name {
line-height: 35px;
height: 100%;
float: left;
width: 100%;
}
.help {
line-height: 35px;
float: right;
height: 100%;
}
.logout {
line-height: 35px;
float: right;
height: 100%;
}
.content-wrapper {
width: 1024px;
background: #defabc;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="oss-gradient">
</div>
<div class="header">
<div class="logo">
</div>
<div class="product-name">
App name
</div>
<div class="logout">
Logout
</div>
<div class="help">
Help
</div>
</div>
<div class="content-wrapper">
</div>
</div>
</body>
</html>
Here is a working sample.
I then tried doing the same with CSS3 calc method. But this involves hard coding the widths. A small change in logo's width or logout, help divs widths will create problems in the app name div.
Click here to see the working example with css3 calc
Then I tried to do it using float with inner divs. Below is my new code
<!DOCTYPE html>
<html>
<head>
<title>Mock UI</title>
<style>
body {
margin: 0px;
}
.oss-gradient {
height: 5px;
min-width: 1024px;
background: yellow;
}
.header {
height: 40px;
min-width: 1024px;
background: #def;
}
.logo {
background-image: url("logo_top_small.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
width: 50px;
height: 100%;
float: left;
}
.wrapper {
height: 100%;
}
.product-name {
line-height: 35px;
height: 100%;
float: left;
}
.help {
line-height: 35px;
float: right;
height: 100%;
margin-right: 10px;
}
.logout {
line-height: 35px;
float: right;
height: 100%;
margin-right: 10px;
}
.oss-text {
line-height: 35px;
height: 100%;
overflow: hidden;
}
.content-wrapper {
width: 1024px;
background: #defabc;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="container">
<div class="oss-gradient">
</div>
<div class="header">
<div class="logo">
</div>
<div class="wrapper">
<div class="logout">
Logout
</div>
<div class="wrapper">
<div class="help">
Help
</div>
<div class="oss-text">
App name
</div>
</div>
</div>
</div>
<div class="content-wrapper">
</div>
</div>
</body>
</html>
Click here to see the working example.
But this is creating lot of dom. Is there any other approach or the second solution is good enough?
The first solution is a total flop.
If I use CSS3 then I have to hardcode the widths
Solution 2 involves making the dom deeper.
I think there is another solution which involves using absolute positioning. But I dont know how to do it and is it a good approach or not.
You can achieve what you want using display:table and display:table-cell:
.header {display:table}
.header > div {display:table-cell}
As long as you give widths to logo, logout and help divs then the app name should stretch to take up the rest of the header
Example
Here's what you need with only 3 div containers
The markup:
<header>
<div class='logo'></div>
<div class='appName'><h3>Some App</h3></div>
<div class='btn-container'>
<button >Help</button>
<button>Logout</button>
</div>
</header>
and the CSS:
header {
position: fixed;
top: 0px;
width: 100%;
display: table;
}
header div {
display: table-cell;
vertical-align: middle;
}
.logo {
width:40px;
background: steelblue;
height: 40px;
float: left;
}
.btn-container {
width: 80px;
float: right;
}
.appName {
text-align: center;
width: 100%;
}
Try this:
.product-name {
line-height: 35px;
height: 100%;
text-align: center;
width: 100%;
}
I am trying to create a page layout something like this.
This is my HMTL structure -
<div id="content-three-cols">
<div class="leftcol">
</div>
<div class="cols-content">
<div class="banner">
</div>
<div class="two-cols">
<div class="rightcol">
</div>
<div class="middlecol">
</div>
</div>
</div>
</div>
This is my CSS code so far -
.leftcol {
display: inline;
float: left;
min-height: 500px;
width: 180px;
background: #34ab2b;
}
.banner {
background: #ffe400;
border-bottom: 1px solid #DDDDDD;
float: left;
width: 750px;
height: 150px;
}
.middlecol {
width: 600px;
min-height: 600px;
background: #2b73ab;
}
.rightcol {
width: 150px;
min-height: 500px;
background: #b2540f;
float: right;
}
Adding this styles I couldn't get my expecting output. Instead my desire result this code create a mess layout for me. Can anybody tell my how can I figure this out.
This is JsFiddle
Thank you.
Quite simple really, here is a quick demo i made, i will explain everything in a second.
Demo
HTML:
<div class="left"></div>
<div class="head"></div>
<div class="center"></div>
<div class="right"></div>
CSS:
body, html{
height:100%;
}
.left, .right, .head, .center{
float:left; // Float all the containers to the left so have a `inline` effect
}
.left{
height:100%;
width:25%; // Full width minus right and center width
background:orange;
}
.head{
background:red;
height:10%; // Height of header
width:75%; // Full width minus left sidebar
}
.center{
width:50%; // Full width minus both sidebar's width
background:skyblue;
height: 90%; // Full height minus header height
}
.right{
width:25%; // Full width minus center and left width
background:green;
height:90%; // Full height minus header height
}
also note, you may need to have a Clearfix handy seeing as a lot of elements are floating in thin air.
Happy coding :)
Clearfix...
Well take a look at this fiddle, everything is working fine
http://jsfiddle.net/mqzJN/
Now if we add a float to the link like this
http://jsfiddle.net/mqzJN/1
Then you can see the background is gone, because the <div> doesn't have any height any more because the link is floating in thin air.
So you use a clearfix to fix this, like in this fiddle
http://jsfiddle.net/mqzJN/2/
So any element that has a float you might wan't to add the clearfix class to the container of that element like in the last fiddle example.
There you go! (http://jsfiddle.net/aV2Dn/)
<div id="wrapper">
<div id="left_column"></div>
<div id="top_bar"></div>
<div id="middle"></div>
<div id="right_column"></div>
</div>
#wrapper{
width:500px
height:500px;
margin: auto;
}
#left_column{
width: 100px;
height:500px;
background: #34ab2b;
position:absolute;
left:0px;
top: 0px;
}
#top_bar{
position: absolute;
left: 100px;
top: 0px;
width: 400px;
height:100px;
background-color: #ffe400;
}
#middle{
position: absolute;
left: 100px;
top: 100px;
width: 300px;
height:400px;
background: #2b73ab;
}
#right_column{
position: absolute;
left: 400px;
top: 100px;
width: 100px;
height:400px;
background: #b2540f;
}
here
The HTML:
<body>
<div class="left">
</div>
<div class="right">
<div class="upper"></div>
<div class="lower">
<div class="innerLeft"></div>
<div class="innerRight"></div>
</div>
</div>
</body>
The CSS:
body {
width: 100%;
}
.left {
width: 25%;
height: 450px;
float: left;
background-color: #f00;
}
.right {
width: 75%;
height: 450px;
float: right;
background-color: #4cff00;
}
.upper {
width: 100%;
float: left;
height: 100px;
background-color: blue;
}
.lower {
width: 100%;
height: 100px;
background-color: grey;
}
.innerLeft {
width: 65%;
float: left;
height: 350px;
background-color: fff;
}
.innerRight {
width: 35%;
float: right;
height: 350px;
background-color: #000;
}
I currently have a div element with a repeat-y background and a child div interrupts the current background.
How can I stop this from happening?
<div id="content">
<div id="container-top"></div>
<div id="container-body">
<div id="container-right">
<h1>LOGIN</h1>
<br />
<h1>CLICK HERE</h1>
</div>
<div id="container-left">
<h1 style="padding-left: 50px; font-weight: bold; color: #000000;">NEWS</h1>
</div>
</div>
<div id="container-bottom"></div>
</div>
CSS:
#content {
float:left;
margin: 5px auto;
border: red 1px solid;
}
#container-top {
width: 800px;
height: 23px;
background: url(http://cdn2.tribalwars.net/graphic/index/sprites.png) no-repeat 0 -39px;
}
#container-body {
padding: 15px;
overflow: visible;
background: url(http://cdn2.tribalwars.net/graphic/index/bg-content-line.jpg) repeat-y;
}
#container-right {
float: right;
width: 275px;
}
#container-left {
float: left;
width: 440px;
}
#container-bottom {
width: 800px;
height: 23px;
background: url(http://cdn2.tribalwars.net/graphic/index/sprites.png) no-repeat 0 -56px;
clear: both;
}
If you go to you can
you need to make your container overflow hidden cause you are floating childs.
checkout code at http://jsfiddle.net/xUf87/