this might be a really stupid question, but I recently started getting into web development again as a hobby, and I am trying to create a simple website to remember what I knew.
Unfortunately, I ran into a roadblock: I want a navigation bar that spans 100% of the page, but no matter what I try, there are still tiny margins to each side, like this:
The website
Right now, the relevant CSS looks like this:
body {
background-color: beige;
}
.navbar {
background-color: black;
overflow: hidden;
margin: 0 0 1em 0;
float: left;
width: 100%;
display: inline-block;
}
.navbar a {
background-color: #dddddd;
color: black;
float: left;
font-size: 24px;
padding: 16px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #777777;
color: white;
}
.navbar a.active {
background-color: coral;
color: white;
}
Andrew provided a nice answer for you but to not run into this kind of problem again I suggest always adding this to your main .css file.
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
Otherwise just add this to the html and body elements.
The gaps are most probably from your parent body element. Add the following to your CSS to remove those gaps:
body {
background-color: beige;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
Related
This a simple sign up formed I've made my school project and for one to sign up is to choose their roles. There's not much to this but I can't seem to figure how to fix this border problem under the anchor? How do I make it so that the space at the top is equivalent to the bottom as well?
enter image description here
body {
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.center {
position: absolute;
top: 150px;
width: 99%;
text-align: center;
font-size: 18px;
}
.box {
margin: auto;
border: 1px solid #ccc;
width: 30%;
padding: 15px;
}
a {
background-color: #333;
text-decoration: none;
display: block inline;
color: white;
padding: 14px 20px;
margin: 8px 0px;
border: none;
cursor: pointer;
width: 100%;
opacity: 1.5;
}
a:hover {
background-color: #ddd;
color: black;
}
ul {
list-style-type: none;
}
li {
display: inline;
}
<div class="center">
<div class="header">
<h2>WELCOME TO SMK USJ 12<br/> ENGLISH QUIZ</h2>
</div>
<form action="role.php" method="post">
<div class="box">
<h3>Choose your role<br/> You are a...</h3>
Teacher</button>
Student
</div>
</div>
You have a typo with the display property on the a tags. I think you meant to use inline-block instead of block inline?
a {
/* ... */
display: inline-block;
/* ... */
}
The correct solution (in my opinion) would be to change your markup a bit, employ a wrapping container for the buttons and then apply the proper styles to that container. However, without changing your markup - you can still achieve what you are looking for, by adding some line-height to your buttons. Something like:
.box a{
line-height: 5em;
}
Should put you in the ball-park of what you are trying to achieve.
I'm not the greatest with HTML, but I'm also not the worse, as in I know how to locate and change things with instructions, but that's about it.
Is anyone able to help me please?
I am trying to get these two menu's separated/spaced out, ideally the main menu links to the left, and the social media links to the right, I have included two images below that hopefully explains what I'm looking to achieve.
This is how it looks on my site
This is how I want it to look
Hopefully I have put the right bit of code below, as I initially said I'm not great with HTML at all.
# 7. Navigation
-----------------------------------------------*/
#social-menu .social-links a {
color: $(topmenu.text.color);
}
#social-menu .social-links a:hover {
color: $(topmenu.text.hover.color);
}
.menu-wrap {
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
width: 100%;
z-index: 7;
word-break: break-word !important;
-webkit-font-smoothing: subpixel-antialiased;
text-align: center;
}
#menu-secondary {
max-width: 1180px;
margin: 0 auto;
border-top: 1px solid;
border-bottom: 1px solid;
}
#nav-secondary {
margin-bottom: 50px;
}
#nav-primary {
position: static;
height: 50px;
background: $(topmenu.bg.color);
}
.wrapper-nav-primary {
max-width: 92%;
margin: 0 auto;
position: fixed;
width: 100%;
background: $(topmenu.bg.color);
padding: 0 4%;
z-index: 999;
}
#menu-primary {
width: 70%;
float: left;
visibility: hidden;
}
#social-menu {
float: right;
margin-top: 18px;
}
.menu-wrap .widget {
display: inline-block;
}
.menu-wrap li {
display: inline-block;
position: relative;
}
.menu-wrap li,
.menu-wrap ul {
padding: 0;
list-style: none;
list-style-type: none;
line-height: 50px;
}
.menu-wrap li a {
margin: 0 30px;
font-weight: 400 !important;
}
#nav-primary li a {
color: $(topmenu.text.color);
}
#nav-primary li a:hover {
color: $(topmenu.text.hover.color);
}
Thank you in advance.
My guess is that you can add the following to the #social-menu. If you can supply the HTML implementation, and not only the CSS it will be easier to determine.
position: absolute;
right: 0px;
Thank you both again for your help, I feel very silly as the solution was simply going to the Blogger layout section and simply moving a box!
I spent the whole of yesterday trying to sort this, following various tutorials and guides changing the HTML and adding CSS haha.
The red HTML/JavaScript box in the primary menu section should be in the social media section below
I am new to html/css and I am trying to edit a landing page. I almost got it I only have one problem that I can't seem to find how to do.
I want to move this navbar at the very edge left side of my website:
I think I need to insert something in this codes but just don't know what it is.
ul {
float: left;
margin: 30px 0 50px 0;
font-family: 'Roboto', sans-serif;
border-radius: 10px;
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #010c15;
}
li a {
display: block;
color: white;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
border-radius: 10px;
background-color: #0099ff;
color: white;
}
Thank you for your answers.
You could try adding the following:
ul{
position:absolute;
left: 0;
....
}
Also you seem to have margin listed twice
You can use that :
ul {
position:absolute;
left: 0px;
top: 0px;
....
}
For ref: http://www.w3schools.com/cssref/pr_class_position.asp
Newbie here
I'm making a website that has 2 main sections: one larger section (section A) with 75% width, and another section (section B) with 25% width, appear side by side.
Section A has several p tags with footnote inside, the only problem is that when I hover the footnote, it appears behind the section B, can anybody help me? Thanks!
Screenshot: http://imgur.com/7BQrcP7
CSS Code:
Section A {
margin: 0px;
padding: 0px;
background-color: #FAFAFA;
float: left;
width: 75%;
}
Section B {
float: right;
width: 25%;
text-align: left;
}
Footnote-sign {
background-color: #ffc;
cursor: pointer;
vertical-align: super;
font-size: 77%;
}
Footnote-tooltip {
background-color: #fea;
border: 1px solid #6b0000;
display: inline;
padding: 5px;
display: none;
position: absolute;
font-size: 85%;
max-width: 540px;
text-align: left;
}
You need to add a z-index to the footnote element to make it appear to be above every other element, without the HTML I will just apply the z-index to both footnote CSS elements
CSS
Footnote-sign {
background-color: #ffc;
cursor: pointer;
vertical-align: super;
font-size: 77%;
z-index: 100; /* a large number to ensure it's on top */
}
Footnote-tooltip {
background-color: #fea;
border: 1px solid #6b0000;
display: inline;
padding: 5px;
display: none;
position: absolute;
font-size: 85%;
max-width: 540px;
text-align: left;
z-index: 100; /* a large number to ensure it's on top */
}
Add the z-index to the Footnote-tooltip
Footnote-tooltip {
z-index:100;
}
If you want to achieve this without z-index then follow my pen.
Hope this pen will help you.
'http://codepen.io/anon/pen/NGeaKp'
I've had a look through some questions I thought were similar to mine but it turns out even the beginner questions are advanced for me!
For some reason my links in the header and footer work, but not in the side bar or the main body, could someone please explain to me why and how i can fix it?
I've opened the html without the css and it works fine then, but i dont know how my css would make a link invalid :S
Code is here: http://codepen.io/anon/pen/gppbmP
Im "pretty" sure its the css thats messing things up so ive pasted that down there, but the codepen has the html too :)
(i am aware that it is super basic, but it is my first try and everyone has to start somewhere! :))
body {
font-family: "Helvetica";
background: #DCDCDC;
}
header a {
font-size: 12px;
color: black;
text-decoration: none;
}
.side a {
font-size: 12px;
color: gray;
text-decoration: none;
}
.product a {
font-size: 12px;
color: gray;
text-decoration: none;
text-align: center;
}
.product p {
font-size: 12px;
color: gray;
text-align: center;
}
footer a {
font-size: 12px;
color: gray;
text-decoration: none;
}
body a:hover {
color: #FF0066;
}
.nav1 {
float: left;
position: relative;
top: 15px;
left:20px;
}
.nav2 {
position: absolute;
top: 47px;
right: 70px;
float: right;
}
h1 {
font-family: 'Satisfy', cursive;
font-size: 48px;
position: relative;
left: 420px;
}
header {
background-image: url("http://www.hugohd.com/wp-content/uploads/Pink-Beach-Sunset-Wallpaper-Android-Wallpaper-hugohd.com_.jpeg");
margin: 30px;
}
.product {
background: white;
position: relative;
float: right;
left: -32px;
height: 350px;
padding: 30px;
}
.product img {
height: 200px;
width: 150px;
margin: 5px;
}
.side {
margin: 30px;
float: left;
background-color: white;
height: 800px;
width: 200px;
padding: 10px;
position: relative;
top: -29px;
text-align: center;
}
.side ul {
list-style-type: none;
margin: 0;
padding: 0;
}
footer ul {
list-style-type: none;
margin: 0;
padding: 0;
}
footer ul li {
display: inline;
padding: 80px;
}
footer {
position: relative;
bottom: -40px;
right: 100px;
}
Thanks in advance! x
Edit: Thank you for helping, everyone! it now works :) x
Update
What follows below may be of use if you are unsure how to set up anchor tags (some seem to be wrong) but see Tasos K's solution above (and voters look at his solution as well).
Original Answer
You seem to be missing http:// at the start of your href=:
google
^^ that's the correct way of doing it but sometimes you have:
google
When you leave out http:// the browser thinks that the link is relative to the html page that it is trying to display. If you look at where those links try to take you they will be something like http://www.example.com/www.google.com.
That's actually a handy thing to use though because it means that media like javascript, css and images that are on your website don't need to be referenced with a full url. You can just use:
<img src="/images/background.png">
(instead of)
<img src="http://www.example.com/images/example.png">
Similarly with links, you can reference other pages on your site with:
Page 2
You are positioning your <footer> with position:relative; and it goes over the side menu. You can see it clearly if you add a background-color:
footer {
background-color:#DEDEDE;
}
You can see it here in a demo. Depending on what you want to do, a solution to fix this can vary.
To fix the issue with your current layout, just set the z-index property to a value, e.g. 1. See demo here
.side {
z-index: 1;
}
.container {
position:relative;
z-index:1;
}
My suggestion is to reconsider your layout to avoid similar issues in the future.
adding this to your CSS file will make the links clickable
.product {
z-index:1000;
}
Working demo with functional product links here.
#Sarah, i dont have exact know how , why? but if you rename your class from side to side1 or something else and then change the css to same as side1 or something it works fine.
Again i am not sure what could be the reason side is not working. And request you not to grade down if you dont accept.