Trying to code a simple webpage and am learning html. I wonder why my simple styling code for the makes no changes. Here it is below.
<!DOCTYPE html>
<html>
<head>
<!-- SE copied from old site -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/topnav-index.css">
<!-- abv css I created myself, just the TopNav bar -->
<style>
<!-- this is for page wide style -->
<!-- define all paragraph font for main pg -->
p {
color: red;
text-align: left;
font-family: palatino;
font-size: 16pt;
background-color: #909090;
<!-- margin: 4 prop is top, R, bott, L -->
margin-left: 32px;
margin-top: 30px;
<!-- margin: 20,25,35,40; -->
padding-left: 12%;
padding-top: 10%;
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h2>Title</h2>
<p>Responsive Topnav Example</p>
</div>
<!-- main content -->
<p>B This site explores the connection between XXX and the
historical events...</p>
Now the Top Nav bar works but none of the formatting for the p text seems to do anything. It's in the header & I understand the p, in the greater/less than signs, acts as a specialty container of it's own...
in css you should use /* */ for comment and not<!--- -->
p {
color: red;
text-align: left;
font-family: palatino;
font-size: 16pt;
background-color: #909090;
/* margin: 4 prop is top, R, bott, L */
margin-left: 32px;
margin-top: 30px;
/*margin: 20,25,35,40; */
padding-left: 12%;
padding-top: 10%;
}
Related
I am trying to create a search function for a FAQ that I am assembling.
I am very new to HTML, CSS, JS, etc., so please, I need help here! :-)
I created an HTML Code, grabbing from here and there from the Internet, until I managed to do something decent visually.
I don't know how to make searchable out my code, or I am not sure what to change, in order to use a JS file to be able to search and show me the Question and the Answer, of what's being searched on.
Here is my HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ PAGE</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./accordion.css">
<link rel="stylesheet" href="./files/bootstrap.min.css">
</head>
<body>
<main>
<h1 class="faq-heading">FAQ'S</h1>
<div id="accordion_search_bar_container">
<input type="search" id="accordion_search_bar" placeholder="Search"/>
</div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="faq-one">
<!-- faq question -->
<h1 class="faq-page">What is an FAQ Page?</h1>
<!-- faq answer -->
<div class="faq-body">
<p>This is a FAQ test question</p>
</div>
</div>
<hr class="hr-line">
<div class="faq-two">
<!-- faq question -->
<h1 class="faq-page">Why do you need an FAQ page?</h1>
<!-- faq answer -->
<div class="faq-body">
<p>You need a FAQ to help your users</p>
</div>
</div>
<hr class="hr-line">
<div class="faq-three">
<!-- faq question -->
<h1 class="faq-page">Does it improves the user experience of a website?</h1>
<!-- faq answer -->
<div class="faq-body">
<p>It helps your users on a 24/7 basis</p>
</div>
</div>
</div>
</main>
<script src="./main.js"></script>
<script src="./script.js"></script>
<script src="./files/jquery.min.js"></script>
<script src="./files/bootstrap.min.js"></script>
</body>
</html>
This is my CSS
body{
font-family: 'Work Sans', sans-serif;
}
.faq-heading{
border-bottom: #777;
padding: 20px 60px;
}
.faq-container{
display: flex;
justify-content: center;
flex-direction: column;
}
.hr-line{
width: 60%;
margin: auto;
}
/* Style the buttons that are used to open and close the faq-page body */
.faq-page {
/* background-color: #eee; */
color: #444;
font-size: 20px;
cursor: pointer;
padding: 10px 20px;
width: 60%;
border: none;
outline: none;
transition: 0.4s;
margin: auto;
}
.faq-body{
margin: auto;
/* text-align: center; */
width: 57%;
padding: auto;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.faq-page:hover {
background-color: #F9F9F9;
}
/* Style the faq-page panel. Note: hidden by default */
.faq-body {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
.faq-page:after {
content: '\02795';
/* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796";
/* Unicode character for "minus" sign (-) */
}
And this is a JS I found for search, but I cannot make it to work for my HTML code :'(
(function(){
var searchTerm, panelContainerId;
// Create a new contains that is case insensitive
$.expr[':'].containsCaseInsensitive = function (n, i, m) {
return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
$('#accordion_search_bar').on('change keyup paste click', function () {
searchTerm = $(this).val();
$('#accordion > .panel').each(function () {
panelContainerId = '#' + $(this).attr('id');
$(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + '))').hide();
$(panelContainerId + ':containsCaseInsensitive(' + searchTerm + ')').show();
});
});
}());
Any help will be greatly appreciated.
Thanks a lot!
So, recently I've been learning some coding for my course.
I've experimented with a few ideas, and I'm currently making this top header ("topbar") that acts as a mini-header just above the actual header, which displays some extra info.
Unfortunately, I'm a bit of a coding noob and I can't figure out what's going wrong in this code. If you run it, you'll see the social media icons on the right (I'm using Font Awesome) aren't in the header and it's a pain to try and get them there. They should be in line with the elements on the left (middle of the topbar in terms of height, and 30px inwards from the right).
I've played around with padding, margin, align and a bunch of other things but I just can't figure it out. Any help?
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Noto+Sans+JP&family=Salsa&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>TestWeb</title>
</head>
<body>
<!-- ======= Top Bar ======= -->
<section id="topbar" class="d-flex align-items-center">
<div class="container d-flex justify-content-center justify-content-md-between">
<div class="contact-info d-flex align-items-center">
<i class="fa fa-envelope d-flex align-items-center">contact#example.com</i>
<i class="fa fa-map-marker d-flex align-items-center">1 Avenue, London, AB12 0AB</i>
<i class="fa fa-phone d-flex align-items-center ms-4"><span>123 456 78900</span></i>
<div class="social-links d-flec align-items-center">
<i class="fa fa-twitter d-flex align-items-center"></i>
<i class="fa fa-instagram d-flex align-items-center"></i>
<i class="fa fa-facebook-square d-flex align-items-center"></i>
</div>
</div>
</div>
</section>
</body>
</html>
CSS CODE:
/* ==============================
========== G L O B A L ==========
============================== */
*{
margin: 0;
padding: 0;
}
/* =============================
========= T O P B A R =========
============================= */
#topbar{
height: 30px;
width: 100%;
background-color: #313030;
color: white;
font-size: 14px;
font-family: 'Noto Sans JP', sans-serif;
transition: all 0.3s;
padding: 0;
padding-top: 5px;
padding-left: 10px;
}
#topbar .contact-info i a, #topbar .contact-info i span{
padding-left: 5px;
color: #A1B82B;
font-family: 'Noto Sans JP', sans-serif;
text-decoration: none;
}
#topbar .contact-info i a{
line-height: 0;
transition: 0.3s;
transition: 0.3s;
padding: 30px;
padding-left: 5px;
color: #A1B82B;
}
#topbar .contact-info i:hover{
text-decoration: underline;
}
#topbar .social-links i{
float: right;
color: white;
transition: 0.3s;
padding-right: 5px;
}
#topbar .social-links i:hover{
color: #909090;
text-decoration: none;
cursor: pointer;
}
The reason your social media icons aren't in line with everything else is because they are actually going below it.
Take a look at this image:
As you can see, the dashed blue line is your .social-links div, and it is going below the other items in your menu.
Why is this happening?
The reason this is happening is because by default a div has a display property of block
display: block means that the element should start on a new line, and take up the entire width of it's parent.
So, long story short, to fix your problem you could add something like:
#topbar .social-links{
float: right;
}
This code will make your .social-links div appear on the same line as the other items in your menu, as well as be forced to the right hand side of the navigation bar (which I'm assuming is where you want it.)
Now the icons are in the menu bar, but they're stuck to the top. To fix that remove this line of code:
#topbar .social-links i{
/* float: right; <-- REMOVE THIS */
color: white;
transition: 0.3s;
padding-right: 5px;
}
Just a side note, it looks like you're using a lot of unneeded classes in your HTML, try to only use a class if you have actual CSS written for it :)
Here's a working example of your site:
https://codepen.io/jacobcambell/pen/zYzzrjW
Hope this helped!
There are similar questions in StackOverflow on this topic but none of them bring answer to my question:
#header{
border-bottom: 3px solid #87B825;
background: #84E637 url("backg400.gif") repeat-x top left; **<!-- This background is not showing up -->**
}
All of the files being in the same directory, there should not be any file path issue.
Here below the html and associated CSS sources adopted from Dan Cederholm in Chapter 9 of his book "Bulletproof Web Design", 2nd Edition.
Thank you in advance for your help.
1) HTML source
<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>My Site</title>
<link href="mysite.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<h1> My Site</h1>
this is header
</div> <!--end #header -->
<p id="message">
<strong>This is my site</strong>
</p>
<div id="wrap">
<div id="content">
<div class="gutter">
... content goes here
</div> <!--end .gutter -->
</div> <!--end #content -->
<div id="sidebar">
<div class="gutter">
<p>... sidebar goes here </p>
</div> <!--end .gutter -->
</div> <!--end #sidebar -->
<div id="footer">
<p> Copyright © 2015 My Site. All rights reserved</p>
</div>
</div> <!--end #wrap -->
</body>
</html>
CSS source (mysite.css):
#charset "iso-8859-1";
body {
margin: 0;
padding: 0;
font-familly: Verdana, sans-serif;
font-size: small;
background: #fff;
}
<!-- Layout structure -->
#header{
border-bottom: 3px solid #87B825;
background: #84E637 url("backg400.gif") repeat-x top left; <!-- This one is not showing up -->
}
#header h1{
margin: 0;
padding: 25px;
font-family: Georgia, serif;
font-size: 150%;
color: #374C0E;
background: url("backg400.gif") no-repeat top left; <!-- This one is not showing up -->
}
#wrap{
background: url("backg400.gif") repeat-y 80% 0; <!-- This one is showing up -->
}
#content{
float: left;
width: 80%;
font-size: 95%;
line-height: 1.5em
color: #333;
}
#sidebar{
float: right;
width: 20%;
}
#footer{
clear: both;
background: #828377;
}
You are using HTML comments (<!-- comment content -->) on your stylesheet. Remove all these HTML comments from your stylesheet and use the following comment syntax instead:
/** comment content */
Note: There is a typo on the body rule: font-family instead of font-familly.
Additionally try checking your CSS syntax using W3C validation service: http://www.css-validator.org/#validate_by_input
For whatever reason, my the HTML and CSS for my page will not link. CSS is in the same directory. I have ran the page through a validator and no issues have come up, so there is no reason this shouldn't work? I'm not stupid, never had this problem before either, so I'm quite confused. It just has no effect.
https://jsfiddle.net/4ocpjL1v/
maintext {
font-family: 'Oswald';
font-size: 36px;
text-align: center;
}
h3 {
font-family: 'Oswald';
text-align: center;
}
logo {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>UnleashedMC | Join Us!</title>
<link rel="stylesheet" type="text/css" href="howtojoin.css" />
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css' />
</head>
<body>
<!-- Main content area -->
<div id="container">
<div id="logo">
<img src="images/logomedium.png" alt="">
</div>
<div id="maintext">
<p>Join us at ulmc.net</p>
<p>Don't know how to join? Read below!</p>
</div>
</div>
</body>
</html>
You have to use # for IDs (or . for classes) before the name.
#maintext {
font-family: 'Oswald';
font-size: 36px;
text-align: center;
}
h3 {
font-family: 'Oswald';
text-align: center;
}
#logo {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>UnleashedMC | Join Us!</title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="howtojoin.css" />
</head>
<body>
<!-- Main content area -->
<div id="container">
<div id="logo">
<img src="images/logomedium.png" alt="">
</div>
<div id="maintext">
<p>Join us at ulmc.net</p>
<p>Don't know how to join? Read below!</p>
</div>
</div>
</body>
</html>
#maintext {
font-family: 'Oswald';
font-size: 36px;
text-align: center;
}
h3 {
font-family: 'Oswald';
text-align: center;
}
#logo {
text-align: center;
}
this will work for sure....u have put font after css, it should be before css.
See Live https://jsfiddle.net/subodh_saraswat/4ocpjL1v/1/
I'm currently working on a menu for a website and got a problem: I have a logo which should be on the left side and menu buttons which should be on the right side. This is what I got so far:
<!DOCTYPE HTML>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Share:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Menu</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: 'Share', cursive;
}
#header {
background-color: ;
}
#header_logo {
width: ;
margin-top: ;
}
#header_menu {
width: 100%;
}
.menubutton {
height: 2.5em;
line-height: 2.5em;
display: inline-block;
background-color: ;
margin-left: 20px;
}
a {
font-family: 'Share', cursive;
}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
</style>
</head>
<body>
<div id="wrapper" align=""> <!-- Beginning of wrapper -->
<div id="header"> <!-- Beginning of Header -->
<div id="header_logo" align="left">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;"/>
</div>
<div id="header_menu" align="right">
<div class="menubutton">
Home
</div>
<div class="menubutton">
Info
</div>
<div class="menubutton">
Werben
</div>
<div class="menubutton" align="right" style="margin-right: 20px;">
Kontakt & Impressum
</div>
</div>
</div> <!-- End of header -->
</div> <!-- End of wrapper -->
</body>
</html>
The problem is that the logo is not on a line with the menu buttons…
Before I added the logo everything worked perfect. I tried different things but nothing worked. Do you guys have an idea how I can solve that problem?
Add float:left to your #header_logo div.
jsFiddle example
Note that you may also want to reduce or eliminate the line-height property on your .menubutton class if you want the spacing to be even tighter.
You may also try for display: inline-block;
This property allows a DOM element to have all the attributes of a block element, but keeping it inline.
Also do check this article