Im trying to create an HTML page but the content only starts below where the line of the left nav bar finished. i am trying to get the twi to line next to each other. I have tried floating the content but no luck so far
Heres my CSS, any help is greatly appreciated
body
{
margin: 0;
padding: 0;
font-family: arial, verdana, sans-serif;
color: #000;
background-color: #0099CC;
background-image: url(../Images/Background.jpg);
}
#banner
{
background-color: #87CEFA;
border-bottom: 1px solid #333;
text-align: center;
}
#banner h1
{
margin: 0;
padding: .5em;
}
#container
{
margin: 1em 5%;
background-color: #E0FFFF;
background-image: url(../Images/bluebackground.jpg);
background-repeat: repeat-y;
}
#content
{
padding-top: 0.5em;
margin: 0 2em 0 200px;
padding-bottom: 0.5em;
float:left;
}
#navigation {float:left; font-size:0.75em; width:178px; }
#navigation ul {margin:0px; padding:0px;}
#navigation li {list-style: none;}
ul.top-level { background:#1E90FF; }
ul.top-level li {
border-bottom: #fff solid;
border-top: #fff solid;
border-width: 1.5px;
}
#navigation a {
color: #fff;
cursor: pointer;
display:block;
height:25px;
line-height: 25px;
text-indent: 10px;
text-decoration:none;
width:100%;
}
#navigation a:hover{
text-decoration:underline;
}
#navigation li:hover {
background: #f90;
position: relative;
}
ul.sub-level {
display: none;
}
li:hover .sub-level {
background: #0000CD;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 168px;
top: 0px;
}
ul.sub-level li {
border: none;
float:left;
width:150px;
}
#nav p
{
margin-top: 0;
}
#footer
{
clear: both;
background-color: #78CEFA;
padding: 1em;
text-align: center;
border-top: 1px solid #333;
font-size:1em;
}
Try changing this:
#content
{
padding-top: 0.5em;
margin: 0 2em 0 200px;
padding-bottom: 0.5em;
float: left;
}
to this:
#content
{
padding-top: 0.5em;
margin: 0 2em 0 200px;
padding-bottom: 0.5em;
overflow: hidden;
}
(That is, change float: left; to overflow: hidden;)
Related
I'm currently using this website's code and it stopped working once one of the timers was finished. When one timer was finished, the second timer stopped showing up. Now, the second timer doesn't show up at all.
Codepen : http://codepen.io/anon/pen/jPvOYj
CSS because I need code for whatever reason:
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-image: url("images/bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
margin-top: 0px;
margin-bottom: 0px;
}
header {
position: fixed;
overflow: hidden;
}
ul,
ol,
dl {
padding: 0;
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-top: 0px;
padding-right: 10px;
padding-left: 10px;
margin: 10px;
}
h1 {
font-size: 28px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 14px;
}
.container {
width: 1200px;
background-color: #FFFFFF;
margin: 0 auto;
}
.sidebar1 {
margin-top: 150px;
position: fixed;
float: left;
width: 200px;
background-color: #EADCAE;
padding-bottom: 10px;
float: left;
z-index: 100;
bottom: 0;
top: 0;
border-bottom: 1px solid #666;
border-left: 1px solid #666;
}
.content {
margin-top: 150px;
margin-left: 200px;
padding-right: 0;
padding-left: 0;
padding-bottom: 20px;
width: 999px;
float: left;
background: #FFF;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
border-left: 1px solid #666;
border-right: 1px solid #666;
position: fixed;
overflow-y: auto;
bottom: 0;
top: 0;
}
aside {
float: left;
width: 200px;
background-color: #EADCAE;
padding: 10px 0;
overflow: hidden;
}
.content ul,
.content ol {
padding: 0 10px 10px 40px;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}
header,
section,
footer,
aside,
article,
figure {}
ul,
ol,
dl {
padding: 0;
margin: 0;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #0B09CB;
}
a:active {
text-decoration: none;
}
#navbar {
position: relative;
width: 100%;
padding: 0;
text-align: center;
}
nav ul il .subnav {
display: block;
display: none;
}
nav ul {
list-style: none;
border-top: 1px solid #666;
}
nav li {
border-bottom: 1px solid #666;
}
nav a,
nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 180px;
text-decoration: none;
background-color: #C6D580;
}
nav a:hover,
nav a:active,
nav a:focus {
background-color: #ADB96E;
color: #FFF;
}
nav ul li {
position: relative;
text-align: center;
}
nav ul li > ul {
display: none;
position: absolute;
left: 100%;
top: -1px;
}
nav ul li:hover > ul {
display: block;
}
table {
width: 96%;
border-collapse: collapse;
}
th {
background-color: #D6DCED;
}
a.back-to-top {
display: none;
width: 60px;
height: 60px;
position: fixed;
bottom: 40px;
right: 40px;
background: gold url("images/up-arrow.png") no-repeat center 43%;
text-indent: -9999px;
border-radius: 30px;
}
a:hover.back-to-top {
background-color: #000;
}
#table1, #table2 {
font-weight: bold;
}
So I am developing a little forum and I ran into a little design problem. The sidebar in each post is supposed to match the height of the content (the text written) but the sidebar only goes to the height necessary to display everything and then stops.
JSFiddle: http://jsfiddle.net/9stPU/5/
CSS:
.forumContent {
list-style-type: none;
background: #34495e;
letter-spacing: 1px;
width: 1170px;
margin: 0;
color: white;
}
.forumContent li {
padding: 0 0 0 10px; /* 5px 0 5px 10px */
margin-left: -40px;
min-height: 41px;
overflow: auto;
border-bottom: 1px solid #000;
}
.forumContent li:last-child {
border-bottom: none;
}
.forumContent li h3 {
margin: 0;
padding: 0;
font-size: 14px;
}
.forumContent li small {
font-size: 9px;
}
.forumContent a {
color: white;
text-decoration: none;
width: 100%;
height: 100%;
}
.forumContent li:hover {
background: #3E5368;
}
.forumContent a li {
float: left;
width: 366px;
}
.forumContent a li:first-child {
width: 100px;
}
.forumContent li .new b {
font-size: 12px;
}
.forumContent li .new {
float: right;
margin-right: 8px;
margin-top: -2px;
font-size: 9px;
background: #2c3e50;
padding: 4px;
border-radius: 6px;
}
.topicUser {
width: 150px;
float: left;
background: #000;
margin-left: -10px;
min-height: 100%;
height: 100%;
}
.topicUser h3 {
margin-left: 2 .5px !important;
}
.topicUser small {
position: absolute;
margin-top: -15px;
margin-left: 7 .5px;
}
.topicUser p {
margin-top: 2px;
margin-left: 3px;
}
.topicContent {
width: 1060px;
float: right;
height: 100%;
}
.topicContent p {
padding: 5px;
}
You can use display:table; properties: DEMO
a single patch to test it ;
li {
display:table;
}
li > div {
display:table-cell;
float:none!important;/* float kills display; so do not use it with display; */
vertical-align:top;
}
Put:
.forumContent li {
padding: 0 0 0 10px; /* 5px 0 5px 10px */
margin-left: -40px;
min-height: 41px;
overflow: auto;
border-bottom: 1px solid #000;
position: relative;
}
and
.topicUser {
width: 150px;
float: left;
background: #000;
margin-left: -10px;
min-height: 100%;
height: 100%;
position:absolute;
}
notice position properties.
Look here http://jsfiddle.net/9stPU/6/
I realize this question has been asked multiple times on this site, and many many others, probably too many times, I've tried many different solutions but haven't come up with one that fits, I'm trying to auto center with hidden overflow, any CSS masters willing to show me where I'm going wrong? I've been banging my head for awhile now. Here is my
fiddle Thank you for any assistance.
Here is my CSS since fiddle must be accompanied
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}
.navigation {
position: relative;
left: 15%;
padding: 0 auto;
list-style: none;
text-align: center;
display: inline-block;
}
.navigation li {
float: left;
width: 150px;
position: relative;
}
.navigation li a {
background: #262626;
color: #fff;
display: block;
padding: 8px 7px 8px 7px;
text-decoration: none;
border-top: 1px solid #F2861D;
text-align: center;
text-transform: uppercase;
}
.navigation li a:hover {
color: #F2861D;
}
.navigation ul {
position: absolute;
left: 0;
display: none;
margin: 0 0 0 -1px;
padding: 0;
list-style: none;
border-bottom: 3px solid #F2861D;
}
.navigation ul li {
width: 150px;
border-top: none;
}
.navigation ul a {
display: block;
height: 15px;
padding: 8px 7px 13px 7px;
color: #fff;
text-decoration: none;
border-top: none;
border-bottom: 1px dashed #6B6B6B;
}
.navigation ul a:hover {
color: #F2861D;
}
This is the closest I've gotten, I've attempted margin: 0 auto as well as margin-left:auto;
margin-right:auto; but can't seem to get them to work.
try this add a .container{width:you want; margin:0 auto;} then navigation bar in center.
http://jsfiddle.net/bsyxG/7/
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
margin:0;
padding:0;
}
.container{
width:1004px;
margin:0 auto;
text-align:center;
}
.navigation {
text-align: center;
display:inline-block;
list-style-type:none;
text-align:center;
}
.navigation li {
float: left;
width: 150px;
position: relative;
}
.navigation li a {
color: #fff;
display: block;
padding: 8px 7px 8px 7px;
text-decoration: none;
border-top: 1px solid #F2861D;
background: #262626;
text-align: center;
text-transform: uppercase;
}
.navigation li a:hover {
color: #F2861D;
}
.navigation ul {
position: absolute;
left: 0;
display: none;
margin: 0 0 0 -1px;
padding: 0;
list-style: none;
border-bottom: 3px solid #F2861D;
}
.navigation ul li {
width: 150px;
border-top: none;
}
.navigation ul a {
display: block;
height: 15px;
padding: 8px 7px 13px 7px;
color: #fff;
text-decoration: none;
border-top: none;
border-bottom: 1px dashed #6B6B6B;
}
.navigation ul a:hover {
color: #F2861D;
}
You can use left: 50% left:-50% trick
.wrapper {
position: relative;
left: 50%;
}
.navigation {
position: relative;
left: -50%;
}
http://jsfiddle.net/bsyxG/4/
Use This:
Changes are position:absolute from relative and margin-left:auto; margin-right:auto
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}
.navigation {
position: absolute;
padding: 0 auto;
list-style: none;
text-align: center;
display: inline-block;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.navigation li {
float: left;
width: 150px;
position: relative;
}
.navigation li a {
background: #262626;
color: #fff;
display: block;
padding: 8px 7px 8px 7px;
text-decoration: none;
border-top: 1px solid #F2861D;
text-align: center;
text-transform: uppercase;
}
.navigation li a:hover {
color: #F2861D;
}
.navigation ul {
position: absolute;
left: 0;
display: none;
margin: 0 0 0 -1px;
padding: 0;
list-style: none;
border-bottom: 3px solid #F2861D;
}
.navigation ul li {
width: 150px;
border-top: none;
}
.navigation ul a {
display: block;
height: 15px;
padding: 8px 7px 13px 7px;
color: #fff;
text-decoration: none;
border-top: none;
border-bottom: 1px dashed #6B6B6B;
}
.navigation ul a:hover {
color: #F2861D;
}
i am currently trying to move my sidebar from below the content box to the right of it alongside it. No matter what i try it stays at a certain point no going up any higher. My website is VAGUE LINES, where if you scroll down a bit u will be able to see exactly what i am saying.
Below is my css code thanks alot:
h1
{
text-align:center;
font-family:sans-serif;
letter-spacing:12px;
padding-bottom:6px;
border-top:1px solid rgb;
margin-top:35px;
color:#544E4F;
font-weight:lighter;
}
hr
{
display:overline-block;
width:200px;
}
#header
{
background: #FFFFFF;
text-align: center;
}
#navigation ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navigation ul li
{
display: inline;
padding-right: 30px;
}
#navigation ul li a
{
text-decoration: none;
padding: .3em 5em;
color: #000000;
background-color: #FFFFFF;
font-family: courier;
}
#navigation ul li a:hover
{
text-decoration: line-through;
}
.centeredImage
{
float: none;
margin: 4% 0 2% 9%;
text-align: center;
padding-bottom: 25px;
}
#main-content hr
{
width :66%;
margin-left: 9%;
}
#main-content
{
width:80%;
padding-left: 113px;
padding-top: 20px;
}
#page-wrap {
background: white;
min-width: 780px;
max-width: 1260px;
margin: 10px auto;
}
#page-wrap #inside {
margin: 10px 10px 0px 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#sidebar{
border-top: 1px solid #99CC33;
border-left: 1px solid #99CC33;
height: 300px;
width: 200px;
margin-right: 5px;
padding: 5px 0 0 5px;
position:absolute;
}
#main-content p
{
margin-left: 10%;
font-family: courier;
font-size: 14px;
}
#heading p
{
margin-left: 10%;
font-family: sans-serif;
font-size: 14px;
}
#sidebar p
{
margin-left: 10%;
font-family: courier;
font-size: 14px;
font-weight:bold;
}
Try this:
#main-content
{
float: left; // float element to the left side
width:80%;
padding-left: 113px;
padding-top: 20px;
}
#sidebar{
border-top: 1px solid #99CC33;
border-left: 1px solid #99CC33;
height: 300px;
width: 200px;
margin-right: 5px;
padding: 5px 0 0 5px;
position:absolute;
right: 0; // position element to the right
}
EDIT: Sorry. You wanted sidebar on the right.
Here you can see the code: http://jsfiddle.net/LQSK3/1/
I can't get display: inline; working there for every li element.
Also got the problem width the line.png image, as it's height is the same as the font height, I want it to has 35px height with margin left and right set to 5px.
Where is the problem?
You need to update your style sheet. Please add this new style:
#menu {
position: relative;
clear: both;
top: -3px;
background-color: coral;
border: 1px solid black;
width: 800px;
height: 35px;
float:left;
}
li { display: inline;float:left; }
#menu ul {
position: absolute;
font-family: Century Gothic, sans-serif;
font-size: 14px;
list-style-type: none;
padding: 0;
margin: 9px 0 0 123px;
width: 649px;
height: 39px;
color: #FFF;
float:left;
}
a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }
#menu a {
background: url('http://i.imgur.com/rzNj0.png') top right no-repeat;
width: 65px;
height: 18px;
float: left;
margin: 0px 5px;
}
You need to add float: left; to menu div,ul,li and a . Also should set width and height and margin of the a tag.
Here is a working sample : http://jsfiddle.net/YjeBs/
Hope this helps :)
EDIT:
If you want your line to extend from top to bottom of the menu div you can change your styles to:
#menu {
position: relative;
clear: both;
top: -3px;
background-color: coral;
border: 1px solid black;
width: 800px;
height: 35px;
float:left;
}
li {
float: left;
height: 35px;
display:inline;
}
#menu ul {
color: #FFFFFF;
float: left;
font-family: Century Gothic,sans-serif;
font-size: 14px;
height: 35px;
list-style-type: none;
margin: 0 0 0 123px;
padding: 0;
position: absolute;
width: 649px;
}
a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }
#menu a {
background: url("http://i.imgur.com/rzNj0.png") no-repeat scroll right top transparent;
float: left;
height: 29px;
margin: 0 5px;
padding-top: 8px;
width: 65px;
}
Hope this is you want :)
just change li { diplay: inline; } with li { display: inline; } it works.