I can't get my menu bar to change font. I made this in Dreamweaver so there's lots of extra css code for the menu bar, but I've tried every option I can think of and I still can't access the text in the menu bar to change the font or the color or anything.
Here's the html:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Australian Design Architects</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="ADA.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]><script src="javascript/html5.js"></head>script><![endif] -->
</head>
<body>
<div id="main">
<header>
<h1 id="hheading">Australian Design Architects</h1>
<img src="logo2.gif" alt="ADA LOGO" width="130" height="130" id="himg" />
<nav>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><code> <!--id="home"-->Home</code></li>
<li><code>Portfolio
<ul>
<li>Commercial</li>
<li>Residential</li>
<li>Heritage</li>
<li>Rennovations/Additions</li>
</ul>
</code></li>
<li><code>Services </code> </li>
<li><code>About Us</code></li>
<li><code>Contact us</code></li>
</ul>
</nav>
</header>
<p> </p>
<p> </p>
<div id="maincontent">
<article id="inner"></article>
<img src="3drender.png" alt="3d render" name="mimg" width="640" height="480" id="mimg"></div>
<footer>
<div id="fbtw">Content for id "fbtw" Goes Here</div>
<ul>
<li><p>Privacy Statement</p></li>
<li><p>Accessability Statement</p></li>
<li><p>Site Map</p></li></ul>
<p>© Samuel Martin 2014. All Rights Reserved.</p>
</footer>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</div>
And here's the css:
#charset "utf-8";
/* CSS Document */
#font-face {
font-family: 'flux_architect_regular';
src: url('flux_architect_regular-webfont.eot');
src: url('flux_architect_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('flux_architect_regular-webfont.woff') format('woff'),
url('flux_architect_regular-webfont.ttf') format('truetype'),
url('flux_architect_regular-webfont.svg#flux_architectregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'monospacetypewriterregular';
src: url('monospacetypewriter-webfont.eot');
src: url('monospacetypewriter-webfont.eot?#iefix') format('embedded-opentype'),
url('monospacetypewriter-webfont.woff') format('woff'),
url('monospacetypewriter-webfont.ttf') format('truetype'),
url('monospacetypewriter-webfont.svg#monospacetypewriterregular') format('svg');
font-weight: normal;
font-style: normal;
}
*{
margin:0;
padding:0;
}
article, aside, figure, footer, header, nav, section{
display:block;
}
body {
font-family:'monospacetypewriterregular', sans-serif;
color: #999;
width: 1024px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: 3px dotted #6a8c3f; /*1764fc 323aea*/
background-color:#666;
}
#main{
background-color:#fff;
/*box-shadow: 0 0 25px 5px #1764fc; 00aae4 */
}
#himg {
float: left;
padding-top: 10px;
padding-left: 10px;
}
nav {
font-size: 18px;
position: absolute;
padding-top: 50px;
padding-left: 140px;
padding-bottom:50px;
}
footer {
font-size: 12px;
line-height: 1.5em;
color: #999;
clear: both;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
footer li {
display: inline-block;
position:relative;
margin-left:10px;
margin-right:10px;
}
footer p {
margin-bottom: 5px;
}
footer a {
color: #999;
}
#hheading {
position: absolute;
top: -500px;
}
#maicontent {
float: left;
width: 700px;
border: 1px solid #999;
padding-top:50px;
margin-top:106px;
}
I need to get that font changed over. Please help.
Add this to your CSS
// This removes the unordered list circle
nav ul{
list-style-type:none;
}
// this floats the element inline
nav ul li
{
float:left;
display:inline-block;
}
// This is used to remove the underline and give effects to the text
nav li a
{
font-family:'monospacetypewriterregular', sans-serif;
text-decoration:none;
}
Fiddle Demo here..!!
Related
ive been following this guys tutorial, ive timestamped it- and he has a text block that floats to the side.
image, which is a div on its own keeps going in the middle when i make one float left and the other float right and i don't know why.
enter image description here
*also if i put the image floated next to a textbox, how would i make sure they're the same height?
body {
background-color: aquamarine;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.navbar {
list-style: none;
color: red;
}
.container {
width: 60%;
margin: auto;
}
.box-1 {
margin-bottom: 1%;
padding: 1%;
background-color: darkgray;
color: white;
}
.box-2 {
float: left;
padding: 1%;
width: 30%;
color: black;
background: white;
border-style: none;
}
.sidebox {
float: right;
background-color: aliceblue;
width: 60%;
}
img {
float: none;
margin: 10%;
display: block;
width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>help</title>
<link href="Untitled-1.css" rel="stylesheet" />
<meta charset="utf-8" />
<meta name="description" content="Web Development" />
<meta name="keywords" content="HTML and CSS" />
<meta name="author" content="grace" />
</head>
<body>
<header>
<nav class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Study</li>
<li>Animation</li>
</ul>
</nav>
</header>
<div class="container">
<div class="box-1">
<h1>Achievments</h1>
<p>Grace has completed these 4 achievements:</p>
<ol>
<li>Two decades of existing</li>
<li>3+ jobs</li>
<li>Graduated high school</li>
<li>Failed hopes and dreams</li>
</ol>
</div>
<div class="box-2">
<h1>Hobbies</h1>
<ul>
<li>Rollerskating</li>
<li>Crying</li>
<li>Buying many books</li>
<li>Reading some books</li>
<li>Drawing and ctrl z</li>
<li>Video Games</li>
</ul>
</div>
<div class="sidebox">
<p>Lorem ipsum ebfasuigfuie eufsiefh adfhuseifhuei efhnsihfeihf </p>
<p>fuck</p>
<p>off</p>
<p>image</p>
</div>
<div class="astro">
<img src="https://res.cloudinary.com/dvifiaohc/image/upload/v1651048486/fly_gpbrfe.png">
</div>
</div>
</body>
</html>
Your CSS for the image elements is all wrong if you're trying to float and snap to the rightmost part of the page.
img{
float:none;
margin:10%;
display:block;
width:300px;
}
Set the margin value to something closer to 0 and set float: right, like so
img{
float: right;
margin:5px;
display:block;
width:300px;
}
I'm writing a simple code to design a plain header with a logo and navigation menu inside it. I want my logo to be on left and navigation menu to be on right side. It looks like a child problem but I am unable to resolve this issue.
I have tried to make all possible tweaking in my IDE as well as Chrome Inspection but couldn't figure it out.
My Index.html code is :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>PSD to Page</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,400" rel="stylesheet">
<script type="text/javascript" src="js/respond.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- body content -->
<header class="secondary-sky-blue-bg">
<div class="container">
<div class="row">
<a href="#" class="logo">
<img src="img/logo.png" alt="logo" />
</a>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- javascript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
and style.css is
header {
color: #fff;
height: 100px;
line-height: 100px;
}
header a.logo{
float: left;
margin-right:10px;
}
.menu {
float: right;
}
.logo img {
width: 100px;
}
body {
font-size: 16px;
line-height: 22px;
font-family: 'Poppins', sans-serif;
}
header nav ul li {
padding-left: 20px;
}
header nav ul li a {
color: #fff;
}
I have a reset.css also
*{
margin: 0;
padding: 0;
}
body{
font-family: 'Raleway', sans-serif;
font-size: 14px;
font-weight: 400;
color: #777;
}
h1
{
font-size: 36px;
color: #555;
font-weight: bold;
}
h2
{
font-size: 30px;
color: #555;
font-weight: bold;
}
h3
{
font-size: 24px;
color: #333;
font-weight: bold;
}
.primary{
color: #e74c3c;
}
.primary-bg{
background-color: #e74c3c;
}
.secondary-dark-blue
{
color: #34495e;
}
.secondary-dark-blue-bg
{
background-color: #34495e;
}
.secondary-sky-blue
{
color: #2d82d8;
}
.secondary-sky-blue-bg
{
background-color: #2d82d8;
}
ul{
list-style: none;
}
ul li {
display: inline-block;
}
I am expecting the nav menu to float on right but it is not working.
You don't have a menu class defined. Are you trying to use nav if so it should be
nav {float:right;}
I can see in your code that you are defining class .menu in your css but you are not using it anywhere in your html.
And you can do it in better way by using flexbox.
.row{
display: flex;
justify-content: between;
}
It not that much heard as i have review your code you have to add simple one class to your nav tag and that is nav class="pull-right" use class pull-right, it is default bootstrap class.
I am here to answer my own question. I found this piece of code in default bootstrap file
.row {
display: flex;}
I changed it to display:block and it is solved.
I respect all the answers but if you using Bootstrap 4 just give ml-auto class to nav it will solve the issue.
You must use col-md-12 inside the row. I have used flex property for nav and margin-left:auto to align the menu right side.
Optionally you can use floating method with clearfix to align the menu right side.
* {
box-sizing: border-box;
position: relative;
}
header {
color: #fff;
height: 100px;
line-height: 100px;
padding: 0 10px;
}
header a.logo {
display: inline-block;
}
.menu {
float: right;
}
.logo img {
width: 100px;
}
body {
font-size: 16px;
line-height: 22px;
font-family: 'Poppins', sans-serif;
}
header nav ul li {
padding-left: 20px;
}
header nav ul li a {
color: #fff;
}
/** second css **/
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
font-size: 14px;
font-weight: 400;
color: #777;
}
h1 {
font-size: 36px;
color: #555;
font-weight: bold;
}
h2 {
font-size: 30px;
color: #555;
font-weight: bold;
}
h3 {
font-size: 24px;
color: #333;
font-weight: bold;
}
.primary {
color: #e74c3c;
}
.primary-bg {
background-color: #e74c3c;
}
.secondary-dark-blue {
color: #34495e;
}
.secondary-dark-blue-bg {
background-color: #34495e;
}
.secondary-sky-blue {
color: #2d82d8;
}
.secondary-sky-blue-bg {
background-color: #2d82d8;
}
ul {
list-style: none;
}
ul li {
display: inline-block;
}
.nav-wrapper {
margin-left: auto;
}
nav {
display: flex !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,400" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" >
<header class="secondary-sky-blue-bg">
<div class="container">
<div class="row">
<div class="col-md-12">
<nav>
<a href="#" class="logo">
<img src="https://via.placeholder.com/250x150" alt="logo" />
</a>
<div class="nav-wrapper">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
Either
.row {
display: block;
justify-content: between;
}
in your reset.css or style.css
or
<nav class="ml-auto">
in your index.html will work fine.
I am trying to get this webpage to show with navigation buttons on the left side of the page. My webpage works great from the previous homework assignment but since I have updated my css sheet now the page displays all messed up. Any help would be awesome!
* {
box-sizing: border-box;
}
body {
background-color: #3f2860;
color: #3f2860;
font-family: Veranda, Arial, sans-serif;
}
header {
background-color: #9bc1c2;
background-image: url(lilyheader.jpg);
background-position: right;
background-repeat: no-repeat;
height: 150px;
}
h1 {
padding-top: 50px;
padding-left: 2em;
}
nav {
font-weight: bold;
float: left;
width: 160px;
padding: 1em;
}
nav a {
text-decoration: none;
font-weight: bold;
padding: 1em;
display: block;
text-align: center;
border: 3px outset #CCCCCC;
margin-bottom: 1em;
}
nav a:link {
color: #3F2860;
}
nav a:visited {
color: #497777;
}
nav a:hover {
color: #A26100;
border: 3px inset #333333;
}
nav ul {
list-style-type: none;
padding-left: 0
}
main {
margin-left: 170px;
padding-top: 1em;
padding: 2em;
display: block;
}
floatleft {
float: left;
margin-right: 4em;
}
.studio {
font-style: italic;
}
.company {
font-style: italic;
}
footer {
background-color: #9bc1c2;
font-size: .60em;
font-style: italic;
text-align: center;
padding: 1em;
}
clear {
clear: both;
}
#wrapper {
background-color: #f5f5f5;
min-width: 1200px;
max-width: 1480px;
width: 80%;
margin-right: auto;
margin-left: auto;
}
header,
nav,
main,
footer {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Path of Light Yoga Studio</title>
<meta charset="utf-8">
<link rel="stylesheet" href="yoga.css">
<!-- [if it IE 9]>
<script src="html5shiv.js>
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>Path of Light Yoga Studio</h1>
</header>
<nav>
<ul>
<li>Home</li>;
<li>Classes</li>;
<li>Schedule</li>;
<li>Contact</li>;
</ul>
</nav>
<main>
<img class="floatleft" src="yogadoor2.jpg" alt="Door to yoga studio" width="220" height="370">
<h2>Find Your Inner Light</h2>
<p><span class="company">Path of Light Yoga Studio</span> provides all levels of yoga practice in a tranquil, peaceful environment. Whether you are new to yoga or an experienced practitioner, our dedicated instructions can develop a practice to meet
your needs. Let your inner light shine at the <span class="company">Path Of Light Yoga Studio</span>.
</p>
<ul>
<li>Hatha, Vinyasa, and Restorative Yoga classes</li>
<li>Drop-ins welcome</li>
<li>Mats, blocks, and blankets provided</li>
<li>Relax in our Serenity Lounge before or after your class</li>
</ul>
<div class="clear">
<span class="company">Path of Light Yoga Studio</span><br> 612 Serenity Way<br> El Dorado, CA 96162<br><br> 888-555-5555
<br><br>
</div>
</main>
<footer>
Copyright © 2016 Path of Light Yoga<br>
Brittany#tracy.com<br><br>
</footer>
</div>
</body>
</html>
Link to what the page is supposed to look like
I want a <div> that its background is an image . I define width and height but when I use background-image to import the image , nothing appears !
whats the problem ?
of course the path is correct because it works in <img>
#slide-show{
width: 1524px;
height:300px;
background-color: #808080;
background-image: url("assets\files\project-pics\assets\harvard-university.jpg");
}
this is the whole code (the last div is going to be backgrounded by image)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>put.ac.ir::پرتال سایت</title>
<link rel="stylesheet" href="C:\Users\user\Desktop\font-awesome-4.7.0\css\font-awesome.css">
<style>
/* .........................things I should add to page....................*/
/* 1: href to top-menu links*/
/* ---------------------------------------------------------------*/
#font-face {
font-family:'Btitr';
src:url('font/BTitrBold.eot') format('eot'),
url('font/BTitrBold.ttf') format('truetype');
font-weight:normal;
font-style:normal;
}
#font-face{
font-family:"sahel";
src:url('font/sahel.eot') format('eot'),
url('font/sahel.ttf') format('truetype');
}
#font-face{
font-family:'Bcompset';
src: url('font/BCompset.eot')format('eot'),
url('font/BCompset.ttf')format('truetype');
font-weight:normal;
font-style:normal;
}
body {
margin :0;
padding :0;
}
#header{
margin:0;
padding: 10px;
height :20px;
background-color: #4d4d4d;
list-style-type: none;
}
li{
color: white;
display: inline-block;
}
#circle {
text-align: center;
width: 45px;
height : 45px;
border-radius: 50px;
background-color: white;
box-shadow: 1px 1px 2px 4px rgba(166, 166, 166, 0.3);
position: fixed;
right: 10px;
bottom : 10px;
}
#header-logo {
background-color:#800000;
height : 250px;
}
#header-logo div img{
height : 100px;
width : 400px;
padding-left: 550px;
padding-top:60px;
}
#top-menu{
font-family :sahel;
list-style-type:none;
}
#top-menu li{
color:#cccccc;
padding-top: 30px;
padding-left:25px;
font-size : 13.5px;
}
#slide-show{
width: 1524px;
height:300px;
background-color: #808080;
background-image: url("assets\files\project-pics\assets\harvard-university.jpg");
}
/* ---------------------------------------------------------------------------*/
</style>
</head>
<body>
<a name="top"></a>
<ul id="header">
<li class="fa fa-search" style="color:white;"></li>
<li style="padding-left:10px; font-family:tahoma; font-size:15px;"> ...جستجو نکنید </li>
<li style="font-family:tahoma; padding-left:350px;">شنبه خر است</li>
<li style="padding-left:200px; font-family:tahoma; font-size:16;">اقتصاد مقاومتی ، اقدام و عمل</li>
<li style ="padding-left:400px; color:#cccccc;">[lori] [torki]</li>
</ul>
<div id="circle"><i class="fa fa-angle-up" style="font-size:40px;"></i></div>
<!logo and top of the main page >
<div id="header-logo">
<div>
<img src="project-pics/assets/header-logo.png"/>
</div>
<div>
<ul id="top-menu" title="comming soon">
<a><li style="padding-left:295px;"> دانشگاه TER سامانه</li></a>
<a><li>داعش کده ها</li></a>
<a><li>معاونت حمل و نقل با گاری</li></a>
<a><li>معاونت دانشجوهای کلنگی</li></a>
<a><li>معاونت آمرزشی</li></a>
<a><li>موزه فراست</li></a>
</ul>
</div>
<! slide show of the page>
</div>
<div id="slide-show">
</div>
</body>
</html>
OK !
Its the path in the image
enter image description here
You can't have a space in your url.
background-image: url("project assets\files\project-pics\assets\harvard-university.jpg");
Use %20 or rename that folder with - or _.
#slide-show{
width: 1524px;
height:300px;
background-color: #808080;
background-image: url("projectassets\files\project-pics\assets\harvard-university.jpg");
}
use the code above. rename your folder project assets to projectassets.
You cannot have a space in your url path.
Also you don't have semicolon at the end of your height deceleration.
You have not defined a unit for your width declaration,use a valid unit like px,%,em to define your width.
I'm trying to place h2 right below h1, but it seems to be creating a huge gap/space. Is there a certain way to avoid this or is this an error in coding? Thank you.
Link to site:
http://younani.com/armen/musicindex.html
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Armens website</title>
<meta charset="utf-8">
</head>
<body>
<div class="clearfix" id="container">
<p><link rel="stylesheet" href="armen.css" /></p>
<h1><i>Four To The Floor</i></h1>
<h2>Artist Management & Events</h2>
<p></p>
<h3>“It’s not where you take things from,<br /> it’s where you take them to.” <br /> - Jean-Luc Godard</h3>
<div id="footer">
<p>Armen Sarkisian fttfmusic#gmail.com www.fttfmusic.com</p>
</div>
</div>
</body>
</html>
CSS:
h1 {color: #FFFFFF; font-family: ballparkweiner; font-size: 70px;
text-align: center; }
#font-face {
font-family: 'ballparkweiner';
src: url('ballw___.eot');
src: url('ballw___.eot?#iefix') format('embedded-opentype'),
url('ballw___.woff') format('woff'),
url('ballw___.ttf') format('truetype'),
url('ballw___.svg#ballparkweiner') format('svg');
font-weight: normal;
font-style: normal;
}
h2 {text-align: center; font-size: 40px; color: #FFFFFF; font-family: Cambria;}
body {background-color: #000000;}
h3 {text-align: center; color: #FFFFFF; }
#footer { font-weight: bold; text-align: center; font-family: Audimat;
clear: both; width:48%;
border-radius: 8px;
background-color:black;
text-align:center; margin-right:auto;
margin-left:auto; color: #FFFFFF; }
h* elements in browsers tend to have some .. fairly large default top and bottom margins. You can just set them specifically to some smaller value, even zero:
h1, h2 {
margin-top: 0;
margin-bottom: 0;
}
You can of course apply these rules to your specific headers.
Add this to your css:
h1, h2 {
margin: 0px;
}
It's the margin on the h1 and h2. Adjust them in your CSS, e.g.
h1, h2 {margin: 0;}
Code :-
You can try this
<div id="container" class="clearfix">
<p><link href="armen.css" rel="stylesheet"></p>
<h1 style="margin-bottom: -18px; margin-top: 0px;"><i>Four To The Floor</i></h1>
<h2 style="margin-top: 0px; margin-bottom: 0px;">Artist Management & Events</h2>
<p></p>
<h3>“It’s not where you take things from,<br> it’s where you take them to.” <br> - Jean-Luc Godard</h3>
<div id="footer">
<p>Armen Sarkisian fttfmusic#gmail.com www.fttfmusic.com</p>
</div>
</div>
REFER THIS LINK http://css-tricks.com/forums/discussion/3825/solved-h1-and-h2-tags-leaving-too-much-space/p1