I try to make menu for mobile display so i make a div for the menu links and want to style it so it formed a single column. so i add the display: block; attribute. But the links still form inline. How can i make it in a single column?
.header {
&__menu {
background: $white;
padding: 1.25rem;
a{
display: block;
color:$darknavyblue;
}
}
}
<header class="header">
<div class="header__menu">
Home
Profile
Services
Publication
Contact
</div>
</header>
Enjoy it!
.header {
&__menu {
background: $white;
padding: 1.25rem;
a{
color:$darknavyblue;
}
}
}
div a{
display: block;
}
Another option would be to add a break tag after each a tag:
<header class="header">
<div class="header__menu">
Home<br>
Profile<br>
Services<br>
Publication<br>
Contact<br>
</div>
Related
I tried
<div>
<tr><h1><ins><font face ="bold" color = "white">Home</h1></ins></tr>
<tr><h1><ins><font face ="bold" color = "white">Contact</h1></ins></tr>
</div>
resulting in
Home
Contact
How can I align these tags side by side?
either display:inline or float:left which gives more control (but needs <div style="clear:both"></div> afterwards)
h1 {
float: left;
margin-right: 10px;
}
before
<nav>
<h1>hello</h1>
<h1>world</h1>
<div style="clear:both"></div>
</nav>
after
nav {
display: flex;
}
before
<nav>
<h1>hello</h1>
<h1>world</h1>
<div style="clear:both"></div>
</nav>
after
try this:
{
display: inline-block
};
Ideally, you might benefit from a review of your markup.
Certainly you shouldn't be using multiple <h1> elements within a single document.
The <h1> is the principal heading of the entire document. By definition that means there will only ever be one.
Whenever you want to change the visual presentation of an element, you will use CSS.
HTML Structure
If you are building a navbar, then you can use:
<ul> - an unordered list
and nest this inside a:
<nav> - a navigation element
CSS Presentation
Once you have a structure like the outline above, there are multiple ways to align elements side-by-side:
nav ul { display: flex; }
nav ul { display: table; }
nav ul li { float: left; }
nav ul li { display: inline-block; }
When starting out, one of the simplest ways is to use the last option immediately above:
nav ul li {
display: inline-block;
}
Working Example:
nav {
background-color: rgb(191, 0, 0);
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
width: 96px;
height: 48px;
line-height: 48px;
text-align: center;
}
nav ul li a {
font-family: sans-serif;
color: rgb(255, 255, 255);
font-weight: 900;
}
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
So im making a website for a school project and all was hunky dory until i tried to put a paragraph element in and it displays above the title text behind the background color
.container {
width: 80%;
margin: 0;
padding: 0;
}
#logotext {
float: left;
font-family: 'Doppio One';
margin-left: 25px;
}
nav {
float: right;
}
#nav {
list-style-type: none;
text-decoration: none;
margin-top: 35px;
}
ul li {
display: inline;
}
li a {
text-decoration: none;
color: white;
}
li a:hover {
color: #fc9516;
}
.darkwrap {
background-color: #414a4c;
position: fixed;
overflow: hidden;
}
.active {
color: #22cc25;
}
#clock {
position: absolute;
top: 0;
right: 0;
margin-top: 25px;
margin-right: 25px;
font-family: Rajdhani;
font-size: 30px;
}
<div class="container darkwrap">
<div id="logotext">
<h1>JF Web Design</h1>
</div>
<!-- Navigation Bar -->
<nav>
<ul id="nav">
<li> Page 1 </li>
<li> About </li>
<li> Page 3 </li>
</ul>
</nav>
</div>
</header>
<span id="clock"></span>
<p>
Hello
</p>
<footer></footer>
i usedchrome to highlight the faulty element so its clear whats happening here its literall positioned at the top behind the bg color
Console Highhlighted element
.darkwrap is position: fixed.
This takes it out of normal flow and locks its position relative to the viewport.
The rest of the content is laid out as normal as if the .darkwrap element didn't exist … so it ends up covered up by it.
You could use margins to compensate for the space covered up by .darkwrap when the viewport is scrolled to the top. I would simply avoid using position: fixed in the first place: The benefits of having the menu on screen all the time very rarely outweigh the drawback of using up all that vertical space all the time.
If you use float: left and float:right please remember to add clear:both to the next element on the website. Here is fixed code:
https://codepen.io/anon/pen/jKRqLz
I'm trying to add a drop-down menu for one of the options in my nav menu for a simple html page. However, when I hover over the nav menu option, the menu doesn't actually drop down. It just replaces the nav menu option with the first option in the drop-down whenever I hover over it. I'm not exactly sure why it isn't "dropping down".
Any help would be really appreciated... Here's the HTML for the nav and attempted drop-down.
<nav>
<ul>
<li>Eiffel Tower</li>
<li>Fashion</li>
<li>Food</li>
<li>Museums</li>
<div class="dropDiv">
<li class="dropdown">History</li>
<div class="dropdownContent">
<a href=leaders.shtml>Leaders of Paris</a>
<a href=future.shtml>Future of Paris</a>
</div>
</div>
<li>Language</li>
<li>Works Cited</li>
</ul>
</nav>
and here is the CSS snippet for the Dropdown menu:
.dropdown {
float: left;
background-color: #FFF0F5;
width: 100%;
}
.dropDiv {
position: relative;
display: inline-block;
width: 100%;
}
.dropdownContent {
display: none;
position: absolute;
background-color: #FFF0F5;
height: 200px;
width: 100%;
z-index: 1;
}
.dropdownContent a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdownContent a:hover {background-color: #fff8dc;}
.dropDiv:hover .dropdownContent {
display: block;
z-index: 1;
height: 200px;
}
.dropDiv:hover .dropdown {
background-color: #fff8dc;
}
I'm not really sure why the drop-down part isn't displaying, i'm sure it's some stupid mistake but it's eluded me for an hour and a half...
I see you have mentioned position: absolute in dropdownContent class. This is causing to overlap. Just remove it and try. By default it sets to static, which mean Elements render in order, as they appear in the document flow. Where as absolute means element is positioned relative to its first positioned ancestor element.
The problem is in your HTML.
For the dropdown within an item of the 1st level you'll need a code block that looks like your 1st level. That is, another <ul> with a group of <li>s one for each 2nd level option.
You have a lot of unwanted css and markup. Just fix it. I have created a basic one for you. May be you can try,
.dropdownContent {
display: none;
background-color: #FFF0F5;
}
.dropdownContent a:hover {
background-color: #fff8dc;
}
.dropdownContent a{
display: block;
}
.dropdown:hover .dropdownContent {
display: block;
z-index: 1;
}
<nav>
<ul>
<li>Eiffel Tower</li>
<li>Fashion</li>
<li>Food</li>
<li>Museums</li>
<li class="dropdown">
History
<div class="dropdownContent">
<a href=leaders.shtml>Leaders of Paris</a>
<a href=future.shtml>Future of Paris</a>
</div>
</li>
<li>Language</li>
<li>Works Cited</li>
</ul>
</nav>
I'm trying to create nav bar similar to that of Uber's site. Where there's a menu button on the left, logo in the center, and then log in and sign up are on the right.
I used and div container="pull-right" and still couldn't get the Title to be center. The buttons won't be stylized much more than what they are since they will be on a white background.
<div class="nav">
<div class="container">
<ul>
MENU</button></li>
TITLE</button></li>
SIGN UP</button></li>
LOG IN</button></li>
</ul>
</div>
</div>
.nav{
color: #5a5a5a;
font-size: 15px;
font-weight: normal;
padding: 15px 15px 5px 5px;
word-spacing: 3px;
}
.nav li {
display: inline;
}
.nav button {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline: none;
}
.nav a{
color: inherit;
}
Here's my Jsfiddle: https://jsfiddle.net/tokyothekid/r19y23ep/1/
you can try this fiddle
demo
in this i have manage the structure of your li and as per your description i make a design i hope it may help you
.col1
{
margin:0;
padding:0;
float:left;
width:50%;
}
Quick answer
If you want something like the website for Uber, you probably need to separate the Menu from the buttons on the right side.
Other notes
Also, HTML5 has specified special tags so code is more readable and organized, such as the <nav> tag to hold your main menu. <div> doesn't communicate the purpose of the container.
To do what you want, here is a to-do list:
fix your bugs (<a href="somewhere"<li><button>foobar</button></li></a> actually is an error because of the lack of right bracket > at the end of your opening <a> tag)
separate your elements into a menu, a title, and a couple of user account buttons
The code
Here is a good example of how you could restructure your HTML:
<h2 class="top-title">Title</h2>
<nav>
<button id="toggle-menu">Menu</button>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</nav>
<div class="user-buttons">
<button>Log in</button>
<button>Sign up</button>
</div>
This is a quickly hacked bit of CSS you might use to start with:
h2 {
display: inline-block;
width: 100vw;
text-align: center;
margin: 0;
position: absolute;
z-index: -1;
}
nav {
float: left;
}
nav ul {
list-style-type: none;
padding: none;
position: absolute;
}
nav ul a {
text-decoration: none;
text-transform: uppercase;
color: inherit;
}
div.user-buttons {
float: right;
}
Add some Javascript, and voila:
$(function() {
$("nav ul").hide();
$("#toggle-menu").click(function() {
$("nav ul").toggle();
});
});
JSFiddle example.
I am using this software (Swiiit Website Builder) purchased by my company, im doing intranet page for my department (im a total learn on the job dude being tasked to do this) please help!
<style><!--
<html>
<head>
<style>
ul {
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
a {
float: center;
width: 6em;
text-decoration: none;
color: white;
background-color: #000080;
padding: 0.6em 4.5em;
border-right: 1px solid white;
}
a:hover {
background-color: #0000cd;
}
li {
display: inline;
}
--></style>
the style will affect other area of the page; how do i edit it?
i tried to understand this Apply different css stylesheet for different parts of the same web page but im still cracking my head...
I have amended according to the recommendation (see below) and turn out great!!! Thanks!!
doesnt affect other parts of page now, but now the space between blocks of links are so wide apart when i launch the code... looks fine in preview mode though... please assist :)
.something ul {
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
.something li {
display: inline;
}
.something a {
float: center;
width: 6em;
text-decoration: none;
color: white;
background-color: #000080;
padding: 0.6em 4.5em;
border-right: 1px solid green;
}
.something a:hover {
background-color: #0000cd;
}
<div class="something">
<ul>
<li>Organisation</li>
<li>XXX</li>
<li>Organisational Chart</li>
<li>Contact Us</li>
</ul>
</div>
<p><img style="display: block; text-align: center; vertical-align: top;" src="/wbn/slot/u3733/Org%20Chart.png" alt="" width="800" height="473" /></p>
Set class for every ul, a and li otherwise
<div class="something">
<ul>
<li>....</li>
<li>....</li>
</ul>
...
</div>
Give styles using the class name like,
.something ul { }
.something li { }
.something a { }
Set specific class or id to the elements like
text
You can style this a in your css by
#a{
style
}
Rather than adding styling to your elements, add them to a class or id
class definition:
html
<div class="myClassIsReusableToAllWithThisClass"></div>
css
.myClassIsReusableToAllWithThisClass{
/*add styling to all which have a class called 'myClassIsReusableToAllWithThisClass'*/
}
ID definition:
html
<div id="uniqueID"></div>
css
#uniqueID{
/*add styling to only one element*/
}
element definition: (what you're doing presently)
html
<div></div>
css
div{
/*add styling to all 'div' elements*/
}
As #James Donnelly has already mentioned, you should also remove these:
<!-- and -->
as these are 'comments' in html, and will render all within them void/ go unnoticed by your browser.
DEMO:
#myID {
color: red;
}
.myClass {
background: blue;
}
a {
font-weight: bold;
}
<div >I'm just a div</div>
<br/>
<div id="myID">I have a specific id</div>
<br/>
<div class="myClass">I have a specific class which is reusable to all with this class</div>
<br/>
<div class="myClass">I have the myClass class</div>
<br/>
<a>I'm an a tag with no class or id. But all 'a' tags will have this styling</a>