.about:hover > .left {
color: #DAFDBA;
}
HTML: >
<div class="navbar">
<!--Lines above Links-->
<hr class="left">
<hr class="middle">
<hr class="right">
<!--Links (Text)-->
<p class="about">About.</p>
<p class="projects">Projects.</p>
<p class="contact">Contact.</p>
</div>
What should be the statement between .about:hover and .left?
You can use code like this if you just want to have three links with one line above each one, and hovering over the link the line turns green
a{
color:inherit;
text-decoration: none;
border-top: 2px solid #000;
padding:.2em 0 0;
margin: 0 .2em;
}
a:hover {
border-color: #DAFDBA;
}
<nav>
About
Projects
Contact
</nav>
Related
I can't style link 1 different from link 2. It's always forcing the style from .about a. No matter if I specific set it to another style.
<div class="about">
<div class="wrapper" style="width: 1052px;">
<h2 style="color: #fff">Title</h2>
<ul>
<li>
Text 1 - Link 1
</li>
<li>
Text 2 - Link 2
</li>
</ul></div></div>
CSS:
.about a {
margin-top: 35px;
display: block;
color: #fff;
font: 15px/52px 'sans-serif';
font-family: 'Ubuntu', sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
width: 226px;
height: 52px;
border: 1px solid #fff;
border-radius: 27px;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
I've tried something like this:
Link
<span class="linkk" a href:#">Link</span>
Link
You're looking for the :first-of-type pseudo-class:
.about li:first-of-type a {
color: red;
}
<div class="about">
<div class="wrapper" style="width: 1052px;">
<h2 style="color: #fff">Title</h2>
<ul>
<li>
Text 1 - Link 1
</li>
<li>
Text 2 - Link 2
</li>
</ul>
</div>
</div>
Note that it needs to be on the parent <li> element, rather than simply adding it to .about a directly. This is because the :first-of-type pseudo-class pertains to siblings, rather than checking for any elements of that type in .about. Both <a> elements are the first of their type in their respective <li> parents.
Hope this helps! :)
From what I understood of this line: I can't style link 1 different from link 2, you want different style for each link.
If it is only two links, you can use first-child and last-child
.about li:first-child a {
color: red;
}
.about li:last-child a {
color: blue;
}
<div class="about">
<div class="wrapper" style="width: 1052px;">
<h2 style="color: #fff">Title</h2>
<ul>
<li>
Text 1 - Link 1
</li>
<li>
Text 2 - Link 2
</li>
</ul>
</div>
</div>
Try This:
.about li:nth-of-type(1) a {
color: red;
}
.about li:nth-of-type(2) a {
color: green;
}
.about li:nth-of-type(1) a {
color: red;
}
.about li:nth-of-type(2) a {
color: green;
}
<div class="about">
<div class="wrapper" style="width: 1052">
<h2 style="color:#fff">Title</h2>
<ul>
<li>
Text 1 - Link 1
</li>
<li>
Text 2 - Link 2
</li>
</ul>
</div>
</div>
I am making a website for our voluntary association. Still learning web development.
Secondary vertical menue in Navigation menu (for example in activities tab) does not show over the content. I found that it was due to the content below which is possitioned as position:relative (col3 class) when I remove this position:relative the problems solves but I need to keep it as it is for later improvements, you can view the website in this link
http://slsaj.com/panduka/Contact.html
this screen shot shows the issue
actually I have the same problem in Home menue (it is also due to this postion issue coming from javascript and css I guess) hope I would be able to solve it too with the answer to this question
<
<div class="body1">
<div class="main">
<!-- header -->
<header>
<div class="headerbox">
<nav>
<div class="brand">
<h1>xxxxx Assoication in Japan </h1>
</div>
<div id="main-nav3">
<ul id="menu">
<li ></span>
<ul>
</ul>
</li>
<li ><a>Activities<span class="drop-down"></span></a>
<ul>
<li ><a href="" target="_blank" id="events" >Events</a></li>
<li><a href="tharanga.html" id="events2" >Tharanga Magazine</a></li>
<li><a href="Conference.html" >Research Conference</a></li>
</ul>
</li>
<li ></span>
<ul>
</ul>
</li>
<li id="menu_active">Contact<span class="drop-down"></span>
<ul>
</ul>
</li>
<li ></span>
<ul>
</ul>
</li>
</ul>
</div> <!-- menu -->
</nav>
</div>
</header>
<!-- / header -->
<!-- content -->
<article id="content">
<div class="wrapper">
<div class="box1">
<div class="line1 wrapper">
<section class="col1">
<h2><strong>O</strong>ur<span> Details</span></h2>
<strong class="address">
President:<br>
Telephone:<br>
E-Mail:<br>
Secretary:<br>
E-Mail:<br> <br>
Fb:
</strong>
Mr. xxxx<br>
080<br>
xxxx[at]gmail.com <br>
Ms. xxxxx<br>
xxxx[at]gmail.com <br> <br>
#xxxxxxxxx
</section>
<section class="col2 pad_left1"> <!-- This is the cause for this problem ***** -->
<h2 class="color2"><strong>S</strong>ubcribe to<span> email database</span></h2>
<p class="pad_bot1">
You can subcribe to out email database by filling the following form <br>
Subcribe !
</p>
</section>
</div>
</div>
</div>
<!-- This col2 position:relative is the cause for this problem ***** -->
.col2 {margin:0 6px;width:560px;position:relative}
#main-nav3 {
float: left;
width: 700px;
z-index: 30;
}
#main-nav3 ul {
font-size:12px;
list-style: none;
}
#main-nav3 ul li {
float: left;
}
#main-nav3 ul li:first-child {
border: none;
}
#main-nav3 ul li a {
display: block;
position: relative;
width: auto;
text-decoration: none;
font-size:17.8px;
}
#main-nav3 ul li a span.drop-down {
}
#main-nav3 ul li:hover {
background: pink;
}
#main-nav3 ul li ul {
display: none;
}
#main-nav3 ul li:hover ul {
background: brown;
display: block;
position: absolute;
}
#main-nav3 ul li ul li {
float: none;
display: block;
border-left: none;
position: relative; z-index:10;
}
#main-nav3 ul li ul li a {
width: auto;
border-top: dotted 1px #7dad16;
color: yellow;
In the .headerbox css class, opacity: 0.9; is causing the issue. comment that out.
also in #main-nav3 ul li ul {...} add z-index:10; which will fix the dropdown menu issue.
I am currently making a webpage, which has a side section, such as the one in this photo:
What I currently have is this:
Why is it that my side column isn't showing up like the one in the first picture? I tried to make the side column and test where it would be by putting the words "side column????", however it isn't showing up properly. My code is as follows:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>int222_162d16 - Assignment 2 - Home Page</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/sitecss.css" type="text/css" media="screen" />
</head>
<body>
<nav class="fixed-nav-bar">
<ul class="nav">
<li class="nav">♠ My Zenit Account</li>
<li class="nav"><a class="active" href="index.html">Home</a></li>
<li class="nav">Gallery</li>
<li class="nav">Video</li>
<li class="nav">Audio</li>
<li class="nav">Tables With CSS</li>
<li class="nav">Forms</li>
<li class="nav">CSS Used</li>
<li class="nav">Extra</li>
</ul>
</nav>
<h1>Welcome To The Home Page!</h1>
<div class="s">
<section class="s">
<h3>HTML5 & CSS Normalize</h3>
<p>The reason why we use normalize.css is due to it providing cross-browser consistency in the styling of HTML elements.</p>
<aside><p>SIDE COLUMN???</p></aside>
</section>
<aside><p>SIDE COLUMN???</p></aside>
<section class="s">
<h3>TEXT</h3>
<p>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
</section>
</div>
<hr />
<footer>
<script>
var dt=new Date(document.lastModified); // Get document last modified date
document.write('<p>This page was last updated on '+dt.toLocaleString()) + '</p>';
</script>
</footer>
</body>
</html>
CSS:
/*nav.fixed-nav-bar
{
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 50px;
margin-top: 10px;
}
*/
ul.nav
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
border: 1px solid #e7e7e7;
box-shadow: 5px 2px 10px #808080;
}
li.nav
{
float: left;
}
li a
{
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color on hover*/
li a:hover:not(.active)
{
background-color: #ddd;
}
li a.active
{
color: #ffffff;
background-color: #9999ff;
}
section.s /*shadow on sections*/
{
background-color: #ccccff;
box-shadow: 5px 2px 10px #808080;
width:63%;
}
/*div.s
{
box-shadow: 5px 2px 10px #808080;
}
*/
footer
{
width:100%;
background:#ccccff;
color:#000000;
border:1px solid #cccccc;
position:absolute;
text-align:center;
font-weight:bold;
display:inline-block;
margin: 0px auto;
line-height:20px;
box-shadow: 5px 2px 10px #808080;
clear: both;
}
aside {
float: right;
width: 30%;
}
I would say, you need to change your HTML to
<div class="s">
<aside>
<section class="s">
<p>SIDE COLUMN???</p>
</section>
</aside>
<section class="s">
<h3>HTML5 & CSS Normalize</h3>
<p>The reason why we use normalize.css is due to it providing cross-browser consistency in the styling of HTML elements.</p>
</section>
<section class="s">
<h3>TEXT</h3>
<p>
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</p>
</section>
</div>
see, I moved <aside> out of the section, to make it floats to the right
You can use a framework / structure like this to lay out your page as desired.
Simple Example:
*{position:relative;box-sizing:border-box;font-family:arial;}
nav{position:fixed;height:50px;width:99vw;background:darkcyan;color:white;text-align:center;overflow:auto;font-size:1.2rem;}
nav div{float:left;width:30vw;}
nav ul{float:left;width:65vw;height:50px;list-style:none;}
nav ul li{display:inline-block;padding:0 5vw;}
#wrap{top:50px;overflow:hidden;}
.both{float:left;min-height:500px;margin-left:2vw;padding:20px;}
#main{width:60vw;border:1px solid orange;}
aside{width:29.5vw;border:1px solid blue;}
.sideDiv{margin-bottom:20px;}
<nav>
<div id="logo"><img src="http://lorempixel.com/80/48" /></div>
<ul><li>File</li><li>Edit</li><li>View</li></ul>
</nav>
<div id="wrap">
<section id="main" class="both">
PHOTO GALLERY goes in here
</section>
<aside class="both">
Side Area
<div class="sideDiv">Four other wonders</div>
<div class="sideDiv">Social Media Links</div>
</aside>
</div><!-- #wrap -->
Major Edit: Turns out my issue was not repeated exactly the same here. My issue appears when using bootstrap, and is not fixed when using margin:0px;. See the updated code for the persisting issue.
I am building an ordered list of text, and noticed a slight issue. When I nest other elements inside of a li element, I get a good amount of extra white space between the individual elements that is not controlled by margin or padding. Throwing a border onto these elements reveals that each of the nested elements does not control that white space (seemingly).
My question is how do I control the amount of extra white space?
Demo of this issue:
#questionList li {
font-size: 3em;
margin-left: 3em;
}
#questionList li h2 {
border: 1px solid red;
font-size: 45px;
margin:0px;
}
#questionList li small {
border: 1px solid red;
font-size: 14.72px;
margin:0px;
}
#questionList li p {
border: 1px solid red;
font-size: 16px;
margin:0px;
}
<link href="http://bootswatch.com/paper/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<ol id="questionList" class="col-sm-8 col-sm-offset-2">
<li>
<h2>Qg</h2>
<small>sub header</small>
<p>P1</p>
</li>
<li></li>
<li></li>
</ol>
</div>
</div>
Paragraphs and headers do indeed have default margin, as demonstrated below, if we set the margin for each equal to zero.
ol li h2 {
border: 1px solid red;
}
ol li small {
border: 1px solid red;
}
ol li p {
border: 1px solid red;
}
h2,
p {
margin: 0;
}
<ol>
<li>
<h2>
Header
</h2>
<small>
Sub header
</small>
<p>
paragraph of text
</p>
</li>
<li>
<h2>
Header2
</h2>
<small>
Sub header2
</small>
<p>
paragraph of text2
</p>
</li>
</ol>
This is indeed controlled by the margin on the individual elements.
Fiddle for example here: https://jsfiddle.net/25f3bcwr/
ol li h2 {
border: 1px solid red;
margin:0px;
}
ol li small {
border: 1px solid red;
margin:0px;
}
ol li p {
border: 1px solid red;
margin:0px;
}
This is because headers if not defined, by default they posses some default characteristics e.g their size, spacing, font-weight.
I believe, those are not white spaces White spaces are created using .
Try to use display:inline-block; or display:inline; and then ad break line in the css style and then add break line code at the end of your sentence<br> see some difference
ol li h2 {
border: 1px solid red;
display: inline;
}
ol li small {
border: 1px solid red;
display: inline;
}
ol li p {
border: 1px solid red;
display: inline;
}
<ol>
<li>
<h2>
Header
</h2><br>
<small>
Sub header
</small><br>
<p>
paragraph of text
</p>
</li>
<li>
<h2>
Header2
</h2><br>
<small>
Sub header2
</small><br>
<p>
paragraph of text2
</p>
</li>
</ol>
Result
I'm building a list widget where I have multiple <li> with two sibling elements wrapped inside.
A <span> for the title and a <div> for the bottom line. That line must vary depending the width of their adjacent span element.
.limit-area {
width: 250px;
height: 350px;
background-color: #96ceb4;
}
.limit-area ul {
font-size: 0;
list-style-type: none;
-webkit-padding-start: 0;
}
.limit-area ul li {
background-color: #ffeead;
display: table;
margin-bottom: 20px;
}
.limit-area ul li .wrapper span {
font-size: 24px;
color: #010101;
}
.limit-area ul li .wrapper .line {
height: 6px;
margin-top: 12px;
background-color: #ff6f69;
}
<div class="limit-area">
<ul>
<li>
<div class="wrapper">
<span>One line only</span>
<div class="line"></div>
</div>
</li>
<li>
<div class="wrapper">
<span>Bigger one line only </span>
<div class="line"></div>
</div>
</li>
<li>
<div class="wrapper">
<span>Long line and go crazyyyyyy</span>
<div class="line"></div>
</div>
</li>
</ul>
</div>
Full example on jsfiddle: https://jsfiddle.net/arnauth/55josw6e/
In the upper example, I can easily accomplish my goal on the first two list items.
The trick here is to have the same effect when I have a long line that break into two or more lines - that third line on the example.
The line element must have the same width of the text, so in the example must stop near the word 'go' - not in the end of the container as displayed.
The idea is try to approach the problem using only CSS rules avoiding javascript based code.
Thanks for your attention.
Try adding this inside of your span:
border-bottom: 6px solid #ff6f69;
so that it ends up looking like this:
span {
font-size: 24px;
color: #010101;
border-bottom: 6px solid #ff6f69;
}
it should come out like this
https://jsfiddle.net/55josw6e/3/
Hope this answers your question.