I am relatively new to HTML/CSS, and am finding a basic bug in a website that I am attempting to create.
I am using an external CSS file to style my website, and I use the following code as a general guideline for my HTML links.
a:link, a:visited{
background-color: #000000;
color: white;
padding: 14px 25px;
text-align: center;
font-size: 18px;
text-decoration: none;
display: inline-block;
}
a:active, a:hover{
background-color: rgb(46, 46, 46);
color: white;
}
After I link my styles.css file to my HTML file (via link), I want to have a standard logo at the top right corner of the screen, which when clicked, will bring the user to the home screen. However, I do not want to set a specific pixel size, rather, I want it to cover a specific percentage of the screen so the website would look natural on a phone and a computer (rather than being too big/small). I have attempted to do so below, and although the image is in the correct proportions I want it to be, I am still getting an issue when I hover over the label, there seems to be a border that lights up around the image (even though I don't want it to). Here is the code that I used to add the logo:
<a href="index.html" style="float:right; padding:0px 0px;">
<img src="images/test.jpg" alt="Testing Logo" style="width:35%; height:20%; border:0;">
</a>
I am pretty sure that adding the percentages to both the width and height is illegal, right? I'm also curious why this seems to work for the height, but not for the width, and if there is something flawed in doing so please let me know. Here is the output that this code will cause to my logo:
In the above image, I am not hovering over the image with my mouse. The logo is taking up more space than I would like and has a border.
The above image shows my logo when I am hovering over it with my mouse. Notice that the border around it changes color, and if you click in this area, then it will redirect it to the homepage (which is what I want it to do, but I want to minimize the clicking area to just the picture of the logo, not the space surrounding it, and I want to get rid of the border surrounding the logo).
there's a property in CSS called as an outline
a:link, a:visited{
background-color: #000000;
color: white;
padding: 14px 25px;
text-align: center;
font-size: 18px;
text-decoration: none;
display: inline-block;
outline: none;
}
this will remove your border which is highlighting when you hover over it
Your issue is not that clear.
It is best to show your live site or place your code on sites like CodePen or JSFiddle, so others can test to check the issue.
By the way, you can also post your code here as well.
You can try this, but please read what follows: :)
a:link, a:visited{
background-color: #000000;
color: white;
padding: 14px 25px;
text-align: center;
font-size: 18px;
text-decoration: none;
display: inline-block;
border: none; /* <-- add this */
}
a:active, a:hover{
background-color: rgb(46, 46, 46);
color: white;
}
From what I see: I suspect the border (and box-shadow ?) to come from a parent node. You can use the inspector of your browser and click on the border to identify the html tag we want and give him the medicine:
{
border: none;
box-shadow: none;
}
I am pretty sure that adding the percentages to both the width and height is illegal, right?
The SWAT won't come at your place, though we tend to avoid that directly in the HTML file.
More, it's better to not put style inside the HTML file itself, as it may override some rules written on your css files. If you don't know about CSS specificity, here is a good read.
Though it's ok on a CSS file. Myself I usually put max-width: 100% to the images, and I change the width and height of it's parent's div as needed.
I do not want to set a specific pixel size, rather, I want it to cover a specific percentage of the screen
This is perfect! Did you know about vw and media queries ?
Related
I'm trying to style my navbar and work on its aesthetics but I think I'm missing a trick. The darken which happens on the hover is too big for my liking, but the only size change I can do is an overall padding which doesn't allow fine tuning.
I've spent the last 2 hours looking for a solution and I'm stumped. I bet it's something simple and I'm just not seeing it.
#navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
height: 6%;
transition: top 0.3s;
z-index: 2;
}
#navbar a {
float: left;
display: block;
color: white;
margin: 10px;
padding: 10px;
text-align: center;
text-decoration: none;
border-radius: 30px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
height: 6%;
border: 1px inset #000000;
}
<div id="navbar">
<div class=buttonContainer>
<div class="homeBorder">
Home </div>
Skills
Projects
About
Contact
</div>
</div>
Right now, your code does not show any "darkening" but I hope I still understood your question correctly: You want the background of the navbar links to be of a certain color on hover but the area is too big, especially in height?
You are right, your issue is caused by the 10px-padding that you have set on your link elements. I would recommend you to reduce the padding to maybe 5px to achieve the height you would like to see on hover (same padding for normal and hover, otherwise the links "jump" on hover). You could then wrap all links in an additional div to make universal changes or you could simply work with margins instead. I would also recommend not setting a specific height on the navbar but letting the elements inside determine its height by using padding and margin.
What always helps me when dealing with spacing in CSS, is adding differently colored backgrounds to ALL of the elements involved as to understand their behavior and to test my code.
In case there is a specific reason why you cannot reduce the padding, then please edit your question and make your requirements clearer.
Btw, there is one fatal error in your code:
<div class=buttonContainer>
should be:
<div class="buttonContainer">
(quotes!!)
...and ideally it should be:
<div class="button-container">
as it's not best practise to use camel case in CSS as opposed to JS or other programming languages.
Actually I'm new to web designing and I'm going to make my own social network and I'm using the amazing layout of Angelsmood.com music social network.
Everything is OK with designing except that I can't place the "Sign Up" button on the right place; it has a lot of margin on its right side. The problem is that there's no margin in my CSS code. Here's my code:
<div id="header_register">
Sign Up
<div>
Artists and their true fans are human angels.
Find them, connect with them and become one of them.
</div>
</div>
And Here's the CSS:
#header_register {
position: relative;
font-size: 12px;
}
#header_register a {
display: block;
height: 30px;
line-height: 30px;
background: ##810101;
color: #fff;
font-weight: bold;
font-size: 14px;
float: left;
text-decoration: none;
border: 1px #508F54 solid;
}
Please help me to fix this.
I made a fiddle and tried to fix your problem the best I could based on the information you gave us.
jsfiddle
Things I did... took your line-height out and moved the link after the div so you didn't have to use it... then I margin: 0 auto to center the <a> tag.
Instead of float: left;
I took it out added a width of the <a> tag so it did not span the width of the screen.
If you need this to function in a different way that I have illustrated ask and I will show you on the fiddle I posted.
How do I cleanly style a HTML + CSS horizontal tab bar so that the tab bar has a line across the bottom that's hidden or suppressed for the active tab?
In other words, I'm trying to do the same thing that StackOverflow does for its tags:
My tab bar is set up as an ordered list with
ul
{
list-style: none;
}
li
{
float: left;
}
Update: I've already poked around sites with Firebug to see how they do it, but I feel like I quickly get bogged down in details. For example, StackOverflow's version has a border for the bottom of the whole div (which makes sense), and a white border for the bottom of the active tab (which makes sense), but then it makes the active tab's border overlap the div's border (and I'm not very clear on how it does that). It looks like Twitter Bootstrap does something similar. I'm trying to understand the general concept of how overlapping part of a container's border with the content's border works instead of copying and tinkering with CSS until I get something that appears to work.
All you need to do is put a bottom border on the <ul> (so that it stretches across) and then give the <li>'s a selected class, and make that one have a 1-pixel higher height.
Here is a very simple example: http://jsfiddle.net/V6gzS/
ok to point you in the right direction use firebug or chromes element inspector and just pick out the bits you need, so on this site for example what you are looking for are called tabs and they are styled like so
#tabs a.youarehere {
background: #fff;
border: 1px solid #ccc;
border-bottom-color: #ffffff;
color: black;
font-size: 120%;
height: 30px;
line-height: 28px;
margin-top: 3px;
padding: 0px 11px 0px 11px;
}
this is just a part of it but you can learn a lot by looking at some code
As I understand it you are capable of making the buttons by yourself, with the horizontal bottom line.
If that is the case, then make sure that this horizontal line is made as a border-bottom: solid 1px #CCC property on each button (the color might be different). At each page you then add the id id="current" to that one button that is the active page. In CSS you write:
#current {
border: solid 1px #CCC;
border-bottom: 1px solid white;
}
If you have any problems it might be solved by adding !important like this:
border-bottom: 1px solid white !important;
Therefore, this is just four extra lines of code in CSS and one extra HTML attribute in each of the files.
If dynamic menu
If you have a menu that is not static on every page, but maybe dynamically generated or placed in an included file, then the above will not be possible. Because then you can't easily add the new id on each seperate page.
In that case you might do some dynamic adding of the attribute. If a server side language is used, e.g. PHP, then you might be able to easily set up an if{...} command that checks the URL or a GET request or alike. Else you might use some javascript to check each button and add the attribute id if the button text equals some header on the page.
I hope you understand. Good luck.
I did it like this:
ul {
list-style-type:none;
}
li{
float: left;
border-bottom: 1px solid #CCC;
}
li:hover{
float: left;
border: solid 1px #CCC;
border-bottom:none;
}
I read once how to create cross-browser rounded buttons with shadow using images, I lost my bookmarks unfortunately that's why I ask does anybody remember the technique.
There is left side picture i.e
And then very wide body image which ends up with right curved border/shadow like this :
So at the end you end up with one button which can be used with multiple sizes? I was googling this, but it seems noways everyone use css without images.
Does anybody knows how this technique is called or can refer me to the link? or give me code example, I'd appreciate any of those
When using an image for the start and one for end of the button, these technique is called "sliding doors" and there are myriads of search results with any search engine…
For an introduction read the A List Apart article: http://www.alistapart.com/articles/slidingdoors
But as Neurofluxation asked you in the comment above: Why the hell would you do that years after we have multiple other methods of styling a button in CSS? The A List Apart article for example is from 2003 - which is an age in Internet terms.
This technique is a variation of the "Sliding Doors" technique:
http://www.alistapart.com/articles/slidingdoors/
http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/
http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/
Basically you use markup like this:
<button><span>Text</span></button>
Then style the span with the edge image to the side, overlapping the main background image of the parent element. Something like this:
button {
background:url(main-image.png) top right no-repeat;
border:0;
padding:0;
width:80px; /* with only 1 "door", you might need to set a width */
/* other resets may be necessary */
}
span {
background:url(left-door.png) left top no-repeat;
}
button, span {
height:37px; /* height of your sprite */
display:block;
}
Demo: http://jsfiddle.net/Kqs3m/
Your results may vary depending on your sprites and the natural width of the content.
Here's the technique which I think you are looking for (using the same images you attached):
HTML:
<a href="#" class="button">
<span>Small</span>
</a>
<a href="#" class="button">
<span>Large button</span>
</a>
CSS:
.button {
background: url('http://i.stack.imgur.com/htUHL.png') no-repeat left top;
padding-left: 9px;
height: 37px;
display: inline-block;
text-decoration: none;
color: #555;
text-shadow: 0 1px 1px #FFF;
font-family: sans-serif;
font-size: 0.8em;
}
.button span {
background: url('http://i.stack.imgur.com/ID6nO.png') no-repeat right top;
display: inline-block;
height: 37px;
padding: 5px 12px 5px 3px;
}
.button:hover span {
color: #333;
}
Link to the demo: http://jsfiddle.net/v284q/
Using CSS properties instead of images can make your applications faster.
In this case you could just use: Border-Radius, Box-Shadow combined with a gradient background.
Here you can find a good Gradient Editor:
http://www.colorzilla.com/gradient-editor/
How to use Border-radius and Box-shadow:
http://www.css3.info/preview/rounded-border/
http://www.css3.info/preview/box-shadow/
I have a menu for which I wanted all of the space around the text, within each individual item, to take the user to the specified page. I looked around on the web and found that the best solution is to set the "a" display to block, as follows:
a {
display: block;
height: 100%;
text-decoration: underline;
}
I have managed to get this working perfectly but want to put images in some of them - like a calendar icon for the events option. I notice it is now underlining the links too. Is there any way to get rid of this? The links have padding-right set to 5px if that helps narrow down the cause / solution.
So all the relevant code is as follows:
a {
display: block;
height: 100%;
text-decoration: underline;
}
a > img {
text-decoration: none;
border: none;
padding-right: 5px;
width: 1.8em;
height: 1.8em;
}
Many thanks in advance.
Regards,
Richard
PS It is Google Chrome in which I am having this problem - I have not currently checked it in any other browsers.
Images are inline elements, so they are treated as part of the text. It's not the image that is underlined, it's the text that contains the image that is underlined, so it doesn't help to prevent underlining for the image.
You can turn the images into block elements by floating them, then they are not part of the text:
a > img {
float: left;
border: none;
padding-right: 5px;
width: 1.8em;
height: 1.8em;
}
I think your best option is to get rid of the underline text-decoration property for the a element, put the link text in a span with common class, and apply text-decoration: underline to that class.
I was running in the same doubt. The text-decoration set to none works for me:
<a href="..." style="text-decoration:none;">
<img src="...">
</a>
As was said befor, you can use a class to make this more generic.
Nice question by the way, It looks totally strange in my website when I saw some minus at the bottom of images. Then I realize that was an underlying.
I tried eveything in the comments to no avail, what worked for me was modifying div which contained all the tags. I have an inkling that they are only underlined when in their absolute default position. Here was the div each tag was wrapped in, no other tricks were applied.
.myDiv {
display: flex;
justify-content: center;
align-items: center;
}