hello stackoverflow community,
i have a problem with my fixed header. my html structur looks like that:
<div id="site_wrapper">
<div id="site_header">Header</div>
</div>
The CSS Looks like this:
div#site_wrapper {
max-width:1500px; min-width:900px;
}
div#site_header {
position:fixed; left:50%; top:0px; z-index:10;
height:160px; width:1500px;
margin-left:-750px;
background-color:#fff;
}
My Problem is, that i need the header centered and fixed with the width 1500 ...
Some Ideas?
Since #site_header is inside site_wrapper you need to center #site_wrapper div, i also update the #site_wrapper code to be always centered inside #site_wrapper
div#site_wrapper {
margin-right: auto;
margin-left:auto;
max-width:1500px; min-width:900px;
}
div#site_header {
position: fixed;
top:0px;
z-index:10;
height:160px; width:1500px;
margin-left:auto;
margin-right:auto;
background-color:#fff;
}
If you want to make the header fixed, center align and some special width, try updating you CSS code with below:
div#site_wrapper {
max-width:1500px;
min-width:900px;
margin: 0 auto;
}
div#site_header {
position:fixed;
z-index:10;
height:160px;
width:1500px;
background-color:#ffff00;
}
Refer this fiddle: http://jsfiddle.net/aasthatuteja/B2Tnj/
Hope this helps!
To have a fixed header just use the following code:
div#site_header {
position: fixed;
top: 0px;
left: 0px;
z-index: 10;
height: 160px;
width: 100%;
margin: 0;
text-align: center;
padding: 0;
}
Related
I am trying to build a container with the dimensions of 26x26 pixels and display a number at the very bottom right of this container. In addition, I would like to add a background 24x24 picture to the container.
The code I have so far is as follows
<html>
<style>
body {
height:26px;
width:26px;
background-color:red;
}
#bottom {
vertical-align:bottom;
text-align:right;
background-color:yellow;
}
</style>
<body>
<p id="bottom">2</p>
</body>
</html>
And here's a JSFiddle link to make things easier https://jsfiddle.net/n8ku715x/
As you can see from JSFiddle, it is not entirely working. It's not even setting the right dimensions. Any help is appreciated.
<style>
body {
}
#ctn {
height: 26px;
background-color: red;
width: 26px;
position:relative
}
#bottom {
position: absolute;
bottom: 0;
right: 0;
font-size: 8px;
color: #fff
}
</style>
<body>
<p id="ctn"><span id="bottom">2</span></p>
</body>
Here's your container, with the number within it - is that what you were looking for?
Try this:
CSS
.container{
width:26px;
height:26px;
position:relative;
background-color:red;
}
.container-number{
position:absolute;
bottom:0;
right:0;
background-color:yellow;
}
HTML
<div class="container">
<div class="container-number">2</div>
</div>
Just add bottom 0 and position to the class if u wants the fixed
CSS
#bottom {
background-color: yellow;
bottom: 0px;
position: fixed;
}
Before someone labels this as a duplicate, I have searched on here and not finding a solution that quite fits what I need to do.
Here is my fiddle
Here is the code for the html..
<div class="top-background"></div>
<div class="center-content"></div>
<div class="bottom-background"></div>
and here is the CSS stylesheet...
body {
margin: 0;
padding:0;
}
.top-background {
background-color:black;
width:100%;
height:50%;
position:absolute;
top:0;
left:0;
}
.bottom-background {
background-color:white;
width:100%;
height:50%;
position:absolute;
bottom:0;
}
.center-content {
background-color:yellow;
width:250px;
height:120px;
margin: auto;
position:relative;
}
I can move the center-content div towards center by using top:300px. But that won't be any good because of depending on screen size.
The center-content div will have a graphic in it (it will not be a yellow background as shown), the graphic is reversed in the colors I have. I could have probably done this in the body along with text-align center, but then everything I put in will align center (and that's not going to be pretty) and used a table.
For doing this assing some css properties to the class center-content is enough..
.center-content {
background-color:yellow;
width:250px;
height:120px;
margin: auto;
position:relative;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -125px;
}
See this fiddle http://jsfiddle.net/Cwm76/sscuL/
Apply this:
.center-content {
background-color:yellow;
width:250px;
height:120px;
margin: auto;
position:absolute;
top: 50%;
left: 50%;
margin-top: -60px; /* half of the height */
margin-left: -125px; /* half of the width */
}
I'm new to front end design.
made a code like this.
<div id="header">
header
</div>
<div id="content">
content
</div>
<div id="sidebar">
in here will be login module
</div>
how can the sidebar will be trespassing area like the pic?
any good solution?
If you simple need to position sidebar like this, you can use position: absolute. As a very basic test add following classes to your HTML:
body {
margin:0
}
div {
border: 1px solid black
}
#header {
height: 50px;
}
#content {
height:200px
}
#sidebar {
position: absolute;
top: 0;
left: 100px;
width: 100px;
height: 250px;
}
And here is a demo: http://jsfiddle.net/Mxqh4/
Again this is just a demo, and in a real project would have to be dynamically adjusted, but that's should give you a start.
Of course it's possible. Anything is possible with CSS ;)
You have to learn to use the position property and float.
DEMO HERE
#wrap{
width:100%;
margin:0 auto;
}
#header{
width:100%;
height:50px;
background:orange;
}
#content{
width:100%;
height:500px;
background:green;
float:;
}
#sidebar{
width:25%;
height:550px;
background:red;
float:left;
position:relative;
bottom:550px;
left:20px;
}
I have a header that is larger than most screen widths. I centered that and I have the overflow hidden so when you expand your browser on a bigger screen more of it is visible. I also have 2 images on top of that, one floating right and one floating left. my problem is that the left image is in place floating left but the right image won't go all the way right. both if I put both images on the same z-index they just stack instead of floating right and left. Any suggestions? here is my css and html:
#triangleleft{
width:100%;
height:531px;
z-index:58;
position:absolute;
top:+53px;
}
#triangleright{
width:100%;
height:531px;
z-index:59;
position:absolute;
top:+53px;
}
.triangleleft{
background:url(Layer-58.png)no-repeat;
float:left;
margin-left:0px;
height:531px;
width:100%;
}
.triangleright{
background:url(Layer-59.png)no-repeat;
float:right;
margin-right:0px;
height:531px;
width:100%;
}
<div id="triangleleft">
<div class="triangleleft"></div>
</div>
<div id="triangleright">
<div class="triangleright"></div>
</div>
also here is the code for my header image that I think is screwing this up
#wrapper {
height:100%;
position: relative;
}
#Layer-57 {
position: relative;
height:529px;
background:#3b96a9 url(layer-57.jpg) top center no-repeat;
top:-529px;
overflow-x: hidden;
z-index: 57;
}
<div id="wrapper"> <div id="Layer-57"></div> </div>
replace your style with this
<style>
#triangleleft {
width:90%;
height: 531px;
z-index: 58;
position: absolute;
top: +53px;
}
#triangleright {
width:90%;
height: 531px;
z-index: 59;
position: absolute;
top: +53px;
}
.triangleleft {
background: url(Layer-58.png)no-repeat;
float: left;
margin-left: 0px;
height: 531px;
width: 100%;
}
.triangleright {
background: url(Layer-59.png)no-repeat;
float: right;
margin-right: 0px;
height: 531px;
width: 100%;
}
</style>
Revised Answer (previous answer removed for clarity's sake):
Looking closer at the leaderbe.com page you referenced in your comment below, I noticed that the HTML structure of the divs was quite different than what you had. You need to put the triangleright div inside the triangleleft div and use styles like follows:
See this jsfiddle: http://jsfiddle.net/uKrNT/2/
<div id="wrapper"> <div id="Layer-57">layer 57</div> </div>
<div id="triangleleft">
<div id="triangleright">
</div>
</div>
#triangleleft{
width:100%;
height:531px;
z-index:58;
position:absolute;
top:+53px;
float:left;
background:red url(http://www.leaderbe.com/images/diamond-left.png)no-repeat;
margin-left:0px;
overflow:visible;
opacity:.5;
}
#triangleright{
width:100%;
height:531px;
z-index:59;
float:right;
background:blue url(http://www.leaderbe.com/images/diamond-right.png)no-repeat;
margin-right:0px;
opacity: .5;
overflow:visible;
}
#wrapper { height:100%; position: relative; }
#Layer-57 { position: relative; height:529px; background:#3b96a9 url(layer-57.jpg) top center no-repeat; top:-529px; overflow-x: hidden; z-index: 57; }
I have 3 div.
<div class="main"></div>
<div id="fixedbox"></div>
<div id="fixedBar"></div>
CSS:
.main {
width: 850px;
padding:25px 5px;
border-left:1px solid #999;
border-right:1px solid #999;
text-align:left;
overflow:hidden;
}
body {
height: 100%;
margin: 0;
overflow-y: auto;
}
body #fixedbox {
position:fixed !important;
position: absolute;
left: 865px;
top: 0;
width: 160px;
}
#fixedBar {
display:block;
position: absolute;
width:100%;
height:20px;
position:fixed;
bottom:0;
left:0;
background:#F00;
}
* html #fixedBar {
position:absolute;
}
Problem is this:
When Im adding a block with "position:relative" in main div, the block will move in scroll in ie. With adding "position:relative" to body or main, there is other problems in ie. How can I used positions without problems in "<div class="main"></div>" ?
Thanks in advance
EDIT: I have solved the problem with change the doctype.
I presume you are adding position:relative to the body to position the 2 fixed position:absolute containers? If not you will need to.
I have had some problems with setting position:relative in IE in the past. Try some of the usual hacks like setting
height:1%;
Or
display:block;
to .main
You may find a specific solution on http://www.positioniseverything.net