I am trying to make a website (just for learning). What I want is "follow us" h2 and two icon youtube and twitter at a side(right).
and if web page shrinks or if I open the website in the mobile device. it needs to be under the menu.
<!DOCTYPE html>
<html>
<!--
Meta data and stylesheet link
-->
<head>
<meta charset="UTD-8" >
<meta name="description" content="Tech Lovers Youtube Channel" >
<meta name="keywords" content="HTML,CSS,XML,Javascript">
<meta name="author" content="Owais Qureshi">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title> Tech Lovers | Welcome</title>
<link rel="stylesheet" href="../CSS/Style.css">
</head>
<body>
<header>
<!--
top logo with heading
-->
<div id="logo" class="container">
<img src="../Media/IMG/logo.jpg" alt="tech_logo">
<h1>Tech Lovers</h1>
</div>
<!--
menu
-->
<nav id="menu" class="container">
<ul>
<li>Home</li>
<li>Blogs</li>
<li>About Us</li>
</ul>
</nav>
<!--
i want this on right side. -->
<div id="follow_us" class="container">
<h2>Follow us</h2>
youtube_img_icon
twitter_img_icon
</div>
</header>
</body>
</html>
my website looks
This should do what you want it to. :)
.headerContainer{
display : inline-block;
float : left;
width : 200px;
}
/* small screens and mobile */
#media screen and (max-width:767px) {
.headerContainer{
display : block;
float : left;
clear : both;
}
}
<!DOCTYPE html>
<html>
<!--
Meta data and stylesheet link
-->
<head>
<meta charset="UTD-8" >
<meta name="description" content="Tech Lovers Youtube Channel" >
<meta name="keywords" content="HTML,CSS,XML,Javascript">
<meta name="author" content="Owais Qureshi">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title> Tech Lovers | Welcome</title>
<link rel="stylesheet" href="../CSS/Style.css">
</head>
<body>
<header>
<!--
top logo with heading
-->
<div id="logo" class="container">
<img src="../Media/IMG/logo.jpg" alt="tech_logo">
<h1>Tech Lovers</h1>
</div>
<!--
menu
-->
<nav id="menu" class="headerContainer">
<ul>
<li>Home</li>
<li>Blogs</li>
<li>About Us</li>
</ul>
</nav>
<!--
i want this on right side. -->
<div id="follow_us" class="headerContainer">
<h2>Follow us</h2>
youtube_img_icon
twitter_img_icon
</div>
</header>
</body>
</html>
header {
display: flex;
flex-direction: column;
}
#media (min-width: 480px) {
header {
flex-direction: row;
}
}
You could try this CSS. Hope it will solve your problem.
Try:
position:absolute, bottom:0px
Related
I'm following a tutorial online but I can't my HTML code to CSS (nothing happens when I change the details in css file. I have both files placed in the same folder. My CSS is in style.less file
Since I only starting with this, I think maybe the problem is in the syntax but I can't figure out what it is exactly
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>1st project</title>
<link rel="stylesheet" href="./reset.css"/>
<link rel="stylesheet" href="./style.css"/>
<link rel="stylesheet/less" type="text/css" href="style.less"/>
</head>
<body>
<div class="top">
<div class="top_content">
<img src="/base/materials/4.png"/>
<div>
<h3>Web Development Course</h3>
<span> Learn to code with basic paths</span>
<button>Browse course</button>
</div>
</div>
</div>
<div class="top_sub-content">
<nav>
<ul>
<li>Home</li>
<li>Careers</li>
<li>Blog</li>
</ul>
</nav>
<img src="/base/materials/5.jpg"/>
</div>
<footer>
<div>
<img src="/base/materials/4.png"/>
<h3>Join the list</h3>
<span>Sign up for the list</span>
</div>
<div>
<div>
<input placeholder="Enter your email"/>
<button>Subscribe</button>
</div>
<span>We won't spam</span>
</div>
</footer>
</body>
</html>
CSS
body {
width: 100%;
height: 100%;
}
.top {
display: flex;
.top_content {
flex: 1;
}
.top_sub-content {
background: #33A3EF;
flex-basis: 40%;
img {
max-width: 100%;
}
}
}
If both files are in the same location, remove the dot and slash from the beginning of the link
Before
<link rel="stylesheet" href="./style.css"/>
After
<link rel="stylesheet" href="style.css"/>
I am following Tyler Potts' YouTube tutorial for making a nav bar. However, my nav bar isn't displaying as 'flex' and I also cannot edit my fonts.
My HTML:
`
<!DOCTYPE html>
<html lang="en">
<head>
<!--boiler plate-->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--tab-->
<title>Ryan Brooks</title>
<!--main.css-->
<link
href="https://fonts.googleapis.com/css2?family=Rubik+Wet+Paint&display=swap"
rel="stylesheet"
/>
<link: rel="stylesheet" href:"main.css" />
<!--favicon-->
<link rel="icon" href="images/favicon.png" type="image/png" />
<!--font-->
</head>
<body>
<!--nav bar-->
<nav>
<div class="container">
<h1>Ryan Brooks</h1>
<div class="menu">
Home
Projects
About
Contact
</div>
<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<script src="main.js"></script>
</body>
</html>
`
:root {
--primary: #8c38ff;
--light: #eeeeee;
--dark: #212121;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Rubik Wet Paint", cursive;
}
.container {
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
`
What it looks like:
I tried adding the links from google fonts before my stylesheet link in the html, then adding the font after the asterisk { } section in the css. I was expecting the
text and <nav> bar content on my website to display in rubik font. Additionally, I was expecting my nav bar to display flex beside the
text, rather than beneath it. Thank you!
Be careful with syntax, here in your <head>, in your link to the css, you wrote href:"main.css" instead of href="main.css". You also put ':' right after the link tag which isn't required too.
if u use bootstrap you can add this on class="nav justify-content-center"
I am learning HTML and CSS and i have problems with positioning.
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="https://bootswatch.com/simplex/bootstrap.min.css">
<meta charset="utf-8">
<title>My Website</title>
</head>
<body>
<div id="main">
<header>
<h1 id="baslik">Dünyanın en iyi web sitesi!</h1>
</header>
<nav>
<p>Bu sitede bulacaklarınız:</p>
<ul>
<li>Videolar</li>
<li>Blog yazıları</li>
<li>Eğlenceli şeyler...</li>
</ul>
</nav>
<footer>
<p>Bu sitenin copyright hakları tarafımıza aittir.</p>
</footer>
</div>
</body>
</html>
And this is my CSS code:
#main{
text-align: center;
}
I cant align my text, how do i do this with HTML and CSS?
To horizontally center a block element (like div), use margin: auto;
Setting the width of the element will prevent it from stretching out to the edges of its container.
The element will then take up the specified width, and the remaining space will be split equally between the two margins.
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
.center {
text-align:center !important
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="https://bootswatch.com/simplex/bootstrap.min.css">
<meta charset="utf-8">
<title>My Website</title>
</head>
<body>
<div id="main" class="center">
<header>
<h1 id="baslik">Dünyanın en iyi web sitesi!</h1>
</header>
<nav>
<p>Bu sitede bulacaklarınız:</p>
<ul>
<li>Videolar</li>
<li>Blog yazıları</li>
<li>Eğlenceli şeyler...</li>
</ul>
</nav>
<footer>
<p>Bu sitenin copyright hakları tarafımıza aittir.</p>
</footer>
</div>
</body>
best to use a class when applying across many divs.
I have a problem with background-image property in one of my sections. Here is the HTML code:
<!DOCTYPE html>
<html lang="pl">
<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 rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css" type="text/css">
<link rel="stylesheet" href="css/custom.css" type="text/css">
<title>Elipsis</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
</head>
<body>
<header id="intro">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</header>
<main>
<section id="about">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</section>
<section id="services">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</section>
</main>
<footer id="contact">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And CSS:
#intro {
background-image: url(.../.../img/intro.png);
background-image: url(intro.png);
background-image: url(".../.../img/intro.png");
background-image: url("intro.png");
}
Index.html is in root folder, css file is in root/css/... and intro.png is in both root/img/... and root folders. Why it's not showing? I've read a couple of topics here on stack and some articles from google but nothing seems to work.
The way you wrote that CSS rule only the very last line will apply, which is
background-image: url("intro.png");
(it overwrites the other lines before it)
So you probably want to change that to
#intro {
background-image: url("../img/intro.png");
height: 300px; /*whatever value, if there is no content */
}
Plus, as someone wrote in the comments: if that element has no content and no defined height, it will have height 0, therefore the background image will not be visible.
Try this.
background-image: url('../img/intro.png');
I usually drag and drop that image to get the proper path. I hope this helps.
Trying to write a mobile web page, but it doesn't take the full screen on the emulated mobile page (neither on my LG Pro mobile phone). Any reason why?
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
body { background-color:white; color:black }
</style>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Pacifico" />
<script src="http://dbushell.github.io/Responsive-Off-Canvas-Menu/js/modernizr.js"></script>
<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="http://dbushell.github.io/Responsive-Off-Canvas-Menu/css/step4.css">
</head>
<body style="position:absolute; top:0; bottom:0; height=100%">
<!-- content goes here-->
<div id="outer-wrap" style="position:absolute; top:0; bottom:0; height=100%">
<div id="inner-wrap" style="position:absolute; top:0; bottom:0; height=100%">
<header id="top" role="banner">
<div class="block">
<h1 class="block-title">List</h1>
<a class="nav-btn" id="nav-open-btn" href="#nav">Book Navigation</a>
</div>
</header>
<nav id="nav" role="navigation">
<div class="block">
<h2 class="block-title">Chapters</h2>
<ul>
<li class="is-active">One</li>
<li>
Two
</li><!--
--><li>
Three
</li><!--
--><li>
Four
</li><li>
Five
</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ul>
<a class="close-btn" id="nav-close-btn" href="#top">Return to Content</a>
</div>
</nav>
<div id="main" role="main" style="height=100%">
<article class="block prose">
<h1>Welcome To John's recollection</h1>
Wonderful things in life
</article>
</div>
<footer role="contentinfo">
<div class="block prose">
<p class="small">Copyright © John & Joe</p>
</div>
</footer>
</div>
<!--/#inner-wrap-->
</div>
<!--/#outer-wrap-->
<script src="http://dbushell.github.io/Responsive-Off-Canvas-Menu/js/main.js"></script>
<script>
// When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
</script>
</body>
</html>
First of all you got some typos that you need to fix:
Take a look at body style attribute (height value), you wrote:
<body style="position:absolute; top:0; bottom:0; **height=100%"**>
But you need:
<body style="position:absolute; top:0; bottom:0; **height:100%"**>
First fix those kind of typos on page.
ONE BIG MISTAKE is to make your "body" absolute. Please take a look at how positioning really works.
http://www.w3schools.com/css/css_positioning.asp
To fix this, remove from "body" positioning at all. And make another element(div in your case), that will be positioned absolute, if you really need that.
For more help, try to make some live example of your project so we can inspect it better.
Without seeing what you done in CSS we can't be sure that this answer will fix your problem.
But it looks like you misunderstand concept of positioning, and over complicated your DOM and CSS.
use this meta tags :
<meta content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
and for responsive design YOU should use Media queries in your css
Media query is an easy way like this css code :
#media screen and (max-width:600px){
#bgimg1{display:none}
#bgimg{display:block}
.usertext{font-size:30px;}
.no_order2{font-size:20px;margin:auto 20%;margin-top:35%;}
#show-time{left:-15%;}
}
you can use !important to run your new codes over previous code
Thanks to the help of mehdi and Zlatko Vujicic, created a hack which appears to serve the purpose. The change? Moved footer to the immediate parent div of , use the idea of sticky css (thanks Zlatko Vujicic) to extend the height of the above mentioned div.
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
body { background-color:white; color:black }
.wrapper1 {
min-height: 100%;
height: auto !important;
/*height: 100%;*/
margin: 0 auto -4em;
}
</style>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Pacifico" />
<script src="http://dbushell.github.io/Responsive-Off-Canvas-Menu/js/modernizr.js"></script>
<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="http://dbushell.github.io/Responsive-Off-Canvas-Menu/css/step4.css">
<style type="text/css">
#media screen and (max-width:600px{
#bgimg1{display:none}
#bgimg{display:block}
.usertext{font-size:30px;}
.no_order2{font-size:20px;margin:auto 20%;margin-top:35%;}
#show-time{left:-15%;}
}
</style>
</head>
<body style="position:absolute; top:0; bottom:0; height:100%">
<!-- content goes here-->
<div id="outer-wrap" style="position:absolute; top:0; bottom:0; height:100%">
<div id="inner-wrap" style="position:absolute; top:0; bottom:0; height:100%">
<header id="top" role="banner">
<div class="block">
<h1 class="block-title">List</h1>
<a class="nav-btn" id="nav-open-btn" href="#nav">Book Navigation</a>
</div>
</header>
<nav id="nav" role="navigation">
<div class="block">
<h2 class="block-title">Chapters</h2>
<ul>
<li class="is-active">One</li>
<li>
Two
</li><!--
--><li>
Three
</li><!--
--><li>
Four
</li><li>
Five
</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ul>
<a class="close-btn" id="nav-close-btn" href="#top">Return to Content</a>
</div>
</nav>
<div id="main" role="main" class="wrapper1">
<article class="block prose">
<h1>Welcome To John's recollection</h1>
Wonderful things in life
<footer role="contentinfo" style="height: 4em; position: fixed; bottom: 0; width: 100%">
<p align="center" class="small" style="position: relative; top: 40%">Copyright © John & Joe</p>
</footer>
</article>
</div>
</div>
<!--/#inner-wrap-->
</div>
<!--/#outer-wrap-->
<script src="http://dbushell.github.io/Responsive-Off-Canvas-Menu/js/main.js"></script>
<script>
// When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
</script>
</body>
</html>