Consider the following html code. The parent paragraph style should be inherited to and to the last text. However, the paragraph style is not inherited to last text. The tag is causing some issue. Without tag, the last text would be styled as defined in the paragraph class.
<body>
<p class="paragraph_class1">
<span>Start paragraph.</span>
<ul class="list_class3">
<li class="paragraph_class1 list_detail_class4">
<span class="text_class5">List item</span>
</li>
</ul>
<span>End paragraph.</span>
</p></body>
.paragraph_class1
{
color: #ff0000;
border-top-color: #0000ff;
border-left-color: #0000ff;
border-right-color: #0000ff;
border-bottom-color: #0000ff;
border-top-style: solid;
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-top-width: 2px;
border-left-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
background-color: #000000;
}
Why don't you just add the class to the span tag like so:
<span class="paragraph_class1">End paragraph.</span>
And remember to enclose your css in style-tags
Usually you shouldn't nest ul-tags in p-tags
Related
Most drop down lists in websites' main menus are powered by Javascript, which usually displays some div element containing the list on click or hover. But non Javascript users just can't see the drop down list!
The only alternative I can think of is to display the drop down list as a HTML select element, but nobody does that. Is there a better solution out there?
Non-JavaScript menus are surprisingly common and are often times just as clean and can be more efficient than their JavaScript counterparts. You can use JavaScript but it's important to have graceful degradation if you want your menu to be accessible and functional for all users.
There are many examples of these online but the basic premise is to have a normal navigation menu (using UL and LI elements), and use CSS to change the look and appearance based on the user interaction (such as a hover).
Here is an example of a basic menu that will work without CSS or JavaScript and still be perfectly usable (some of the code taken from this answer: https://stackoverflow.com/a/12279190/937012)
<div class="wrapper">
<navigation role="navigation" class="primary-nav">
<ul role="menubar">
<li role="presentation">
<a role="menu-item" href="#" title="First Link">First Link</a>
</li>
<li role="presentation" class="sub-container"> <a role="menu-item" aria-haspopup="true" href="#" title="Second Link">Second Link</a>
<ul role="menu">
<li role="presentation"> <a role="menu-item" href="#" title="Sub Menu Item 1">Sub Item 1</a>
</li>
<li role="presentation"> <a role="menu-item" href="#" title="Sub Menu Item 2">Sub Item 2</a>
</li>
<li role="presentation"> <a role="menu-item" href="#" title="Sub Menu Item 3">Sub Item 3</a>
</li>
</ul>
</li>
<li role="presentation">
<a role="menu-item" href="#" title="Third Link">Third Link</a>
</li>
</ul>
</navigation>
</div>
As is, this will create a navigation menu (using some accessibility attributes) that is cross-browser and accessible. You can read more about accessibility best practices here: https://www.webaccessibility.com/best_practices.php
You can then apply whichever CSS you like to change the appearance and give the desired "drop-down" effect.
Here is some CSS for the above markup that produces a horizontal menu that features a sub-menu that appears below the second link when the mouse is moved over the second list item.
A {
text-decoration: none;
}
A:HOVER {
color: blue;
}
.wrapper {
width: 90%;
display: block;
}
.primary-nav {
display: block;
margin: 0px auto;
width: 100%;
padding: 0px;
}
.primary-nav UL {
background-color: #ababcd;
list-style-type: none;
margin-left: 0px;
padding-left: 0px;
text-indent: 0px;
}
.primary-nav > UL {
display: inline;
border: solid 1px #000000;
text-indent: 0px;
float: left;
height: 24px;
margin: 0px;
width: 100%;
list-style-type: none;
border-collapse: collapse;
}
.primary-nav LI {
max-width: 150px;
text-align: center;
}
.primary-nav > UL LI {
display: inline;
float: left;
padding: 0px 3px 0px 3px;
width: 32%;
line-height: 24px;
vertical-align: top;
margin-top: 0px;
text-align: center;
}
.primary-nav > UL LI UL {
display: none;
width: 100%;
}
.primary-nav > UL LI.sub-container:HOVER UL {
display: inline-block;
float: left;
margin-left: 0px;
clear: both;
border: inset 1px #898989;
box-shadow: 2px 2px 4px #000000;
}
.primary-nav > UL LI.sub-container:HOVER UL LI {
margin-top: 2px;
text-align: left;
clear: both;
width: 100%;
padding: 0px;
}
.primary-nav LI A:HOVER {
background-color: #cdcdef;
}
.primary-nav LI A {
display: block;
}
.primary-nav > UL LI.sub-container:HOVER UL LI A {
padding: 1px 3px;
margin: 0px 3px;
}
Here is a fiddle that stitches it all together: http://jsfiddle.net/xDaevax/osu7t9ty/
I'm trying to get a CSS-only solution for a cut-off bottom right corner on every image in a page.
So far, I have come up with this:
img::after {
content: url(/images/whitecorner.png);
height: 20px;
width: 20px;
display: inline-block;
float: right;
}
But the doesn't appear in the document anywhere. (I'm using the Chrome inspector).
I hope someone can point me in the right direction. Thanks in advance!
Example
You can not use ::after with img.
Same with inputs, this is because they are self closing (/>) and hold no content.
What you could do is something like this:
<div class='cut-image'>
<img src='http://placehold.it/250'/>
</div>
and then use
.cut-image::after{
/*styles*/
}
In my example I used:
HTML:
<div class='cut-image'>
<img src='http://placehold.it/250'/>
</div>
<div class='cut-image'>
<img src='http://placehold.it/250'/>
</div>
CSS:
.cut-image{
position:relative;
float:left;
margin:0 5px;
overflow:hidden;
}
.cut-image::after {
content: '';
position:absolute;
bottom:0;
right:0;
height: 0px;
width: 0px;
border-left:40px solid transparent;
border-top:40px solid transparent;
border-bottom:40px solid white;
border-right:40px solid white;
}
img is an inline element and :before or :after won't work , you'll have to wrap the img with a div
this is probably what you need:
http://jsfiddle.net/h7Xb5/1/
this is the css:
div {
width:300px;
height:300px
}
div:hover:before {
content:"";
width:300px;
height:300px;
position:absolute;
top:0;
left:0;
background:url(http://www.linobanfi.it/immagini/lino_banfi_3.jpg) no-repeat center center;
}
I have a website I'm working on and I'm positive it is something obvious that I'm overlooking here.
My main issue and why I'm here: My page looks great in Chrome and Safari, but FF v.21 (Mac) takes the textcont and linkcont layers and puts them all the way to the right, outside of the container I have for them. I know they are floating, but I can't seem to get them to show correctly there.
*EDIT: 6-18 # 1p--*I solved the other issue, but Firefox still is putting the two inner containers OUTSIDE of the main content container.
*EDIT: 6-20 # 9:45a--*I found that if I added "Position: absolute;" to the #contentbox, everything seemed to work in Chrome, Safari, and Firefox (can't test it on IE currently), BUT my #copybox div (last layer that displays the year with copyright at the very bottom) would align overtop of the #contentbox at the top. I tried using absolute position on that div, but just made it visible, relative made it hidden--but still up top where it shouldn't be. Any ideas? If I can get the absolute positioning to work on the content, I just need a fix to keep the #copybox following the end of the #contentbox layer.
Firefox Screenshot: http://i41.tinypic.com/20t0xh0.png
Chrome/Safari (correct): http://i40.tinypic.com/a4y1ar.png
Style Code:
#charset "UTF-8";
/* CSS Document */
body {
background-color: #FAD434;
font-family: Helvetica, arial, sans-serif;
font-size: 14px;
}
#container {
width: 100%;
padding: 0px;
margin: 0 auto;
}
#headercont {
width: 900px;
margin: 0 auto;
}
#header {
width: 100%;
height: 65px;
margin: 0 auto;
background-color: #000000;
background-image:url(img/logo.png);
background-repeat: no-repeat;
background-position: left;
border-bottom: 2px solid #fad434;
}
#picheader {
height: 360px;
background-image:url(img/NHYC_BoySmile.jpg);
background-repeat: no-repeat;
background-position: top center;
}
#contentbox {
width: 100%;
background-image: url(img/content_bkgd.jpg);
background-position: bottom center;
background-repeat: repeat-x;
background-color: #ffffff;
margin-top: 0px;
padding-bottom: 50px;
}
#contentcont {
width: 900px;
margin: 0 auto;
overflow: auto;
}
#textcont {
width: 70%;
padding: 0px 0px 25px 10px;
float: left;
}
#linkcont{
width: 25%;
padding-top: 63px;
padding-right: 10px;
padding-left: 10px;
float: right;
}
#copybox {
width: 100%;
font-size: 10px;
text-align: center;
padding: 15px;
}
/* --- HEADER TEXT --- */
h1 {
font-size: 40pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
text-transform: uppercase;
}
h2 {
font-size: 24 pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
text-transform: uppercase;
}
h3 {
font-size: 18 pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
text-transform: uppercase;
}
/* --- LINK LIST --- */
.links li {
list-style-type:none;
line-height: 20pt;
}
/* --- MENU --- */
#menu {
width: 100%;
margin: 0 auto;
padding-top: 325px;
}
#menu ul, #menu ul ul {
list-style-type: none;
padding: 0;
margin: 0 auto;
}
#menu ul li{
padding: 10px 25px;
position: relative;
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-transform: uppercase;
}
#menu ul a:link, #menu ul a:visited{
display: inline-block;
color: #ffffff;
width: 90px;
padding: 5px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#menu ul a:hover, #menu ul a:active {
background: #f28c3d;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Index.php Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>NHYC - Ohio</title>
<link href="nhyc_styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="headercont">
<div id="header">
<p align="right"><img src="img/socialmedia_icons.png" alt="Social Media" border="0" usemap="#socialmedia" style="padding-right:15px; padding-top: 18px;"/>
<map name="socialmedia" id="socialmedia">
<area shape="rect" coords="2,4,27,25" href="#" target="_blank" alt="Facebook" />
<area shape="rect" coords="42,4,69,24" href="#" target="_blank" alt="Twitter" />
</map>
</p>
</div> <!--End of header-->
<div id="picheader">
<div id="menu">
<ul>
<li>About Us</li>
<li>Mission</li>
<li>Services</li>
<li>Admission</li>
<li>Employment</li>
<li>Contact</li>
</ul>
</div>
<!--End of navigation-->
</div> <!--End of picheader-->
</div> <!--End of headercont-->
<div id="contentbox">
<div id="contentcont">
<div id="textcont">
<?php
if (!isset($_REQUEST['topic']))
include("aboutus.php");
else
{
$topic = $_REQUEST['topic'];
$nextpage = $topic . ".php";
include($nextpage);
} ?>
</div><!--End of textcont-->
<div id="linkcont">
<h3>Resources</h3>
<ul class="links">
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
</ul>
</div> <!--End of linkcont-->
</div>
</div> <!--End of contentbox-->
</div> <!--End of container-->
<div id="copybox">
2013 © NHYC
</div> <!--End of copybox -->
</body>
</html>
#contentbox {
overflow: hidden;
}
...will correct your issue.
You have an uncleared float there, and overflow: hidden will clear it. Read more about block formatting context (the weird hidden CSS nuance that overflow: hidden applies) here.
I am trying to center my menu bar with my logo in the middle. right now everything is floating but it wont center to the middle of the page. Also when it is centered i need the background image that i placed on the left and right side of the logo to resize according to the width of the page - here is a link to how it looks live - Menu Test
on my website i still have the original menu I created where I placed the logo behind the menu bar and set a longer width so that the background would stretch but it won't auto adjust because of it.... Current Menu
I know my code is not perfect so please just bear with me
html
<div id="access">
<div class="menu-container">
<ul id="menu-left" class="menu">
<li class="menu-item">
Home
</li>
<li class="menu-item">
About
</li>
<li class="menu-item">
Services
</li>
</ul><!--END of menu-navigation-left-->
<ul id="menu-center">
<li class="menu-item">
<img src="images/logo.png" alt="Menu">
</li>
</ul> <!--close div center-->
<ul id="menu-right" class="menu">
<li class="menu-item">
Blog
</li>
<li class="menu-item">
Contact
</li>
<li class="menu-item">
Portfolio
</li>
</ul><!--END of menu-navigation-left-->
</div><!--END of menu-navigation-container-->
</div><!--END of access-->
css
header {
position:fixed;
}
#access {
width:100%;
overflow:hidden;
left:50%;
}
#access ul.menu{
display: inline-block;
}
#access ul {
}
#access ul a{
display:block;
}
#access ul#menu-left {
height:120px;
background-image:url(../images/menu.png);
}
#access ul#menu-center {
height:120px;
}
#access ul#menu-right {
height:120px;
background-image:url(../images/menu.png);
}
ul, li {
margin:0px;
padding:0px;
list-style:none;
float:left;
display:block;
}
#access a {
display: block;
font-size: 16px;
line-height: 15px;
padding: 13px 10px 12px 10px;
text-transform: titlecase;
text-decoration: none;
font:"Mc1regular", Arial, sans-serif;
}
a:link{
color:#fff;
}
a:visited{
color:#fff;
}
This should sort out your alignment issues.. just replace with your specs. I would just have one menu and centre it.
PLEASE NOTE, YOUR HEADER POSITION IS FIXED> position:relative would be better..
div.container {
width: 1160px;
margin: auto;
margin-top: -1;
margin-bottom: -1;
padding: 0;
padding-top: 10px;
background-color: #2d2d2d;
}
div.box {
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
padding-bottom: 20px;
border: solid 1px #A29060;
background-color: #000;
overflow: hidden;
width: 940px;
}
div.top {
text-align: left;
margin: auto;
margin-left: 20px;
padding-top: 12px;
padding-bottom: 11px;
font-weight: normal;
font-size: 14px;
overflow: hidden;
width: 980px;
text-transform: uppercase;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
padding-right: 20px;
}
a {
display: block;
color: #a29060;
text-decoration: none;
}
<div class="container">
<div class="box">
<div class="top">
<ul >
<li>Contact</li>
<li>Policies</li>
<li><img class="logo" src="images/logo.jpg" alt="logo" /></li>
<li>Policies</li>
</ul>
</div>
see this fiddle
http://jsfiddle.net/yvytty/RJ4Yp/
You can also have a look at this (it's not finished) but it has the basic layout sorted, menus etc
https://www.yve3.com/index.html
This is also a link to a great forum, HTML.net. They give you good opinions of your site and have a lot of expertise (just like here)
http://www.html.net/forums/
I am having trouble ellipsis text (.title) found in between a span that is floated left and a span that is floated right. When overflow occurs .length is pushed down onto a new line. How can I fix this?
JS FIDDLE:
http://jsfiddle.net/VfHdS/6/
HTML:
<div class="song">
<span class="tracknumber">4</span>
<div class="title">This is the song tittle!!!!!!!!!!!</div>
<span class="length">4:31</span>
</div>
CSS:
.song {
font-size: 14px;
padding: 2px 20px;
}
.tracknumber {
margin-right: 10px;
}
.title {
color: #262626;
display:inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.length {
float: right;
}
Using the sample html you provided I set up a fiddle. Setting the .title element to display block is what gets the ellipses to show up.
http://jsfiddle.net/f4uUJ/
I've also repositioned the track number and play time absolutely so the song title can be 100% width. You just need to add padding to the track to give the title some breathing room.
CSS
.song {
font-size: 14px;
padding: 2px 40px 2px 20px;
position:relative;
}
.tracknumber {
position:absolute;
left:0;
top:2px;
}
.title {
white-space: nowrap;
width: 100%;
display:block;
overflow: hidden;
text-overflow:ellipsis;
}
.length {
position:absolute;
right:0;
top:2px;
}