after i had fixed my white screen of death last week.. when i open my website to continue developing today.. i noticed that the footer banner instead of covering only about 35px at the bottom of the screen... with a white space between the red header and the blue footer.... but now what i see is a massive blue footer without any stitch of white space in between the header and footer!..
this is the link to my website: http://hoho25974.staging-cloud.partnerconsole.net/
style.css coding.
'* =23. Footer
-------------------------------------------------------------- */
.site-footer {
background-color: #fff;
color: #afafaf;
font-size: 14px;
text-align: center;
vertical-align: middle;
}
.site-footer a {
color: #afafaf;
}
.site-info {
padding: 10px 0;
margin-top: 10px;
border-top: #eee solid 1px;
}
#colophon ul {
list-style-type: none;
padding-left: 0;
list-style-position: inside;
}
#sidebar-footer {
text-align: left;
word-spacing: -0.29em;
}
/* === Footer Menu === */
.footer-menu {
display: inline-block;
float: left;
margin: 0 0 10px;
}
.footer-menu ul {
float: left;
list-style: outside none none;
margin: 0;
padding: 0;
}
.footer-menu ul li{
display:inline-block;
padding-right: 10px;
}'
footer-banner.css
#colophon {
padding: 40px 0;
margin-top: 0px;
border-top: none;
}
i would appreciate any pointers in order to reset the footer banner into its usual height.. i am not sure if i could use the max-height function or? and i am using the tesseract theme.
thanks very much in advance.
Related
I've created a nav menu that is unnecessarily adding extra space to the right side of it. When the page is made smaller it adds a scroll bar to the bottom of the page which makes the page uncentered. After some digging in Dreamweaver it looks like the UL element's surrounding box is not centered with the actual navigation menu. It juts off to the right and seems to be causing the problem. How to I get this centered with the nav menu?
I've also included a fiddle below.
nav {
float: left;
width: 100%;
}
ul {
float: left;
list-style: none;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
ul li {
display: block;
float: left;
list-style: none;
position: relative;
right: 50%;
margin: 0px 0px 0px 0px;
padding: 5px 30px;
color: white;
line-height: 1.3em;
}
.main-nav li a:hover {
border: solid 1px black;
}
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
border: solid 1px transparent;
padding: 5px 10px;
}
<nav class="nav">
<ul class="main-nav">
<li>HOME</li>
<li>ABOUT</li>
<li>MUSIC</li>
<li>STORE</li>
<li>LIVE</li>
<li>CONTACT</li>
</ul>
<nav>
View on JSFiddle
Simply add in your nav the overflow property:
nav {
float: left;
width: 100%;
overflow-x: hidden;
}
It seems like there's too much padding in between the menu items. kick that down in the css block:
ul li {
display: block;
float: left;
list-style: none;
position: relative;
right: 50%;
margin: 0px 0px 0px 0px;
padding: 5px 30px; //first parameter is top/bottom, the second parameter is left/right. kick it down to something like 5px 10px;
color: white;
line-height: 1.3em;
}
Take out the right:50%; and for margin, use "margin:0 auto;"
the auto will auto-center the nav
You shouldn't use floats or lefts to align your navbar. Instead try doing this: It makes the navbar centered and no scroll is appearing for small devices. Update your ul and li class to this:
ul {
list-style: none;
padding: 0;
position: relative;
text-align: center;
}
ul li {
display: inline-block;
list-style: none;
position: relative;
margin: 0px 0px 0px 0px;
padding: 5px 30px;
color: white;
line-height: 1.3em;
text-align: center;
}
Furthermore, if you want your navbar to appear in a list form for small devices, simply add this media query for your preferred range:
#media (max-width: 480px) {
ul li {
display: block;
list-style: none;
position: relative;
margin: 0px 0px 0px 0px;
padding: 5px 30px;
color: white;
line-height: 1.3em;
text-align: center;
}
}
I'm trying to increase the top and bottom padding in the following, but can't get it to work. I.e. notice the padding top and bottom code in ul.navbar li a. It has no effect. What's an alternative? Please advise.
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size: 90%;
text-align: center;
}
ul.navbar li {
margin: auto;
display: inline;
border-right: 1px solid #ffb366;
}
ul.navbar li:first-child {
border-left: 1px solid #ffb366;
}
ul.navbar li a {
display: inline;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 30px;
padding-bottom: 30px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>Home</li><li>Photos</li><li>Videos</li><li>Logout</li>
</ul>
I don't want to disturb the navigation bar's layout in any way - hence can't include the padding top and bottom option in <ul> - that messes up the layout and the hover both.
9.4.2 Inline formatting contexts
In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes.
You can set it to inline block, if you need to apply vertical paddings etc.
ul.navbar li a {
display: inline-block;
}
inline elements don't have top and bottom padding. If you want to these padding you must use block or inline-block elements:
ul.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ff9933;
font-size: 90%;
text-align: center;
}
ul.navbar li {
margin: auto;
display: inline-block;
border-right: 1px solid #ffb366;
}
ul.navbar li:first-child {
border-left: 1px solid #ffb366;
}
ul.navbar li a {
display: inline-block;
color: white;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 30px;
padding-bottom: 30px;
text-decoration: none;
}
ul.navbar li a:hover {
background-color: #e67300;
}
<ul class="navbar">
<li>Home</li><li>Photos</li><li>Videos</li><li>Logout</li>
</ul>
I'm curious why my 'homepage' link keeps shifting over. I've made a fiddle of the problem:
jsfiddle.net/nbf8fwdv/
Thanks for the help. I'm still getting the hang of semantics and proper usage in CSS, so if you see any glaring problems with my code that only a beginner would make, please let me know. Thanks for the help in advance.
In order to prevent the homepage from shifting on hover, you'll want to remove this property:
max-width: 75px;
from this class:
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
max-width: 75px;
text-align:center;
}
Because the homepage list item is naturally greater than 75px, the max-width property is actually reducing it's width on hover.
You can write a class like bootstrap
body {
background-color: white;
font-family: PT Sans, sans-serif;
text-shadow: 1px 1px rgba(166,166,166,.2);
}
header {
background: white;
width: 100%
padding: 40px 0;
color: black;
text-align: center;
}
a {
text-decoration: none;
color: black;
font-size: 1.0em;
letter-spacing: 2px;
}
nav {
box-shadow: 1px 1px 10px rgba(166,166,166,.2);
}
nav ul {
background-color: rgba(253,235,193,.3);
overflow: visible;
color: white;
padding: 0;
text-align: center;
margin: 0;
position: relative;
}
nav ul li {
display: inline-block;
padding: 20px 40px;
position: relative;
}
nav ul ul {
display: none;
}
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
text-align:center;
}
nav ul li:hover ul{
display: block;
margin-top: 20px;
}
nav ul li:hover li{
margin-left: -40px;
margin-top:-15px;
text-align: center;
float: left;
clear: left;
}
.portfolio_menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}
To actually save your other links by shifting over when hover over the "portfolio", here is my 2 cents. http://jsfiddle.net/nbf8fwdv/5/
nav ul ul {
display: none;
position:absolute;
left:0;
}
I've been working on the following website for my university: http://www.ecu.edu/english/tpc and have developed the layout that you currently see upon visiting it. It looks ok across browsers on the desktop, but I'm having trouble getting it to be flexible with smaller screens (such as an iPhone). I've attempted to adjust the max-width settings in a few places and I've had no luck. The specific issues are that the two horizontal menus at the top (in the HTML/CSS they are navigation and navigation2) and the content on the right (which are DTs contained in the sidebar div) seems to have fixed sizes which thus break the layout on smaller screens. Any suggestions are greatly appreciated, and the full CSS can be found here: http://jsfiddle.net/dSPdB/
/* -------- Horizontal Navigation -------- */
#navigation {
float: left;
margin: .5em 0 0 0;
position: relative;
padding: .5em 0;
text-transform: uppercase;
background-color: #592a8a;
}
#navigation ul {
text-align: center;
padding: 0;
margin: 0;
list-style: none;
}
#navigation li {
font-family: 'Noto Sans', sans-serif;
display: inline;
list-style: none;
display: block;
float: left;
width: 11em;
max-height: 2em;
text-align: center;
padding: .5em 0 0 0;
}
#navigation li:first-child {
border-left: 0;
}
#navigation li:last-child {
border-right: 0;
}
#navigation li a {
color: #fff;
text-decoration: none;
}
#navigation li a:hover {
color: #fff;
border: 0;
text-decoration: underline;
}
/* --------------------------------------- */
/* -------- Navigation 2 -------- */
#navigation2 {
float: left;
margin: 0 0 0 0;
position: relative;
padding-left: 5.4em;
text-transform: uppercase;
}
#navigation2 ul {
text-align: center;
padding: 0;
margin: 0;
list-style: none;
}
#navigation2 li {
font-weight: bold;
display: inline;
list-style: none;
display: block;
float: left;
max-width: 3em;
max-height: 2em;
text-align: center;
padding: .5em 0 0 0;
margin-right: 1em;
}
#navigation2 li:first-child {
border-left: 0;
}
#navigation2 li:last-child {
margin-right: 0;
}
#navigation2 li a {
color: #fff;
text-decoration: none;
}
#navigation2 li a:hover {
color: #fff;
border: 0;
text-decoration: underline;
}
/* --------------------------------------- */
Never mind regarding the media query not working, I didn't place it at the bottom of the CSS (duh!)
I would recommend you look into media queries.
Media queries are not all that difficult to use. You still have your regular CSS and on the bottom, you add:
#media only screen and (max-device-width: 480px) {
...
}
Inside the curly braces, you specify only the changes you want IF the screen is narrower than 480px.
#media only screen and (max-device-width: 480px) {
p {
color: red;
}
}
This would change all paragraph text to red, as soon as you make your browser window narrower than 480px. Of course, this is a little silly example. Most of the time you are more concerned about width or display of certain elements.
In your case, you probably want to target the navigation divs in those cases and have them behave differently, i.e.:
#media only screen and (max-device-width: 480px) {
#navigation2 {
float: none;
clear: both;
}
}
Note, the above is probably not what you want. I just did some dummy changes to show what is possible.
So basically I need to produce a menu like this in Wordpress:
Where the red bar is the width of the page and not fixed so can shrink with resize.
And the submenu is centred
I currently have:
And the CSS is:
#access {
clear: both;
display: block;
margin: 0 auto -10px;
width: 100%;
text-align:center;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
margin-top: 0.3em;
padding-left: 0;
display:inline-block;
/*Font*/
letter-spacing:1px;
text-transform:uppercase;
color: #FFF;
}
#access li {
float: left;
position: relative;
}
#access a {
color: #eee;
display: block;
line-height: 2.333em;
margin: 0 1.2125em;
margin-bottom: 0.5em;
padding-top: 0.5em;
text-decoration: none;
/* Same colour as background */
border-bottom: 1px solid #000;
}
#access ul ul {
display: none;
position: inherit;
top: 0; left: 0;
margin: 0 auto;
width: 100%;
z-index: 9999;
float: left;
}
#access ul ul a {
color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
display: inline-block;
}
#access ul ul li {
display: inline-block;
}
Any help
Check this jsfiddle created for you
I had defined a new division sub-menu-bg after the menu code and given a red background to it. Also i had edited your CSS to achieve correct horizontal drop-down menu.
Hope this will solve your problem.