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.
Related
I am unable to get my aside element to align properly with the rest of my page. It sits above the main element and spills into the header. How do I fix that?
Here's what it looks like on the page:
Here's the CSS Style code I'm using:
* {
margin:0;
padding:0;
}
body {
font-size:1.1em;
font-family: Arial, Helvetica, sans-serif;
background-color:darkseagreen;
}
header {
padding: 1%;
margin-bottom: 3%;
text-align: center;
font-size:2em;
font-family: Arial, Helvetica, sans-serif;
text: white;
background-color: #4EEE94;
}
aside {
width: 25%;
padding: 0.5%;
margin: 0 5px 5px 0;
background-color: #1C86EE;
float: right;
border-radius: 20px;
position: relative;
min-height: 100%;
display: block;
}
#main {
width: 446px;
margin-right: 27%;
padding: 0.5%;
background-color: #EE6363;
text: white;
position: relative;
border-radius: 4%;
}
.map {
padding: 2em;
margin: 3em auto 3em auto;
position: relative;
display: block;
text-align: center;
width: 95%;
.image {
padding: 5%;
margin: 4em;
float: left;
position: relative;
left: 10px;
top: 15px;
}
}
div {
box-shadow: 10px 10px 5px #888888;
border: 2px solid;
border-radius: 25px;
}
nav ul li {
margin-right: 1em;
display: inline;
list-style-type: none;
}
nav li a {
padding: 1em;
color: white;
text-decoration: none;
}
nav li a:hover {
color: yellow;
text-decoration: underline;
}
footer {
margin: 0.5% 27% 0 0;
border-top: solid thick teal;
padding: 0.5%;
background-color: lime;
}
first issue with your css remove the braces after .image class.
.image {
padding: 5%;
margin: 4em;
float: left;
position: relative;
left: 10px;
top: 15px;
}
}
second thing use px or % or em do not use all (recommended) .
Third use id something like this
<div id="xyz"></div>
Not <div id="#xyz"></div> # is the css selector
also do not use multiple id like <div id="abc xyz"></div> u cannot use multiple id's use class instead of <div class="abc xyz"></div>
How to repair my code to show the text in the middle of div? Cause it's showing it on the top of the div...
#fixed-menu {
padding-top: 5px;
padding-bottom: 5px;
font-family: sans-serif;
width: 100%;
height: 38px;
font-weight: light;
position: fixed;
top:0;
left:0;
right:0;
font-size: 20px;
background-color: #0082c5;
border: 3px solid #0082c5;
}
#fixed-menu img {
vertical-align: middle;
}
#fixed-menu ul {
height: auto;
padding: 0px 0px;
margin: 0px;
}
#fixed-menu li {
color: #fff;
display: inline;
padding: 10px;
}
#fixed-menu a {
padding-top: 3px;
transition:all linear 0.20s;
font-family: sans-serif;
text-decoration: none;
color: #fff;
}
#fixed-menu a:hover {
color: #000;
}
I also tried to put there image, so to be aligned in the middle as in the #fixed-menu img, but it does not work, because when I did not have that #fixed-menu img, and I uploaded file in the div, the picture shows next to the text, aligned by the bottom of the text next to text , and when the vertical-align for image is set to middle, the picture is then showing of bottom...o.O How to repair it? here is Jfiddle : https://jsfiddle.net/wD5T9/68/
Thanks for answers
The first try no additional code in a div and image
#fixed-menu {
padding-top: 5px;
padding-bottom: 5px;
font-family: sans-serif;
width: 100%;
height: 38px;
font-weight: light;
position: fixed;
top:0;
left:0;
right:0;
font-size: 20px;
background-color: #0082c5;
border: 3px solid #0082c5;
}
#fixed-menu img {
vertical-align: middle;
line-height: 25px;
}
#fixed-menu ul {
height: auto;
padding: 0px 0px;
margin: 0px;
}
#fixed-menu li {
color: #fff;
display: inline;
padding: 10px;
}
#fixed-menu a {
padding-top: 3px;
transition:all linear 0.20s;
font-family: sans-serif;
text-decoration: none;
color: #fff;
}
#fixed-menu a:hover {
color: #000;
}
#searchWrapper {
position:relative;
}
#searchWrapper img {
position:relative;
top:5px;
}
<div id='searchWrapper'>
<input id='searchBox' style='width:250px; border:1px solid #cccccc; border-radius:7px 7px 7px 7px; padding:5px 28px 5px 10px; margin-top:14px; margin-left:50px;height:18px;' type='text' placeholder='Search'/><img src='http://www.q-park.ie/Portals/8/images/search-icon.png'/>
</div>
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/
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;)
Looks fine in firefox but the image is not displaying in center.
In Chrome image is not aligned in the center of browser window
If you refresh the browser it get aligned to center & then get back to left after few second.
thank you for any help.
here is the Demo Template.
Thx.
css code:
html,body {
margin: 0;
padding: 0;
text-align: center;
font-family: arial, Helvetica, sans-serif;
font-size: 14px;
/*background: #FFF url("images/border.jpg") repeat-y center;*/
}
#wrapper{
margin:0 30px;
width: 95%;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
}
#anti-shadow-div{
display:table;
overflow:hidden;
}
img { border: none; }
a { text-decoration: none; color: #2965a6; font-weight: bold;}
a:hover { text-decoration: underline; color: #fca00e; }
/*---------- Divs ----------*/
/*#header {
background: url("images/logo006.jpg") no-repeat center;
height: 120px;
width: 100%;
margin: 0 auto;
}*/
#header001 {
background: url("images/logo001.jpg") no-repeat center top;width:890px;height:133px;
height: 133px;
width: 900px;
margin: 0 auto;
font-family: arial, Helvetica, sans-serif;
font-size: 50px;
}
#indexheader{
background:#FFFFFF;
height: 30px;
width: 890px;
margin: 0 auto;
font-family: arial, Helvetica, sans-serif;
font-size: 50px;
}
#indeximg{
float:left;
}
#navibtn{
width:900px;
height:90px;
margin: 0 auto;
}
.navibtn001{
background:url(images/automart.jpg) no-repeat;
width:200px;
height:90px;
}
.navibtn002{
background:url(images/cab.jpg) no-repeat;
width:900px;
height:90px;
}
#logo002{
padding-top: 30px;
margin: 0 auto;
width: 890px;
voice-family: "\"}\"";
voice-family:inherit;
width: 850px;
}
/************
html>body #logo { width: 850px } /* for opera */
/*
#logo a:hover {
text-decoration: none;
} */
/*
#logo a {
float: left;
background: url("images/logo.jpg") no-repeat 0px 0px;
width: 317px;
height: 85px;
}
*******************/
/*---------- Divs ----------*/
#flsh{
background:url(images/vans/56%20dolpin/flv002.swf) no-repeat left top;width:640px;height:480px;
height: 500px;
width: 650px;
margin: 0 auto;
}
/*******************/
#menubutton{
width:100%;
height:20px;
text-align:center;
}
#container {
width: 100%;
overflow: hidden;
text-align: left;
font: 90% Tahoma, Helvetica, sans-serif;
margin: 0px auto;
border-top: 3px solid #6fb2e6;
border-bottom: 3px solid #ffb93f;
background: #e5e5e5;
}
* html #container {
overflow: visible;
}
#content{
float: right;
width: 690px;
background: #fff url(images/nav-edge.jpg) repeat-y;
padding-bottom: 40px;
min-height: 380px;
}
* html #content {height: 380px; overflow: visible;}
#maincontent {
float: left;
float: right;
padding: 30px 20px 0px 20px;
overflow: hidden;
width: 450px;
voice-family: "\"}\"";
voice-family:inherit;
width: 410px;
}
#maincontent001 {
float: left;
/* float: right;*/
padding: 30px 20px 0px 20px;
overflow: hidden;
width: 450px;
voice-family: "\"}\"";
voice-family:inherit;
width: 650px;
}
#rightdiv{
padding-top: 30px;
float: right;
width: 230px;
}
#rightdiv img{
padding: 1px;
border: 1px solid #6fb2e6;
}
#news{
width: 210px;
margin: 0 auto;
}
/*---------- Navigation Menu ----------*/
#navcontainer {
padding-top: 30px;
padding-left: 15px;
min-height: 380px;
float: left;
overflow: hidden;
width: 180px;
}
* html #navcontainer {height: 380px; overflow: visible;}
.nav {
width: 170px;
position:absolute;
list-style-type: none;
margin: 0;
padding: 0px;
font-size: 105%;
left: 228px;
top: 13px;
}
.nav li {
text-align: left;
margin: 3px 1px;
padding: 0;
}
.nav li a {
border: 1px solid #52a3e2;
display: block;
padding: 4px 0 4px 10px;
background: #6fb2e6;
color: #e5ffff;
font-weight: bold;
text-decoration: none;
width: 170px;
voice-family: "\"}\"";
voice-family:inherit;
width: 160px;
}
.nav li a:hover {
background: #ffb93f;
color: #949494;
font-weight: bold;
cursor: pointer;
}
/*---------- Footer ----------*/
#footer {
height: 30px;
margin: 0 auto;
padding: 10px 0 10px 0;
font-size: 80%;
text-align: center;
color: #6a6666;
width: 890px;
background: #fff;
}
#footerimg{
background:url("images/footer.jpg") no-repeat left top;width:890px;height:133px;
height: 133px;
width: 900px;
margin: 0 auto;
}
#footeradd{
background:url(images/carsalelogo.jpg)no-repeat left top;width:890px;height:133px;
height: 133px;
width: 900px;
margin: 0 auto;
}
#footertextleft{
margin-left: 10px;
text-align: left;
width: 450px;
float: left;
}
#footertextright{
margin-right: 10px;
text-align: right;
width: 350px;
float: right;
}
/*---------- Headings ----------*/
h1 {
padding-top: 0;
margin-top: 0;
font: 120% Arial;
font-weight: bold;
color: #5c94bf;
}
.mainheading{
font-weight: bold;
font-size: 123%;
}
h2 {
padding-top: 0px;
margin-top: 0px;
font: 110% arial;
font-weight: bold;
color: #5c94bf;
}
#subtext{
padding-top: 0px;
margin-top: 0px;
font: 110% arial;
font-weight: bold;
color: #5c94bf;
}
/*---------- Classes ----------*/
.underline{
padding-bottom: 3px;
width: 180px;
border-bottom: 2px solid #ffb93f;
}
.subheading{
font-weight: bold;
}
.submitbox{
width: 215px;
background: #b8d1e4;
padding: 5px;
text-align: left;
border: 1px solid #e5e5e5;
}
.submitbox p{
margin-top: 3px;
margin-bottom: 5px;
}
.submitbox button{
font-size: 95%;
background: #e5e5e5;
color: #949494;
border: none;
padding: 3px 8px;
font-weight: bold;
}
#maincontent ul{
list-style-image: url(images/bullet.png)
}
.advert{
width: 160px;
padding: 5px;
background: #fff;
border: 1px solid #c8c8c8;
}
add margin: 0 auto; to :
#anti-shadow-div {
display: table;
overflow: hidden;
margin: 0 auto;
}