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
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%;
}
As you read on the title, I've been trying to make a navigation bar but I'm having several issues I haven't experienced before. I even made a list:
Buttons sticking into the navigation bar even though they don't belong in the div class.
Navigation Bar
Well now, I've seen this before, but I've gotten a bit rusty on HTML and don't quite remember how to fix it. If you can't tell, the links are not lined up with the text/logo. How can I fix this? I'm trying to make it slim.
background-color: #252036;
}
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70%;
}
.navigation-bar {
background-color: #1c172c;
width: 100%;
left: 0;
top: 0;
position: fixed;
text-align: right;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: right;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
display: inline;
text-align: right;
}
.navigation-bar li a {
color: black;
font-size: 16px;
font-family: basic;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
#menu {
float: right;
}
<div class="navigation-bar">
<div id="navigation-container">
<h1>SINUS</h1>
<ul>
<li>Home</li>
</ul>
</div>
</div>
<button>Download</button>
It is sticking because of position: fixed;. The button doesn't see the .navigation-bar. Add padding to a parent that contains these elements.
h1 needs to have display:inline-block;. ul is just below h1 now.
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 want my sidebar to overlap the footer. I tried position:absolute, but that didn't work.
.sidebar-menu {
list-style: none;
margin: 0;
padding: 0;
}
element.style {
padding-bottom: 25px;
}
.main-footer {
background: #fff;
padding: 15px;
color: #444;
border-top: 1px solid #d2d6de;
}
If I understand your question correctly you should try use z-index attribute. If you set sidebar bigger z-index it will overlap your footer.
Try the below code
.sidebar-menu {
list-style: none;
margin: 0;
padding: 0;
position: fixed;
}
Hope this helps.
How do I center this menu in css? I have tried left: 50% or text-align: center but nothing works. Do you guys have any idea?
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
I have to add more details but that was actually it, so I have to write rubbish now.
Thanks in advance
CSS:
#navigation {
margin: 0;
width: 100%;
height: 50px;
background: url(navigation.jpg);
padding: 0;
position: absolute;
left: 0;
top: 0;
right: 0;
text-align:center;
}
#navigation ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#navigation li {
float: left;
border: 0;
list-style:none;
}
#navigation a {
margin: 0;
display: block;
height: 30px;
padding: 20px 20px 0px 20px;
background: none;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFF;
border: none;
}
#navigation a:hover, #navigation #current a {
background: url(button.jpg);
text-decoration: none;
color: #000;
}
Have you tried:
#navigation ul {margin:0 auto;}
on your #navigation ul element?
You can try this:
#navigation {
text-align:center;
}
#navigation ul {
display:inline-block;
}
wrap your content in a container, set a width and use margin:auto
EDIT
Ok this is a bit of a mess, is there a reason you are absolute positioning the header? Your ul does not need position: relative and your li's should be using display:inline-block instead of float.
JSFIDDLE
Your #navigation element has width:100%; so that block level element takes the entire screen. You can try to center it's children with text-align: center;.
Try settings a specific width on your #navigation ul and then apply margin: 0 auto; text-align:center;.
Depending on what you're going for, it may be better to do #navigation li{ display: inline-block;} instead of float: left