I just put my HTML through validation at W3C and got back the following error:
ERROR: CSS: text parse error - it's talking about the sidebar-container DIV.
What am I doing wrong? I have a couple of errors relating to the same sidebar-container div.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Prisma Kitchens</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="desctiption" content="Kitchen designers in Manchester.">
<meta name="author" content="Prisma Kitchens">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css.css" style="text/css">
<link rel="stylesheet" href="responsive.css" media="screen and (max-width:970px)" style="text/css>
</head>
<body>
<div class="sidebar-container">
<div class="sidebar">
<div class="logo">
<!--Logo is here-->
</div>
<div class="links">
<ul>
<li>home</li>
<li>about</li>
<li>services</li>
<li>gallery</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
<div class="right-container">
<div class="head_image_mobile"></div>
<div class="heading_image">
<!--Holds the image at top of page-->
</div>
<div class="content">
<div class="subheading">Why Choose Prisma Kitchens?</div>
<a class="button" href="about.html">Learn More...</a>
<div class="content_gap"></div>
<div class="subheading">What Can We Offer?</div>
<a class="button" href="services.html">Our Services...</a>
<div class="content_gap"></div>
</div>
</body>
</html>
It's type="text/css" not style="text/css". Also there was a " in type="text/css missing and a closing </div> at the end.
Cleaned up
<!DOCTYPE html>
<html lang="en">
<head>
<title>Prisma Kitchens</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="desctiption" content="Kitchen designers in Manchester.">
<meta name="author" content="Prisma Kitchens">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css.css" type="text/css" >
<link rel="stylesheet" href="responsive.css" media="screen and (max-width:970px)" type="text/css">
</head>
<body>
<div class="sidebar-container">
<div class="sidebar">
<div class="logo">
<!--Logo is here-->
</div>
<div class="links">
<ul>
<li>home</li>
<li>about</li>
<li>services</li>
<li>gallery</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
<div class="right-container">
<div class="head_image_mobile"></div>
<div class="heading_image">
<!--Holds the image at top of page-->
</div>
<div class="content">
<div class="subheading">Why Choose Prisma Kitchens?</div>
<a class="button" href="about.html">Learn More...</a>
<div class="content_gap"></div>
<div class="subheading">What Can We Offer?</div>
<a class="button" href="services.html">Our Services...</a>
<div class="content_gap"></div>
</div>
</div>
</body>
</html>
Related
I am using the container-lg class of Bootstrap, and I am experiencing the current situation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container-lg">
<h1>Brand</h1>
</div>
</header>
<main>
<div class="row py-5" style="height: 400px;">
<div class="col-md-6">
<h2>Left</h2>
</div>
<div class="col-md-6" style="background-color: red;"></div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
I am trying to horizontally align the text of the left div with the header's one, without affecting to the right container, which must have a width of 100% without paddings or margins.
This is what I have tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container-lg">
<h1>Brand</h1>
</div>
</header>
<main>
<div class="container-lg py-5">
<div class="row" style="height: 400px;">
<div class="col-md-6">
<h2>Left</h2>
</div>
<div class="col-md-6" style="background-color: red;"></div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
But, as you can notice, this is not my expected behavior, because it affects to the right container.
Any ideas?
Yes, enjoy both of the worlds by using absolute positioning. It's not that awful.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container-lg">
<h1>Brand</h1>
</div>
</header>
<main>
<div class="containers-container position-relative">
<div class="container-fluid-lg">
<div class="row py-5" style="height: 400px;">
<div class="col-md-6">
</div>
<div class="col-md-6" style="background-color: red;">
</div>
</div>
</div>
<div class="container-lg position-absolute" style="left:0; right:0; top:0;">
<div class="row py-5" style="height: 400px;">
<div class="col-md-6">
<h2>Left</h2>
</div>
<div class="col-md-6">
<h2>Right</h2>
</div>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
i am using bootstrap here and i was trying to make a nav bar with some content and there is a link to a part of the site but the text i am linking to is being covered by the top nav bar
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>website with navbar</title>
</head>
<body>
<div class="container sticky-top" style="background-color: #f1f1f1; top: 0;">
<h1>website</h1>
<ul class="nav nav-tabs">
<il class="nav-item">first lecture</il>
<il class="nav-item"><b>second lecture</b></il>
<il class="nav-item">third lecture</il>
<il class="nav-item">fourth lecture</il>
</ul>
</div>
<div class="container" style="margin-top: 30px;">
موقع coder shiyar<br>
email<br>
telephone
<h1 style="height: 700px; background-color: red;" id="h11">
first part
</h1>
<h1 style="height: 700px;background-color: rgb(0, 255, 42);" id="h1">
second part
</h1>
</div>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
</div>
</body>
</html>
Add position: relative; to the style of the first <div> with class of .container (The one on top of <h1>website</h1>),
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>website with navbar</title>
</head>
<body>
<div class="container sticky-top" style="background-color: #f1f1f1; top: 0; position: relative;">
<h1>website</h1>
<ul class="nav nav-tabs">
<il class="nav-item">first lecture</il>
<il class="nav-item"><b>second lecture</b></il>
<il class="nav-item">third lecture</il>
<il class="nav-item">fourth lecture</il>
</ul>
</div>
<div class="container" style="margin-top: 30px;">
موقع coder shiyar<br>
email<br>
telephone
<h1 style="height: 700px; background-color: red;" id="h11">
first part
</h1>
<h1 style="height: 700px;background-color: rgb(0, 255, 42);" id="h1">
second part
</h1>
</div>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
</div>
</body>
</html>
#home::before
{
content: "";
position: absolute;
background: url(1a.jpg) no-repeat center center/cover;
/* opacity: 1; */
height: 100%;
width: 100%;
z-index: -1;
filter: blur(1.5px);
}
here's my code but I want to include only a specific part of image to cover the whole background ..any suggestions/
<!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>cakes by nandani</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Allura&display=swap" rel="stylesheet">
</head>
<body>
<nav id="navbar">
<div id="leftpor">
<ul>
<li class="items">Home</li>
<li class="items">About us</li>
<li class="items">Items</li>
</ul>
</div>
<!-- <div id="logo"><img src="logo.png" alt="Cakes by nandani"></div> -->
<div id="rightpor">
<ul>
<li class="items">Contact</li>
<li class="items">Gallery</li>
<li class="items">Our Story</li>
</ul>
</div>
</nav>
<section id="home">
<a class="Brand center"> Cakes By Nandani</a>
<a class="Tag center"> Many Emotiions One delight</a>
<button class="btn">Order Now</button>
</section>
<section id="services-container">
<h1 class="hprimary center">Our services</h1>
<div id="services">
<div class="box">
<img src="Oreo.jpg" alt="">
<p class="center">Oreo</p>
</div>
<div class="box">
<img src="Oreo.jpg" alt="">
<p class="center">Oreo</p>
</div>
<div class="box">
<img src="Oreo.jpg" alt="">
<p class="center">Oreo</p>
</div>
</div>
</section>
</body>
</html>
enter code here
only some part of image is cropped and used ....how to stop that
I have started to learn Bulma. I want to minimize container's (grey area in the picture) size in x-axis so I can embed elements into.Couldn't find any related content in documents. Here is my source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" it>
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">
</head>
<body>
<section class="hero is-medium">
<div class="hero-body has-background-danger">
<nav class="navbar has-background-primary">
<div class="container has-background-grey-light is-fluid ">
</div>
</nav>
</div>
</section>
</body>
</html>
This is the sample view of this code:
You can wrap it in a column class and then adjust its size. (ex. is-half)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" it>
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">
</head>
<body>
<section class="hero is-medium">
<div class="hero-body has-background-danger">
<div class="columns is-centered">
<div class="column is-half">
<nav class="navbar has-background-primary">
<div class="container has-background-grey-light is-fluid">
</div>
</nav>
</div>
</div>
</div>
</section>
</body>
</html>
Result:
I'm working on a site and my goal is to make it responsive by reducing the background associated by when the site is reduced.
I want the grey area to reduce simultaneously when the site is reduced horizontally.
How can I achieve this?
Here is my code so far. I'm using bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="#CurrentPage.siteDescription">
<title>#CurrentPage.pageTitle|Gymnasiestudera</title>
<!-- Fonts -->
<link href="//fonts.googleapis.com/css?family=Merriweather:400,700,300,900" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" type="text/css">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/css/reset.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/fanoe.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper col-md-12 col-lg-8 col-lg-offset-2">
<header>
<div class="row col-md-12">
<nav class="entry-links">
<ul>
<li class="">
För elever
</li>
<li>
För skolpersonal
</li>
<li>
Ungdom och elevdatabas
</li>
</ul>
</nav>
</div>
<div class="row">
<div class="col-xs-8 col-sm-12 col-md-4">
<a href="#home.Url">
<div class="brand" style="background-image:url('#(home.SiteLogo)?height=100&width=700&')"></div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12 main-nav">
<nav id="cbp-hrmenu" class="meny cbp-hrmenu col-md-10 col-md-offset-1">
#{ Html.RenderPartial("MainNavigation"); }
</nav>
</div>
<br />
<br />
</div>
<div class="container-fluid">
<div class="container">
</div>
</div>
<div id="toggle" class="toggle">
<span></span>
</div>
</header>
#RenderBody()
<div class="foot-line-background">
<div class="foot"></div>
</div>
<footer class="field dark">
<div class="row">
<div class="col-md-4">
<br />
#home.sidfotKolumn1
</div>
<div class="col-md-4">
<br />
#home.sidfotKolumn2
</div>
<div class="col-md-4">
<br />
#home.sidfotKolumn1
</div>
</div>
</footer>
<!-- Javascripts -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/scripts/fanoe.js"></script>
<script src="/scripts/Custom.js"></script>
</div>
</body>
</html>
If I'm understanding you correctly, you really just need to have a max-width on your "content container" to do the job. As the window width decreases, the gray area will also decrease until the container takes up the full window.
.my-container {
max-width: 800px;
}
http://jsfiddle.net/agentfitz/6s4u14yd/1/