I want to achieve some UI/UX like this
so there is a logo, also 2 menu, 1 for language change, 1 for change menu
my approach is two div
first div contain image and language menu ul
second div contain menu ul
but, image in first div is covered by second div
did my approach wrong?
Here is what I've done
HTML & CSS
header {
position: fixed;
}
#logo {
position: fixed;
float: left;
}
#nav-language {
align: right;
width: 100%;
height: 66px;
}
#nav-menu {
background-color: #ccb96b;
width: 100%;
height: 66px;
top: 67px;
position: fixed;
}
#nav-menu ul {
left: 500px;
z-index: 5;
}
ul {
list-style-type: none;
}
li {
display: inline;
padding: 15px;
}
#nav-language a {
font-size: 1.6em;
text-transform: uppercase;
font-weight: bold;
font-family: century gothic;
text-decoration: none;
color: white;
}
#nav-menu a {
font-size: 1.6em;
text-transform: uppercase;
font-weight: bold;
font-family: century gothic;
text-decoration: none;
color: #430615;
}
#nav-menu a:hover {
opacity: 0.36;
}
<header>
<div id='nav-language'>
<img id="logo" src="<?php echo base_url(); ?>assets/images/logo.png" />
<ul>
<li class='navigation-Blog'><a href='#'>en</a></li>
<li class='navigation-Crew'><a href='#'>fr</a></li>
<li class='navigation-Promos'><a href='#'>it</a></li>
</ul>
</div>
<div id='nav-menu'>
<ul>
<li class='navigation-Blog'><a href='#'>home</a></li>
<li class='navigation-Crew'><a href='#'>About Us</a></li>
<li class='navigation-Promos'><a href='#'>contact us</a></li>
</ul>
</div>
</header>
any help appreciated, maybe my approach could be wrong, welcome for advice
I was able to achieve what you're looking for by changing the #nav-language to position: relative; and changing the css on the #logo div's z-index and top & bottom attributes. Here's a jsfiddle
EDIT: Note that you'll have to play with the top and bottom values depending on your image size, i've used a random image as an example
EDIT2: i noticed that you have align: right; on your #nav-language div, but align doesn't exist in css, you'll want to set the header width to 100% and put float: right; on the language ul. i've updated my jsfiddle with the correct css
https://jsfiddle.net/n42dyhza/2/
Related
Trying to get a title to appear inline between the Logo and the navbar links. I'm trying to learn without bootstrap first and ideally without flexbox (want to know the basics first).
I've been trying 'display: inline' and different 'position' values in different spots but I'm getting lost.
#header-img {
margin-left: 20px;
margin-top: 10px;
height: 100px;
width: 100px;
float: left;
}
#nav-bar {
text-align: right;
padding: 20px;
background-color: #A7A7A9;
}
li {
display: inline;
list-style: none;
}
ul {
top: 5px;
left: 10px;
}
.nav-link {
width: auto;
height: 50px;
margin-left: 40px;
margin-top: 25px;
display: inline-block;
color: #453F3C;
font-size: 20px;
font-weight: 500;
letter-spacing: .9px;
text-decoration: none;
}
<header id="header">
<div class="logo">
<img id="header-img" alt="company logo" src="https://preview.ibb.co/jabJYd/rocket_1976107_1280.png">
</div>
<h1>Title</h1>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#our-services">Our Services</a></li>
<li><a class="nav-link" href="#reviews">Reviews</a></li>
<li><a class="nav-link" href="#locations">Locations</a></li>
</ul>
</nav>
</header>
to learn more about css positioning use the following link : https://www.w3schools.com/Css/css_positioning.asp and to learn more about positioning read this article : https://www.w3schools.com/Css/css_inline-block.asp
You also need to look at using percentages for your widths.
In your code, the navbar and the title are the two parent elements which need to be positioned and assigned widths in percentages for responsiveness. like this;
#nav-bar {
text-align: right;
background-color: #A7A7A9;
width: 79%;
float: right;
margin-top: 12px;
display: inline-block;
}
For the title :
h1{
display: inline-block;
width: 18%;
min-width: 77px;
float: left;
}
For the ul element in the navbar :
ul {
top: 0px;
left: 0px;
padding-left: 0px;
}
finally for the .navlinks :
.navlink{
width: auto;
margin-right: 7%;
display: inline-block;
color: #453F3C;
font-size: 19px;
font-weight: 500;
letter-spacing: .9px;
text-decoration: none;
}
I am new to development as well but I think what you are trying to do is the following.
HTML:
<nav id="nav-bar">
<ul>
<div class="new_div"><h1>Title</h1></div>
<li><a class="nav-link" href="#our-services">Our Services</a></li>
<li><a class="nav-link" href="#reviews">Reviews</a></li>
<li><a class="nav-link" href="#locations">Locations</a></li>
</ul>
</nav>
</header>
CSS:
.new_div{
float: left;
}
I just added the title as a new div inside the navigation menu and float it left. If there is a logo in between then you can add it in the navigation list and float it left.
You could use
header * {
display: inline;
}
to put everything inside <header> </header> inline.
If you plan to use the header tag elsewhere use a class or an id.
header.top-bar * {
display: inline;
}
To keep all with the same background:
header.top-bar {
width: 100%;
background-color: #A7A7A9;
}
Hope it helps you!
.header h1{position:absolute; left:50%; transform:translateX(-50%); }
Now it's centered between the logo and navigation. By setting the top property you can vertically move the element. Make sure you parent element's position set to relative.
I have a HTML5 header setup. It uses <ul> and <li> elements for the links.
This is the HTML:
<header>
<nav>
<ul>
<li id="logoli"><img src="/assets/logo.png" id="logo"></li>
<li>Home</li>
<li class="5px">Roulette</li>
<li>Free Stuff</li>
</ul>
</nav>
</header>
And the CSS:
header {
height: 100%;
width: 100%;
}
nav {
width: 100%;
height: 65px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
padding-left: 10px;
background-color: rgba(0, 0, 0);
color: #0077C5;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
}
li {
width: 100px;
line-height: 65px;
vertical-align: middle;
text-align: center;
margin: 0;
text-align: center;
display: inline;
list-style: none;
float: left;
}
#logo {
height: 50px;
}
#logoli {
padding-top: 7px;
width: 250px;
}
For some reason this happens: https://image.prntscr.com/image/w0LAMn5qRMq0OqIAfDTsHw.png
If you look at the nav bar you can easily see that the first two elements have a normal amount of spacing in-between. But the seccond and third have weirdly small spacing. I used inspect element on the <li>'s but they are all the same height. Can someone help me?
You need some HTML and CSS Fixes, Wrap the anchors in li elements and the issue was you have mentioned a width to the li, which causes this wierd spacing.
HTML
<header>
<nav>
<ul>
<li id="logoli">
<img src="/assets/logo.png" id="logo"></li>
<li>Home</li>
<li class="5px">Roulette</li>
<li>Free Stuff</li>
</ul>
</nav>
</header>
CSS
header {
height: 100%;
width: 100%;
}
nav {
width: 100%;
height: 65px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
padding-left: 10px;
background-color: rgba(0, 0, 0);
color: #0077C5;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
float: left;
}
li {
line-height: 65px;
vertical-align: middle;
text-align: center;
margin:0px 10px;
text-align: center;
display: inline;
list-style: none;
float: left;
}
#logo {
height: 50px;
}
#logoli {
padding-top: 7px;
width: 250px;
}
You should put the <a href>'s inside the <li> tags like this:
<header>
<nav>
<ul>
<li id="logoli"><img src="/assets/logo.png" id="logo"></li>
<li>Home</li>
<li>Roulette</li>
<li>Free Stuff</li>
</ul>
</nav>
</header>
Also - you have a class="5px" on one of the <li>'s, but that class isn't in your CSS. You should make your <li>'s a fixed width and center the text, or use a standard padding on the left and right of the <li> text to maintain a uniform spacing rather than injecting classes to push single elements around.
This is happening because you're explicitly defining a width on your list items. Remove the width and separate the list items with padding instead. Optionally, remove any padding on the last list item, since you won't need it.
li {
/* width: 100px; */
padding-right: 1em;
line-height: 65px;
vertical-align: middle;
text-align: center;
margin: 0;
text-align: center;
display: inline;
list-style: none;
float: left;
}
li:last-child {
padding-right: 0;
}
https://jsfiddle.net/eulloa/yx7vkt79/
Also, restructure your list items so that they are the parent element of your anchors, not the other way around.
<li>Home</li> <!-- structure your list items this way -->
<li>Home</li>
Please check out the following fiddle.
.sideNav {
width: 25%;
}
.sideNav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
height: 100%;
position: fixed;
overflow: auto;
}
.sideNav li a {
display: block;
color: black;
text-align: center;
text-decoration: none;
}
.sideNav li {
font-family: "Comic Sans MS", cursive;
text-align: center;
float: left;
}
.right {
width: 75%;
}
<div class="content">
<div class="sideNav">
<ul>
<li>Curriculum
</li>
<li>ERSEA
</li>
<li>Family Services
</li>
<li>Mental Health
</li>
<li>Nutrition
</li>
<li>Health
</li>
<li>Policies & Procedures
</li>
<li>ERSEA
</li>
<li>Family Services
</li>
<li>Mental Health
</li>
<li>Nutrition
</li>
</ul>
</div>
<div class="right">
This is a test
</div>
</div>
I am having an issue with my CSS unordered list links. The links are not appearing on their own, separate lines. For instance, Link1 (Curriculum) is running into Link2 (ERSEA), so-on and so-forth. Also, I created two <div> tags, setting one to 25% of the div and the other to 75% of div. However, they are interfering with one another, as you can see from my fiddle, the "This is a test" text appears behind my unordered list.
I need my side navigation bar to be fixed in one position and have all of the links on their own separate lines. In addition, I need to have the "This is a test" text appear in its own separate portion of the site; to the right of the side navigation bar.
You have a couple of issues:
you have set your li:s to float: left, this will cause them to merge together.
you have set the .sideNav to have position: fixed, this means that it will not be calculated into the "flow" of the rest of the items on the site and therefore sit on top of them.
Here's a little updated css to help you along a little...
.sideNav {
width: 25%;
}
.sideNav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
height: 100%;
position: fixed;
overflow: auto;
}
.sideNav li a {
display: block;
color: black;
text-align: center;
text-decoration: none;
}
.sideNav li {
font-family: "Comic Sans MS", cursive;
text-align: center;
display: block;
}
.right {
padding-left: 25%;
width: 75%;
}
See my website here http://1-dot-speaklikewater.appspot.com
and the code
<img style="vertical-align: middle;" src="speaklikewaterlogo.png" />
<a href='index.jsp' class='linkButton' >Home</a>
.linkButton:link, .linkButton:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 7.5px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
}
.linkButton:hover, .linkButton:active {
background-color: green;
color: white;
}
This's ok, but the image quality is not good because when users magnify the page the image got blurred.
No, I don't want to use image as logo. I want to use Text like a logo.
Can you do the Exactly same thing like the above website but this time we use Text instead of image for logo. So it should look like this, but the middle of "Home" and the middle of the text logo should be on the same line?
SpeakLike
Water.com Home ...
Can we achieve that?
Can we achieve that?
Sure here is an example how to do this;
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
line-height: 44px;
vertical-align: middle;
}
li a {
background-color: white;
color: black;
border: 2px solid green;
padding: 7.5px 15px;
text-align: center;
text-decoration: none;
display: block;
line-height: 1;
font-weight: bold;
}
.logo-box {
margin-right: 10px;
}
.logo-line {
display: block;
line-height: 22px;
color: #D42424;
font-weight: bold;
}
<ul>
<li>
<div class="logo-box">
<span class="logo-line">SpeakLike</span>
<span class="logo-line">Water.com</span>
</div>
</li>
<li>Home</li>
<li>Online Users</li>
<li>Method</li>
<li>Lesson</li>
<li>Conversation</li>
<li>Register</li>
<li>Login</li>
</ul>
I'm going to assume you know how to display text and style it, if you need me to explain, just say so.
This leaves the problem of centering the logo with "Home". You have two options to do this
1) Margin
.logo {
margin-top: -20px;
}
This will shift the .logo up 20px. Adjust margin as needed to properly center.
2) Position
.logo {
position: relative;
top: -20px
}
This does the same thing, but uses positioning instead of margins. This option is better in terms of having less hacky CSS.
Yes, you can use an <h1> element and style the text accordingly (you can even use web fonts, if you wish). Something like:
h1 {
color: #cc0000;
font-family: "Times New Roman", serif;
width: 100px;
word-wrap: break-word;
font-size: 20px;
float: left;
}
ul {
list-style-type: none;
position: relative;
top: 30px;
}
ul li {
float: left;
margin: 0 10px;
}
<h1>SpeakLikeWater.com</h1>
<nav>
<ul>
<li>Home</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</nav>
I have the below nav menu and whenever i resize using the ctrl+right click the last item FAQ appears and dissapears..not to mention it also breaks my entire site background represented by 2 images.
whats wrong and how to make it stay the same on resizing? cheers!
html:
<div class="nav">
<ul>
<li class='active '><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>about us</span></a></li>
<li><a href='#'><span>our errand ladies</span></a></li>
<li><a href='#'><span>schedule an errand</span></a></li>
<li><a href='#'><span>contact us</span></a></li>
<li><a href='#'><span>faq</span></a></li>
</ul>
</div>
css:
.nav {
width: 100%;
height: 63px;
overflow: hidden;
}
.nav ul {
margin: 0;
padding: 0;
list-style-type: none;
width: auto;
position: relative;
display: block;
height: 63px;
text-transform: uppercase;
font-size: 21px;
background: transparent url('images/nav-bg-repeat.png') repeat-x top left;
font-family: Helvetica,Arial,Verdana,sans-serif;
}
.nav li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.nav li a {
display: block;
float: left;
text-decoration: none;
padding:0 30px;
height: 63px;
line-height: 63px;
vertical-align: middle;
background: transparent url('images/divider.png') no-repeat top right;
}
.nav li a:hover {
background: transparent url('images/nav-hover.png') repeat-x top right;
}
.nav li a span {
color: #000;
font-weight: bold;
}
You have overflow: hidden; set on your .nav element and no width defined.
By default, the .nav is set to 100% width, as it's a block element. It will automatically span the width of the parent it's currently sitting in.
When you resize the window down to a size that cannot fit the links, they fall outside of the .nav and are hidden from view.
You can set a fixed width to your .nav (or parent container) to prevent it from collapsing in width.
.nav {
width: 960px;
}
Or if you still want it to collapse, but still show the nav links, you can remove overflow: hidden; and the elements will appear (however, they will not be inline with each other.
for the second problem set the
body{
background-repeat:no-repeat;
}
and it disappears as overflow is hidden; set it to none
.nav{
width:1000px;
overflow:none;
..
}
the way i see is you are trying to put the list elements inline so you can try this code and modify the looks:
<ul id="navlist">
<li id="active">Home</li>
<li>Here</li>
<li>There</li>
<li>Faq</li>
<li>Contact</li>
</ul>
</div>
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}