I made this website (it's not finished yet of course) but I've got a problem with making what's already done responsive :(
Background image is sizing with h1 and h3 but it does not look good and also it goes under menu.
Does anyone got any advice on how to make it responsive? And make it look better on smaller screens?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-size: 16px;
}
.header-main {
background-image: url("https://i.stack.imgur.com/EJvoD.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 90vh;
width: auto;
font-family: 'Monoton', cursive;
}
.header-main h1 {
font-size: 6vw;
color: rgb(253, 59, 101);
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
margin-left: 1rem;
}
.header-main__subtitle {
color: rgb(253, 59, 101);
margin-right: 1rem;
}
.header-main__subtitle h3 {
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
}
.header-main__subtitle h3 div {
padding: 0.2rem;
}
.header-menu__items {
display: flex;
list-style: none;
flex-flow: row wrap;
justify-content: space-between;
height: 10vh;
}
.header-menu__item {
padding: 2rem;
}
.header-menu__item a {
text-decoration: none;
color: rgb(253, 59, 101);
font-weight: bold;
font-family: "Courier New", Courier, monospace;
}
.header-menu__item a:hover {
border-bottom: 2px solid rgb(253, 59, 101);
}
#media screen and (orientation:portrait) {
.header-main {
height: auto;
}
}
<!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>Document</title>
<link href="https://fonts.googleapis.com/css?family=Monoton" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header-menu">
<nav>
<ul class="header-menu__items">
<li class="header-menu__item">HOME</li>
<li class="header-menu__item">ABOUT</li>
<li class="header-menu__item">SERVICES</li>
<li class="header-menu__item">INSTA</li>
<li class="header-menu__item">CONTACT</li>
<li class="header-menu__item">BOOK ONLINE</li>
</ul>
</nav>
</div>
<div class="header-main">
<div><h1><div>GODDESS</div><div>BRAIDS</div><div>SALON</div></h1></div>
<div class="header-main__subtitle"><h3><div>...WHERE</div><div>HAIR</div><div>DREAMS</div><div>COME</div><div>TRUE</div></h3></div>
</div>
<nav>
<ul>
<li>fb</li>
<li>inst</li>
<li>twitter</li>
</ul>
</nav>
</header>
<main>
<div>
<h1>about</h1>
<h2>GODDESS BRAIDS</h2>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. I’m a great place for you to tell a story and let your users know a little more about you.</p>
</div>
<div></div>
<div></div>
</main>
<footer>
</footer>
</body>
</html>
background image:
The most common ways to make a website responsive are the following:
Bootstrap, which is a framework used to create general layouts for different screens-sizes.
Media queries, which is a part of CSS3 and is used to apply styling on very specific screen-sizes.
Hamburger-buttons, which the navigation hides behind, to save you a lot of space.
CSS Grid, which is a grid-based layout system, that, in combination with Media Queries, can achieve the same results as Bootstrap can, and more! (though Bootstrap is easier to use)
Related
I am new to web development.... please suggest me some solution for this issue I am using 'vw' for width and 'vh' for height but its not working well when i am opening my website in mobile and when i am opening website in laptop and opening tab of inspection my websites design goes up ,so i want so solution for solving this issue
I am trying this but its not working properly when i am open my inspection tab of browser ,Its change size according to view port size...please help me for solve this issue ...thank you....
below is 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" />
<link rel="stylesheet" href="style.css" />
<title>
iNotebook
</title>
</head>
<body>
<div class="Navbar">
<nav>
<ul type="none">
<h1>iNotebook</h1>
Create Notes
My Notes
</ul>
</nav>
<div class="CreatePageLogOut">
<button class="Logout">Log Out</button>
</div>
</div>
<div class="mainAddNotePage">
<div class="secondAddNote">
<h1>Create Notes</h1>
<h5 style="font-size: large; margin-top: 1%;">Title</h5>
<input type="text" id="AddNoteInpute" />
<h5 style="font-size: large;margin-top: 1%;">Description</h5>
<input type="text" id="AddNoteInpute" />
<h5 style="font-size: large;margin-top: 1%;">Tag</h5>
<input type="text" id="AddNoteInpute" />
<div>
<button class="AddNoteButton">Add Notes</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
`
and below is css code:-
`
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
.Navbar{
background-color: rgb(28, 28, 172);
height: 8vh;
display: flex;
}
nav ul{
display: flex;
justify-content: space-around;
align-items: center;
height: 8vh;
width: 25vw;
color: white;
}
a{
color: white;
text-decoration: none;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.CreatePageLogOut{
display: flex;
justify-content: flex-end;
align-items: center;
width: 70vw;
}
.Logout{
height: 5vh;
width: 8vw;
background-color: rgb(239, 56, 56);
color: white;
border: solid rgb(171, 163, 249);
border-radius: 8%;
cursor: pointer;
}
.mainAddNotePage{
height: 80vh;
width: 100vw;
display: grid;
justify-content: center;
align-items: center;
}
#AddNoteInpute{
height: 8vh;
width: 25vw;
}
.AddNoteButton{
height: 8vh;
width: 20vh;
color: white;
background-color: rgb(52, 52, 245);
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-weight: bold;
}
`
When i am open my inspect then my view port height is changed and when i am open website in mobile and tap on input keyboard is come up and view port height of input element is changed...please help me to solve problem...
This is because vh & vw are units relative to the viewport.
vh means View-Port Height when you say 10vh it means 10% of Viewport Height, the element will use the Size value equivalent to 8% of the Browser View-Port Height. Similarly, vw means View-Port Width. So, the results you are having are perfectly normal & not a problem.
I would recommend you to use px or em & rem for most of the sizing.
Like using 8vh for nav is somewhat of a good choice because it will look good covering 8% of the View-Port, but having an input covering 8% of View-Port is not recommended. In smaller devices, it will always raise issues.
Please Take CSS Length Reference From Here
Hi I'm making a website but I'm having two problems
My HTML file doesn't see my CSS file. My Html file is Website/html/index.html and my CSS file is Website/css/index.css
Even though i do text-align: center;(CSS file line:22) my list doesn't become straight line
My Html code
<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>KK Kiralama</title>
<link rel="stylesheet" href="/css/index.css">
</head>
<body>
<header class="kk-header">
<div class="kk-container">
<nav class="kk_nav">
<li>Ana Sayfa</li>
<li>Hakkımızda</li>
<li>Araçlarımız</li>
<li>İletişim</li>
<li style="float:right">Giriş</li>
</nav>
</div>
</header>
My Css code
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;}
html{
font-size: 60%;
}
.kk-header{
width: 100%;
background-color:#191970;
}
.kk-nav{
overflow: hidden;
background-color: #191970;
}
.kk-nav a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
Thanks for any help!
Also, I'm open to any advice on making this code more smooth.
First of all, try adding two dots to your CSS path. href="../css/index.css"
Then for the alignment, add display: flex; to the kk-nav shown below.
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;}
html{
font-size: 60%;
}
.kk-header{
width: 100%;
background-color:#191970;
}
.kk-nav{
overflow: hidden;
background-color: #191970;
display: flex;
}
.kk-nav li a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<body>
<header class="kk-header">
<div class="kk-container">
<nav class="kk-nav">
<li>Ana Sayfa</li>
<li>Hakkımızda</li>
<li>Araçlarımız</li>
<li>İletişim</li>
<li style="float:right">Giriş</li>
</nav>
</div>
</header>
In CSS you are using class .kk-nav but you have defined the class="kk_nav"
please replace the hyphen(-) sign with underscore sign(_) then your CSS with work.
The corrected code is here
.kk_nav{ /* using underscore */
overflow: hidden;
background-color: #191970;
}
.kk_nav a{ /* using underscore */
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
and if you want to make nav text in the center use li in CSS not a
like
.kk_nav li{ /* using li not a */
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
Your HTML file doesn't see your CSS file because you haven't given him the good path to the CSS file. Both your files are inside Website folder, but in two different separate folders. So you need to tell HTML to return to its root/parent folder (Website) and from there to enter css folder where he'll find CSS file. You do that with ".."
<link rel="stylesheet" href="../css/index.css">
You made an error. In HTML you named your class "kk_nav" with an underscore and in CSS you called that class with a hyphen insted of underscore. Change it and it should work. And if it doesn't, then call li instead of a in CSS:
.kk_nav li {}
I'm seeing your CSS file just fine when I load it on my machine. Alternatively, in your case, if your current path isn't working for you can set the path like this for example <link rel="stylesheet" href="./css/index.css">. I will mention this is the same method as your current path except you're just adding '.' in front of your current file path. This will tell your HTML file to look for the file you need in the 'CSS' folder in the same directory level as your HTML file (assuming you have your HTML file in the root of your working directory).
In your CSS file you have kk-nav as your class name but in your current HTML file, you set the class as kk_nav. The only other note I really have is I see that you're defining your font size in the 'HTML' tag of your CSS, by default that is set to 16px, if I recall correctly. If you want a bigger font for your code I would suggest the using body element as the best practice. for example: body {font-size: 20px;}
I hope this helps.
This is the updated HTML code I used on my machine
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 60%;
}
.kk-header{
width: 100%;
background-color:#191970;
}
.kk-nav{
overflow: hidden;
background-color: #191970;
}
.kk-nav a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<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>KK Kiralama</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header class="kk-header">
<div class="kk-container">
<nav class="kk-nav">
<li>Ana Sayfa</li>
<li>Hakkımızda</li>
<li>Araçlarımız</li>
<li>İletişim</li>
<li style="float:right">Giriş</li>
</nav>
</div>
</header>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<header class="kk-header">
<div class="kk-container">
<nav class="nav">
Ana Sayfa
abc
Araçlar
İletişim
Giriş
</nav>
</div>
</header>
</body>
</html>
I am working on a project and i am facing a problem with the navigation section. I am making a navigation bar in which i need an image in the background and in front I want to add div containing links & buttons on that image.
Here is the HTML & CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow-x: hidden;
font-size: 62.5%;
}
body {
font-family: "Roboto", Courier, monospace;
}
.page-content {
width: 120rem;
margin: 0 auto;
}
.nav-section {
position: relative;
}
.banner-img {
width: 100%;
}
.nav-link-container {
background-color: wheat;
display: flex;
justify-content: space-between;
padding: 1.6rem;
position: absolute;
top: 76%;
left: 10.9%;
}
.nav-link-container ul {
font-size: 1.6rem;
list-style: none;
display: flex;
gap: 4.8rem;
}
.nav-link-container ul a {
text-decoration: none;
}
.nav-btn-container {
display: flex;
gap: 4.8rem;
}
.header-section {
background-color: bisque;
}
.header-section h4 {
font-size: 1.6rem;
padding: 1.6rem;
text-align: center;
}
<!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" />
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
<title>document</title>
</head>
<body>
<nav class="nav-section">
<img class="banner-img" src="https://lehndorff.com/music/wp-content/uploads/2013/10/1600x230-banner.jpg" alt="" />
<div class="nav-link-container page-content">
<ul>
<li><a class="nav-links" href="#">Home</a></li>
<li><a class="nav-links" href="#">About us</a></li>
<li><a class="nav-links" href="#">Services</a></li>
<li><a class="nav-links" href="#">Servers</a></li>
<li><a class="nav-links" href="#">Forum</a></li>
</ul>
<div class="nav-btn-container">
<button class="nav-btn">Login</button>
<button class="nav-btn">Sign up</button>
</div>
</div>
</nav>
<header>
<div class="header-section page-content">
<h4>Hello World!!</h4>
</div>
</header>
</body>
</html>
Now I have two questions (watch the code snippet in full screen please):
When you will zoom in/out, you will see header-section stays in the middle without caring how much we zoom in/out while nav-link-container stays to the left side while zooming out/in. I think this is because of position:absolute;. So how do I fix it? Why is this happening?
I have set margin:0; & padding:0;in * but still if you see there is small pixel of gap between header-section and image. Why is it happening?
We have come up with a solution, Hope it will work for you.
Please refer to this link: https://jsfiddle.net/yudizsolutions/yk8ftdgn/
Here we have taken the image as a background image, instead of taking it in the img tag, and also made modifications in your CSS styles to achieve your desired output.
I am trying to do some projects in my HTML book, and for one exercise I need to move embedded css to an external stylesheet before continuing on in the exercises. For some reason the external CSS is not being picked up even though in previous exercises I have never had this problem.
This is the html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="lighthouse.css" media="screen">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header role="banner">
<h1>Lighthouse Island Bistro</h1>
</header>
<nav role="navigation">
<ul>
<li>Home</li>
<li>Menu</li>
<li>Map</li>
<li>Contact</li>
</ul>
</nav>
<main role="main">
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery!</p>
<p>The top of our lighthouse offers a panoramic view of the countryside.
Challenge your friends to climb our 100-stair tower.</p>
</main> <!-- end of main content -->
<footer role="contentinfo">Copyright © 2016
</footer>
</div> <!-- end of wrapper -->
</body>
</html>
And the CSS
header, nav, main, footer, figure, figcaption { display: block; }
* {box-sizing: border-box; }
body { font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
}
#wrapper { background-color: #b3c7e6;
color: #000066;
width: 80%;
margin: auto;
min-width:850px;
}
header { background-color: #869dc7;
color: #00005D;
font-size: 150%;
padding: 10px 10px 10px 155px;
background-image: url(lighthouselogo.jpg);
background-repeat: no-repeat;
}
nav { float: right;
width: 150px;
letter-spacing:0.1em;
font-weight: bold;
}
nav ul { list-style-type: none;
margin: 0;
padding: 0;
}
nav a { text-decoration: none;
display: block;
padding: 20px;
background-color: #b3c7e6;
border-bottom: 1px solid #ffffff;
background-image: url(sprites.gif);
background-repeat: no-repeat;
background-position: right 0;
}
nav a:link { color: #ffffff; }
nav a:visited { color: #eaeaea; }
nav a:hover { background-color: #eaeaea;
color: #869dc7;
background-position: right -100px; }
main { background-color: #ffffff;
color: #000000;
padding: 10px 20px;
overflow: auto;
}
h1 { margin-bottom: 20px; }
h2 { color: #869dc7;
font-family: arial, sans-serif;
}
#floatright { margin: 10px;
float: right;
}
footer {font-size:70%;
text-align: center;
padding: 10px;
background-color: #869dc7;
clear: both;
}
All I am trying to do at this point is get my HTML to recognize the external stylesheet so I can move on to a farther point. Any aid or guidance to finding the answer to this exercise would be greatly appreciated.
Try opening your web browser's Developer Tools console and reloading your webpage while watching the Console panel. You might see an error that will give you a hint as to why the CSS didn't load - perhaps the file path wasn't found.
Is your stylesheet in the same folder? If its in a different folder do ./foldername/lighthouse.css
Maybe you have your css inside of another Folder so you must be write on your link something like this /yourfolder/lighthouse.css
Forgive my ignorance if this sounds stupid, but it works in chrome but not IE(or edge). I assume there is a line of code that was in the HTML that would explain why (im pretty new to this)
I'm very new to html and css so feel free to critique any bad practices you see in the code below...
I am trying to create a centered column that's 800 pixels across and the banner will be resized to 800 pixels. When view this page in chrome or firefox it looks great. When I view it in IE8 the font is huge, there is a giant empty spot on the right side of the banner all the way down to the bottom, and the size of the "container" will not change no matter what I do in the css file.
CSS:
body {
font-family: Arial;
font-size: small;
background-color: #FFFFFF;
background-image: url(../images/victorianBackground.jpg);
background-position: top;
background-repeat: repeat;
color: #000000;
}
#container {
margin: -10 auto;
background-color: #D3CDBA;
text-align: left;
}
html>body #container {
width: 800px;
min-height:800px;
padding: 0 0px;
}
#banner {
width:800px;
}
#banner img {
width:800px;
padding:45 0px;
}
#content {
width:500px;
padding: 15px;
background-color: transparent;
}
/* Navigation */
#navigation ul {
list-style-type: none;
width: 800px;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
background-color: #D3CDBA;
}
#navigation li:hover {
float: left;
color: #4676A4;
background-color: #D3CDBA;
}
#navigation a {
font-weight: bold;
text-decoration: none;
color: #000000;
display: block;
padding: 5px;
}
#navigation a:hover {
font-weight: bold;
text-decoration: none;
color: #992332;
}
#content a {
color:teal;
}
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Park Avenue Neighborhood Association</title>
<meta name="keywords" content="Park Avenue Neighborhood Association Syracuse New York"/>
<link rel="stylesheet" type="text/css" href="../styles/style1.css">
</head>
<body>
<div id="container">
<div id="banner">
<img src="../images/banner.jpg" id="banner">
<br/>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>History</li>
<li>Houses</li>
<li>Local Business</li>
<li>Events</li>
<li>Contacts</li>
</ul>
</div>
<div id="content">
<h2>Content Header 1 </h2>
<p>Awesome Content </p>
<h2>Content Header 2 </h2>
<p>Awesome Content </p>
</div>
</body>
</div>
</html>
There are multiple issues I see with your source. Non-exhaustive list:
1) You need a doctype. Otherwise, browsers will render items in a non-standard way.
Example:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2) You have a <div> ending after the </body> tag. This is invalid.
Fix:
<p>Awesome Content </p>
</div>
</div>
</body>
</html>
3) You don't need the extra <br> in <div id="banner">.
Fix:
<div id="banner">
<img src="../images/banner.jpg" id="banner">
</div>
4) Now, if you want <div id="container"> to be centered and have a width of 800px, try the following.
Centering code that goes in your css (replaces existing):
body { text-align: center; }
#container {
text-align: left;
width: 800px;
margin: auto;
}
5) For your font-size declaration, you're using small. This will behave unpredictably. Instead, consider using either em or px for font size.
Font size with em:
body { font-size: 100%; line-height: 1.125em; }
#container { font-size: 0.875em; }
Font size with px:
body { font-size: 16px; line-height: 1.125em; }
#container { font-size: 12px; }
First thing I saw, you need to add this to the very first line of your HTML to force IE to render in standards mode, instead of quirks mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
In regard to centering the banner, try adding the following:
in body selector:
text-align: center;
in banner:
margin-right: auto;
margin-left: auto;
In regard to font size try using em or % sizing.
Other than that just tackle the problems one at a time, fine tune the details incrementally. Throwing in everything all at once will only create confusion - chances are it wont work as expected, but will frustrate you.