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;
}
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;
}
I want to position a div on the right side of a other div which is centered via margin:auto. (Like a sidebar)
Simple HTML:
#c1{
background-color:#CCCCCC;
width:300px;
margin:auto;
}
#c2{
background-color:#BBBBBB;
width:100px;
}
<div id="c1">con1</div>
<div id="c2">con2</div>
I have tried the solution from this question but it does not work in my fiddle. The second div is in the next line. Link:
positioning elements left and right of a div with margin:auto
How to solve this?
You can use positioning to create this effect:
#c1{
background-color:#CCCCCC;
width:300px;
margin:auto;
position:relative;
}
#c2{
background-color:#BBBBBB;
width:100px;
position:absolute;
right:-100px;
top:0;
}
And then you need to rearrange the HTML to look like this:
<div id="c1">
con1
<div id="c2">con2</div>
</div>
HTML:
<div id="c1">
con1
<div id="c2">con2</div>
</div>
CSS:
#c1 {
background-color:#CCCCCC;
width:300px;
margin:auto;
position: relative;
}
#c2 {
background-color:#BBBBBB;
width:100px;
position: absolute;
right: -100px;
top: 0px;
}
Here is JSFiddle
Using position property and a little moderation in your DOM you can easily achieve this.
Here's the Code:
.wrapper {
position: relative;
width: 100%;
padding:0;
margin:0;
}
#c1 {
background-color:#CCCCCC;
width:300px;
margin:auto;
height:100px;
position: absolute;
left:0;
right:0;
top:0;
}
#c2 {
background-color:#294596;
width:100px;
height:100px;
position: absolute;
left:0;
top:0;
}
<div class="wrapper">
<div id="c1">con1</div>
<div id="c2">con2</div>
</div>
It will do the trick for you.
Let's see if I can explain this correctly. I want a header, always visible AND content AND a footer that is hidden behind the content, that becomes visible when scrolled to the footer. Here's what I have so far...
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height:25vh;
width:100%;
background-color:red;
position:fixed;
top:0;
}
#content {
height:120vh;
width:100%;
background-color:green;
position:relative;
}
#bottom {
height:35vh;
width:100%;
background-color:blue;
position:fixed;
bottom:0;
}
<div id="container">
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
</div>
</div>
What this code currently does: Header is hidden behind content and footer is always visible overlapping content.
Here is the current test page... http://next-factor.com/test-layout.php
Much help is greatly appreciated. Thank You!
give a z-index in #top
#top {
background-color: red;
height: 25vh;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
it will make header visible.
and remove position:fixed from #bottom
#bottom {
background-color: blue;
bottom: 0;
height: 35vh;
width: 100%;
}
hope this will solve your problem
here is the working example http://jsfiddle.net/a3ru9d4d/
in this example I have added padding top in the container so that content inside the container will not hide behind the header.
I think you want something like this:-
*{margin:0;padding:0}
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height:25vh;
width:100%;
background-color:red;
position:fixed;
top:0;
z-index: 1;
}
#content {
height:120vh;
width:100%;
background-color:green;
position:relative;
}
#bottom {
height:35vh;
width:100%;
position:relative;
z-index:-2;
background-color:#31353a;
}
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
Footer
</div>
</div>
I hope it will helps you.
Take a look at this. I've introduced two new CSS definitions that achieve what I think you want.
https://jsfiddle.net/b8my8h5j/
I added z-index definitions. The higher the index, the higher it is in a non-static positioning stack. the content header has 30, so it appears above 20 for the content, but the footer has 10, so t's always at the back.
I added a margin-bottom to the content so that there's space for you to scroll down and have the footer be completely visible.
Update:
https://jsfiddle.net/b8my8h5j/1/
Also cleared padding/margin on the body and html tags so that the blocks fit together snugly.
Added a margin-top to the content so that the top of the green box is visible.
I think this produces what you want: z-indexes on all three, and making room at the bottom of content for the footer to show completely when you scroll to the end of the page
#container {
height:100%;
width:100%;
position:relative;
}
#top {
height: 25vh;
width: 100%;
background-color: red;
position: fixed;
top: 0;
z-index: 3;
}
#content {
height: 120vh;
width: 100%;
background-color: green;
position: relative;
margin-bottom: 33vh;
z-index: 2;
}
#bottom {
height: 35vh;
width: 100%;
background-color: blue;
position: fixed;
bottom: 0;
z-index: 1;
}
<div id="container">
<div id="top">
</div>
<div id="content">
</div>
<div id="bottom">
</div>
</div>
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;
}
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; }