I'm trying to have links to different websites in my nav bar but I'm stuck here.
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Beer Yoga</li>
<li>A Day in My Life</li>
</ul>
here's my css stylesheet also
ul {list-style-type: none; margin: 0; padding: 0; overflow: hidden;background-color:lightslategray;}
li {float:left;}
li a {display:block;color:white;text-align:center;padding: 14px 16px;text-decoration:none;}
li a:hover {background-color: #111;}
Change the href to a link. For example:
<ul>
<li><a class="active" href="https://stackoverflow.com/">Stack Overflow</a></li>
<li>Beer Yoga</li>
<li>A Day in My Life</li>
</ul>
If you change the href to https://stackoverflow.com/ instead of #home, the link will take you to https://stackoverflow.com/
If you are referring to different links to different pages internally, make sure that you have matching id selectors for where you are linking to. For example:
These anchor tags will link to an href value of the id you have set on another page:
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Beer Yoga</li>
<li>A Day in My Life</li>
</ul>
Say this is beeryoga.html:
<body>
<div id="beeryoga">
<p>We are linking here!</p>
</div>
</body>
Say this is dayinmylife.html:
<body>
<div id="dayinmylife">
<p>We are also linking here!</p>
</div>
</body>
Related
How i can align to center my "li" tag?
const succes = <a href="#" className='succes'>✓</a>
const fail =
<div className="goals">
<li>Collect 5 thousand subscribers</li>
<li>Learn ReactJS </li>
<li>{succes} Move to apartment</li>
<li>Start speaking english fluently</li>
</div>
I need something like this
https://imgur.com/S3HVo0h
Try wrapping all of your list items in a UL element:
<div className="goals">
<ul>
<li>Collect 5 thousand subscribers</li>
<li>Learn ReactJS </li>
<li>{succes} Move to apartment</li>
<li>Start speaking english fluently</li>
</ul>
</div>
Generally speaking you should always use a list tag to start and close any lists that you are using.
Take a look at this for further clarification:
https://www.w3schools.com/html/html_lists.asp
It also may also depend on your CSS too so double check that as well.
Put li in ul
Check what goals class has. Does it have text-align:center?
.centered {
text-align: center;
}
<ul>
<li>First</li>
<li>second</li>
<li>Third</li>
</ul>
<div class="centered">
<li>First</li>
<li>second</li>
<li>Third</li>
</div>
<!-- UL vs DIV -->
<ul class="centered">
<li>First</li>
<li>second</li>
<li>Third</li>
</ul>
You could just nest another <ul> in between, like
<div className="goals">
<ul>
<li>Collect 5 thousand subscribers</li>
<li style="list-style: none;">
<ul>
<li>Learn ReactJS </li>
<li>{succes} Move to apartment</li>
</ul>
</li>
<li>Start speaking english fluently</li>
</ul>
</div>
I'd like to point out that you can't put a li directly inside a div, because it is not allowed for some reason. You should put it in a ul instead to keep the validators happy. Like this:
<div className="goals">
<ul>
<li>Collect 5 thousand subscribers</li>
<li>Learn ReactJS </li>
<li>{succes} Move to apartment</li>
<li>Start speaking english fluently</li>
</ul>
</div>
We can then use a bit of flexbox to center this ul:
div {
display: flex;
justify-content: center;
}
This should hopefully center it! Hooray!
I don't know anything about HTML codes and I'm using a template I used online for my blog, www.lemontierres.com. I have some links to pages at the top of my blog but I want to have them in the center instead of on the left side of my blog, and I don't know how to fix this? I Googled and found some answers but I don't know how to apply them to my situation. Any help would be appreciated!
<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li>about me</li>
<li>contact/business inquiries</li>
<li><a class='drop-ctg' href='#'/>
<ul>
<li><a href='#'> 1</a></li>
<li><a href='#'> 2</a></li>
<li><a href='#'> 3</a></li>
<li><a href='#'> 4</a></li>
</ul>
</ul>
Simple CSS would solve this
ul {
text-align: center;
}
I think this is what you are looking for. The first CSS puts all of the <li> elements inline rather than stacked and the second centers all of the text.
ul.menu li {
display: inline;
}
ul {
text-align: center;
}
JSFIDDLE DEMO
put <center>
<ul>
<li>link</li>
<li>Link2</li>
</ul>
</center>
That is how I would do it.
Basically you just need to put the center tags around the code for the links.
If that doesnt work do what JRULLE and Vector said.
Problem:
Writing common CSS code in order to be applied for two nav elements. I have searched all over Google and Stackoverflow without any success. It seems it's not common to use two nav elements while W3C allows it.
HTML code:
<!-- Global navigation -->
<nav role="main">
<ul>
<li>Startpage</li>
<li>Cars</li>
<li>About us</li>
</ul>
</nav>
<!-- Local navigation -->
<nav role="sub">
<ul>
<li>Ferrari</li>
<li>BMW</li>
<li>Volvo</li>
</ul>
</nav>
CSS code:
How would I write CSS code in order for the two navigation elements to have the same layout, but different styling (color, font size, etc.)?
You could do something like this:
nav ul li {
width:100px;
display:inline-block;
margin:5px;
padding:5px;
color:#333;
text-align: center;
}
nav[role="main"] ul li {
background-color:#aaa;
}
nav[role="sub"] ul li {
background-color:#eee;
}
<!-- Global navigation -->
<nav role="main">
<ul>
<li>Startpage</li>
<li>Cars</li>
<li>About us</li>
</ul>
</nav>
<!-- Local navigation -->
<nav role="sub">
<ul>
<li>Ferrari</li>
<li>BMW</li>
<li>Volvo</li>
</ul>
</nav>
Not sure what you mean by
same appearance but different styling
You can use the role attribute as a CSS selector, as shown here:
nav[role="main"],
nav[role="sub"] {
background: #222;
color: #f40;
}
nav[role="main"] a,
nav[role="sub"] a {
color: #fff;
}
<nav role="main">
<ul>
<li>Startpage
</li>
<li>Cars
</li>
<li>About us
</li>
</ul>
</nav>
<!-- Local navigation -->
<nav role="sub">
<ul>
<li>Ferrari
</li>
<li>BMW
</li>
<li>Volvo
</li>
</ul>
</nav>
I've created a drop-down navigation with CSS only.
If I hover the button and the submenu comes out.
But then the body will be higher.
I don't want that the body will be higher.
Here the files:
http://jsfiddle.net/UHQV5/
I think the position: relative; is false.
How about this one?
added this:
nav ul ul{
position: absolute;
margin-left: -10px;
}
and removed some unnecessary ones.
jsFiddle
Nice looking website,
I messed with the code just a little and found the making the tag have a id for the css. Then in the css setting the postion to fixed!
The Code:
From this
<nav>
<ul id="navigation">
<li>Home</li>
<li>Bücher...»
<ul>
<li>für kleine Leser</li>
<li>für große Leser</li>
<li>Schulbücher</li>
</ul></li>
<li>und mehr...»
<ul>
<li>Filme</li>
<li>Ebooks</li>
</ul></li>
<li>Seit 1851»
<ul>
<li>Firmenhistory</li>
</ul></li>
</ul>
</nav>
To This
<nav id="nav">
<ul id="navigation">
<li>Home</li>
<li>Bücher...»
<ul>
<li>für kleine Leser</li>
<li>für große Leser</li>
<li>Schulbücher</li>
</ul></li>
<li>und mehr...»
<ul>
<li>Filme</li>
<li>Ebooks</li>
</ul></li>
<li>Seit 1851»
<ul>
<li>Firmenhistory</li>
</ul></li>
</ul>
</nav>
And then in the css just put in:
#nav {
postion: fixed;
}
I have looked though this site and found various answers, but none worked for me or I didn't know what to do exactly. Whenever I hover over the menu, the main content get pushed down & when I add "position:absolute" (I've tried some places^^), the whole menu gets deactivated or disappears enirely.
I have a blogger site and use a template from here: http://www.5202.de/2012/10/avantgardistisches-simple-wei-layout.html --> Download.
Please consider, when posting an answer, that I'm a total newbie in coding,and need very precise info;) I've made the menu with a generator, but I'm quite happy with it apart from that problem.
I really hope you can help and I think other newbies would benefit from an easy to understand/implement answer, too:)
Heres the css:
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
ul#main-nav {font-family:helvetica,arial,sans-serif;margin:0;padding:0;float:left;width:100%;font-size:0.9em;}
ul#main-nav li {margin:0;padding:0;list- style:none;float:left;margin:0;width:9em;position:relative;}
ul#main-nav li a {text- decoration:none;display:block;padding:0.6em;color:#0e0e0e;background:#cfcfcf;border- left:2px solid #fff;border-right:2px solid #fff;}
ul#main-nav li a:hover, ul#main-nav li a:focus {background:#ece1cf;border- left:2px solid gray;border-right:2px solid gray;}
ul#main-nav li ul {padding:0;margin:0;display:none;}
ul#main-nav li:hover ul {display:block;}
ul#main-nav li ul li {float:none;}
ul#main-nav li ul li a {font-size:0.9em;}]]>
Not sure about the Page list belonging, but anyways.
Now here's the html
<ul id="main-nav">
<li>Home</li>
<li>About
<ul>
<li>Me</li>
<li>This blog </li>
<li>Ressources</li>
<li>Legel stuff </li>
</ul>
</li>
<li>Photography
<ul>
<li>Projects</li>
<li>Equipment </li>
<li>Questions</li>
</ul>
</li>
<li>Scrappy Art
<ul>
<li>Scrapbooking </li>
<li>Art Journals </li>
<li>Mixed-Media </li>
<li>Crops & Co. </li>
</ul>
</li>
<li>DIY </li>
<li>Freebies
<ul>
<li>Free Stuff</li>
<li>Free Tutorials</li>
<li>Terms of Use </li>
</ul>
</li>
<li>Favorites
<ul>
<li>Blogging Friends </li>
<li>More Faves </li>
</ul>
</li>
<li>Features
<ul>
<li>Wonderland </li>
<li>Smashbook</li>
<li>Photo- Tips</li>
<li>Books</li>
<li>Lost Places </li>
</ul>
</li>
<li>Travel
<ul>
<li>La Gomera</li>
<li>London</li>
<li>Wroclaw</li>
</ul>
</li>
<li>Contact </li>
</ul>
How about you call the menu from another file (header) and set the background transparent make sure the body section overlaps the header when the drop down happens.
find ul#main-nav li ul {padding:0;margin:0;display:none;}
and change like this
ul#main-nav li ul {
padding:0;margin:0;
display:none;
position:absolute:/*Added*/
z-index:2;/*Added*/
}
You can change position of your child ul by giving position like top:10px;left:10px; etc
Working Demo Here