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!
Related
I'm curious as to why this is occuring. I'm using fontawesome and have noticed that when wrapping an icon in an anchor tag and using flexbox to center the content, the vertical misalignment is out very slightly. This doesn't occur with text inside an anchor tag, which are aligned properly against its non-anchor-tagged siblings as you can see from the straight line
I can solve this by making the anchor an inline-flex block and vertically aligning this so I know how to fix it so I'm not after solutions, I'm just after an understanding as to why this occurs. What's fontawesome doing behind the scenes to cause this to happen? It's not just the house icon that does it, the square, bars etc are also misaligned.
Thank you for your insights.
Code below. The blue div has flex applied to it, the green one not. Anything in pink is wrapped in an anchor tag.
body {
font-size: 3em;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
}
a {
text-decoration: none;
color: lightpink;
}
nav {
margin-bottom: 0.5rem;
background-color: lightgreen;
width: 100%;
padding: 0.5rem;
color: white;
height: 10rem;
}
.flex-aligned-example {
background-color: #21a4de;
display: flex;
align-items: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav class='flex-aligned-example'>
X<i class="fa fa-home" aria-hidden="true"></i></i></i><a><i class="fa-solid fa-bars"></i></i>
</div>
</nav>
<nav class='not-aligned-example'>
X<i class="fa fa-home" aria-hidden="true"></i></i></i><a><i class="fa-solid fa-bars"></i></i>
</div>
</nav>
Hello Peeps
Thanks a lot for taking your time in reading this. I am new in Wordpress. I want to update my footer.
I wrote an HTML code for my footer which I was going to use on Customisation>Layout>Footer.
But I am unable to link bootstrap 4 with that as the code window automatically removes the linked bootsrap line,
So I tried to add a footer widget but it is affecting my whole page. I want to use bootstrap 4 to make my footer responsive.
I don't know how to use media libraries. I managed to make my footer responsive with grid system (col-sm-12 , col-lg-4) but whenever I import my bootstrap 4 link.
Can you please help me on how should I make my footer responsive?
If you want to check it live
You can see footer of this page : https://techdevio.com/about/
Do not check footer of homepage as it is made by thrive architect and I was just trying to replicate it by writing code.
If you have any suggestions on how to make that code responsive without using bootstrap I would appreciate that too. :)
Thanks In Advance
.bg {
background-color: rgb(49, 65, 140);
color: white;
}
a {
color: white;
text-decoration: none;
}
.container {
text-align: center;
}
#social {
margin: 60px 0px auto;
overflow: hidden;
text-align: center;
}
#media screen and (max-width: 768px) {
#social {
margin: 26px auto;
}
}
#social ul {
margin: 0px auto;
list-style-type: none;
padding: 0px;
}
#social ul.social,
#social ul.contact {
display: inline-block;
}
#social li {
margin: 0 17px 0 0;
float: left;
color: black;
}
#media only screen and (max-width: 495px) {
#social li {
margin: 0 0 10px 0;
float: none;
clear: both;
}
}
#social li a {
color: black;
}
#social ul.social,
#social ul.contact {
display: inline-block;
}
.category {
font-weight: bold;
font-family: Literata !important;
font-size: 19px !important;
--g-regular-weight: 400;
--g-bold-weight: 700;
}
.cat-2 {
font-size: 18px;
font-family: Muli;
font-weight: 300 !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<footer class="bg">
<div class="container pt-3">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
Tech Dev I/O
<p>Tech Dev I/O Keeps You Updated With Latest Tech News & Gadgets. We Also provide Reviews Of Trending Gadgets </div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
<p class="category">Information</p>
<p>➤ Contact us</p>
<p>➤ About us</li>
<p>➤ Privacy policy</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
<p class="category">Contact Us</p>
<p> <i class="fa fa-phone" aria-hidden="true"></i>📱 +91 89998 17454</p>
<p><a class="cat-2" href="https://www.google.com/maps/place/Pune,+Maharashtra/#18.5245649,73.7228812,11z/data=!3m1!4b1!4m5!3m4!1s0x3bc2bf2e67461101:0x828d43bf9d9ee343!8m2!3d18.5204303!4d73.8567437" target="_blank"><i class="fa fa-map-marker" aria-hidden="true"></i>
📌 123, Society, Pune, MH 440013</a></li>
</p>
<p>
<i class="fa fa-envelope" aria-hidden="true"></i> 📧 techdevio20#gmail.com
</p>
</ul>
</div>
</div>
</div>
<div id="social">
<ul class="social">
<li><a target="_blank" href="https://www.facebook.com/techdevio.io">Facebook</a></li>
<li><a target="_blank" href="https://twitter.com/TechDev17">Twitter</a></li>
<li><a target="_blank" href="https://www.instagram.com/techdevio/">Instagram</a></li>
<li class="last"><a target="_blank" href="https://in.pinterest.com/techdevio/">Pintrest</a></li>
</ul>
</div>
<div id="social" style="margin-top: 0px;">
<p>©2020 Tech Dev I/O</p>
</div>
</footer>
</body>
</html>
You cannot apply stylesheets for specific HTML tags. You can scope them, for example - make all rules in the stylesheet related to the given tag/selector:
footer.bg {
/* Some footer styles */
}
footer.bg .category{
/* Some footer category styles */
}
but these styles are applied globally. Whenever the rule is matched, its styles are applied accordingly.
In your case, from what I understand, you need the Bootstrap grid tools like col, row, etc., but the import of the whole Bootstrap CSS overrides and breaks the styles you already have on that page.
There is an official Bootstrap grid CSS, which will provide only those responsive grid utilities. Keep in mind that it also comes with some display and flexbox utilities as well, which may potentially clash with some of your styles if you happen to use the same classes.
Here's the link: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap-grid.min.css
using bootstrap grid for responsive design, but when screen size is reduced, the footer is lost, and one can't move down page. shown below is why.html page plus styling from css file and scss file.
my attempts to fix this have been:
to look for some syntax problem in css file, and i changed background image from body to html to no avail. any help appreciated. https://jsfiddle.net/eojcam/htkxnywL/7/
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="images/favicon_nylon.ico" type="image/x-icon" />
<title>why</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- My styles for project0 -->
<link rel="stylesheet" href="css/styles_p0.css">
<!-- My sass styles for project0 -->
<link rel="stylesheet" href="css/variable_p0.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark">
<a class="navbar-brand" href="index.html">Home</a>
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="why.html">Why</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="examples.html">Examples</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<h1></h1>
<h2>Drop That Pick!</h2> <!-- use of unicode for emoji -->
<p class="header_p">It's gonna happen anyway...😎</p>
</header>
<section class="join">
<div class="container">
<div class="row">
<div class="col">
<p>Several years ago, after returning from a position as Orchestral Guitarist on Royal Caribbean Cruise
Lines ship the "Monarch of the Seas,"</p>
<p>I decided to take some Classical Guitar lessons with a private
teacher. I learned how to play the guitar without a pick...</p>
...revealing some new possibilities.
Like playing Walking Bass Lines,
Chords, and Melody all at once!
</div>
</div>
</div>
</section>
<section class="join">
<div class="container">
<div class="row">
<div class="col">
<table>
<tr>
<th>Finger Style</th>
<th>Pick</th>
</tr>
<tr>
<td>Thumb and Fingers work independently.</td>
<td>Only one attack possible.</td>
</tr>
<tr>
<td>Invented first 😎 (technique has been developed for longer time.)</td>
<td>Reliance, such that if you drop it, (or don't have one),
means you are "out of business!"</td> <!--use of table -->
</tr>
</table>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<p id="footer_p">Copyright © 2020 Joe Austin Mcintosh. All rights reserved.</p> <!-- id used -->
</div>
</footer>
</body>
</html>
css:
body{
padding-top:5rem;
background:url(/Users/king/proj_0/images/nylon_string_original.JPG) no-repeat center center fixed;
background-size: cover;
overflow: hidden;
color: #ffffff;
{box-sizing: border-box;}
}
div {
padding: 2px;
text-align: center;
}
h1, h2, h3, h4 {
color: #FFFF00;
}
h3 {
margin-top: 0;
margin-bottom: 0;
}
header {
margin-left: 1%;
margin-bottom: 1%;
}
p {
margin-bottom: 0;
}
table {
margin: 0 auto 0 auto;
border: 2px solid #ffffff;
border-collapse: collapse;
width: 80%;
}
th, td {
border: 1px solid #ffffff;
padding: 5px;
text-align: center;
}
th {
background-color: lightgray;
color: #6D2E0D;
}
ul {
list-style: none;
}
.header_p { /* use of class*/
text-align:center;
text-shadow:5px 5px 10px #ffffff;
color: #FFFF00;
}
.join {
padding:2px;
margin-top: -20px;
text-align: center;
}
.row > div {
padding-top:5rem;
color: #ffffff;
}
#media print {
.screen_only {
display: none;
}
}
.section_d {
padding: 2px;
margin-bottom: 0px;
font-family: Palatino, serif;
text-align:center;
}
#a_examples {
color: #ffffff;
}
#footer_p { /* use of id */
font-family: cursive;
padding-top:2px;
padding-left:4px;
padding-right: 2px;
margin-top: 0;
text-align:center;
text-shadow:5px 5px 10px #ffffff;
color: #FFFF00;
}
#p_examples {
text-align: center;
}
#media (min-width: 500px) { /* media query use */
h1::before {
content: "Finger Style Guitar Club";
}
}
#media (max-width: 499px) {
h1::before {
content: "Finger Style!";
}
}
scss:
$cap: small-caps; /* variable use*/
ul {
font-variant: $cap;
}
div {
ul { /* use of nesting*/
li a {
color: #ffffff;
}
}
}
%style { /* inheritance use */
border: 1px solid black;
padding: 1px;
margin: 0px;
}
.full_name {
#extend %style;
color: blue;
}
.age {
#extend %style;
color: blue;
}
.playing_style {
#extend %style;
color: blue;
}
.where {
#extend %style;
color: blue;
}
the footer gets lost as you are not using the repsonsive Bootstraps design in your footer element. Also to utilise the responsive element, and grid component it is best to define an elements col per the device being used. For example:
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-9">
<!-- code in here -->
</div>
</div>
The lg large devices, md medium devices and sm small devices. This is will allow all of your elements to adapt to a device. https://getbootstrap.com/docs/4.5/layout/grid/
Here is more information on the grid system bootstrap uses and how to write responsive code.
Also, to make it easier for custom styling your website you can just use one stylesheet and only link one stylesheet. Your SASS stylesheet will get changed into a .css file, you can write vanilla css in your SASS file and it will remain css.
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%;
}
I've been able to properly position & scale a few elements in my webpage using html & css, however due to the rules of positioning, I've gotten stuck on how to continue this action with two more elements.
The chevron icon in the picture must be below the last paragraph entitled "scroll down", & I also want it to scale with the screen size as I have been successfully able to do with the other text/elements as you can see:
here is the html:
<!DOCTYPE html>
<html>
<head>
<title>myWebpage</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />
<link href="css/font-awesome.min.css"rel="stylesheet">
<link href="main-sanctuary.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Hellloooooooooooooo!</h1>
<p id="first-p">Welcome All!<br>Make Yourself at home.</p>
<p id="secondary-p">Scroll down.</p>
<button id="logBtn">Log In</button>
<button id="signBtn">Sign Up</button>
<i class="fa fa-chevron-down fa-4x"></i>
</header>
</body>
</html>
and here is the css:
* {
margin:0;
padding:0;
}
body,html {
height: 100%;
background: honeydew;
}
/* Header*/
header {
height: 100vh;
background-image: url(https://s3-us-west-2.amazonaws.com/assests/books-apple.jpg);
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
text-shadow: 0 1px 3px rgba(0,0,0,.8);
text-align: center;
position:relative;
}
h1 {
color: honeydew;
font-family: "Helvetica Neue";
font-size : 7.5vw;
margin-bottom: 30px;
}
#first-p {
color: honeydew;
font-family: "Helvetica Neue";
font-weight: lighter;
font-style: normal;
font-size : 3.5vw;
margin-bottom: 50px;
}
#secondary-p {
position: inherit;
color: #FFD700;
font-family: "Helvetica Neue";
font-weight: lighter;
font-style: normal;
font-size : 2vw;
margin-bottom: -90px;
}
.fa {
color: #FFD700;
}
So how do I properly position the .fa under #secondary-p on my webpage & scale it as well?
Just remove margin-bottom : -90px; from #secondary-p, this will make Cheveron Icon go below Scroll Down (#sencondary-p).
And for scaling the Cheveron Icon, add font-size to it with a value in vw. Like This :-
.fa{
color : #FFD700;
font-size : 4vw;
}
Demo is here.
Update
For shifting them a little bit down, wrap the .fa element and the #sencondary-p element inside a div and give that div some margin-top. Like this :-
HTML :-
<div id="wrapper">
<p id="sencondary-p">Scroll Down</p>
<i class = "fa fa-chevron-down fa-4x"></i>
</div>
CSS :-
#wrapper{
margin-top : 100px; /*Increase the value to shift more down*/
}
See the updated demo here.
Put the chevron inside a div and set the div's position. (Use position: static, which will keep the position consistent.)