I'm trying to make a <aside> element clickable. There are elements inside and I don't want the links to be applied individually, I would like it to be a clickable element.
<aside class="projectindicator">
<a href="#projectAnchor">
<img src="_img/showcase/downArrowProjects.png" alt="down cursor"/>
<h1>PROJECT</h1>
<img src="_img/showcase/downArrowProjects.png" alt="down cursor"/>
</a>
</aside>
/*Project display*/
.projectindicator{
width: 277px;
height: 35px;
position: relative;
top: 530px;
left: 360px;
text-transform: uppercase;
}
.projectindicator img{
float: left;
}
.projectindicator h1{
float: left;
padding: 0 10px 0 10px;
}
.projectindicator a{
display: block;
font-family: book;
font-size: 30px;
float: left;
}
.projectindicator a:link, .projectindicator a:visited{
text-decoration: none;
color: #2b3a42;
}
.projectindicator a:hover{
text-decoration: none;
color: #3f5765;
}
.projectindicator a:active{
text-decoration: none;
color: #2b3a42;
}
The problem is that I'm getting the clickable area below the element and the clickable area is smaller than the aside element. This gives the user a hard time to click the link.
Simple but I cannot find the solution. Could somebody help me?
In .projectindicator a, you added float: left, but this will cause the link to shrink to the size of its contents. I would remove that.
.projectindicator itself contains a height, while the link doesn't have a height. I'd either add the height to the link itself, or give the link height: 100%.
Last but not least: make sure .projectindicator itself doesn't have any padding and the link inside it doesn't have any margin.
Related
I feel like an idiot because I know this a simple thing. I can't figure why the logo and tagline images aren't in the grey container together.
I also can't under why my h2 and ul are on top of my image. All help is appreciated. This what it's supposed to look like https://imgur.com/a/3Qx3ihp
and this is how it renders now https://imgur.com/a/WGyYzPr
<div id="topbar">
<img src="hw8_images/logo.png" alt="Blaine and Associates logo"><img src="hw8_images/blaine-tagline.png" alt="Blaine and Associates Inc. tagline"><img src="hw8_images/architectural-tagline.png" alt="Architectural Design and Consulting">
<ul class="nav">
<li>Contact</li>
<li>Employment</li>
<li>Projects</li>
<li>Services</li>
<li>Company</li>
</ul>
</div>
<div class="buildingimage"></div>
<div id="container">
<h2>Quick Links</h2>
<ul id="QL">
<li>Free Consultation
</li>
<li>Client List</li>
<li>Testimonials</li>
<li>Open Positions</li>
<li>Latest News</li>
</ul>
</div>
body {
font: normal normal normal 75%/1.3em verdana,geneva,lucida,arial,sans-serif;
text-decoration: none; background-color: #fff;
}
.topbar{
background-color: #4d4d4d;
font-color: #fff;
height: 15px;
min-width: 500px;
max-width: 950px;
}
.nav li{
font: normal normal normal 100%/2em verdana,geneva,lucida,arial,sans-serif;
text-decoration: none;
display: inline-block;
list-style: none;
text-decoration: none;
text-align: center;
float: right;
}
h1 {
font: normal normal normal 140%/1.3em verdana,geneva,lucida,arial,sans-
serif; text-decoration: none;
}
h2 {
font: normal normal normal 120%/1.3em verdana,geneva,lucida,arial,sans-
serif;
text-decoration: none;
float: left;
position: relative;
}
footer li {
display: inline-block;
list-style-type: none;
font: normal normal normal 90%/2em verdana,geneva,lucida,arial,sans-serif;
text-decoration: none;
text-align: center;
background-color: #4d4d4d;
font-color: #fff;
}
#container {
position: relative;
height: 300px;
width: 400px;
}
.buildingimage {
background-image: url(hw8_images/building.jpg);
float: left;
background-repeat: no-repeat;
position: absolute;
margin: .5em;
background-size:cover;
height: 7em;
min-width: 200px;
max-width: 250px
}
#QL {
list-style: circle;
float: left;
position: relative;
}
"I can't figure why the logo and tagline images aren't in the grey container together."
They are inside, but the container is not styled, as you can't find it with .topbar, because it is an id not a class.
So #topbar will do it. If you make it bigger than 15px, all elements will be displayed inside.
The H2 and ul are on top of the background-img, because it is positioned abolute. If you change it to relative, the image will float left and the H2 and ul align on the right to it.
The problem is that you added float:left to your h2 and #QL selectors. Floating elements can be dangerous if you don't understand how it works. It removes the element from standard flow and then pushes it all the way to the top and to the left or right as assigned. It only stops for other elements that are floating, or for elements that have clear set to either the same side (left or right) or both.
Check out this CSS-Tricks article for more details.
I would also recommend you do some reading about fundamental CSS concepts. CSS-Tricks has a good collection of beginner concepts. I think you may find some of them helpful.
Your .buildingimage is in position absolute, he shouldn't ! Something put into absolute allows the element to overlap to others. Put it to "relative" or delete it if you don't really need it. there is also your h2 which got a float.
I have a few links on one line next to each other, and I would like to have dividing dashes between them. I chose to make this happen with the use of the ::before pseudo element, and it works nicely.
However, hovering over the dividers also triggers the hover over the element I have the ::before on.
This is a fiddle showing the issue. If you hover over the dashes, the underline appears under the a.
In my search as to how to prevent this from happening, I ran into this stackoverflow question. Together with the documentation on developer.mozilla.org and the caniusethis page on the pointer-events property I was sure this would fix it. But it didn't.
What am I missing here?
You need to make changes in css
.wrap a::before {
content: '----';
padding: 0 15px;
position: absolute;
left: -50px;
pointer-events: none;
}
.wrap a {
text-decoration: none;
position: relative;
margin-left: 50px;
display: inline-block;
}
You will need to use position:absolute for the ---- to make it out of the <a> flow and also position:relative to the parent <a> element.
Stack Snippet
.wrap a {
text-decoration: none;
margin: 0 30px;
position: relative;
}
.wrap p {
margin: 0;
}
.wrap {
font-family: sans-serif;
border: 1px solid green;
padding: 5px;
margin-bottom: 20px;
}
.wrap a:nth-of-type(1) {
margin-left: 50px;
}
.wrap a::before {
content: '----';
position: absolute;
pointer-events: none;
left: -30px;
transform: translateX(-50%);
}
.wrap a:hover {
text-decoration: underline;
}
<div class="wrap">
<p>These links do not have the pointer-events: none; property</p>
<br>
link text one
link text two
link text three
</div>
<div class="wrap">
<p>These do have pointer-events: none; yet their behaviour is the same as with the block above.</p>
<br>
link text one
link text two
link text three
</div>
In my navigation bar, the links to other pages are placed underneath each other.
The links change by background-color when you hover them. Now I want it to hover full screen.
I already tried by setting padding-left and padding-right:auto, but that just doesn't work as I expect.
I don't want to add a fixed measurement(ex. padding-left: 100px; padding-right:100px;) because then it won't be responsive anymore when I minimize or enlarge the browser.
How can I do this?
Sorry I don't want it to hover fullscreen but to hover the size of the <div>.
HTML:
<div id="website">
<nav>
<ul>
<li>wie</li>
<li>hoe</li>
<li>wat</li>
<li>contact</li>
</ul>
</nav>
</div>
CSS:
body {
font-size: 62.5%; /* 16px*62.5%=10px */
font-family: Cabin, Arial, sans-serif;
color: black;
background-image: url(../images/ruitjesweb.svg);
}
#website {
max-width: 960px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
nav {
background-color: white;
}
nav li {
padding-top: 15px;
padding-bottom: 15px;
font-size: 1rem;
text-transform: uppercase;
}
nav a:link, nav a:visited, nav a:hover, nav a:active {
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
color: black;
background-color: red;
}
nav a:hover {
background-color: green;
color: white;
}
If I understand your question right, all you need to do is add the display: block attribute to your <a> elements, e.g. like this:
nav a:link, nav a:visited, nav a:hover, nav a:active {
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
color: black;
background-color: red;
display: block; /* <-- add this line */
}
This will cause the links to be rendered as block-level elements, which will, by default, take up the entire width of the <li> element containing them.
Here's a demo of the result on JSFiddle. In the demo, I also added display: block (instead of the default display: list-item) to the <li> elements to get rid of the bullets, and padding: 0 to the <ul> to get rid of the indentation. The result is that all these elements, down to the <a>s, inherit the full width of the enclosing <div>.
My apologies if this too basic of a question but CSS is boggling me. I think I'm doing something that CSS is supposed to do easily but it is simply not working the way I read the documentation.
Here's my example. It's been massively simplified but the basic problem remains. I'm sure this is some core misconception on my part, I just don't know where it lies.
Here's the goal:
Here's what I get now:
Here is the HTML:
<div id="line-wrapper">
<div id="block-nice-menus-1">
<ul id="nice-menu-1">
<li><span title="Departments" class="nolink">Departments</span>
</li>
</ul>
</div>
<div id="block-imageblock-40">
<img src="http://www.kallenconsulting.com/home/files/top-menu-swish.png"
alt="" />
</div>
<div id="block-imageblock-42">
<img src="http://www.kallenconsulting.com/home/files/Transparent-4x6.png"
alt="" />
</div>
</div>
And here's the CSS:
/* -- nice-menu-1 is Main Menu -- */
#line-wrapper {
background-color: #ff0000;
}
#block-nice-menus-1 {
position: relative;
float: right;
margin-right: 0px;
height: 40px;
border: none;
background: #d6b982;
}
#nice-menu-1 {
display: block;
padding: 0px 30px;
border-top: none;
border-bottom: none;
color: #000;
background: #d6b982;
line-height: 2.4em;
font-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform:uppercase;
text-decoration: none;
}
#nice-menu-1 ul, #nice-menu-1 li {
border-top: none;
border-bottom: none;
border-color: #e11837;
}
#block-imageblock-40 {
/* top-menu-swish */
float: right;
margin: 0px;
}
#block-imageblock-42 {
/* top-menu-leading-line */
bottom: 0px;
height:6px;
width:100%;
background: #d6b982;
}
I can't get the floats right (I know, Yet Another Float Question). The main issue is that this is going to be a menu with a variable number of items, so as the menu grows, ("Departments" now, but later "Departments", "Services", "Sections", etc.) it should push to the left, reducing the length of the line I can't use a fixed length on the leading line (#block-imageblock-42). Also, the menu items will have separators, so I can't just full-width things. This needs to be done in pure CSS, no jQuery or other JS.
Here's my JSfiddle of the problem: http://jsfiddle.net/zjfsy/
UPDATE: I have modified the question to be more specific per the requests of folks trying to help. The "goal" image at the top has been updated to more accurately reflect the issue. One thing I really want to make clear is that this specific instance is not so important. I already doctored up a position:absolute fix that will hold for the short term. My desire is to understand better why this is so hard. I have three containers. I want two of them to float right and the third to expand to fill the space from the last container to the edge of the page. It seems like this is what float was supposed to do. I assume this is some base misunderstanding on my part.
Anyway. Here's more constraints:
The leading bar needs to expand to fill the empty space between the
left side and the swish.
Each of the tabs needs to have a separator that allows the background through.
The number of the tabs is variable, based on client choices -- which
can change regularly.
I can't really change the structure of the HTML, other than
modifying it with CSS.
And again, all help is very much appreciated.
here is my solution: http://jsfiddle.net/abbood/b56Vq/ (never used jsfiddle before.. so sorry if i did this wrong, or if i was supposed to fork your project)
here is the code:
<html>
<head>
<link href="betterStyle.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<ul>
<li><div></div><div>Departments</div></li>
<li><div></div><div>Services</div></li>
<li><div></div><div>Sections</div></li>
<li><div></div><div>stuff</div></li>
</ul>
</div>
</body>
</html>
//betterStyle.css
#wrapper {
height: 2.5em;
background-color: #e0203b;
background-image: url('http://s11.postimage.org/a1jmymlgv/bage_Box.png');
background-position: bottom;
background-repeat: repeat-x;
}
ul
{
list-style-type: none;
float: right;
margin: 0;
padding: 0;
}
ul li {
float: right ;
display: inline-block;
}
/* text */
ul li div:nth-child(2) {
line-height: 2.5em;
line-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform: uppercase;
background-color: #d6b982;
float: right;
padding-right: 1em;
}
/* image */
ul li div:nth-child(1) {
background-image: url('http://s8.postimage.org/b2qycoatd/top_menu_swish.png');
background-position: left top;
background-repeat: no-repeat;
float: left;
width: 53px;
height: 40px;
line-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform: uppercase;
}
notes:
i created my own image and I linked to it using some image hosting service.
you can add as many tabs as you want (i assumed that each tab will have that image attached to it.. i wasn't sure how you wanted the final thing to look like (the right edges look too sharp).. but i'm sure you can adjust it to your liking.. when adding extra tabs the horizontal line shrinks.. i think that's what you meant when you said so as the menu grows, it should push to the left, reducing the length of the line
update:
Here is the updated answer without changing a line in the html: http://jsfiddle.net/abbood/SkxkC/ (for some reason there is a bump under the folder image in jsfiddle.. i tested it on mac chrome/safari/firefox and they worked fine.. lemme know if it isn't working perfectly for you though)
html (pretty much same.. just added a couple of tabs just for fun):
<body>
<div id="line-wrapper">
<div id="block-nice-menus-1">
<ul id="nice-menu-1">
<li><span title="Departments" class="nolink">Departments</span>
</li>
<li><span title="Departments" class="nolink">Services</span>
</li>
<li><span title="Departments" class="nolink">Classes</span>
</li>
</ul>
</div>
<div id="block-imageblock-40">
<img src="http://www.kallenconsulting.com/home/files/top-menu-swish.png"
alt="" />
</div>
<div id="block-imageblock-42">
<img src="http://www.kallenconsulting.com/home/files/Transparent-4x6.png"
alt="" />
</div>
</div>
</body>
css:
/* -- nice-menu-1 is Main Menu -- */
#line-wrapper {
background-color: #ff0000; /* red */
height: 40px;
position: relative;
z-index: -2;
}
#line-wrapper div {
background-color: #ff0000; /* red */
}
#block-nice-menus-1 {
position: relative;
float: right;
margin-right: 0px;
height: 40px;
border: none;
background: #d6b982;
}
#nice-menu-1 {
display: block;
border-top: none;
border-bottom: none;
color: #000;
line-height: 2.4em;
font-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
text-transform:uppercase;
text-decoration: none;
margin: 0;
padding: 0;
}
#nice-menu-1 ul {
padding: 0;
background-color: #ff0000; /* red */
}
#nice-menu-1 ul, #nice-menu-1 li {
border-top: none;
border-bottom: none;
border-color: #e11837;
}
#nice-menu-1 li{
list-style-type: none;
display: inline-block;
padding: 0 2em;
background: #d6b982; /* bage */
height: 40px;
}
#block-imageblock-40 {
/* top-menu-swish */
float: right;
margin: 0px;
}
#block-imageblock-42
{
/* top-menu-leading-line */
bottom: 0px;
height:6px;
width:100%;
background-color: #d6b982 !important;
position: absolute;
z-index: -1;
}
I a have also done something similar that does not use the position:relative feature for the #line-wrapper since that may cause you some problems when you implement it.
See http://jsfiddle.net/zjfsy/
#block-imageblock-42 {
/* top-menu-leading-line */
height:6px;
width:100%;
background: #d6b982;
position:absolute;
margin-top:34px;
}
#line-wrapper {
display: block;
height: 40px;
width: 100%;
background-color: #ff0000;
}
Hope this helps! (I am definitely going to vote wxactly's answer up since it is a better answer than mine since it doesn't require "hard coding" with magic number margins, etc. Definitely use his answer if you can, but now at least you have two different ways.
I have made a functional CSS navigation-bar, except for some fugly CSS side-effects --
I am trying to vertically center the text in each list block, and vertical-align: middle was not working. Instead, I am using padding-top: 13px, but this renders the padded area without the background-color of the rest of the list element, and the display: inline block styling of the link does not extend to the padded area either! (a:hover is affecting only the area below the padding)So how can I vertically center text in list elements without these CSS problems?
Here is the relevant CSS:
/* header section */
#header
{
padding-left: 115px;
margin-bottom: 10px;
}
#main-menu
{
list-style-type: none;
}
#main-menu li
{
border: 1px solid black;
text-align: center;
padding-top: 13px;
color: #666;
font-family: "Lucida Console";
font-variant: small-caps;
letter-spacing: 2px;
/* for block layout */
display: -moz-inline-box; /* for firefox */
display: inline-block;
width: 153px;
height: 32px;
}
#main-menu a:link, a:visited
{
display: -moz-inline-box; /* for firefox */
display: inline-block;
width: 100%;
height: 100%;
background-color: #eee;
}
#main-menu a:hover, a:active
{
background-color: #bbb;
}<br /><br />
...and here is the relevant HTML:
<!-- header section -->
<div id = "header">
<ul id = "main-menu">
<!-- no spaces between list elements when all on the same line! -->
<li>home</li><li>about</li><li>cart</li><li>login</li><li>sign up</li>
</ul>
</div> <!-- end of header section -->
Things that I changed:
Changed the link to display as a block element.
Removed the padding at the top of the li elements.
Added that padding height to the height of the li elements.
Set the line-height to the height of the li elements.
Some formatting
http://jsfiddle.net/gtr053/7yrX7/
Try setting a line height
line-height: 13px;
I don't know much to anything but I've used this just now and it works
Entered into the Quick CSS of General styling
li {
display:inline;
padding: 0px 50px;
}
The first px brings the menu items down, and the second spreads them apart.