<!Doctype html>
<html>
<head>
<title>Restaurant HAYQ</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Aurimas Ransys">
<meta name="keywords" content="Armenian Food, Food">
<meta name="description" content="Armenian Food Business">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Permanent+Marker" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower" rel="stylesheet">
</head>
<body>
<section id="navbackground">
<header>
<nav>
<ul>
<img src="img/hayq.png" alt ="logo" class="logo"/>
<li><a href="index.html">HOME</a></li>
<li><a href="menu.html">MENU</a></li>
<li><a href="events.html">EVENTS</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contacts.html">CONTACTS</a></li>
<img src="img/media.png" alt="social media" class="socialMedia">
</ul>
<!-- Just wanted to add social media on nav bar
<p>Follow us on<br> social media</p>
-->
</nav>
</header>
</section>
<section id="firstdBackground">
<h1>HAYQ</h1>
<h2>Armenian Specials</h2>
</section>
<section id="secondBackground">
nothing here
</section>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.logo {
width: 10%;
display:inline-block;
}
body {
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
margin: 1%;
font-size: 2em;
display:inline-block;
}
nav ul li a {
text-decoration: none;
float: left;
text-align: center;
font-family: 'Gloria Hallelujah', cursive;
color: #E6E6E6;
}
nav {
overflow: hidden;
background-color: #214569;
position: fixed;
top: 0;
width: 100%;
}
nav ul li:hover {
background-color: #8C9DBF;
}
/*
nav p {
top: 0;
float: right;
font-family: 'Gloria Hallelujah', cursive;
font-size: 1.5em;
}
*/
header {
background-color: #214569;
opacity:0.7;
}
.socialMedia {
width: 10%;
display: inline-block;
position: absolute;
top: 0;
right: 0;
}
h2 {
font-family: 'Gloria Hallelujah', cursive;
color: #7D0CE8;
font-size: 5em;
text-shadow: 4px 4px 4px #fff;
opacity: .9;
position: relative;
text-align: center;
top: 32%;
}
h1 {
font-family: 'Permanent Marker', cursive;
font-size: 9em;
color: #7D0CE8;
text-shadow: 4px 4px 4px #fff;
opacity: .8;
position: relative;
text-align: center;
top: 30%;
}
#secondBackground {
background: url(img/salad02.jpg) no-repeat;
background-size: cover;
height: 1400px;
width: auto;
}
#thirdBackground {
background: url() no-repeat;
background-size: cover;
height: 1000px;
width: auto;
}
It would help other members to help you, if you could provide a bit more of a narrative context for your question. What are you struggling with, and what have you tried to fix your issue so far for example?
PS. As it appears your earlier post is a duplicate of this one, I will delete it to ensure any comments remain in one place.
1 Like
You can move the nav elements to the center by putting text-align:center on the ul because the list elements have been set to inline-block which means they can be centred in the same way that you can centre text.
nav ul {
margin: 0;
padding: 0;
text-align: center;
}
Note that your images in the ul are invalid because all content in a list must be inside list tags like this:
<nav>
<ul>
<li><img src="img/hayq.png" alt ="logo" class="logo"></li>
<li><a href="index.html">HOME</a></li>
<li><a href="menu.html">MENU</a></li>
<li><a href="events.html">EVENTS</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contacts.html">CONTACTS</a></li>
<li><img src="img/media.png" alt="social media" class="socialMedia"></li>
</ul>
</nav>
If you need the images styled differently to the other lists then add a class to those list items and style accordingly.
I note you are trying to use relative positioning to move things around like this:
h2 {
font-family: 'Gloria Hallelujah', cursive;
color: #7D0CE8;
font-size: 5em;
text-shadow: 4px 4px 4px #fff;
opacity: .9;
position: relative;
text-align: center;
top: 32%;
}
You have top:32% but luckily it will have no effect as there is no height for it to base itself on and even if there was you never want to use position:relative to move things structurally. Use margins/padding instead and that will maintain the flow of the document. As a beginner you will not need to move anything with relative positioning as it is used for more subtle effects. A relative element is only moved visually and not physically and the space it originally occupied is always preserved in the flow of the document.
I also note that you have this:
#secondBackground {
background: url(img/salad02.jpg) no-repeat;
background-size: cover;
height: 1400px;
width: auto;
}
You have set a âmagic numberâ height on your content. You will very rarely set a height on an element that holds fluid content like text as you never know what that height is going to be especially in a fluid and responsive page. Leave the height off altogether and let the content dictate the height. If you want a minimum height then use min-height instead which will let the element grow if needed. (Generally I would never set a min-height on an element that causes a vertical scrollbar when one is not needed and would usually suggest that the approach is wrong from the start.)
Lastly use classnames/ids that describe the section rather than #firstbackground, #secondbackground etc and for reasons of specificity use class names rather than ids.
Hi Chris!
Sorry for any confusion, this was my first attempt to open a new topic. I am new here and this is my first website I am currently working on.
To answer your question I am trying to move the buttons at navigation bar to the centre. Iâd like to leave logo where it is and add âFollow un on Social Mediaâ next to the social media logo.
Also another issue I am facing is that while scrolling down other elements like âHAYQâ or Armenian Specials overlapping on navigation bar. Iâd like to fix that.
I was trying to be as clear as possible, sorry for my english.
It is hard for me to explain what I did because it is my first website and I am not sure what I did myself.
Thank you in advance for help!
Thank you Paul for your feedback! Very informative and I tried everything you told me, but now I am facing new issues.
When I changed all the items to list items in navigation bar, the logo is on top now but not in one line with other buttons. Not sure why.
The reason why I used height is that I wanted to use few different pictures as backgrounds when you scroll down the page. If I remove height is becomes very small⌠also not sure about solution to this.
Thanks
Aurimas
Your first logo will be next to the text in the nav now that it is inside a list element which is display:inline-block. You will need to set the list-items to vertical-align:middle if you want the middle of the image aligned with the textâŚ
e.g.
nav ul li {
list-style: none;
margin: 1%;
font-size: 2em;
display: inline-block;
vertical-align: middle;
}
You also need to remove the width:10% that you applied to the image as that is nonsense in that case. If you have a very large image and you are reducing it down 10 times then you would be better with a smaller image to start with. As I canât see your image I can only guess what you are doing with them:)
The social media image is absolutely place and will be at the position you placed it. If you donât want it there then place it somewhere else but note that absolute elements are placed in relation to the nearest positioned ancestor (if none then they are place in relation to the root element (effectively the initial viewport)).
It all depends on how this is structured but generally the content would control the height of the div. If you have no (or little) content are you just going to show a big background image?
Weâd probably need to see a mock up of the design to understand what you are trying to achieve.
I would also suggest that you sign up for a free codepen account and place your demos online so that we can see the actual code you are using as the site evolves.
Lastly it may be pertinent if you perhaps you take a course or two on basic html and css while you practice as a lot of these issues you are experiencing would be covered in the first few lessons. You will find that you will progress much better once you get a few of the concepts out of the way. CSS isnât difficult (basic css) but it does have rules and methods that need to be understood before you can progress.
Your navigation is fixed positioned which means it no longer takes part in the flow of the document and will sit on top of anything in the way. Fixed positioning is hard to control even for those proficient at css and is best avoided. Its ok for fixed height headers or footers with one or two words in them but once they have multiple text items it becomes almost impossible to cater for them in a fluid layout. You would probably be better looking at sticky header which is usually achieved with JS (although some browsers do support position:sticky).
For the time being you could add some padding top to the body element so that your content starts below the fixed header.
e.g.
body{padding-top:5em}
However the 5em smells of âmagic numbersâ and you will need to monitor the height of your header because if your text wraps to another line then once again the content will overlap. You can do this with media queries and increase padding or reduce the size of the content. Itâs all very tedious though.
1 Like
Thank you Paul for your quick response! Really helpful information and yes I did basic courses on html and css, but clearly I need to repeat those as I am doing so many rookie mistakes⌠This work is for Web Design lecture, hopefully I will manage to get it done this week.
Thanks
Aurimas
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.