I am trying to make a start page of sorts, and I want it to look somewhat like this: https://imgur.com/zjzKyRD (poorly made, but the program I used was really bad(I miss mspaint))
I originally used buttons, which made it really easy to link and customise, but I had some issues with size, so I tried with a div, but I can't seem to make the whole div box a clickable link. If I am able to figure that out, I still need to place the boxes in specific places and I have no idea how.
The question: How can I make these boxes, place them in a grid like formation and have them link to different sites? Would it also be possible to make a function where I can hover over one of the "sites" and it would show me some information about it? (manually entered)
Please keep in mind I'm really new to this, so an explanation would be nice :P Thanks.
Edit: Didn't include any code, here it is:
CSS ("borrowed" from w3)
.button {
margin-left: 150px;
margin-top: 50px;
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;}
.button1 {
background-color: #ffbf80;
color: black;
border: 2px solid #ffbf80;
min-width: 350px;
width: 350px;}
.button1:hover {
background-color: white;
color: #ffbf80;}
HTML:
Google
Thats just one of the buttons, but the others are basically the same, but with different links, margins and colours(colors?).
When using multiple boxes they appear below each other, not besides each other. I have messed around with a bunch of different margin settings, a few things I found online when browsing around but nothing seems to align them properly.
First of all I'd suggest that you use some grid framework, such as Bootstrap or Foundation. Nobody writes websites in plain HTML anymore.
Secondly, I think you can use the a-tag and change the css so that it's an inline-box. Especially if you're only going to use them as links and not do anything fancy (such as some dynamic animations). You should probably have a container class around those to represent a row. As follows:
<div class="container">
<a class="linkbox" href="link1"> Link 1 </a>
<a class="linkbox" href="link2"> Link 2 </a>
<a class="linkbox" href="link3"> Link 3 </a>
</div>
<div class="container">
<a class="linkbox" href="link4"> Link 4 </a>
<a class="linkbox" href="link5"> Link 5 </a>
<a class="linkbox" href="link6"> Link 6 </a>
</div>
Check out this fiddle with accompanied css https://jsfiddle.net/wwk4tyzw/2/
Just because it's probably going to be more relevant in the future i want to throw this in here: https://drafts.csswg.org/css-grid/
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.
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 ?
I’m working on my footer and I have some contact info floating to the right and the text is aligned right.
Below that I wanted to put social media links. I wanted “Follow me at:” then icons for Facebook and Instagram. I gave these icons as well as others in my footer the class “icon”. In my css I targeted them and gave them color, pseudo classes, size, etc. For some unknown reason, the first icon isn’t being targeted. I even copied and pasted the code for the second over the first one and it’s still no targeted. Is there a rule I’m missing? I haven’t messed with spans much, so I may be screwing that up. I wanted it inline, unlike the other contact where the small icons sit in their own block above the text. That was a happy mistake. I like it.
Anyway, here's the code:
HTML:
<div class="soc-media">
<span>Follow EmJ Pilates on:</span>
<span class='icon'></i></span>
<span class='icon'></i></span>
</div>
CSS:
.icon{
color: goldenrod;
font-size: 200%;
}
.icon a:link{
color: goldenrod;
}
.icon a:hover{
color: #bbbbbb;
}
And here’s a link to the screen shot:
https://www.dropbox.com/s/2d2r0uzyh6yyjtd/Screenshot%202015-07-24%2011.39.20.png?dl=0
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.
I am trying to put two divs beside each other and have it so when you hover over an image some text is displayed. This is my CSS:
.german img, chembond img {
height: 100;
width: 100;
padding: 2px 2px 1px 2px;
}
.german img:hover, chembond img:hover {
border: 1px solid #2e8ece;
border-radius: 10px 10px 10px 10px;
}
.german-content, .chembond-content {
display: none;
}
.german:hover .german-content {
display: block;
float: left;
border: 1px solid;
}
.chembond:hover .chembond-content {
display: block;
float: right;
border: 1px solid;
}
.german-content p, .chembond-content p {
font-size: 15px;
font-weight: normal;
line-height: 30px;
word-spacing: 5px;
color: black;
}
.chembond {
float: right;
}
.german {
float: left;
}
.german, .chembond {
display: inline;
overflow: hidden;
}
And this is my HTML:
<section id="projects-content">
<p>Projects</p>
<section class="german">
<img src="assets/img/german.png" height="60" width="50" />
<section class="german-content">
<p>I started this project because I have seen many students in my German class keep on getting the tenses wrong by putting verbs in the wrong places, missunderstanding past participles etc... so I started this to help students (or anyone) understand the sometimes confusing German tenses. Each tense page consistes of three sub-sections: a question, an answer and a statement. These then in turn include an example and an explanation. If you were to hover over some of the words then a popup box will appear, explaining the use of the word. You can see it here (please bare in mind that this is still a work in progress). If you want to email me a tip about it, or just ask me about it then don't hesitate to contact me.</p>
</section>
</section>
<section class="chembond">
<img src="assets/img/german.png" height="60" width="50" />
<section class="chembond-content">
<p>I started this project because I have seen many students in my German class keep on getting the tenses wrong by putting verbs in the wrong places, missunderstanding past participles etc... so I started this to help students (or anyone) understand the sometimes confusing German tenses. Each tense page consistes of three sub-sections: a question, an answer and a statement. These then in turn include an example and an explanation. If you were to hover over some of the words then a popup box will appear, explaining the use of the word. You can see it here (please bare in mind that this is still a work in progress). If you want to email me a tip about it, or just ask me about it then don't hesitate to contact me.</p>
</section>
</section>
</section>
This is what it currently does: http://www.penguinie.co.uk/#projects
Also, Is there an easier way to do what I'm trying to do? (which is to put both of the images side by side and have them stay side by side when I hover over them and the text appears).
Use display:inline-block; instead of display:block; on the divs.
Using display:inline-block you can still assign width to an element, unlike display:inline. Block level elements will always take a new row.
However, you might notice that there's space in between:
If needed, this can be easily fixed by applying this to the parent element: font-size:0;.
Here's a fiddle about it.
In general, I use #Christian's inline-block solution.
But another possibility is using float: left.
Remember to clear the floating (e.g., with <div style="clear:both"></div>) after your floating elements.