I am a novice at this(css) and I am messing around trying to build a small website with html and css. I am having aa issue where on my page to the left I have my links to external pages. And in the middle of my page I have a paragraph in a section but this paragraph seems to interfere with my links. some of the links wont let me click on them.
This is my css, Can sombody tell me what I am doing wrong here please?
body {
color: white;
background-color: black;
font-family: Verdana, Geneva, sans-serif;
}
header {
border: 5px solid blue;
}
table, th, td {
border: 1px solid white;
}
section {
font-family: arial;
font-size: 15px;
text-align: center;
padding: 70px;
left: 0;
margin: auto;
margin-top: -100px;
position: absolute;
top: 50%;
width: 100%;
}
nav ul {
padding: 15px;
line-height: 3em;
list-style-type: none;
}
nav ul li a {
color: white;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
nav ul li:hover {
list-style-image: url(download.png);
}
nav ul li a:hover {
color: rgba(255, 255, 255, 1);
}
http://codepen.io/davidatthepark/pen/jVLNbv?editors=1100
Check out my link above. I put the borders in just so you can visualize what is going on. I'm sure you guessed it already but the section was covering the nav. A good way to put elements side by side is to use display: inline-block. Make sure to look up the display selector because it is crucial to writing CSS. All I did was make the width of the nav 30%, the section to 65% so that they don't flow over 100%, and then give both of them display: inline-block. Hope that makes sense!
Related
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%;
}
I need help with the code of a project I've been working on. I can't make my navigation bar fixed so it always appears on the top of the viewport. I understand the rules of CSS position and I've been looking at examples and tutorials, but for some reason, I'm stuck.
I tried to make the position fixed for the navbar and relative to the container, along many other changes. Every thing I tried, it messes up my content. I guess this is one of those moments when you need help.
This is the link to the project and the code of the navbar without any position rules.
https://codepen.io/aitormorgado/pen/MWayXPy
#title-wrapper {
display: flex;
justify-content: center;
align-items: center;
font-family: "Aclonica", serif;
color: #281c1c;
font-size: 6rem;
text-transform: uppercase;
margin: 3rem 1rem;
}
li {
list-style: none;
}
#header-img {
width: 6rem;
padding-right: 1.5rem;
}
#nav-bar ul {
display: flex;
flex-direction: column;
align-items: center;
font-family: "Libre Baskerville", serif;
background-color: #990000;
color: #e0e0e0;
border-top: 1px solid black;
border-bottom: 1px solid black;
text-transform: uppercase;
font-size: 4rem;
}
#nav-bar ul li {
border: 2px solid black;
width: 100%;
text-align: center;
}
#nav-bar ul li a {
text-decoration: none;
color: inherit;
padding: 1.4rem;
display: block;
}
#nav-bar ul li:hover {
background: #cc3300;
}
A million thanks for your help!
as per your question, I just chnaged a small thing in your code and now your header is fixed at the top while scrolling,
all you need to do is use of
#header {
position: sticky;
top: 0;
z-index: 99999;
background-color: #E0E0E0;
}
on your header. and the background color is given so that rest of the bottom elements will not appear below it while scrolling,
If need something else, or I have not understood your question, then feel free to share.
just check the codepen here.
I am about halfway through completing a course for learning HTML and CSS, the first time I've ever tried programming, so pardon the (probably) simple problem I have.
I am creating navigation tabs for a fictional website, the tabs being "Menu", "Nutrition", "Order", and "Locations". As you can see, each tab would be a different size because the content varies. I am trying to make a border for each tab, so that the borders would be the same height and width for each one, effectively lining up as four congruent rectangles with words inside of them. The code in HTML for this part that I am working with is:
<nav>
<span>MENU</span>
<span>NUTRITION</span>
<span>ORDER</span>
<span>LOCATIONS</span>
</nav>
The code I currently have for CSS that would effect this is:
* {
box-sizing: border-box;
}
,
nav span {
display: block;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
margin: 13px 0px;
}
and
nav a {
color: #666666;
border: 1px solid rgb(202, 202, 202);
padding: 1px;
margin: 0px 3px;
}
This is the resulting visual
How would I make it so that the borders for each tab would be congruent and in line with each other?
* {
box-sizing: border-box;
}
nav span {
display: block;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
margin: 13px 0px;
text-align: center;
}
nav a {
color: #666666;
border: 1px solid rgb(202, 202, 202);
padding: 1px;
margin: 0px 3px;
text-decoration: none;
display: inline-block;
}
https://codepen.io/stargroup0075/pen/MWwLxMd
You want to
Give the elements with the borders (<a />) display: block;, which causes them to occupy the maximum horizontal space available
Give a container of the blocks (<nav />) display: inline-block;, which makes the container shrink-wrap its content
Give the parent of <nav /> (in your HTML example there is no parent, so I assume it's <body />) text-align: center;, which centers the <nav />, like with your original code.
The resulting CSS would look something like this:
* { box-sizing: border-box }
body { text-align: center } /* Centers child inline content */
nav { display: inline-block } /* Shrink-to-fit content */
nav span {
display: block;
font-size: 16px;
font-weight: 100;
letter-spacing: 2px;
margin: 13px 0px;
}
nav a {
display: block; /* Take up maximum horizontal space */
color: #666666;
border: 1px solid rgb(202, 202, 202);
padding: 1px;
margin: 0px 3px;
}
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 have a bigger HTML header containing a menu and a large picture.
I would like to place text on the image somewhere as a "title" to the page.
Whenever I try to add my <h1> tag somewhere, it positions the text above the menu and it's not what I want.
I would like to be able to position any form of tags somewhere in the picture and I am struggling to find a solution as my code is not efficient to do this.
I am starting to understand what my problem is but I cannot find a solution.
Here is a template of what's going on. I want to place the text somewhere next to my face (as weird as it sounds lol), anyone?
body {
font: 15px/1.5 Gravity, Arial;
padding: 0;
margin: 0;
}
header {
width: 100%;
height: 800px;
background: url('../img/web_bg.jpg');
background-size: cover;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
z-index: 100;
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #fff;
z-index: 100;
}
nav ul li {
display: inline-block;
padding: 16px 40px;
;
}
nav ul li a {
text-decoration: none;
color: #000;
font-size: 16px;
}
nav ul li a:hover {
background-color: #white;
border: none;
color: #000;
text-align: center;
opacity: 0.6;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
<header id="home">
<h1>MOHANAD ARAFE</h1>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">MOHANAD ARAFE</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
You are going good, cheers for that. For the problem you are facing I would suggest you to play with z-index. It is a CSS property, and defines the elements as layers. Element with greater z-index will be the top most layers, followed by the elements with lesser z-index. I would suggest you to set z-indec of image to lowest, and make the content above in another container, and set the z-index of this container to a higher range, this should solve your problem.
Here's more reference on z-index
Happy Coding.
I would suggest using grid in these kind of situations where you have to deal with position of elements. A crash course on grid will be the best option. I personally use it a lot and don't have to care about anything other than z index.
You can use position: absolute; for the h1 tag and use top value in %, and left value in %
h1{
position:absolute;
top: value in %;
left: value in %;
}
header{
position:relative;
}
Note: apply a class name for h1 and apply css for that class or else it might affect h1 tag in sub pages.