Wassup guys, I'm trying to do a small website for a school project, and I've encountered a problem with background on a multiple div
So here is my HTML
`
<div class="bloc-1-text">
<h3>
</h3>
<p>
</p>
<div class="bloc-1-img"></div>
</div>
</div>
</div>`
And here my CSS
> .promesses{
font-family: 'Dosis', sans-serif;
font-weight: 500;
}
.bloc-1{
border: 1px solid black;
width: 100%;
height: 400px;
}
.bloc-1 .bloc-1-img{
float: left;
width: 50%;
height: 100%
background-image: url(image1.jpg);
position: relative;
}
.bloc-1-text{
float: right;
width: 50%;
height: 100%;
background: #dbdbdb;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
.bloc-1-text h3{
text-align: center;
}
This is not the entire code, but just the code where is the problematic. If you have anything to specify, just tell me. I'll add it here
Ok so since yesterday, I've tried to go forward a bit. Here is the code:
HTML
`<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="utf-8">
<title>Parti Nationaliste Québécois</title>
<link rel="stylesheet" type="text/css" href="css/promesse.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" type="image/x-icon" href="img/Logo.png">
</head>
<body>
<header>
<img src="img/Logo.jpg">
<div class="menu-toggle"></div>
<nav>
<ul>
<li>Accueil</li>
<li>Intention</li>
<li>Chefs</li>
<li>Histoire</li>
<li>Don</li>
</ul>
</nav>
<div class="clearfix"></div>
</header>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menu-toggle').click(function(){
$('.menu-toggle').toggleClass('active')
$('nav').toggleClass('active')
})
});
</script>
<div class="promesses">
<div class="bloc-1">
<div class="bloc-1-text">
<h3>
Emploi Assuré
</h3>
<p>
Nous avons pour toi un emploi assuré. Que ce soit dans l'armée ou dans une de nos grandes entreprises dans chacunes de nos région, tu n'auras pas de quoi te plaindre que le plaisir
</p>
<div class="bloc-1-img"></div>
</div>
</div>
</div>
`
And here is my CSS
#import url('https://fonts.googleapis.com/css2?family=Dosis:wght#200;300;400;500;600;700;800&display=swap');
.promesses{
font-family: 'Dosis', sans-serif;
font-weight: 500;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.bloc-1{
border: 1px solid black;
width: 100%;
height: 400px;
}
.bloc-1-img{
width: 50%;
height: 100vh;
background-image: url("img/image1.jpg");
}
.bloc-1-text{
float: right;
width: 50%;
height: 100%;
background: #dbdbdb;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
.bloc-1-text h3{
text-align: center;
}
delete bloc-1 which is next to block-1-img
and set bloc-1-text to 100vh not 100%
i`ve checked on my pc and it worked
Answer
.bloc-1 .bloc-1-img{
float: left;
width: 50%;
height: 100%;<<<<<<<----
background-image: url("image1.jpg");
position: relative;
}
lost ";"
CSS Selector
https://www.w3schools.com/cssref/css_selectors.asp
Related
I've searched a lot but apparently it doesn't work. Just as fact, I am new and I don't want to be in tutorial hell, so I made a practice to write what I've learned, but I'm stuck with this:
HTML:
<!DOCTYPE html>
<html lang="es">
<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>Título del sitio web</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div>
<h1 class="encabezado">Sitio web de App</h1>
Inicio
App
Sobre nosotros
</div>
<div class="foot">Todos los derechos reservados</div>
</body>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
.encabezado {
background: #007fff;
color: white;
display: block;
padding: 30px;
}
.links{
text-align: right;
padding-right: 20px;
color: black;
text-decoration: none;
display:inline-block;
}
.foot{
position: absolute;
bottom:0%;
width: 100%;
background: #404040;
color: white;
}
You can just move the links to a new div and style the div to align to right. And for the rest of the link decoration, you can add them in a separate class under their <a> tags.
* {
margin: 0px;
padding: 0px;
}
.encabezado {
background: #007fff;
color: white;
display: block;
padding: 30px;
}
.linksDiv {
text-align: right;
}
.links {
padding-right: 20px;
color: black;
text-decoration: none;
display: inline-block;
}
.foot {
position: absolute;
bottom: 0%;
width: 100%;
background: #404040;
color: white;
}
<!DOCTYPE html>
<html lang="es">
<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>Título del sitio web</title>
</head>
<body>
<div>
<h1 class="encabezado">Sitio web de App</h1>
</div>
<div class="linksDiv">
<a class="links" href="index.html">Inicio</a>
<a class="links" href="https://c.tenor.com/_4YgA77ExHEAAAAd/rick-roll.gif">App</a>
<a class="links" href="#">Sobre nosotros</a>
</div>
<div class="foot">Todos los derechos reservados</div>
</body>
</html>
Hope this helps.
I'm currently following the tutorial on parallax effects on W3Schools. Basically, I have it so where the parallax is scrolling over my background correctly, but it's not scrolling over the text as well.
I tried a lot of things but it still doesn't work. I also saw one other post about this issue, but their code differed a lot from mine so it was hard to understand.
Here is the image of what is happening (the words are scrolling up with the page):
Here's my code:
*{
box-sizing: border-box;
}
body{
margin: 0px;
background-color: #ffffff;
}
ul{
text-align: center;
padding: 0px 20px;
margin: 12px auto;
list-style: none;
position: fixed;
z-index:10;
top: 0;
}
ul, li{
display: inline-table;
}
li{
margin: 10px 30px;
font-size: 15px;
color: #42385d;
font-weight: bold;
font-family: 'Roboto Slab', serif;
}
.navbar{
background-color: #ffcfda;
position: fixed;
width: 100%;
border-bottom: 1px solid #ffcfda;
z-index: 10;
height: 70px;
top: 0;
overflow: hidden;
}
#parallax{
background-image: url("pinkbackground.jpg");
min-height: 100vh;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
}
.transition{
height: 200px;
background-color: #42385d;
width: 100%;
}
.intro-text{
text-align: center;
width: 100%;
color: #42385d;
padding: 37vh;
height: 100vh;
width: 100%;
font-size: 50px;
font-family: 'Roboto Slab', serif;
position: relative;
background-attachment: initial;
}
.question{
font-size: 30px;
font-family: 'Roboto Mono', monospace;
color: #42385d;
font-weight: bolder;
padding-top: 40px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>schpiel - Applying, Made Easier</title>
<!--meta data-->
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta name = "description" content =
"schpiel, like the name implies, makes applying easier.
no, it doesn't sound like that? :(. Using our new autofill
feature, with one click you can apply instantly!">
<!--styling-->
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght#1,300&family=Roboto+Slab&display=swap" rel="stylesheet">
<link rel="icon" href="https://i.imgur.com/RoPgdJh.jpg">
</head>
<body>
<div id="navigation">
<nav class="navbar";>
<ul>
<li>
<a>
Home
</a>
</li>
<li>
<a>
About
</a>
</li>
<li>
<a>
Contact
</a>
</li>
</ul>
</nav>
</div>
<div id="parallax">
<div class="intro-text">
text
<br>
here
</div>
</div>
<div class="transition"></div>
<section id="whatIsSchpiel">
<div class="question">
What is schpiel?
</div>
<div class="answer">
sscsdafads
</div>
</section>
</body>
<footer>
</footer>
I'm kinda begginer in html.
I have this code in html
.header{
height: 200px;
background-image: url(https://cdn.wallpapersafari.com/30/3/T07WKU.png);
background-repeat: no-repeat;
background-size:
}
.header h1{
text-align: center;
padding-top: 75px;
font-family: 'Akaya Telivigala', cursive;
color: #FFF
}
.header h1:hover{
color:lime;
}
.sth{
height: 400px;
background-image: url(https://mcdn.wallpapersafari.com/medium/43/0/KIieEY.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#space{
height: 20px;
background-color: #FDF0D5
}
.sth h2{
margin: 0;
color: white;
text-align: center;
padding-top: 100px;
font-family: 'Akaya Telivigala', cursive;
font-size: 35px;
color: pink;
}
#aa{
padding: 30;
}
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap" rel="stylesheet">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h1> Vous êtes les bienvenues dans notre site web </h1>
</div>
<div id="space"> </div>
<div class="sth">
<h2> Vous pouvez vous enregistrer pour de benificiez de nos services </h2>
<h2 id="aa"> <button><p> Sign up </p></button> </h2>
</div>
</body>
</html>
when i try to change button width with the id aa, it dont stay in the center like the other h2 and go the left, what to do to prevent it from changing position and giving it bigger width
thanks
or even if there is another way to put it in the center please help me
.header{
height: 200px;
background-image: url(https://cdn.wallpapersafari.com/30/3/T07WKU.png);
background-repeat: no-repeat;
background-size:
}
.header h1{
text-align: center;
padding-top: 75px;
font-family: 'Akaya Telivigala', cursive;
color: #FFF
}
.header h1:hover{
color:lime;
}
.sth{
height: 400px;
background-image: url(https://mcdn.wallpapersafari.com/medium/43/0/KIieEY.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#space{
height: 20px;
background-color: #FDF0D5
}
.sth h2{
margin: 0;
color: white;
text-align: center;
padding-top: 100px;
font-family: 'Akaya Telivigala', cursive;
font-size: 35px;
color: pink;
}
#aa{
padding: 30;
}
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap" rel="stylesheet">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h1> Vous êtes les bienvenues dans notre site web </h1>
</div>
<div id="space"> </div>
<div class="sth">
<h2> Vous pouvez vous enregistrer pour de benificiez de nos services </h2>
<h2 id="aa"> <button style="height:200px;width:200px"><p> Sign up </p></button> </h2>
</div>
</body>
</html>
There's two things in css height and width. I just changed height and width of button. You can try also. style="height:200px;width:200px"
I have set up some icons on my website but there is one (the "zoom" icon) that is not aligned. It is on the top of the container. I had to use justify content with the space-evenly option to order all the images. I have tried everything but I can not figure out. It must be a silly question for the experts but this is my first website. I am attaching the images as evidence.
Thanks in advance
The CSS and HTML code
#import url(menu.css);
#import url(slider.css);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #9acd32;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23ffffff' fill-opacity='0.17'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
header {
width: 100%;
height: 80px;
background: white;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
.contenedor {
width: 95%;
margin: auto;
}
.brand {
width: 160px;
margin: 3px 10px;
}
section {
width: 100%;
margin-bottom: 25px;
}
/*QUIENES SOMOS*/
#quienes_somos {
margin-top: 100px;
text-align: center;
}
/*NUESTROS PROFESIONALES*/
#profesionales {
text-align: center;
margin-top: 100px;
}
#profesionales .contenedor {
display: block;
justify-content: center;
}
.doctor img {
width: 100%;
max-width: 500px;
padding: 10px;
}
/*CONSULTAS Y CITAS*/
#consultas {
margin-top: 100px;
text-align: center;
}
#consultas .images {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
padding: 10px;
border: 1px solid red;
}
/*FOOTER*/
footer .contenedor {
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: center;
font-size: small;
margin-bottom: 50px;
margin-top: 250px;
}
#media (min-width:1024px) {
.contenedor {
width: 1000px;
}
#profesionales .contenedor {
display: flex;
}
.doctor {
width: 50%;
}
}
<!DOCTYPE html>
<html lang="es">
<head>
<title>Balance-Salud Mental</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width", user-scalable=no, initial-scale=1, maximun-scale=1, minimun-scale=1"/>
<meta name="description" content="Tu salud mental es importante, cuidala con los profesiones adecuados. "/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="icon" href="img/favicon.png">
<link rel="stylesheet" href="css/fontello.css">
<link rel="stylesheet" href="css/index.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#500;600&display=swap" rel="stylesheet"/>
</head>
<body>
<header>
<div class="contenedor">
<a href="index.html">
<img src="img/logo.png" class="brand" alt="Salud Mental Peru">
</a>
<input type="checkbox" id="menu-bar">
<label class="icon-menu-outline" for="menu-bar"></label>
<nav class="menu">
¿Quienes Somos?
Nuestros Profesionales
Consultas y Citas
Artículos
</nav>
</div>
</header>
<main>
<section id=consultas>
<h2>Consultas y Citas</h2> <br>
<div class="contenedor">
<p> Consultorio: Av. Arequipa 2555, Lince. Lima. <br>
Debido a la coyuntura actual, tambien estamos realizando las consultas a través de videollamadas en la
plataforma de tu preferencia.
</p>
<div class="images">
<img src="img/whatsapp-png.png" width="70px" height="70px"/>
<img src="img/skype-png.png" width="100px" height="70px"/>
<img src="img/messenger-png.png" width="70" height="70px"/>
<img src="img/meet-png.png" width="70" height="70px"/>
<img src="img/zoom-png.png" width="120" height="40px"/>
</div>
<p>
Comunícate (whatsapp) y agenda tu cita:
</p>
<p>
Psiquiatría: (+51)999888777 <br>
Psicología: (+51)999888777
</p>
</div>
</section>
</main>
<footer>
<div class="contenedor">
<p>2018-2020 Balance Salud Mental © - Designed by Watermelon</p>
</div>
</footer>
</body>
</html>
I also cannot see the images, but I think I have a pretty good guess about what's happening there. Try adding align-items: center to your #consultas .images ruleset and that should fix it.
The reason why they do not look aligned vertically is that you set a different height for your zoom image from your other images. justify-content only aligns them horizontally, to align the items vertically within a flex container, you can use align-items.
Maybe It's gotta do something with the height of the image. Try increasing the height of the zoom image to maintain with others.
Try this line with height of 70px
<img src="img/zoom-png.png" width="120" height="70" />
I got a little problem with a website I'm currently working on. The background color/image I declare in an extern css file wont shown in my page.
Never had this issue before and I really can't figure out why this is not working..
My Code:
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 1em;
font-family: 'Calibri', sans-serif;
}
#navigation {
width: 100%;
height: 5%;
padding-top: 2%;
padding-left: 60%
background-image: url(./img/nav_bg.png);
}
#nav-ul {
list-style-type: none;
display: inline;
}
#navi-li {
float: left;
margin-left: 2%;
}
#server {
width: 100%;
height: auto;
background-color: #336699;
}
#evocity {
width: 100%;
}
<!DOCTYPE html>
<html lang="DE-de">
<head>
<title>DIAMOND DarkRP</title>
<meta charset="utf-8">
<meta name="language" content="de">
<meta name="keywords" content="Garry's Mod, GMOD, DarkRP, Roleplay, Dimaond">
<meta name="description" content="DIAMOND DarkRP - Forum, Teamspeak und weitere Informationen zum Diamond DarkRP Server">
<meta name="robots" content="index,follow">
<meta name="audience" content="alle">
<meta name="page-topic" content="Gameserver">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="navigation">
<ul id="nav-ul">
<li id="navi-li">Home</li>
<li id="navi-li">Server</li>
<li id="navi-li">TeamSpeak</li>
</ul>
</div>
<div id="server">
<img src="./img/evocity.jpg" id="evocity" alt="EvoCity v33x">
</div>
</body>
</html>