I'm having some troubles to align the upper_navdiv with the content div.
I want the upper_nav with links aligned with the right-hand side margin and that grows in the left-hand side direction depending on how many links there are inside and the width of each boxes.
Could you check which is the problem?
upper_nav is child of header that takes the whole width of the page:
div#upper_nav {
position: absolute;
bottom:0;
right:0;
width:80%;
}
So I would that the width would be the 80% of the parent width but I don't understand why the margin is not aligned correctly.
Here the example of my page:
html {
margin: 0;
padding: 0;
background-color: #ffffff;
font-size: 17px;
}
body {
font-family: Tahoma, Geneva, sans-serif;
color: #000;
text-align: justify;
background-image: url('url_immagine');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
div#container {
overflow: hidden;
width: 95%;
margin: 0px auto;
background-color: #ffffff;
}
div#header {
/*background: url('header.png') no-repeat center center;*/
/*background-size: cover;*/
/*height:18vw;*/
position: relative;
}
div#upper_nav {
position: absolute;
bottom: 0;
right: 0;
width: 80%;
/*background-color:#e6e6e6;*/
}
div#navigation_left {
padding: 1% 1%;
float: left;
width: 21%;
background-color: #e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
div#content {
overflow: auto;
margin-left: 25%;
background-color: #e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
div#footer {
clear: both;
/*background: url('footer.png') no-repeat center center;*/
/*background-size: cover;*/
/*height:5vw;*/
width: 100%;
position: relative;
}
div#footer_content {
position: relative;
bottom: -50%;
text-align: center;
z-index: 9999;
background-color: #e6e6e6;
}
P {
color: #000;
font-family: Tahoma;
}
a {
text-decoration: none;
color: #0066FF;
font-size: 17px;
}
a:hover {
color: #0066FF;
text-decoration: underline
}
h1 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 200%;
}
h2,
h3,
h4,
h5,
h6,
h7,
h8 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 150%;
}
ul#menu_header {
list-style: none;
line-height: 150%;
text-align: center;
}
ul#menu_header li {
background-color: #737373;
right: 0;
width: 19.6%;
margin: 0.2%;
float: left;
/* elementi su singola riga */
}
ul#menu_header li a {
color: #fff;
text-decoration: none;
}
ul#menu_header li.active,
ul#menu_header li:hover {
background-color: #b1b1b1;
}
ul#menu_left {
display: block;
list-style: none;
text-align: left;
text-decoration: none;
padding-left: 5%;
}
ul#menu_left li {
margin: 1%;
font-size: 5vw;
}
ul#menu_left li a {
color: #000;
display: block;
line-height: 150%;
text-decoration: none;
}
ul#menu_left li.active,
ul#menu_left li:hover {
background-color: #c9c9c9;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
.panel a {
color: #000
}
.panel a:hover {
background-color: #b1b1b1
}
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="container">
<div id="header">
<img src="http://placehold.it/1600x900" width="100%" alt="Riunione annuale GTTI SIEm2019" />
<div id="upper_nav">
<ul id="menu_header">
<li class="active">Home</li>
<li>Link11</li>
<li>Link22</li>
<li>Link33</li>
<li>Link44</li>
</ul>
</div>
</div>
<div id="navigation_left">
<ul id="menu_left">links</ul>
</div>
<div id="content">
<p>text</p>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</div>
</body>
</html>
You notice the non-alignment resizing the window.
I am a newbie at this so please excuse me if this doesn't make sense. In the #topbar2 section of this CSS Style-sheet I want the image NAFF_webtracker_logo.gif to appear. I believe I need to override just this section of the document since this is inherting from defaultstyle.css. This is in an application where I cannot edit defaultstylesheet.css. Is there a way I can override just this section to get my logo to appear? My coding seems correct but the image does not display.
Any help is appreciated.
Colin
/*
This file inherits all the styles from DefaultStyle.css
Please make sure that the following import link is present if you want to inherit default styles.
Any changes in fonts, colours, layout, etc. can be done via overriding CSS style elements after the import statement.
Good CSS guide is located at
http://www.htmlhelp.com/reference/css/
*/
#import url(DefaultStyle.css);
/* put your changes below this comment */
body
{
background-image: url(images/BG.gif);
background-color: none;
background-position: left top;
background-repeat: no-repeat;
color: #666666;
padding: 0;
margin: 0;
font-size: 11px;
}
#OuterContentPane
{
padding: 15px 30px 20px 30px;
background: none;
border-left: 0px solid;
border-left-color: #ffffff;
border-right: 0px solid;
border-right-color: #ffffff;
}
#pagehead
{
height: 204px;
border-bottom: 0px solid #000000;
background: #fff !important;
}
#topbar1
{
color: #ffffff;
/*background: none url(images/TopR.gif) no-repeat top left;*/
height: 204px;
}
#topbar2
{
color: #ffffff;
background: url(images/NAFF_webtracker_logo.gif) no-repeat top left;
height: 204px;
}
.loginBox
{
border: 1px solid #dfdfdf;
background: #ddedf5 url(images/Boxag.gif) repeat-x top left;
color: #666666;
padding: 10px 10px 10px 10px;
width: 170px;
}
.loginBox input[type="text"], .loginBox input[type="password"]
{
width: 169px;
}
.loginBox a, .loginBox a:visited
{
color: #666666;
}
.loginBox a:hover
{
color: #000000;
}
.LoginInstruction
{
position: absolute;
border: 1px solid #dfdfdf;
background: url(images/BoxBg.gif) repeat-x top left;
color: #666666;
padding: 15px;
left: 264px;
top: 220px;
right: 16px;
height: 322px;
}
#LoginStatusString
{
text-align: right;
color: #00A4E4;
background: none;
top: 113px;
right: 0px;
}
#menu
{
text-decoration: none;
font-weight: normal;
background: none;
text-align: center;
font-size: 9pt;
left: 231px;
top: 149px;
font-variant: normal;
line-height: 26px;
/*text-transform: uppercase;*/
}
#menu li
{
width: 124px;
height: 26px;
color: #00a4e4;
text-decoration: none;
background: url(images/MButtH.gif) no-repeat top left;
border: 0px solid;
}
#menu a, #menu a:visited
{
color: #005596;
background: url(images/MButt.gif) no-repeat top left;
text-decoration: none;
display: inline-block;
}
#menu a:hover
{
color: #00a4e4;
text-decoration: none;
background: url(images/MButtH.gif) no-repeat top left;
}
.DetailsTable
{
padding: 0px;
font-size: 11px;
}
.DetailsHeader
{
color: #005596;
font-size: 12px;
vertical-align: middle;
line-height: 24px;
}
.DetailsHeader td
{
background-image: url(images/MButt.gif);
background-repeat: repeat;
background-position: top left;
}
.DetailsHeader a
{
color: #005596;
font-weight: Normal;
}
.DetailsHeader a:hover
{
color: #000000;
}
a,
a:visited
{
color: #666666;
background: inherit;
}
a:hover
{
color: #000000;
background: inherit;
}
select, input
{
font-size: 11px;
}
.ContentSection
{
padding-left: 0px;
margin-top: 10px;
padding-bottom: 0px;
background: none;
}
.DetailsCell
{
color: #666666;
background: none;
}
.DetailsAlternatingCell
{
color: #666666;
background: #ebf9fe;
}
.TimeLineLegend
{
display: inline-block;
font-weight: bold;
background: none;
color: #000000;
text-align: center;
padding: 5px 5px 5px 5px;
border: solid 1px gray;
}
.TimeLineOverdue
{
background: #ffb6c1;
color: #000000;
white-space: nowrap;
text-align: center;
}
.TimeLinePending
{
background: #FFFF00;
color: #000000;
white-space: nowrap;
text-align: center;
}
.TimeLineCompleted
{
background: #98fb98;
color: #000000;
white-space: nowrap;
text-align: center;
}
.TimeLineCompletedLate
{
background: #ffcc99;
color: #000000;
white-space: nowrap;
text-align: center
}
.TimeLineEstimate
{
font-style: italic;
color: #000000;
background: inherit;
white-space: nowrap;
text-align: center;
}
.Button.FilterStripGroup_none
{
background-color: #ffffff;
}
#pagefooter
{
text-align: left;
padding-top: 8px;
border-top: 0px solid #000000;
border-bottom: 0px solid #000000;
margin-left: 30px;
margin-right: 30px;
height: 30px;
color: #666666;
font-size: 9px;
padding-left: 24px;
background: #dfdfe0;
}
#PageFooter a,
#PageFooter a:visited
{
color: #666666;
font-size: 10px;
}
#PageFooter a:hover
{
color: #000000;
font-size: 10px;
}
#LanguageSelection
{
position:absolute;
right: 10px;
}
html{
overflow-x:hidden;
}
#OuterContentPane{
background-image: url('Images/Rectangle2.jpg');
background-size: cover;
padding: 65px 30px 20px 30px !important;
}
#topbar1{
background-size: cover;
background-image:url('Images/header.jpg');
background-position: -50px -45px;
background-repeat: no-repeat;
}
#topbar2{
display: none;
}
#loginBox, #QuickViewDetails{
margin: 0 auto;
min-width: 250px;
max-width: 440px
max-width:100%;
background-color: #fff;
padding: 20px 40px
}
#OuterContentPane select, #OuterContentPane input{
max-width: 300px;
padding: 5px 6px;
}
.loginBox input[type="text"], .loginBox input[type="password"]{
width: 100% !important;
padding: 5px;
margin-bottom: 15px;
padding: 5px 6px;
background: #fff;
}
#SigninBtn, #FindBtn{
padding: 5px 19px;
border-radius: 0px;
background-color: #BF4646;
color: #fff;
margin-bottom: 20px;
border: none;
cursor:pointer;
-webkit-transition: background-color .8s; /* Safari */
transition: background-color .8s;
}
#SigninBtn:hover, #FindBtn:hover{
background-color:#09517B;
-webkit-transition: background-color .8s; /* Safari */
transition: background-color .8s;
}
#pagefooter{
background-color:#333;
margin: 0px;
width:100%;
min-height:75px;
color:#fff;
}
#menu{
width: 100%;
left: 1px;
top: 160px;
}
#menu, #menu *{
background:#fff !important;
}
#menu > li{
width: 14.2%;
min-width: 95px;
}
#menu > li > ul{
min-width: 200px;
width: auto;
}
#ctl06_ctl01_ctl62_ctl00, #ctl06_ctl01_ctl61_ctl00{
max-width: 110px;
}
#media(max-width:400){
#topbar1{
background-position: -40px -30px;
}
}
You can use the !important keyword in CSS. This will override default styles.
#topbar2
{
color: #ffffff;
background: url(images/NAFF_webtracker_logo.gif) no-repeat top left !important;
height: 204px;
}
I have a little problem at designing a website:
In this website a have a top navigation bar and is composed by : number of search results found, search bar, login methods.
All i am asking for is how i can set the "websitelocation" div and search input aligned to the left and "loginMethods" div aligned to the right (in topbar of course).
I want to mention that i tried on loginMethods div left:0; css property but it did nothing.
Here is a jsfiddle setup of layout : http://jsfiddle.net/UZSpz/ .
Code :
html
<body>
<nav>
<h1 class="logo">project</h1>
<ul>
<li id="events_list">
<a href="#events">
<img src="img/menu/services2.png" width="35px" height="35px" style="margin-top:0px;margin-bottom:0xp;padding:0px;" />
<p class="eName">Events</p>
</a>
</li>
<li id="users_list">
<a href="#following">
<img src="img/menu/crowdsourcing.png" width="35px" height="35px" style="margin-top:0px;margin-bottom:0xp;padding:0px;" />
<p class="eName">Users</p>
</a>
</li>
<li>
<a href="#messages">
<img src="img/menu/comment25.png" width="35px" height="35px" style="margin-top:0px;margin-bottom:0xp;padding:0px;" />
<p class="eName">Messages</p>
</a>
</li>
</ul>
</nav>
<div class="topbar">
<div class="websiteLocation">
<img src="img/dark.png" width="25px" height="15px" style="margin-top:10px;margin-right:7px;" />3 events found..
</div>
<input type="text" class="inputSearch" value="Search events.." />
<div class="loginMethods">asdasds</div>
</div>
<div class="content">
content
</div>
</body>
css
html, body {
background: #343434;
height: 100%;
overflow: hidden;
position: relative;
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
/* NAVIGATION RULES (left bar) */
nav {
background: #565656;
color: #b4b4b4;
margin:0px;
top: 0;
bottom: 0;
left: 0;
position: absolute;
border-right:7px solid #2b2b2b;
width: 86px;
}
nav .logo {
opacity: 0.5;
background-color: rgb(44, 44, 44);
background-image:url('../img/logo2.png');
height:60px;
border-bottom:1px solid #353535;
margin:0px;
padding:0px;
}
nav a {
text-decoration: none;
cursor:pointer;
margin: 0px;
padding: 0px;
}
nav .logo:hover {
opacity: 1;
background-position-x: 0%;
background-position-y: 100%;
background-size: initial;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: rgb(44, 44, 44);
-moz-transition: opacity .7s;
-webkit-transition: opacity .7s;
-o-transition: opacity .7s;
}
nav ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
nav li {
opacity: 1;
color:#b4b4b4;
cursor: pointer;
background: #676767;
border-bottom: 1px solid #494949;
padding: 10px 0 16px;
height:59px;
text-align: center;
margin: 0px;
}
nav li:hover {
background: #414242;
-moz-transition: background-color .5s;
-webkit-transition: background-color .5s;
-o-transition: background-color .5s;
}
nav li a {
text-decoration: none;
color:#b4b4b4;
font-size: 1.18em;
}
.eName {
font-family: 'Alegreya Sans SC', sans-serif;
font-size: 14px;
text-decoration: bold;
}
/* MENU CLASSES AND ELEMENTS */
.categories {
display: none;
position: absolute;
width:200px;
background:#383838;
top:0;
left:93px;
bottom:0;
z-index:11;
border-right: 7px solid #0a0a0a;
}
.categoryCapHolder{
width:100%;
height:40px;
padding-top:20px;
background: #2a2a2a;
border-bottom: 1px solid #3d3d3d;
}
.categoryCapHolder .categoryName {
overflow: hidden;
color:#a2a2a2;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 20px;
text-decoration: bold;
text-transform: uppercase;
margin-left:25px;
}
.categoryCapHolder .categoryName:hover {
color:#62c6ff;
}
.categories .subcategory {
width:170px;
height:32px;
padding-top: 10px;
padding-left:30px;
border-bottom: 1px solid #5f5f5f;
background: transparent;
overflow: hidden;
}
.categories .subcategory:hover {
background: #282828;
}
.categories .subcategory .subcategory_link {
margin-left:15px;
color:#62c6ff;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 16px;
text-decoration: bold;
text-transform: uppercase;
}
/* Top navigation bar rules */
.topbar {
z-index: 0;
background: #1d1d1d;
border-left: 7px solid #2b2b2b;
border-bottom: 1px solid #5b5b5b;
height: 60px;
left: 86px;
position: absolute;
right: 0;
top: 0;
}
/*######CUSTOMBTNS########*/
.topbar .websiteLocation {
color:#b4b4b4;
margin-left:50px;
margin-top:10px;
margin-right: 5px;
width: 150px;
overflow: hidden;
font-family: "Calligraffitti", sans-serif;
font-size:16px;
}
.topbar .inputSearch {
font-family: "Calligraffitti", sans-serif;
text-decoration: none;
background: url("../img/search.png") left no-repeat;
padding-left: 25px;
padding-top: 3px;
margin-top:5px;
margin-bottom:5px;
margin-left:5px;
right:0px;
width:150px;
height:23px;
border: 0px;
color:#b6b6b6;
}
.topbar .inputSearch:focus {
outline-color: transparent;
outline-style: none;
}
.loginMethods {
width:150px;
left:0;
}
/* Content rules */
.content {
bottom: 0;
left: 120px;
overflow: auto;
position: absolute;
right: 0;
top: 62px;
padding: 50px 25px 25px 20px;
}
.content .card {
background: #0e0e0e;
color:#a4a4a4;
width:250px;
height:320px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin-right:20px;
margin-bottom: 15px;
overflow: hidden;
float: left;
z-index: 1;
}
.content .card .cover {
max-width:250px;
max-height:140px;
background: transparent;
float:left;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.content .card .description {
width:100%;
height:50%;
display: block;
margin-top:150px;
}
.content .card .coverDetail {
position:absolute;
display: none;
color:#565656;
width:220px;
height:22px;
margin: 115px 0px 0px 0px;
padding-left:15px;
padding-right:15px;
background: #e8ff28;
border-top: 1px solid #ecf97e;
overflow:hidden;
z-index:10;
}
.content .card .coverDetail .save {
width:50px;
height:16px;
background:#565656;
color:#c4c4c4;
padding:1px 2px 4px 2px;
cursor:pointer;
border:0px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
margin:1px 4px 0px 1px;
text-align: center;
}
.content .card .coverDetail .card-views {
width:50px;
height:16px;
background-size: 16px 16px;
padding:1px 2px 4px 2px;
border:0px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
margin:1px 4px 0px 1px;
text-align: center;
}
.content .card .description .title {
color:#b4b4b4;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 20px;
text-decoration: none;
text-transform: capitalize;
margin-top:5px;
margin-left:10px;
overflow: hidden;
}
.content .card .description .title:hover {
color:#62c6ff;
border-bottom: 1px dotted #d9f1ff;
}
.content .card .description .text {
font-family: sans-serif;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
height: 80px;
margin-top: 5px;
margin-left: 10px;
width:90%;
overflow-y:hidden;
overflow-x:hidden;
}
.content .card .description .text .expand-card {
background:#565656;
color:#c4c4c4;
padding:2px 2px 2px 2px;
cursor:pointer;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
width:75px;
height:16px;
margin:2px 1px 0px 1px;
text-align: center;
}
.content .card .description .author {
background:url('../img/user91.png');
background-size:10px 10px;
background-repeat:no-repeat;
color:#62c6ff;
bottom: 0;
font-family: sans-serif;
text-decoration: none;
text-transform: lowercase;
font-size: 9px;
padding-left:10px;
margin-left: 10px;
margin-top: 5px;
}
.authorlink {
text-decoration: none;
color:#62c6ff;
}
.content .card .description .category {
background:url('../img/category.png');
background-size:13px 13px;
background-repeat:no-repeat;
color:#62c6ff;
font-family: sans-serif;
text-decoration: none;
text-transform: lowercase;
font-size: 9px;
padding-left: 13px;
margin-left: 10px;
margin-top: 5px;
}
.categorylink {
text-decoration: none;
color: #62c6ff;
text-transform: capitalize;
}
Sorry if i've done something wrong in my code .
Thank you!
DEMO
Add this to your CSS:
.websiteLocation{
float:left;
}
.loginMethods{
float:right;
}
.loginMethods has black text on dark grey background, so is hard to see, but it's there.
left, right, top, bottom only works with position:absolute and position:fixed.
.topbar .inputSearch {
position: absolute;
font-family: "Calligraffitti", sans-serif;
text-decoration: none;
background: url("../img/search.png") left no-repeat;
padding-left: 25px;
margin-bottom:5px;
margin-left:5px;
right:0px;
width:150px;
height:23px;
border: 0px;
color:#b6b6b6;
}
.loginMethods {
width:150px;
position: absolute;
left:0;
}
and you can use another method in Table
<input type="text" class="inputSearch" placeholder="Search events.." />
I'm trying to show some bullet point list circles on my webpage, but it doesn't seem to show, and I tried using firebug but I can't find what's wrong, I went through my whole css file, and I don't see where the problem is, i want the list to be vertical with circles!
Please can you help me, here is the code :
/* Browser resets. */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 1em;
font-family: inherit;
vertical-align: baseline;
line-height: 1.5em;
}
#fancy_ajax .note{ cursor:default; }
/* Three styles for the notes: */
.yellow{
background-color:#FDFB8C;
border:1px solid #DEDC65;
}
.blue{
background-color:#A6E3FC;
border:1px solid #75C5E7;
}
.green{
background-color:#A5F88B;
border:1px solid #98E775;
}
/* Each note has a data span, which holds its ID */
span.data{ display:none; }
/* Green button class: */
a.green-button,a.green-button:visited{
color:black;
display:block;
font-size:10px;
font-weight:bold;
height:15px;
padding:6px 5px 4px;
text-align:center;
width:60px;
text-shadow:1px 1px 1px #DDDDDD;
background:url(../img/button_green.png) no-repeat left top;
}
a.green-button:hover{
text-decoration:none;
background-position:left bottom;
}
.author{
/* The author name on the note: */
bottom:10px;
color:#666666;
font-family:Arial,Verdana,sans-serif;
font-size:12px;
position:absolute;
right:10px;
}
#main{
/* Contains all the notes and limits their movement: */
margin:0 auto;
position:relative;
width:980px;
height:500px;
z-index:10;
background:url(img/add_a_note_help.gif) no-repeat left top;
}
h3.popupTitle{
border-bottom:1px solid #DDDDDD;
color:#666666;
font-size:24px;
font-weight:normal;
padding:0 0 5px;
}
#noteData{
/* The input form in the pop-up: */
height:200px;
margin:0px 0 0 0px;
width:350px;
}
.note-form label{
display:block;
font-size:10px;
font-weight:bold;
letter-spacing:1px;
text-transform:uppercase;
padding-bottom:3px;
}
.note-form textarea, .note-form input[type=text]{
background-color:#FCFCFC;
border:1px solid #AAAAAA;
font-family:Arial,Verdana,sans-serif;
font-size:19px;
font-weight: bold;
height:60px;
padding:5px;
width:300px;
margin-bottom:0px;
}
.note-form input[type=text]{ height:auto; }
.color{
/* The color swatches in the form: */
cursor:pointer;
float:left;
height:10px;
margin:0 5px 0 0;
width:10px;
}
#note-submit{ margin:20px auto; }
body {
height:100%;
background-color: white;
font-size: 14px;
color: #333333;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
}
/* custom selection colors */
::-moz-selection {
color: #fff;
color: rgba(255,255,255,.85);
background: #ea4c88;
}
::selection {
color: #fff;
color: rgba(255,255,255,.85);
background: #ea4c88;
}
/* Links */
a {
text-decoration: none;
color: #19558D;
font-size: inherit;
}
a:hover {
text-decoration: underline;
}
a:visited {
text-decoration: none;
background-color: inherit;
color: #336699;
}
a img {
border: none;
}
/* Input fields + label */
input, textarea {
border: 1px solid #999999;
padding: 5px;
}
label {
float: left;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 0pxpx;
width: 120px;
font-size: 22px;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
}
#error {
font-size: 14px;
}
/* Lists */
li {
font-size: 14px;
margin-left: 10px;
list-style-type: circle;
display:inline;
}
li a {
margin-left: inherit;
}
#like_text {
float: left;
color: #0099CC;
cursor: pointer;
font-size: inherit;
}
.like_list_element {
width: 681px;
float: left;
padding-top: 15px;
margin-left: 0px;
height: 35px;
border-bottom: 1px solid #999999;
}
.like_list_element:hover {
width: 681px;
float: left;
padding-top: 15px;
margin-left: 0px;
height: 35px;
border-bottom: 1px solid #999999;
background-color: #EDEDED;
}
.micro_avatar {
float: left;
width: 30px;
height: 30px;
margin-right: 15px;
margin-top: -7px;
padding: 2px;
background-color: #ffffff;
-moz-box-shadow: 2px 2px 4px #D1D1D1;
-webkit-box-shadow: 2px 2px 4px #D1D1D1;
box-shadow: 2px 2px 4px #D1D1D1;
-moz-border-radius: 2px;
border-radius: 2px;
}
/* "Super" headline */
h1 {
font-weight: bold;
font-style: italic;
font-size: 38px;
color: #666666;
font-family: Georgia, "Times new roman", serif;
}
/* "Medium (bold)" headline */
h2 {
font-size: 20px;
font-weight: bolder;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
}
/* Normal headline (used on profile page) */
.normal_headline {
font-size: 22px;
float: left;
font-weight: bold;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
}
/* "Standard" headline */
h3 {
font-size: 15px;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
}
/* page structure */
/* Container - main content goes here */
#container {
min-height: 100%;
height:100%;
width: 897px;
margin-bottom: 30px;
margin: 0 auto;
}
/* Left (main) content */
#left_content {
float: left;
width: 485px;
font-size: 1em;
padding-left: -15px;
}
ul.statuses{
margin:10px 0;
}
ul.statuses li {
position:relative;
padding:15px 15px 15px 10px;
list-style:none;
font-size:12px;
}
div.tweetTxt{
float:left;
width:400px;
overflow:hidden;
}
ul.statuses a img.avatar{
float:left;
margin-right:10px;
border:1px solid #446600;
}
div.date{
line-height:18px;
font-size:10px;
color:#999999;
}
.question_link{
float:left;
font-weight: bold;
margin-left:40px;
color:blue;
}
#answerText {
float:left;
width:480px;
margin-left:40px;
margin-bottom: 5px;
}
#answerText ul{
margin-left:40px;
}
#answerText li {
list-style-type: circle;
font-size:30px;
}
.answerActions {
float:left;
margin-left:40px;
font-size:9px;
}
.thanks{
font-weight:bold;
}
.content{
float:left;
}
/* Used for seperating content eg. Timeline && photos */
.left_content_seperator {
width: 485px;
float: left;
border-bottom: 1px solid #999999;
margin-top: 15px;
margin-bottom: 30px;
height: auto;
}
/* Used in eg. postphoto.php */
.big_content_seperator {
width: 897px;
float: left;
border-bottom: 1px solid #999999;
margin-bottom: 30px;
}
/* Right side content */
.right_content {
float: right;
width: 200px;
font-size: 14px;
margin-right:80px;
}
/* Used for seperating content eg. Timeline && photos */
.right_content_seperator {
width: 200px;
float: right;
margin-top: 33px;
margin-bottom: 15px;
}
.right_content_seperator_home {
width: 200px;
float: right;
margin-top: 25px;
margin-bottom: 15px;
}
/* For footer + header (outside the main container) */
.small_container {
margin: 0 auto;
width: 900px;
}
/* The bar on the top of the page */
.top_bar {
width: 100%;
height: 50px;
margin-bottom: 30px;
background:none repeat scroll 0 0 black;
}
#search {
width: 502px;
padding: 10px;
height:20px;
margin: 10px 0px 0px -30px;
background-color:#505759;
float:left
}
.question_box{
background: none repeat scroll 0 0 #FFFFFF;
border-color: #CCCCCC #999999 #999999 #CCCCCC;
border-style: solid;
border-width: 1px;
color: #000000;
font: 16px arial,sans-serif;
margin: -5px 0px 0px -5px;
padding: 5px 8px 0px 6px;
width:380px;
height:25px
}
input.blur {
color: #999;
}
#search a {
color: #E5E5E5;
text-decoration: none;
font-weight: bold;
}
#search a:hover {
text-decoration: underline;
}
/* Logotype container */
.logotype {
background-color:#671E1E;
font-size: 20px;
float: left;
color:white;
padding:10px;
margin: 10px 30px 0px 0px;
}
/* The menu on the top of the page */
.top_menu {
float: right;
text-align: right;
background-color: inherit;
color: #ffffff;
margin: 15px 0px 0px 0px;
}
.top_menu a {
color: #E5E5E5;
text-decoration: none;
}
.top_menu a:hover {
text-decoration: underline;
color: inherit;
}
/* Main content + form container on the front page */
.text_box {
margin: 0 auto;
margin-top: 70px;
text-align: center;
width: 590px;
}
/* Box for the iPhone image on the front page */
.iphone_promo {
margin: 0 auto;
margin-top: 70px;
margin-bottom: 30px;
text-align: center;
width: 590px;
}
/* Red arrow next to the iPhone picture */
.arrow {
margin: 0 auto;
margin-left: 210px;
margin-bottom: -145px;
}
/* Typography */
.small_copy {
font-size: 12px;
}
#menu_list ul{
}
#menu_list li{
}
.not_selected {
-moz-border-radius: 5px 5px 5px 5px;
background-image: url("http://d1vgw4v7ja2ido.cloudfront.net/-9dfe92083011731d.gif");
background-position: left center;
background-repeat: no-repeat;
clear: both;
display: block;
font-weight: bold;
padding: 3px 5px 3px 10px;
color: #444444;
cursor: default;
}
.not_selected:hover{
background-color:lightblue;
}
.selected{
-moz-border-radius: 5px 5px 5px 5px;
background-image: url("http://d1vgw4v7ja2ido.cloudfront.net/-9dfe92083011731d.gif");
background-position: left center;
background-repeat: no-repeat;
clear: both;
display: block;
font-weight: bold;
padding: 3px 5px 3px 10px;
background-color: #E0E0E0;
color: #444444;
cursor: default;
}
#menu_list li{
margin-left: inherit;
}
.right_seperator {
width: 200px;
float: left;
border-bottom: 1px dotted #999999;
margin-top: 15px;
margin-bottom: 10px;
height: auto;
}
.light_gray_serif {
font-family: Georgia, "Times new roman", serif;
font-size: inherit;
color: #999999;
font-size: 14px;
}
/* Forms */
#email_form {
width: 285px;
height: 40px;
font-size: 22px;
margin-right: -1px;
outline: none;
font-weight: bold;
color: #999999;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
float: left;
}
#submit_button {
width: 295px;
height: 52px;
font-size: 22px;
font-weight: bold;
margin-left: -1px;
cursor: pointer;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
border: 1px solid #F9AA33;
float: right;
}
#username_form {
width: 448px;
height: 40px;
font-size: 22px;
margin-bottom: 15px;
outline: none;
font-weight: bold;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
float: right;
}
#password_form {
width: 448px;
height: 40px;
font-size: 22px;
margin-bottom: 15px;
outline: none;
font-weight: bold;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
float: right;
}
.standard_big_form {
width: 448px;
height: 40px;
font-size: 22px;
margin-bottom: 15px;
outline: none;
font-weight: bold;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
float: right;
}
/* Big login button */
#login_button {
width: auto;
padding-left: 20px;
padding-right: 20px;
height: 52px;
font-size: 22px;
font-weight: bold;
margin-left: -1px;
cursor: pointer;
color: inherit;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
border: 1px solid #F9AA33;
float: right;
}
#login_button:active {
position: relative;
top: 1px;
}
/* Standard buttons */
.big_button {
width: auto;
padding-left: 20px;
padding-right: 20px;
height: 52px;
font-size: 22px;
font-weight: bold;
cursor: pointer;
color: #333333;
font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
border: 1px solid #F9AA33;
float: right;
}
.big_button:active {
position: relative;
top: 1px;
}
.profile_name_container {
width: auto;
}
.follow_container {
float: left;
width: auto;
margin-top: 7px;
margin-left: 15px;
}
.follow_button {
margin-left: 0px;
text-align: justify;
color: #0099CC;
padding-left: 20px;
padding-right: 4px;
padding-top: 4px;
padding-bottom: 4px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 14px;
background: url(../images/follow-icon.png) no-repeat 4px 6px;
}
.follow_button:hover {
cursor: pointer;
margin-left: -1px;
margin-right: -1px;
background-color: #EDEDED;
border: 1px solid #999999;
background-image: url(../images/follow-icon.png) no-repeat 4px 6px;
}
.unfollow_button {
margin-left: 0px;
text-align: justify;
color: #0099CC;
padding-left: 20px;
padding-right: 4px;
padding-top: 4px;
padding-bottom: 4px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 14px;
background: url(../images/unfollow-icon.png) no-repeat 4px 6px;
}
.unfollow_button:hover {
cursor: pointer;
margin-left: -1px;
margin-right: -1px;
background-color: #EDEDED;
border: 1px solid #999999;
background-image: url(../images/unfollow-icon.png) no-repeat 4px 6px;
}
.push_footer {
margin-bottom: 200px;
}
/* Footer (container) of the page */
.footer {
float: left;
margin-top: 30px;
padding-bottom: 15px;
width: 897px;
height: 49px;
border-top: 1px solid #999999;
}
/* "Photoblogging through events." text. */
.footer_info {
font-size: 14px;
float: left;
margin-top: 15px;
}
/* The link to 'Support & Feature requests' */
.footer_link {
font-size: 14px;
float: right;
margin-top: 15px;
}
/*** Colors ***/
/* Blue gradient (css gradients, #336699 is used for IE and older browsers) */
.blue_gradient {
background: #336699;
background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#336699));
background: -moz-linear-gradient(top, #0099CC, #336699);
}
/* Yellow gradient (for button) #FBAA33 = orange */
.yellow_gradient {
background: #FBAA33;
background: -webkit-gradient(linear, left top, left bottom, from(#FBF16E), to(#FBAA33));
background: -moz-linear-gradient(top, #FBF16E, #FBAA33);
}
.yellow_gradient:hover {
background: #F6D05A;
}
/* Image design */
.photo {
float: left;
min-width: 200px;
min-height: 200px;
padding: 5px;
margin-right: 15px;
margin-bottom: 15px;
background-color: #ffffff;
border: 1px solid #EAEAEA;
-moz-box-shadow: 4px 4px 10px #D1D1D1;
-webkit-box-shadow: 4px 4px 10px #D1D1D1;
box-shadow: 4px 4px 10px #D1D1D1;
}
.photo_thumbnail:hover {
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}
.big_photo_container {
text-align: center;
width: 666px;
margin-bottom: 15px;
}
.event_name {
height: 20px;
margin-right: 5px;
width: 169px;
float: left;
}
.trash_can {
height: 17px;
width: 14px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-top: 3px;
padding-left: 2px;
float: right;
}
.trash_can:hover {
cursor: pointer;
margin: -1px;
background-color: #EDEDED;
border: 1px solid #999999;
}
/* Image design */
.big_photo {
margin-top: 15px;
max-width: 656px;
padding: 5px;
background-color: #ffffff;
border: 1px solid #EAEAEA;
-moz-box-shadow: 4px 4px 10px #D1D1D1;
-webkit-box-shadow: 4px 4px 10px #D1D1D1;
box-shadow: 4px 4px 10px #D1D1D1;
}
.profile_photo {
float: left;
width: 50px;
height: 50px;
margin-right: 15px;
margin-bottom: 15px;
padding: 5px;
background-color: #ffffff;
-moz-box-shadow: 4px 4px 10px #D1D1D1;
-webkit-box-shadow: 4px 4px 10px #D1D1D1;
box-shadow: 4px 4px 10px #D1D1D1;
-moz-border-radius: 5px;
border-radius: 5px;
}
.profile {
padding-top: 15px;
}
/* Heart sign */
.fav {
margin-left: 0px;
color: #0099CC;
padding-left: 20px;
padding-right: 4px;
padding-bottom: 4px;
-moz-border-radius: 5px;
border-radius: 5px;
background: url(../images/heart-icons.png) no-repeat 4px 4px;
}
.fav:hover {
cursor: pointer;
margin-left: -1px;
margin-right: -1px;
background-color: #EDEDED;
border: 1px solid #999999;
background: url(../images/heart-icons.png) no-repeat 4px -13px #EDEDED;
}
.highlight {
margin-left: 0px;
color: #0099CC;
cursor: pointer;
padding-left: 20px;
padding-right: 4px;
padding-bottom: 4px;
-moz-border-radius: 5px;
border-radius: 5px;
background: url(../images/heart-icons.png) no-repeat 4px -13px;
}
.highlight:hover {
cursor: pointer;
margin-left: -1px;
margin-right: -1px;
background-color: #EDEDED;
border: 1px solid #999999;
background: url(../images/heart-icons.png) no-repeat 4px 4px #EDEDED;
}
/* Heart sign */
.likes {
font-size: inherit;
}
/* Views */
.views {
padding-left: 20px;
float: right;
}
/* Costum */
/* Removes underlines for eg. buttons */
.no_underline:hover {
text-decoration: none;
}
/* Margins */
.small_margin_top {
margin-top: 15px;
}
.negative_margin_top {
margin-top: -4px;
}
.custom_margin_top {
margin-top: 48px;
}
.no_margin_left {
margin-left: 0px;
}
.no_margin_top {
margin-top: 0px;
}
/* Paddings */
.no_padding_top {
padding-top: 0px;
}
.normal_font_weight {
font-weight: normal;
}
.photo_label {
margin-right: auto;
padding-left: 6px;
text-align: left;
}
/* button basics */
a.minibutton {
display:inline-block;
height:23px;
padding:0 0 0 3px;
font-size:11px;
font-weight:bold;
color:#333;
text-shadow:1px 1px 0 #fff;
background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 0 0 no-repeat;
white-space:nowrap;
margin-right:4px;
border:none;
overflow:visible;
cursor:pointer;
text-decoration:none;
}
a.minibutton>span {
display:block;
height:23px;
padding:0 10px 0 8px;
line-height:23px;
background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 100% 0 no-repeat;
}
a.minibutton:hover, a.minibutton:focus {
color:#fff;
text-decoration:none;
text-shadow:-1px -1px 0 rgba(0,0,0,0.3);
background-position:0 -30px;
}
a.minibutton:hover>span, a.minibutton:focus>span {background-position:100% -30px;}
a.minibutton.mousedown{background-position:0 -60px; }
a.minibutton.mousedown>span{background-position:100% -60px; }
/* answer button */
a.answer {
display:inline-block;
height:23px;
padding:0 0 0 3px;
font-size:18px;
font-weight:bold;
color:#333;
text-shadow:1px 1px 0 #fff;
background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 0 0 no-repeat;
white-space:nowrap;
margin-right:4px;
border:none;
overflow:visible;
cursor:pointer;
text-decoration:none;
}
a.answer>span {
display:block;
height:23px;
padding:0 10px 0 8px;
line-height:23px;
background:url(http://github.com/images/modules/buttons/minibutton_matrix.png) 100% 0 no-repeat;
}
a.answer:hover, a.answer:focus {
color:#fff;
text-decoration:none;
text-shadow:-1px -1px 0 rgba(0,0,0,0.3);
background-position:0 -30px;
}
a.answer:hover>span, a.answer:focus>span {background-position:100% -30px;}
a.answer.mousedown{background-position:0 -60px; }
a.answer.mousedown>span{background-position:100% -60px; }
/* with icon */
a.btn-download .icon {
float:left;
margin-left:-4px;
width:18px;
height:22px;
background:url(http://github.com/images/modules/buttons/minibutton_icons.png?v20100306) 0 0 no-repeat;
}
a.btn-download .icon {background-position:-20px 0;}
a.btn-download:hover .icon, a.btn-download:focus .icon {background-position:-20px -25px;}
#profile_pic{
padding:5px;
border:1px #AAAAAA solid;
float:left;
}
ul.stats{
width:auto;
float:left;
display:inline;
margin: 20px 0px 0px 0px;
}
ul.stats li{
display:inline-block;
text-align:left;
}
.stats_number{
font-weight:bold;
font-size:10px;
}
.stats_text{
font-size:9px;
color:#505759;
}
ul.followingBar{
width:auto;
float:left;
margin: 0px 0px 0px 0px;
}
.watchingTopics{
float:left
}
ul.followingBar li{
display:block;
margin: 10px 0 0 0 ;
border-bottom:1px #999999 solid;
}
.topicFollow{
padding-bottom:10px;
font-weight:bold;
float:left;
}
.related_questions{
padding-bottom:10px;
font-weight:bold;
}
.panel
{
margin-left:50px; margin-right:50px; margin-bottom:5px; background-color:#D3E7F5; padding:6px; width:400px;
display:none; float:left;
}
.load_comment
{
margin-left:50px; margin-right:50px; margin-bottom:5px; background-color:#D3E7F5; height:auto; padding:6px; width:400px; font-size:12px;
float:left;
}
.flash_load
{
margin-left:50px; margin-right:50px; margin-bottom:5px;height:20px; padding:6px; width:400px;
display:none; }
.loadplace{
margin-top:70px;
}
<ul class="statuses">
<li>
<div id="answerText">
<ul>
<li>google</li>
<li>yahoo</li>
<li>quora</li>
</ul>
</div>
</li>
</ul>
li only gets its list-style-related styles applied if it has display: list-item
Your style for <li> is wrong:
li {
font-size: 14px;
margin-left: 10px;
list-style-type: circle;
display: inline;
}
should be
li {
font-size: 14px;
margin-left: 10px;
list-style-type: circle;
}
Try ensuring there are no:
list-style-type: none;
in your css file.
You attributed display:inline; to the LI tag, which explains why they're showing up horizontally instead of vertical. Get rid of that attribute.
I found that having overflow-x: hidden; (which I had applied to *) was hiding my bullets.
list not display bullet points
list-style-type:none;
Hey , you may have a problem in selector for example we have this code for list
some text
soke text
so our css code become like this
#ls{ list-style-type: circle;}
select with id value if you have multiple list .
My issue was caused by:
::marker {
content: none;
}
I was able to resolve by updating the CSS for my element to include:
li::marker {
content: initial;
}