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
Related
I'm not sure why, but past a certain font size the text inside my navigation bar shows up on two lines. The box size isn't being updated for some reason in Chrome and Safari but still works fine in Firefox.
Firefox
Chrome
What would be the difference between these web browsers that would have such an effect on my code?
<nav id="topTab">
<ul>
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
<div>
<h1>
<b href="http://localhost:8000/home.html" title="Home">Example1</b></h1>
</div>
</nav>
CSS:
#media only screen and (min-width : 1024px) {
a {
background: #fcfcfc;
color: #000;
text-align: center;
text-decoration: none;
font-family: 'Gloria Hallelujah';
}
#topTab{
position:relative;
}
nav#topTab {
float: left;
width: 100%;
overflow: hidden;
}
nav#topTab ul {
float: left;
clear: left;
position: relative;
list-style: none;
margin: 0;
padding: 0;
left: 50%;
}
nav#topTab ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
nav#topTab ul li a {
display: block;
padding: 0 5% 0 5%;
margin: 0 15% 0 3%;
font-size: 2.2em;
}
nav#topTab ul li a:hover {
background: #000;
color: #fff;
}
h1 {
position: relative;
text-align: center;
top: 20%;
}
h1 b {
font-size: 2.3em;
text-decoration: none;
color: black;
font-weight: bold;
font-family: 'Caveat Brush';
}
}
Your unordered list is floated. Floating an element removes it from the "natural" flow of the document and as a consequence, your text is trying to adjust to this "unnatural" flow.
You have to clear your floats to restore the flow again. This can be done by adding an element with clear: both style attached to it. In this case, you would add clear both to your div wrapping the heading tag.
div {clear: both}
I am trying to clone some website to improve my skills, but I have encounter a problem, the page seems to be stuck in an specific height and when I try to add more html it just disappear (it does not disappear, it's added at the top of the page behind the background image). I really want to know what is causing this and how to fix it without messing with the background image.
.center{
text-align: center;
}
*{
margin 0;
padding: 0;
}
a:link {
color: inherit;
}
a:visited {
color:inherit;
}
a:hover {
color: #ea7640;
}
a:active {
color:inherit;
}
a {
text-decoration: none;
}
#wrapper {
background-image: url("https://66.media.tumblr.com/f79df0dd538fc53292fe1aac7cd54daf/tumblr_oga789rskz1vxey6qo1_1280.png");
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 70%;
background-repeat: no-repeat;
background-size: cover;
margin-top: 3em;
}
nav {
background-color: #312822;
padding: 3px;
margin-top: -8px;
margin-left: -8px;
margin-right:-8px;
font-size: 13px;
}
li {
list-style-type: none;
display: inline-block;
margin-right: 25px;
color: #bdb9b7;
}
#proyecto {
color: #ea7640;
}
.texto {
color: #ea7640;
font-weight: bold;
}
#logo {
margin-top: 4em;
}
#text{
margin-top: 4em;
font-weight: bold;
}
#marca {
margin-top: 10em;
font-style: italic;
}
#wrapper2{
position: fixed;
min-width: 100%;
min-height: 1000px;
background-color: #fff;
margin-top: 700px;
left: 0;
}
#wrapper2 ul {
margin-top: 20px;
}
Demo: http://codepen.io/njwda/pen/PbwaOV
Just erase position: fixed from your wrapper elements - that way the elements will simply appear below each other, as they are supposed to.
Your image has position: fixed, so the other content by default has property position: static and located under the image. If you want to see your new content, your should use one of the following properties for it:
position: absolute;
position: fixed;
position: relative;
For example try to add new <h1 style = 'position: relative;'>Test</h1> to your HTML.
Here is the working example: https://jsfiddle.net/o589ynts/
Good luck
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
Hey I want to make a website with a frontpage just like this one: http://foreword.io/ .
I need help with the horizontal list to get it just like the one on foreword.io.
I want the yellow area to be stretched all the way to the sides. When I hover over a link it only marks the upper part of the square, so I want it to mark the whole square for each link.
Please help and thanks in advance.
Here is my code:
body {
font-family: Times New Roman;
}
.h1 {
position: absolute;
height: 200px;
top: 90px;
width: 1585px;
text-align: center;
font-size: 350%;
font-family: Times New Roman, Georgia;
}
u {
text-decoration: none;
border-bottom: 5px solid black;
}
.fakta {
position: absolute;
height: 190px;
top: 340px;
width: 700px;
left: 500px;
font-size: 50px;
}
ul {
position: absolute;
height: 100px;
top: 600px;
left: 100px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: yellow;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 20px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: white;
}
<div class="h1">
<h1>
<u>DatabaseNavn</u>
</h1>
</div>
<div class="fakta">
<p>Database med ansatte <br> og avdelinger</p>
</div>
<ul>
<li>Side1</li>
<li>Side2</li>
<li>Side3</li>
<li>Side4</li>
<li>Side5</li>
</ul>
You can do this just adding the Height option to "li a" section in the css as below:
li a {
display: block;
color: black;
height: 100px;
text-align: center;
padding: 20px;
text-decoration: none;
font-size:20px;
}
it will set the height of the square so the whole yellow part will change to white.
in the case of the yellow bar size and item positions:
set the width of the ul to 100% so it will use the whole available space on the browser also remove the "left" and finally add 'position:relative', 'left:20%' and 'width:10%; to the li section.
li {
position: relative;
left: 20%;
width: 10%;
float: left;
}
SOURCE: My head :-P
Use display: inline-block; instead of display: block; and you will get an horizontal list.
Weave: http://kodeweave.sourceforge.net/editor/#2b1da7103aeec07f8b53045481c63c77
For something so simple you're using position absolute in places where it's not needed which could be replaced with margin. Thus your code is fairly WET (especially with me being on a tablet right now) So I made a simple mockup that's DRY and can work for RWD as well if you utilize media-queries.
I removed a lot of the unnecessary positioning. By setting the ul tag to text-align center I was able to center the anchors by telling the li tag to be displayed as an inline-block. Then I filled the width using width: 100%; margin: 0; padding: 0;
How this snippet helps.
body {
font-family: Times New Roman;
}
.h1 {
width: 100%;
text-align: center;
font-size: 350%;
font-family: Times New Roman, Georgia;
}
u {
text-decoration: none;
border-bottom: 5px solid black;
}
.fakta {
width: 100%;
font-size: 50px;
text-align: center;
}
ul {
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: yellow;
text-align: center;
}
li {
display: inline-block;
}
li a {
display: block;
color: black;
text-align: center;
padding: 20px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: white;
}
<div class="h1">
<h1>
<u>DatabaseNavn</u>
</h1>
</div>
<div class="fakta">
<p>Database med ansatte og avdelinger</p>
</div>
<ul>
<li>Side1</li>
<li>Side2</li>
<li>Side3</li>
<li>Side4</li>
<li>Side5</li>
</ul>
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.