OK! I just started HTML and CSS today and thought it would be a good approach to learn by building something rather than just reading some text.
[ http://jsfiddle.net/GUkrK/ ]
So I decided to build one sample navigation bar.
<html>
<head>
<title> navigation bar </title>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<ul id="menu">
<li id="menu1">
<a href="http://www.google.com">
<span>GOOGLE</span>
</a>
</li>
<li id="menu2">
<a href="http://www.github.com">
<span>GITHUB</span>
</a>
</li>
<li id="menu3">
<a href="http://www.quora.com">
<span>QUORA</span>
</a>
</li>
<li id="menu4">
<a href="http://www.facebook.com">
<span>FACEBOOK</span>
</a>
</li>
</ul>
<hr/>
</body>
</html>
and the css
ul {
list-style:none;
color:red;
}
#menu {
float:left;
vertical-align:middle;
display:block;
width:600px;
height:108px;
}
#menu li {
display:inline;
font-size:20px;
padding:0px;
}
#menu a:link {
color:white;
font-weight:bold;
padding:20px;
background-color:#27A285;
}
#menu a:hover {
background-color:#E1C618;
color:brown;
}
hr {
height:5px;
background-color:red;
}
But now my problem is the positioning of that horizontal line. Do I have to place that by setting the pixels in absolute or relative positioning? Can't it be done automatically?
And how come the horizontal line does not cover the total width of the browser? and Can I adjust the width of that horizontal line?
EDIT: Thanks everyone. Here is the edited sample http://jsfiddle.net/sunu0000/zdDU5/
Remove float: left; from the CSS definition of #menu.
Sample
http://jsfiddle.net/Y8AAH/3/
CSS for #menu
#menu {
vertical-align:middle;
display:block;
width:600px;
height:108px; /* Looks better with like: 40px !! */
}
Depending on what your layout should look like this definition may be sufficient:
#menu {
display:block;
height:108px; /* Looks better with like: 40px !! */
}
Updated sample: http://jsfiddle.net/Y8AAH/4/
Updated sample with centered menu
#menu {
height:40px;
text-align: center;
}
http://jsfiddle.net/Y8AAH/5/
I sugger you read this before continuing. It appears you don't really know what you're doing, so learn before asking question =p
Related
I am trying to center my navigation bar but every way I have tried so far results with either the navigation bar not centered or it is centered but the links aren't in one line. I would also like to keep the logo in line with the navigation bar but floating left. I tried adding a container class and a nav id but I don't think that did anything. Please Help!
Here is my html:
<DOCTYPE html!>
<html>
<head>
<link rel="stylesheet" type="text/css" href="HCstyle.css">
<title>Hockey Corner</title>
</head>
<body>
<div>
<img class="logo" src="images/Hockey Corner logo real png.png" alt="Hockey Corner logo">
</div>
<div class="container">
<div id="nav">
<div class="wrap">
<ul>
<li>Our Sponsers</li>
<li>Contact Us</li>
<li>About Us</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</body>
</html>
And here is my css:
img.logo{
float:left;
width:10%;
padding-left:5%;
}
ul{
list-style-type:none;
margin:0;
padding-left:20px;
padding-right:20px;
display:inline-block;
overflow:hidden;
float:right;
}
li{
display:inline-block;
}
li a{
display:block;
color:white;
text-align:center;
padding:14px 16px;
text-decoration:none;
}
li a:hover{
background-color:#34495E;
}
body{
background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("images/Background1.jpg");
background-size:cover;
background-repeat:no-repeat;
}
.nav{
float:left;
text-align:left;
}
.container{
text-align:center
}
Using flex property will solve your problem. Learn more here.
Working code: https://codepen.io/Sahero/pen/rzmVjN
You should change your CSS Code .nav to #nav.
There are a lot of way to make located your logo.
I'd like to recommend display:flex.
You can find easy about flex.
Good day, this is my first ever question on Stack Overflow, so I hope I get it as right as possible.
I have done extensive research on my problem, mostly reading all the questions I could find on Stack Overflow and some other sites, but I could not find one answer that worked.
Some background: I am trying to write a website for recruiting for my work and it's the first ever website I have ever written. I am using a wamp server to run the site on localhost for testing. My issue is described as best as I could in the title. Find below my html code:
<html>
<head>
<title> BCB Call Plus SRL Home </title>
<link rel="stylesheet" href="Main Style.css">
</head>
<body>
<div id = "main_content">
<ul id = "nav_container">
<li> <img id = "logo" src= Logo.png style ="width:150px;height:75px"> </li>
<li> Home </li>
<li> Menu 1 </li>
<li> Menu 2 </li>
<li> Menu 3 </li>
<li id ="angajari"> <a class="dropdown_toggle" data-toggle="dropdown" href= "Page4.html"> Angajari </a>
<ul class="sub_menu">
<li>Ce Vrem</li>
<li>Aplica</li>
</ul>
</li>
</ul>
</div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
And below my CSS code:
body {
text-align:center;
}
a {
font-size: 150%;
text-decoration: none;
color:#000000;
font-weight: bold;
vertical-align:middle;
}
a:hover{
background-color:#338533;
}
ul {
padding:0;
margin:0;
}
ul#nav_container{
background-color:#F2FFF2;
list-style-type:none;
text-align:center;
}
ul#nav_container li{
display:inline-block;
padding-left:5px;
padding-right:5px;
vertical-align:middle;
position:relative;
}
.sub_menu li a{
display:none;
}
#angajari ul.sub_menu li {
float:left;
}
#angajari ul.sub_menu li a {
position:absolute;
top:0;
white-space: nowrap;
height:auto;
}
#angajari:hover ul.sub_menu li a {
display:block;
}
Here's a picture of what happens when I hover over the problematic menu item:
Display Issue
Final notes: I am running this only under Chrome for now. I have noticed that it doesn't read my css right in IE 8 (yes, I use IE 8, because one of my bosses wants us to.) Cross-platform compatibility fixes are welcome, but not in the scope of my current question. My WAMPSERVER has apache 2.4.9 and PHP 5.5.12.
I even tried my code on some online web code testing site whose name I forgot and got the same results. If you find that my code actually displays properly, then it may be an issue with my configuration.
Here is a jsfiddle.
You need your .sub_menu to be absolute, not your li as. That's it!
.sub_menu {
position:absolute;
}
Working demo here: http://jsfiddle.net/pxzhqqnb/1/
And I'd make the .sub_menu hidden instead of its children. Personal preference, but I think it makes more sence.
Why does it happen?
Consider this simple example: (think of .relative as position: relative and .absolute as position: absolute)
<div class="relative">
Text
<div class="absolute">Link 1</div>
<div class="absolute">Link 2</div>
</div>
Link 1 is absolute. It searches for the closest relative element. That's .relative. Now Link 1 gets right under the relative div.
Link 2 follows the same rules, thus both links overlap.
Now let's change the code a little:
<div class="relative">
Text
<div class="absolute-wrapper">
<div>Link 1</div><!-- these are now static by default -->
<div>Link 2</div>
</div>
</div>
absolute-wrapper is absolute, so it searches for the closest .relative element and gets right under it. Now both links are normal elements wrapped in a div, so they render as expected.
Demo of both examples here: http://jsfiddle.net/w0h7cdhe/2/
I've done a few tweaks to your css code:
body {
text-align: center;
}
a {
font-size: 150%;
text-decoration: none;
color: #000000;
font-weight: bold;
vertical-align: middle;
padding: 0px 10px; /* this is just for the hover effect to lose the spaces in the html */
}
a:hover {
background-color: #338533;
}
ul {
padding: 0;
margin: 0;
}
ul#nav_container {
background-color: #F2FFF2;
list-style-type: none;
text-align: center;
}
ul#nav_container li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
position: relative;
}
#angajari ul.sub_menu { /* do this with the menu, not just the link */
display: none;
position: absolute; /* set correct position */
}
#angajari ul.sub_menu li {
display: inline-block;
}
#angajari ul.sub_menu li a { /* we don't want top: 0 because it should not overlap */
white-space: nowrap;
}
#angajari:hover ul.sub_menu { /* see above -> menu not link */
display: block;
}
<div id="main_content">
<ul id="nav_container">
<li>
<img id="logo" src="http://lorempixel.com/150/75" style="width:150px;height:75px">
</li>
<li> Home <!-- I've removed the spaced and added the gap in css -->
</li>
<li> Menu 1
</li>
<li> Menu 2
</li>
<li> Menu 3
</li>
<li id="angajari"> <a class="dropdown_toggle" data-toggle="dropdown" href="Page4.html">Angajari</a>
<ul class="sub_menu">
<li>Ce Vrem
</li>
<li>Aplica
</li>
</ul>
</li>
</ul>
</div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
So i tried to fix your Problem i end up with this result
I've adjusted the margin of the logo as shown below:
<li> <img id = "logo" src= Logo.png style ="width:150px;height:75px;margin-left: -50px;"> </li>
because I adjust the width of the text container and replace the last 4 lines in your CSS CODE as shown below:
body {
text-align:center;
}
a {
font-size: 150%;
text-decoration: none;
color:#000000;
font-weight: bold;
vertical-align:middle;
}
a:hover{
background-color:#338533;
}
ul {
padding:0;
margin:0;
}
ul#nav_container{
background-color:#F2FFF2;
list-style-type:none;
text-align:center;
}
ul#nav_container li{
display:inline-block;
padding-left:5px;
padding-right:5px;
vertical-align:middle;
position:relative;
width: 95px;
}
#main_content ul ul {
position: absolute;
visibility: hidden;
}
#main_content ul li:hover ul {
visibility: visible;
}
so i made minor changes but i dont know if that's what you want to happenenter code here
I have 3 links styled as a list in html, I used this code in CSS to bring them beside each other:
li
{
float:left;
margin-right:15px;
margin-top:40px;
}
But when I click one of them the other link on the right moves towards the one I clicked.
I don't know the reason why this happening. but how to make them fixed?
The code::
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
WebMD - Better information. Better Health.
</title>
<link rel="stylesheet" href="mainMd.css"/>
<img src="logo_trans.png" class="logo"/>
</head>
<body>
<header>
<ul class="categories">
<li class="links1" id="symp">Symptoms</li>
<li class="links1" id="doc">Doctors</li>
<li class="links1" id="health">Health Care Reform</li>
</ul>
</header>
<section>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
CSS:
html
{
background-image:linear-gradient(to top, white, #F5F9FA);
height:100%;
}
.logo
{
padding-left:176px;
padding-top:4px;
float:left;
}
li
{
float:left;
margin-right:15px;
margin-top:40px;
font-family:Candara;
font-size:12px;
color:#5895D4;
}
#symp
{
list-style-image:url(walking.png);
margin-left:55px;
}
#doc
{
list-style-image:url(doc.png);
}
#health
{
list-style-image:url(umb.png);
}
li a
{
color:#5895D4;
text-decoration:none;
}
li a:hover
{
text-decoration:underline;
}
li a:active
{
}
li a:visited
{
}
Currently, the CSS selects li, not li a.
If your HTML structure looks like this:
<li><a href=''>Item 1</li>
<li><a href=''>Item 2</li>
Try using the following CSS to target the links inside each li.
li a {
float: left;
margin-right: 15px;
margin-top: 40px;
}
The reason why your bug might be happening is because a::visitedis a separate element from li. See MDN's page on :visited.
I've been trying to absolutely position my navigation at the bottom right of its parent div (header>nav>menu) and i'm a little lost. Help would be appreciated!
I've been trying to relatively position its parent div, but each property i try, it either disappears from the browser, aligns all the way at the bottom right of the page and not its parent div, or somewhere else i'm not wanting it to go.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="images/favicon.png" />
</head>
<body>
<div id="wrapper">
<header>
<div class="logo">
<img src="images/logo.png" / id="logo">
</div>
<nav>
<ul id="menu">
<li>Home</li>
<li>Portfolio</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
body {
margin:auto;
width:960px;
}
.logo {
display:block;
float:left;
width:242px;
height:141px;
margin:0px;
}
#header {
position:relative;
height:100%;
}
#nav .menu {
position:absolute;
bottom:0px;
right:0px;
margin:0px;
padding:0px;
float:right;
}
#menu ul {
list-style:none;
}
#menu li {
display:inline;
float:left;
}
#menu a {
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
#menu a:hover,a:active
{
background-color:#7A991A;
}
you define in your css nav is a tag element not id or menu is a id not class Please change to your css and define as like this
Change to this
#nav .menu
into this
nav #menu
Demo
You made some mistakes,
you use #header in css but you don't put id header to the <header> tag,
you use #nav in css instead of nav tag because there is no id in nav tag,
#header height is 100%. it will take the height of parent. put height:auto; so that it will take only the height it need to fit its content.
I made a JSFiddle. please check. hope this will solve your problem.
http://jsfiddle.net/banded_krait/Q4Zjj/
I have just designed a very quick website home page and as a first time coder I was wondering if someone would look at the design and my code and tell me where they would make improvements or changes or completely change it if necessary!
The design is for personal use only and contains black sections where my personal address is on the website design.
I am open to any suggestions and comments as this is my first time at coding and I would like to know what a more experience person would do better. I have been using Dreamweaver and viewing it on Google Chrome, there is a HTML code and a CSS code, ideally I would like it to be viewable on different browsers.
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Rosy's Jewellery</title>
<link rel="stylesheet" type="text/css" href="CSS/Stylesheet.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<!--Background set in CSS-->
</div><!-- end of top-->
<div class="menu">
<h1>Rosy's Jewellery</h1>
<ul id="nav">
<li> Home </li>
<li> Jewellery </li>
<li> Locations </li>
<li> Contact Us </li>
<li> Reviews </li>
</ul>
</div>
<!-- end of menu -->
<div class="main">
<p> Welcome to Rosy's Jewellery </p>
<img src="Images/1.png">
<img src="Images/2.png">
<img src="Images/3.png">
<img src="Images/4.png">
<img src="Images/5.png">
<img src="Images/6.png"> </div>
<!--close main-->
<div class="footer">
<ul id="footer">
<li> <img src="Images/facebook.png" />
<img src="Images/twitter.png" /> </li>
<li> Twitter Address</li>
<li> Addres, Address, Address, Address </li>
<li> Telephone Number</li>
</ul>
</div>
<!--end of footer-->
</div>
</body>
</html>
CSS
.wrapper {
margin:0 auto;
background-color:#D1CED4;
}
.top {
background-color:#000000;
padding-bottom:2.5em;
}
.menu {
background-color:#FFFFFF;
border-bottom-width:2px;
border-bottom-color:#000000;
border-bottom-style: solid;
position: relative;
top:-15px;
text-align:center;
font-family:Andalus;
font-size:18px;
padding-left:1em;
padding-right:1em;
overflow:hidden;
}
.menu h1 {
float:left;
color:#999966;
font-family:andalus;
font-size:24;
}
.main {
width:65%;
margin:0 auto;
background-color:#FFFFFF;
text-align:center;
font-family:andalus;
font-size:24px;
padding-top:1px;
}
.footer {
text-align:centre;
background-color:#C8C8C8;
color:#000000;
font-family:andalus;
margin-bottom:-1em;
}
#footer li {
display:inline-block;
padding-right:8em;
vertical-align:middle;
margin-top: -30px;
}
#nav {
padding-top:15px;
}
#nav a {
text-decoration:none;
}
#nav a:link {
color:black;
}
#nav a:visited {
color:black;
}
#nav a:hover {
color:black;
}
img {
margin:42px;
}
#nav ul {
display:inline-block;
}
#nav li {
display:inline-block;
margin-right:4.5em;
padding-right:2.5em;
}
Only 3 suggestions:
Use HTML5 tags since you have declared that as DTD.
Never style direct a tag like you have given margin to <img>. Try giving class to every element.
Use maximum classes instead id's in CSS.
It really depends on your requirements. For a personal website I don't think you don't need more than that. Codes are pretty simple and neat. Unless you want authentication and that sort of stuff to get into your site. Simple is beautiful.