At this Test Link I seek to install header and main site navigation on to the top of a blog script.
My clear:both; worked on the main site script but throws everything to the side now. Have tried numerous fixex without success! Thanks in advance for ant pointers to resolve. Clear:both; is in the footer.
/*/////////////////////MAIN SITE NAVIGATION BAR////////////////////*/
.dropnav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #3b3b44; /*Navigation Active Background*/
border-top: 1px solid #ccf;
}
.dropnav ol {
list-style: none;
width: 950px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.dropnav li {
float: left; }
.dropnav li a {
display: block;
padding: 8px 25px;
text-decoration: none;
font-family: Helvetica, arial, sans-serif;
font-size: 20px;
font-weight: bold;
color: #fff; /*Active Text Color*/
border-right: 1px solid #ccf;
border-bottom: none;
}
.dropnav li:first-child a {
border-left: 2px solid #ccf; }
.dropnav li a:hover {
color: #000; /*Active Hover Color*/
background-color: #8db3ff; } /*Navigation Hover Background*/
/*////////////////STYLING TO DROPDOWN MENU//////////////////////*/
.dropnav li ol {
display: none;
width: 13em; } /*Define width of dropdown button*/
.dropnav li:hover ol {
display: block;
position: absolute;
margin: 0;
padding: 0; }
.dropnav li:hover li {
float: none; }
.dropnav li:hover li a {
background-color: #3b3b44; /*Navigation Active Background*/
border-bottom: 1px solid #ccf;
border-top: 1px solid #ccf;
border-right: 1px solid #ccf;
border-left: 1px solid #ccf;
font-size: 16px;
color: #fff; } /*Text Color*/
.dropnav li li a:hover {
color: #000;
background-color: #8db3ff; /*Navigation Hover Background*/
}
/*//////////////////END MAIN SITE NAVIGATION////////////////////*/
#container {
width: 950px;
padding-left: 0px;
padding-right: 0px;
margin: 1px auto;
background: #fafafa;
}
#header {
width: 950px;
margin-top: 15px;
}
#content {
padding-left: 5px;
padding-right: `5px;
}
#footer {
clear: both;
background: #3b3b44;
color: #ccf; /*text*/
/*margin-top: 10px;*/
margin-bottom: 10px;
padding-top: 5px;
padding-left: 15px;
padding-bottom: 5px;
border-top: 2px solid #cc0;
line-height: 1.2em;
}
you have two id's with the same name as container. you id needs to be unique and also id fieldset and i guess all your tags are not closed properly very those.
you can put a clear div after you menu to clear out this row. It is the same principle use in the 960 grid sytem.
www.960.gs
But here is a link to see the code and the result.
http://jsfiddle.net/etienne_carre/9x2P3/
Thx
Related
Currently there are no options in the theme to align TABS centered. I tried to play with the CSS in the stylesheet (style.css), but with no luck.
how can I make the tabs center aligned?
/* tab */
.tab-set {
margin-bottom: 50px;
}
.tab-set ul.tabs-titles {
padding: 0;
height: 32px;
margin: 0;
clear: right;
}
.tab-set .tabs-titles li {
padding: 15px 35px;
color: #fff;
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
border-right: 1px solid #f6f6f6;
float: left;
list-style-type: none;
cursor: pointer;
}
.tab-set .tabs-titles li:last-child {
border-right: none;
}
.tab-set .tabs-titles li.current {
padding: 15px 35px;
position: relative;
top: 1px;
color: #575a5c;
background: #f6f6f6;
}
.tab-set .tab-content {
padding: 20px 20px 10px;
background-color: #f6f6f6;
clear: both;
}
.tab-content p {
padding: 0;
}
.tab-set.white .tabs-titles li {
border-right: 1px solid #fff;
}
.tab-set.white .tabs-titles li.current {
background: #fff;
}
.tab-set.white .tab-content {
background-color: #fff;
}
It's a bit hard to guess the issue since there's no html to make sure the structure is correct. For sake of cleaner code, I'd do this and update the following:
.tab-set ul.tabs-titles {
padding: 0;
margin: 0;
width: 100%;
display: inline-block;
text-align: center;
}
.tab-set .tabs-titles li {
padding: 15px 35px;
color: #fff;
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
border-right: 1px solid #f6f6f6;
display: inline-block;
}
.tab-set .tabs-titles li.current {
color: #575a5c;
background: #f6f6f6;
}
Try not ever set a fixed height unless needed because that's how items can look all messy. Have the padding/line-height dictate the height. I also removed some duplicates. For example, applying the same padding to .current was just doing the same thing. Hope this helps.
EDIT:
Here's my codepen to see it in action: https://codepen.io/thecenteno/pen/LYYgMpv
I'm learning how to code Wordpress themes currently, and I'm having trouble centering my navigation menu. It moves too far to the right. I have included an image to illustrate the problem with the code that I have presented.
Here is a link to a screenshot of the problem: http://i59.tinypic.com/8z1m2o.png
body {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 14px;
color: #333;
}
a:link,
a:visited {
color: #000;
text-decoration: none;
}
p {
line-height: 14px;
}
/* General Layout */
div.container{
max-width: 960px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
article.post {
border-bottom: 1px solid #bbbbbb;
}
article.post:last-of-type{
border-bottom: none;
}
/* Header */
.site-header {
border-bottom: 2px solid #999;
padding-top: 10px;
}
/* Footer */
.site-footer {
margin-top: 0px;
border-top: 2px solid #999;
margin-left: auto;
margin-right: auto;
}
/* Navigation */
.site-nav {
position: fixed;
left:50%;
}
.site-nav ul{
background-color: rgba(255,255,255,0.8);
padding: 0px;
margin: 0px;
}
.site-nav ul li{
text-align: center;
display: inline-block;
overflow:hidden;
text-decoration: none;
margin-right: 10px;
padding-right: 10px;
border-right: 1px solid #DDD;
}
.site-nav ul li:last-of-type {
border-right: none;
}
.site-nav has position: fixed, left: 50% so the left side of the element will be positioned in the middle of the screen. Remove this rule or give the element margin-left: -X where X is equal to half of .site-nav's width if you must use fixed positioning.
.site-nav {
width: 100%
position: fixed;
margin: 0;
}
.site-nav ul{
position: relative;
background-color: rgba(255,255,255,0.8);
padding: 0px;
margin: 0px auto;
}
I'm doing a CSS exercise wherein the old BBC's site is to be cloned. The original problem was that the white bottom borders of the #topmenu li's appeared wonky (I included this code in the page below as a comment)
That has been fixed by adding the right red border using pseudo elements. However, the anchor tags have been disabled. I think it's due to the red border's "absolute" position, but I can't get the menu to appear as it should without the absolute position. Now, it looks how I want it, but the top menu links don't work anymore: http://jsbin.com/poginowibe/1/edit?output
Any ideas on how this can get sorted out? Any help would be appreciated.
/* This is the original code when the white bottom borders appeared weird */
#topmenudiv li {
list-style: none;
height: 100%;
padding: 14px 15px 11px 15px;
border-right: 1px solid #990800;
float: left;
position: relative;
z-index: 1;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
padding: 14px 15px 8px 15px;
border-bottom: 3px solid #FFFFFF;
outline: 0;
}
/* This is the code after the wonky appearance is fixed but the tags were disabled */
#topmenudiv li {
list-style: none;
height: 100%;
padding: 14px 15px 11px 15px;
float: left;
position: relative;
z-index: 1;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
padding: 14px 15px 8px 15px;
border-bottom: 3px solid #FFFFFF;
outline: 0;
}
#topmenudiv li::after {
content: "";
position: absolute;
bottom: 0; top: 0; left: 0; right: 0;
border-right: 1px solid #990800;
}
With some tweaks to Joerg's code, I was finally able to make it work!
#topmenudiv ul {
margin-top: 0px;
padding: 0;
}
#topmenudiv li {
list-style: none;
height: 38px;
line-height: 40px;
float: left;
position: relative;
z-index: 3;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
border-bottom: 3px solid #FFFFFF;
outline: 0;
}
#topmenudiv li a {
height: 100% !important;
font-size: 1em;
line-height: 40px;
border-right: 1px solid #990800;
display: block;
padding-left: 15px;
padding-right: 15px;
}
#topmenudiv li a:hover {
text-decoration: none;
}
Thanks a bunch! :)
Remove the #topmenudiv li::after from your css and change #topmenudiv li in this way:
#topmenudiv li {
list-style: none;
height: 100%;
padding: 14px 15px 11px 15px;
float: left;
position: relative;
z-index: 1;
border-right: 1px solid #990800;
}
Update
Use this code and see the remarks below:
#topmenudiv ul {
height: 40px;
margin: 0;
padding: 0;
}
#topmenudiv li {
list-style: none;
height: 40px;
float: left;
border-bottom: 3px solid #FFFFFF;
}
#topmenudiv li:hover {
color: #ffffff;
text-decoration: none;
border-bottom: 3px solid blue;
outline: 0;
}
#topmenudiv li a {
height: 40px !important;
font-size: 1em;
line-height: 40px;
border-right: 1px solid #990800;
display: block;
padding-left: 15px;
padding-right: 15px;
}
#topmenudiv li a:hover {
text-decoration: none;
}
Remove all your topmenudiv stuff in CSS, also this one above the comments.
I made the border-bottom line for hovering blue, so you can see that it works.
You are using an image on the right site of the topbar, #sphere. This should be an background-image in CSS, so you have not to handle with z-index and then the rest of the links will work.
What I have done is, give the a tags some height and line-height and bind the red border-left to it. I also removed some paddings and margins.
I have 2 comments on http://11klassniki.ru/post_ccuz.php?id_ccuz=19. One of them is reply for first comment.
He has
#commentRoot li
{
margin: 7px 0 7px 10px;
}
I tried to give him
background-color:blue;
but this color reflect for all comments. I need to give background-color only for replies.
css
ul
{
list-style-type: none;
width: 700px;
}
#commentRoot li
{
margin: 7px 0 7px 10px;
}
#commentRoot li a
{
margin-left: 500px;
}
#commentRoot li .commentContent
{
border: solid 1px #ccc;
padding: 5px 10px;
border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
margin: 5px 10px;
}
#commentRoot li h6
{
color: #085991;
}
#commentRoot li h6 span
{
color: #666; font-size: 11px;
margin-left: 20px;
}
#commentRoot li .comment
{
margin-top: 5px;
}
#commentRoot li a.reply
{
font-size: 11px;
}
/* Формочка */
#newComment, .loader {display: none;}
#cancelComment
{
float: right; width: 20px; color: red; cursor: pointer;
}
#newComment input
{
height: 26px; width: 250px; padding: 0 5px ; margin-left: 50px;
border: solid 1px #ccc;
}
#newComment textarea
{
width: 350px; height: 100px; margin-left: 5px;
vertical-align: middle; border: solid 1px #ccc;
}
#newComment button
{
margin-left: 102px; margin-top: 10px;
}
You could do something like (check JSFiddle here)
#commentRoot li .commentContent {
border: none;
padding: 5px 10px;
margin: 5px 10px;
}
#commentRoot li ul li .commentContent {
border: solid 1px #ccc;
padding: 5px 10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 5px 10px;
}
you can try use specificity of the elements, like this:
#commentRoot li ul .commentContent {
background-color: blue;
}
Look a demo here: http://jsfiddle.net/LaLc4ryb/
Hi i have a simple question, what am i doing that is doubling the height of the menu bar and applying it to the area bellow it?
Simple enough thanks again
http://www.mcdanielstudio.com/
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff; }
#main_content {
clear: both;
margin-top: 0px;
border-left-color: #000000;
border-left-style: dashed;
border-left-width: 2px;
margin: 0px;
border-bottom: 0px;
border-right: 0px;
border-top: 0px;
border-left: 0px;
float: left;
font-size: 12px;
color: #000000;
text-align: left;
background-color: #FFFFFF;
padding-bottom: 3em;
}
Remove margin-bottom:3em from your #nav
You have a 3em bottom margin on #nav.