I just dont get why the background is on top of the text..
I'd really appreciate ANY help..
THX
html
<body>
...
<img...>
<div>
<div>
drop down list
<div>
<div>
body>img{
heres the background options, wanted it to adjust in height and width
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#wrap{
max-width: 1000px;
margin: 20px 0px;
display:-webkit-box;
-webkit-box-flex: 1;
padding-top: 30px;
}
/* link styles und so */
a:hover{
cursor:pointer;
}
a{
text-decoration: none;
font-family: 'Sintony', sans-serif;
color:black;
}
/* drop down list */
.clear{
clear:both;
}
ul#nav{
list-style-type: none;
padding: 0;
margin-top:60px;
}
ul#nav li{
background-color: white;
float:left;
}
ul#nav li a{
display:block;
padding: 5px 10px;
color:#000;
text-decoration: none;
border-bottom: 1px solid #ccc;
list-style-type: none;
}
ul#nav li a:hover{
background-color: #aaa;
}
ul#nav li ul li{
float: none;
list-style-type: none;
}
ul#nav li ul{
position: absolute;
display:none;
}
ul#nav li:hover ul{
display: block;
}
Set the background using CSS
body
{
background-image:url('yourfilepath');
background-color:#cccccc;
}
If you don't want to use background-image element, and you want to use the img element, then you should work with the z-index property. Here you can play with it.
Here the example: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex
Related
hello guys I'm new to programming and I can't seem to find any related search about what I am trying to do.
Here's an image
can someone please help me.
My code is like this in my li and ul
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
Essentially you are only needing to add a border, and then a border-radius in CSS to curve the edges.
Here's a basic example, based on what you have:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float:right; /* Float the main list element instead */
}
li {
display:inline-block; /* Don't float your list items, float the list itself */
}
li a {
display: block;
color: white;
text-align: center;
padding: 5px;
text-decoration: none;
margin:0 10px; */ I've changed the padding and margin of the list items to help them display more like the image*/
}
/* You need a border and border-radius to curve it */
li:first-child {
border:2px solid #fff;
border-radius:15px;
}
https://jsfiddle.net/leecollingsco/sj2utx7c/
If you want circle in all li elements on selection than use:
ul li {
border:2px solid #fff;
border-radius:15px;
}
I seem to be having a problem with my CSS in making the entire menu item clickable, not just the text.
As you can see from the highlighted screenshot, the menu does not extend to 100% height of the div. As a result, only the text of the menu is clickable, not the whole box around it. How do I make the entire box clickable?
(Code Below)
#header
{
background-color: black;
}
#header .menu
{
display: inline;
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%
position: relative;
text-transform:uppercase;
}
#header .menu ul{
display: inline-block;
}
#header .menu li {
display: inline-block;
padding: 20px;
width: auto;
color: white;
height: 100%;
position: relative;
}
#header .menu a{
display: block;
width: 100%
height: 100%;
text-decoration: none;
color: white;
font-family: Helvetica;
}
#header .menu ul li a{
display: block;
}
#header .menu li a{
position: relative;
}
Thanks.
Use this piece of CSS
#header .menu
{
display: inline;
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%
position: relative;
text-align: center;
text-transform:uppercase;
}
#header .menu li { display: inline; float:left; }
#header .menu li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
font-family: Helvetica;
}
#header ul li a:hover
{
color: Yellow;
background-color: #000;
}
Here is a Demo
I have a web page with a sticky header, sticky sidebar and sticky footer but can't get the content to be padded on the right(padding just gets ignored) and my in-page links don't work correctly. I want to do this with CSS ONLY.
http://jsfiddle.net/C7v9f/
I know there are many other similar questions but their solutions either don't work; their too old; they've never been answered; they use jQuery, JavaScript etc. or they fall apart after adding things like line-height or padding.
html, body {
height: 100%;
color: #fff;
}
body, p {
margin: 0;
padding: 0;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
overflow: auto;
background: #888;
}
#header {
height: 55px;
background: #222;
position: fixed;
width: 100%;
z-index: 4;
}
#SC-wrap {
float: left;
margin-bottom: 40px;
}
/* BEGIN HEADER NAV */
#nav {
padding-left: 32%;
}
#nav li{
position: relative;
display: inline;
color: white;
}
#nav a {
display: inline-block;
padding:10px;
}
#nav ul {
position: absolute;
/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
left:-9999px;
margin:0;
padding:0;
text-align: left;
text-decoration: none;
}
#nav ul li {
display: block;
}
#nav li:hover ul {
left:0;
}
#nav li:hover a {
text-decoration: none;
background: darkgrey;
}
#nav li:hover ul a {
text-decoration: none;
background: #B8B8B8;
}
#nav li:hover ul a:hover{
text-decoration: none;
background: #CCCCCC;
}
#nav ul a{
white-space: nowrap;
display: block;
border-bottom:1px solid #ccc;
color: white;
text-decoration: none;
}
#nav a {
text-decoration:none;
color: blue;
}
#nav a:hover {
text-decoration:none;
background: #f1f1f1;
color: blue;
}
/* END HEADER NAV */
#sidebar {
background-color: green;
width: 150px;
height: 100%;
position: fixed;
line-height: 2em;
font-size: 1.2em;
z-index: 2;
text-align: center;
padding-top: 6%;
overflow-y: auto;
}
#sidebar a {
text-decoration: none;
}
#sidebar a:hover {
background-color: grey;
}
#content {
padding-right: 250px;
width: 100%;
padding-top: 100px;
font-size: 1.2em;
line-height: 1.6em;
z-index: 1;
text-align: left;
padding-left: 200px;
}
#footer {
position: fixed;
bottom: 0px;
height: 40px;
width: 100%;
background: #222;
z-index: 4;
}
The padding on the right is there, the content is just too wide. To make the padding not be included in the width of the element use box-sizing:border-box Demo
#content {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
... Your other styles ...
}
I recently built my first website (with much trial and error) and was quite pleased until I noticed that when you scroll down the page a little it creates a gap in the navigation so you can't click on the dropdowns. I'm going crazy trying to fix it. Can anyone please help? The site is at: http://lamplighters.org/education/smw.html
it appears to be an position issue that is set witht the element on the css. It would help to see your html and css code.
I can tell you that it has to do with the fact you used position: fixed. You have a series of other problems with your CSS as well.
I inspeceted the page and found a lot of things that didn't come together well for the navigation. Good housekeeping is not in order.
#nav, #nav ul {/*By doing this you are setting these attributes to both the nav div and the nav ul*/
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
text-align: center;
}
#nav, #nav ul {/*By doing this you are setting these attributes to both the nav div and the nav ul. This is redundant and should be consolodated into a single #nav, #nav ul, if you are going to use these assigned attributes. */
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
}
ul {/*By doing this you are only targeting any ul on the page*/
list-style: none outside;
}
ul, ol {/*By doing this are targeting both ordered lists and unordered lists to have these attributes*/
margin-bottom: 20px;
}
ol, ul {/*By doing this are targeting both ordered lists and unordered lists to have these attributes*/
list-style: none;
}
#nav li {
float: left;
width: 137px;
text-transform: capitalize;
display: inherit;
position: relative;
}
li {
line-height: 18px;
margin-bottom: 12px;
}
You may want to wipe your nav css clean and start from scratch.
I pulled a css file and put it below. hope this helps. Good luck with your sytle sheets in the future.
#menu{
width: 960px;
margin: 50px 0 0 0;
padding: 10px 0 0 0;
list-style: none;
}
#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a{
float: left;
height: 25px;
padding: 0 60px;
text-decoration: none;
}
/*Text Color for the anchors*/
#menu li:hover > a{
color: #FFFFFF;
}
*html #menu li a:hover{ /* IE6 */
color: #FFFFFF;
}
#menu li:hover > ul{
display: block;
}
/* Sub-menu */
#menu ul{
list-style: none;
margin: 0 35px;
padding: 0 15px;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
}
#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
}
#menu ul a{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a{ /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}
#menu ul a:hover{
/*add a background position*/
background-position: left top;
}
#menu ul li:first-child a{
}
#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
}
#menu ul li:first-child a:hover:after{
/*add color scheme*/
}
#menu ul li:last-child a{
}
/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
i try to make my blog responsive but my navigator menu is behind the title, i want to make it in front of my title. you can look the print screen here
print-screen
and here's the nav code on media query;
.nav {
max-width:599px;
position: relative;
float:center;
padding-bottom:120px;
top:159px;
left:-60px;
min-height: 40px;
padding-top:0;
}
.nav ul {
/*width: 599px;*/
padding: 5px 0;
position: absolute;
/*top: -13px;
left: -95px;*/
border: solid 1px #2FB8C8;
background: #2FB8C8 url(../images/icon-menu.png) no-repeat 10px 11px;
}
.nav li {
display: none; /* hide all <li> items */
margin: 0;
opacity:0.8;
}
.nav .current {
display: block; /* show only current <li> item */
}
.nav a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
width:599px;
}
.nav .current a {
background: none;
color: #666;
}
/* on nav hover */
.nav ul:hover {
opacity:1;
}
.nav ul:hover li {
display: block;
margin: 0 0 5px;
}
.nav ul:hover .current {
background: url(../images/icon-check.png) no-repeat 10px 7px;
}
thanks in advance for your help
You could set the z-index explicitly to bring those elements forward.
.nav {
z-index:2
max-width:599px;
position: relative;
float:center;
padding-bottom:120px;
top:159px;
left:-60px;
min-height: 40px;
padding-top:0;
}
.Title{
/*or what ever you gave it*/
z-index:1;
}
Check the following links for your guide. You also need to use jQuery.
http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/
http://webdesignerwall.com/demo/responsive-menu/
http://www.hongkiat.com/blog/responsive-web-nav/