I recently set up a sidebar for my user panel, however it appears that it's being pushed down. I've looked at other problem threads and their solutions all give me no luck. Hoping someone can help me out figuring this out
CSS:
<style>
div.menu
{
width:200px;
height:660px;
background-color:#C0C0C0;
left:0px;
top:0px;
}
.menu ul li
{
margin-bottom:20px;
}
body {width: 800px; margin: 20px auto; /* center */ padding: 20px;
border: 1px solid black;}
</style>
HTML:
<body>
<center><h3>User Panel</h3></center>
<div class="menu">
<ul>
<li>Link1</li>
</ul>
</div>
</body>
I will post any and all things you ask for to help figure this out - hope it's detailed and as full as it needs to be to help you figure it out
Entire code:
<style>
div.menu
{
width:200px;
height:660px;
background-color:#C0C0C0;
left:0px;
top:0px;
}
.menu ul li
{
margin-bottom:20px;
}
body {width: 800px; margin: 20px auto; /* center */ padding: 20px;
border: 1px solid black;}
</style>
<body>
<center><h3>User Panel</h3></center>
<div class="menu">
<ul>
<li>Link1</li>
</ul>
</div>
</body>
you could do something like this, and just change the order in the html so 'center' comes after the sidebar:
div.menu {
width:200px;
background-color:#C0C0C0;
float:left;
}
center {
float:left;
display:inline;
width:400px;
text-align:center;
}
Also you could make it a class in a span or div, instead of using the deprecated center tag.
The problem is caused because the title is technically on top of the sidebar. Remove <center> and you will see what I mean. Let's create a solution without using <center> as it is deprecated and should no longer be used.
Here is a solution using display: table:
Have a jsBin Example!
HTML
<div class="menu">
<ul>
<li>Link1</li>
</ul>
</div>
<div class="content">
<h3>User Panel</h3>
</div>
CSS
* {
margin:0;
padding:0
}
body {
width:800px;
margin:20px auto;
/* center */
padding:20px;
border:1px solid #000;
display:table
}
body > div {
display:table-cell
}
div.menu {
width:200px;
height:660px;
background-color:silver;
padding:10px
}
.menu ul li {
margin-bottom:20px;
list-style:none
}
h3 {
text-align:center
}
The title is an h3 element which is a block level element. It automatically takes some margin by default. Remove margin from h3 to solve the issue.
center h3 {
margin: 0;
}
Note: The ul tag also take some margins by default.
It's hard to tell what you want to achieve exactly without knowing your envisioned layout and content.
But you are using left and top properties with your menu style and those won't do anything without specifying position as absolute, fixed or relative.
Try to do this:
div.menu
{
position:absolute;
width:200px;
height:660px;
background-color:#C0C0C0;
left:0px;
top:0px;
}
The sidebar will no longer be pushed down. But it will also be taken out of the layout flow. So in your example the h3 (and all other content on the page) will now extend underneath the sidebar. That might not be what you want.
If you want to build a multi-column layout you should consider to use a CSS framework, such as for example Twitter Bootstrap (http://getbootstrap.com/).
You have the top and left attributes set, but no position. You need to add
position: absolute;
to your menu css to get it to stay positioned at the top. It will overlap the h3 you have there, but you can play around with z-index and margin to fix that.
I hope this helps, please let me know if you need any further explanation.
:)
Related
I have the following code for my menu:
HTML:
<div class="container wrapper">
<nav>
<ul class="menu">
<li>Home</li>
<li>page1</li>
<li>page2</li>
</ul>
</nav>
And the CSS:
.wrapper{
padding:20px;
background:#d3d3d3;
height:200px;
}
.menu{
background:#7F7979;
}
.menu li{
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
display: inline-block;
}
.menu li a{
color:white;
}
nav ul{
list-style:none;
margin:0
padding:0;
}
What I want to achieve is at the right and left corners to look like it comes from behind the container (like a 3D effect if we can call it this way). Haven't tried anything since I don't have any idea how to achieve this.
I googled a bit but didn't find any website to inspect the code. If someone knows any, please point me out.
And plus, how can I do this by ignoring the container padding? Is it possible to make it with my menu inside this container which has a padding and still forcing the margins to go outside it?
NOTE: I'm not trying to someone do this for me, I'm trying to figure out what CSS properties should I use to achieve what I want.
To better explain what I wanted:
If it helps, my demo:
demo
Thank you so much for pointing me the right direction.
You can use borders on pseudo elements to make the 2 darker triangles on the top left and right of your menu bar.
To make the menu bar wider than it's container, you can use negative left/right margins :
DEMO
header{
width:80%;
margin: 0 auto;
background:#D3D3D3;
padding:100px 0 200px;
}
nav{
position:relative;
height:50px;
background: #7E7979;
margin: 0 -25px;
}
nav:before, nav:after{
content:'';
position:absolute;
top:-10px;
border-bottom:10px dotted #5C5C5B;
}
nav:before{
left:0;
border-left:25px solid transparent;
}
nav:after{
right:0;
border-right:25px solid transparent;
}
<header>
<nav></nav>
</header>
I have a DIV menu that is set to 100% height with a overflow:scroll. Within the DIV I have a ul li. The problem I have is that it wont let me scroll all the way down to see the last li. I can barely see it.
I think it has something to do with my header because when I remove the header, I can see it. When I put back the header, it goes under the browser and cannot be scrolled all the way down to see the last li.
Both li and header are almost identical in height and it makes a lot of sense that the header is causing the problem. Not the header in particular, I think, but more of something I did in CSS.
Why cant I scroll all the way to the bottom? What is the solution?
Sample here: http://jsfiddle.net/D5KU3/2/
<div class="container">
<!--header-->
<div class="header">
</div>
<!--end header-->
<!--left-->
<div class="left">
<!--ul starts here-->
<ul>
<li class="hybrid">
<a href="#">
<p class="title">Why Cant</p>
<p class="type">I scroll all the way to the bottom</p></a>
</li>
Repeat li 20 times
</ul> <!--ul ends here-->
</div> <!--container ends here-->
CSS
body, html {
height:100%;
}
body {
background:white;
}
.container {
width:260px;
height:100%;
overflow:hidden;
background:silver;
margin:0 auto;
font-family:sintony;
}
.header {
width:100%;
height:60px;
background:#000;
}
.left {
width:260px;
height:100%;
background:#fff;
float:left;
overflow:scroll;
}
li.hybrid a {
display:block;
background:#16BF14;
height:60px;
width:260px;
text-decoration:none;
position:relative;
}
li.purple a {
display:block;
background:#3370CC;
height:60px;
width:260px;
text-decoration:none;
position:relative;
}
p.title {
position:relative;
padding-left:10px;
}
p.type {
font-size:12px;
position:relative;
padding-left:10px;
}
ul {
margin:0;
padding:0;
}
li p {
margin:0;
padding:0;
list-style-type:none;
}
As you have both the class="header" and class="left" elements in the container, and the class="left" element is 100% of the container, those are 100% plus 60 pixels together.
You can make room for the header by using box-sizing and padding-top in the container. That will make the inner size of the container 100% minus 60 pixels. Then use a negative top margin on the header to place it on top of that padding:
.container {
box-sizing: padding-box;
-moz-box-sizing: padding-box;
-webkit-box-sizing: padding-box;
padding-top: 60px;
}
.header {
margin-top: -60px;
}
Demo: http://jsfiddle.net/Guffa/D5KU3/11/
You might also want to get rid of the page margin, otherwise the 100% container and the margin is taller than the window:
body {
margin: 0;
padding: 0;
}
It's actually quite logic - you have your body and html set to 100%. This means the content of the body can't be higher then the available space in your browser - and so you don't see the bottom.
If you remove this CSS the problem is solved; although it might be better to set the body to min-height: 100%. This way the height of the page will always be the complete available space; unless it's content is more than that.
An updates jsfiddle: http://jsfiddle.net/D5KU3/3/
Remove the overflow: hidden; from .container class
.container {
width:260px;
height:100%;
background:silver;
margin:0 auto;
font-family:sintony;
}
http://jsfiddle.net/atYpX/
i would recommend following
.left {
position:absolute;
width:260px;
top:60px;
height:100%;
background:#fff;
overflow:scroll;
}
http://jsfiddle.net/D5KU3/8/
Site: http://bit.ly/13nL8jV
Demo: http://jsfiddle.net/bBckp/
Brief: I am trying to get the CURRENT PROGRAMS to float under the SIGNATURE PROGRAMS with no luck. All of the columns in the footer have the CSS:
float: left;
width: 29%;
The columns are dynamic so I can't just wrap SIGNATURE and CURRENT in it's own div (I can probably hack it with JS)...CLARRIFICATION - I'm referring to the menus in the FOOTER.
Any thoughts how I can do this with just CSS?
You can tweak the element like so. This does leave a hole where it used to be, but that's what relative positioning does.
.item-130 {
position:relative;
left:-180px;
top:25px
}
Alternately you can set the parent UL to position:relative, and use absolute positioning:
.nav-pills {
position:relative;
}
.item-130 {
position:absolute;
left:0px;
top:25px
}
it may help you
html like this way;
<div class="wrapper">
<div class="SIGNATURE PROGRAMS">
..........
</div>
<div class="CURRENT PROGRAMS">
..........
</div>
</div>
and css
.wrapper{
overflow:hidden;
}
.SIGNATURE PROGRAMS{
float:left;
}
.CURRENT PROGRAMS{
clear:both;
}
EDIT:: if you cant change your html..then you may try this
.moduletable.current-prog {
position: relative;
left: -29%;
margin-top: 100px;
}
I have this code:
<style>
.floatright
{
float: right;
margin-right:800px;
}
.menu {
padding: 0;
float: right;
width: auto;
position:relative;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
display:inline;
padding:0;
margin: 0px;
}
.menu a:link,
.menu a:hover {
text-decoration:none;
padding:0 5px 5px 0;
margin-right: 8px;
}
</style>
<div class="floatright">
<ul class="menu">
<li>api</li>
<li>tools</li>
<li>blog</li>
</ul>
</div>
it is meant to float to the right of the page (not in the right corner - just to the left) and have gaps between each link.
The gaps work ok but when the screen is resized ti does not stay where it is supposed to
any ideas?
Charlie, because you have a 800px margin on the right of the div it will always have that margin regardless of the screen resolution.
If you're wanting the margin to become less based on screen resolution maybe look at using percentages or media queries.
wou need to center the parent div ...and then the menu will float right.
.floatright {
width:1000px;
height:50px;
margin:0 auto;
}
Where the width should be the width of the "orange box".
The menu already floats well in its parent div.
here is a jsfiddle example: http://jsfiddle.net/hvLkh/
Additional advice: 1) do not put divs outside the body tags, 2) add a hight attribute to the div to push the box down, and 3) add the font formatting straight into your css and avoid font tags ... like this:
.floatright {
width:1000px;
height:50px;
margin:0 auto;
font-family:"Trebuchet MS",Arial,Verdana,Tahoma;
}
And here is an updated fiddle: http://jsfiddle.net/n6mnP/1/
#topnavbar {
width:100%;
padding:0;
border:1px solid gray;
margin:0; }
#topnavbar p {
margin:0; }
body {
margin-left:auto;
margin-right:auto;
margin-top:0;
width:1024px; }
That is my code. How do I get it to have the bar(which is named topnavbar) to fit the whole screen without overflowing? And I don't want to do overflow:hide; or whatever.
You mean fit the whole width of the screen?
Paradoxally, you just need to remove width:100%(the borders are being added to this value...)
EDIT: And yes, Kai Qing is right, too - I missed that. If you put width 1024 on your body, your navbar will be 1024, too...
Your css is a little off:
#topnavbar {
width:100%;
padding:0;
border:1px solid gray;
margin:0;
}
#topnavbar p {
margin:0;
}
#container{
width:1024px;
margin: 0 auto;
}
body {
/* you do not need any of your css here */
}
html:
<body>
<div id="topnavbar">
<p>Some text</p>
</div>
<div id="container">
whatever you want to center
</div>
</body>
the basic idea is to width 100% an element who does not have a parent and then apply your centering container beneath it. In this case, #container.
Your css was applying a width to the body and therefore it was likely messing up your whole layout.