Related
I have two question:
1) How can I let the start button work. My idea is that if you click on start that it jumps to the text i wrote.
2) The hover function in my header doesn't work. It used to work but now it doesn't so I am kind of confused.
Can anyone help me fine the problem i'm missing something.
Thanks
body {
/*geld voor alles */
height: 100%;
margin: 0;
}
.centered {
/* maak tekst in het midden*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header {
/*balk boven aan gemaakt met w3schools en hulp van forums */
background-color: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 150px;
padding: 5px 20px;
margin-top: 30px;
}
.content {
/* geen idee stond op w3schools */
padding: 16px;
}
.sticky {
/* voor de header*/
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
/* voor de header */
padding-top: 102px;
}
.logo {
/* logo linksboven */
Width: 150px;
height: auto;
filter: brightness(0) invert(1);
float: left;
}
h1.startdereis {
/* tekst met start de reis */
color: white;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: -80px;
font-family: sans-serif;
}
.straatfoto {
/* de straat met een donker filter */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(straat.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.knop {
/* start knop */
margin-top: 30px;
margin-left: 550px;
}
.knop1 {
/* start knop*/
border: 3px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
background-color: darkorange;
font-family: "Roboto", sans-serif;
margin-left: -300px;
}
.hoofd-nav {
/* voor de header */
float: right;
list-style: none;
margin-top: 30px;
padding-right: 100px;
}
.hoofd-nav li {
/* voor de header */
display: inline-block;
}
.hoofd-nav li a {
/* voor de header */
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
border: 3px solid transparent;
}
.hoofd-nav li a.actief {
/* maakt een vierkantje om de actieve onderwerp */
border: 3px solid white;
}
.hoofd-nav li a:hover {
?
/* maakt een blokje als je er overheen gaat */
border: 3px solid white;
}
.voorstellen
{
max-width: 600px;
font-size: 18px;
color: Black;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
font-family:sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title> Duco's Blog </title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header>
<div class="header" id="myHeader">
<img class="logo" src="leeuw.png">
<ul class="hoofd-nav">
<li> Home </li>
<li> Voorstellen </li>
<li> Hobby's </li>
<li> Toekomstdromen </li>
</ul>
</div>
<script>
window.onscroll = function() {
myFunction()
};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
</header>
<body>
<div class="container">
<div class="straatfoto"></div>
<div class="centered">
<h1 class="startdereis">Start De Reis</h1>
<div class="knop">
Start
</div>
</div>
</div>
<div class="voorstellen">
<h2>Wie ben ik?</h2>
<p>Mijn volledige naam is Duco Gerard van de Schepop. Mijn tweede naam komt van mijn hele muzikale opa, die ik helaas nooit gekent heb. Op het moment dat ik werd geboren had ik geen opa's meer en nog maar een oma. Mijn enige oma die nog leefde woonde in Duitsland. We zochten haar meestal om de vakantie op. Voor mij was het meestal best saai want ik sprak toen ik klein was sprak ik nog geen Duits, dus was het moeilijk om met mijn oma te praten en in een bejaardenhuis is nou eenmaal weinig te doen. Op het moment dat ik in de tweede wat Duits had geleerd en ook echt zelf wat kon zeggen tegen mijn oma i.p.v dat mijn ouder het zouden vertalen stierf mijn oma jammer genoeg.
<br><br>
Nu even genoeg over mijn opa's en oma's. Ik woon vijtien jaar in Soest met mijn vader, moeder en sinds dat ik drie werd ook een kleiner zusje. Er is niet echt iets bijzonders dat ik kan vertellen over mijn gezin, we zijn gewoon een doodgewoon gezin.
<br><br>
</div>
</body>
</html>
You can solve this by adding an ID to your text div and changing the link of your start button to #yourid.
Here's a working demo:
body {
/*geld voor alles */
height: 100%;
margin: 0;
}
.centered {
/* maak tekst in het midden*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header {
/*balk boven aan gemaakt met w3schools en hulp van forums */
background-color: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
color: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 150px;
padding: 5px 20px;
margin-top: 30px;
}
.content {
/* geen idee stond op w3schools */
padding: 16px;
}
.sticky {
/* voor de header*/
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
/* voor de header */
padding-top: 102px;
}
.logo {
/* logo linksboven */
Width: 150px;
height: auto;
filter: brightness(0) invert(1);
float: left;
}
h1.startdereis {
/* tekst met start de reis */
color: white;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: -80px;
font-family: sans-serif;
}
.straatfoto {
/* de straat met een donker filter */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(straat.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.knop {
/* start knop */
margin-top: 30px;
margin-left: 550px;
}
.knop1 {
/* start knop*/
border: 3px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
background-color: darkorange;
font-family: "Roboto", sans-serif;
margin-left: -300px;
}
.hoofd-nav {
/* voor de header */
float: right;
list-style: none;
margin-top: 30px;
padding-right: 100px;
}
.hoofd-nav li {
/* voor de header */
display: inline-block;
}
.hoofd-nav li a {
/* voor de header */
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
border: 3px solid transparent;
}
.hoofd-nav li a.actief {
/* maakt een vierkantje om de actieve onderwerp */
border: 3px solid white;
}
.hoofd-nav li a:hover {
?
/* maakt een blokje als je er overheen gaat */
border: 3px solid white;
}
.voorstellen
{
max-width: 600px;
font-size: 18px;
color: Black;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
font-family:sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title> Duco's Blog </title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header>
<div class="header" id="myHeader">
<img class="logo" src="leeuw.png">
<ul class="hoofd-nav">
<li> Home </li>
<li> Voorstellen </li>
<li> Hobby's </li>
<li> Toekomstdromen </li>
</ul>
</div>
<script>
window.onscroll = function() {
myFunction()
};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
</header>
<body>
<div class="container">
<div class="straatfoto"></div>
<div class="centered">
<h1 class="startdereis">Start De Reis</h1>
<div class="knop">
Start
</div>
</div>
</div>
<div class="voorstellen" id="textjump">
<h2>Wie ben ik?</h2>
<p>Mijn volledige naam is Duco Gerard van de Schepop. Mijn tweede naam komt van mijn hele muzikale opa, die ik helaas nooit gekent heb. Op het moment dat ik werd geboren had ik geen opa's meer en nog maar een oma. Mijn enige oma die nog leefde woonde in Duitsland. We zochten haar meestal om de vakantie op. Voor mij was het meestal best saai want ik sprak toen ik klein was sprak ik nog geen Duits, dus was het moeilijk om met mijn oma te praten en in een bejaardenhuis is nou eenmaal weinig te doen. Op het moment dat ik in de tweede wat Duits had geleerd en ook echt zelf wat kon zeggen tegen mijn oma i.p.v dat mijn ouder het zouden vertalen stierf mijn oma jammer genoeg.
<br><br>
Nu even genoeg over mijn opa's en oma's. Ik woon vijtien jaar in Soest met mijn vader, moeder en sinds dat ik drie werd ook een kleiner zusje. Er is niet echt iets bijzonders dat ik kan vertellen over mijn gezin, we zijn gewoon een doodgewoon gezin.
<br><br>
</div>
</body>
</html>
I'm working on my Django website and I get some unclear points according to my responsive website design.
My environment :
Django 2.0.1
HTML 5
CSS
Bootstrap 3.3.7
My issue :
I developped my Django website on my screen with this resolution : 1920*1080. Now I would like to adapt each HTML template to users screens.
I don't really have knowledges about responsive design because I'm mainly Back-End developper.
When I display my website on different screen size, CSS is not good at all. I assume pictures make my display very ugly because it's not totally responsive.
My code :
HTML Script :
<!-- This script lets to define homepage template for "Accueil" -->
{% extends 'Base_Accueil.html' %}
{% load staticfiles %}
{% load static %}
{% block content %}
<div id="content">
<br></br>
<div id="content-1">
<div id="presentation-title">
<p>Petit mot de l'Astrophotographe & Développeur du site</p>
</div>
<div id="presentation-text">
<p> Je vous souhaite la bienvenue sur mon site dédié à l'Astrophotographie. A travers votre parcours sur celui-ci, vous allez découvrir ma passion pour la photographie des objets de l'Univers. Du Soleil, notre étoile, aux galaxies les plus lointaines en passant par les vastes amas de gaz qui composent l'infiniment grand, vous allez pouvoir contempler des objets atypiques de part leurs formes et leurs couleurs.</p><br />
<p> C'est avec plaisir que je vous invite à vous balader sur mon site, découvrir ma galerie d'images, mes bricolages, mes articles & publications, ... Vous trouverez également le matériel astronomique employé pour la réalisation des différents clichés disponibles sur ce site ainsi que diverses informations complémentaires. N'hésitez pas à partager vos avis et à venir le visiter régulièrement pour entrevoir les nouvelles images astrophotographiques.</p><br />
<p align="center">Je vous souhaite une bonne visite !</p>
</div>
</div>
<br></br>
<div class="row">
</div>
<div id="content-2">
<div id="presentation-image-récente">
<p>Dernière image publiée</p>
</div>
<div id="presentation-image">
<li class="image">
<img src='{{photo.Image_upload.url}}'/>
<p></p>
<figcaption>
<div>
<center>
<p></p>
<p><b>{{photo.Nom}} ({{photo.Designation}})</b></p>
</center>
</div>
</figcaption>
</li>
</div>
</div>
<div class="row">
</div>
<br></br>
</div>
<p></p>
{% endblock content %}
CSS script :
#media (min-width: 1900px) {
body {
background-color: #4D4D4D;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
#banner {
width:100vw;
}
.navbar-collapse {
text-align:center;
background-color: #1B1B1B;
}
.navbar-nav {
background-color: #1B1B1B;
text-align:center;
display:inline-block;
float:none;
}
ul.nav.navbar-nav > li > a {
color : #00BFFF; /* Orange color*/
padding-top:10px !important;
padding-bottom:0 !important;
height: 35px;
}
.navbar {min-height:35px !important; background-color: #1B1B1B;}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
background-color: transparent;
}
.dropdown-menu, .dropdown-menu > li > a {
background-color: #1B1B1B;
color: #00BFFF;
}
.dropdown-menu > li > a:hover {
background-color: transparent;
color : white;
}
.dropdown-menu > li.divider {
background: #00BFFF;
}
#content{
border-radius: 4px;
width: 70%;
margin: 0 auto;
background-color: #2E2E2E;
color : #C9C9C3;
box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 16px;
}
#content-1 {
border-radius: 4px;
width: 55%;
margin: 0 auto;
background-color: #2E2E2E;
color : #C9C9C3;
border-style: solid ;
border-width: 1px;
border-color: #00BFFF;
}
#content-2 {
border-radius: 4px;
width: 55%;
margin: 0 auto;
background-color: #2E2E2E;
color : #C9C9C3;
border-style: solid ;
border-width: 1px;
border-color: #00BFFF;
}
#content-messages {
border-radius: 4px;
width: 55%;
margin-left: 14%;
background-color: #2E2E2E;
color : #C9C9C3;
border-style: solid ;
border-width: 1px;
border-color: #00BFFF;
}
#footer{
border-radius: 4px;
width: 70%;
margin: 0 auto;
background-color: #1B1B1B;;
color : white;
margin-bottom: 1%;
padding-bottom: 1%;
-webkit-box-shadow: black 0px 0px 12px;
box-shadow: black 0px 0px 12px;
}
.footer-text, .footer-text-list {
color : #C9C9C3;
font-size: 12px;
text-align: justify;
font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
}
ul {
list-style-type: none;
}
p.footer-title {
margin-left:5%;
}
.footer-title {
margin-top: 14%;
color : white;
font-size: 26px;
font-family: 'Noto Serif', Georgia, Times, serif;
}
.col-lg-3 {
margin-left: 6%;
}
#presentation-author, #presentation-title, #presentation-image-récente, #galerie-image{
border-radius: 4px;
margin: 0 auto;
background-color: #00BFFF;
color : white;
font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
}
#presentation-author > p, #presentation-title > p, #presentation-image-récente > p, #galerie-image > p{
margin-left:4%;
font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
}
#presentation-description, #presentation-text {
margin-left: 2%;
font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img,
#presentation-image > img {
width: 100%;
margin: auto;
}
figcaption > div > p {
color : #00BFFF;
}
figure.effect-new:hover figcaption::before,figure.effect-new:hover p{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.image img {
max-width: 100%;
height: auto;
}
}
Examples from my website :
EDIT :
I removed media (min-width:1900px) and I modified .image img like this :
.image img {
max-width: 100%;
height: auto;
width: auto\9;
}
It seems to be responsive now, but is it the good solution ? Then, How I can do that with text parts ?
You only have one media query line in your code.
The result is that it will not perform any changes.
You need to have minimum 2 media queries, as described below:
#media only screen and (max-width: 1899px) {
body {
background-color: red;
}
}
#media only screen and (min-width: 1900px) {
body {
background-color: blue;
}
}
Apart from above responsiveness, If you want to control the format and position of your text and image, I suggest you implement CSS grid which is a grid system embedded in CSS.
I suggest reading a bootstrap tutorial - for the latest bootstrap (4); I like w3schools and here for images (with example here).
Bootstrap works on a grid system, to get the bare minimum of a responsive image (with bootstrap 3 syntax) add the class="container" parent div and class="img-responsive" to the img tag.
see below, I removed the image tag from your css and took out the django tags:
<!-- This script lets to define homepage template for "Accueil" -->
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container" class="container">
<br></br>
<div id="content-1">
<div id="presentation-title">
<p>Petit mot de l'Astrophotographe & Développeur du site</p>
</div>
<div id="presentation-text">
<p> Je vous souhaite la bienvenue sur mon site dédié à l'Astrophotographie. A travers votre parcours sur celui-ci, vous allez découvrir ma passion pour la photographie des objets de l'Univers. Du Soleil, notre étoile, aux galaxies les plus lointaines en passant par les vastes amas de gaz qui composent l'infiniment grand, vous allez pouvoir contempler des objets atypiques de part leurs formes et leurs couleurs.</p><br />
<p> C'est avec plaisir que je vous invite à vous balader sur mon site, découvrir ma galerie d'images, mes bricolages, mes articles & publications, ... Vous trouverez également le matériel astronomique employé pour la réalisation des différents clichés disponibles sur ce site ainsi que diverses informations complémentaires. N'hésitez pas à partager vos avis et à venir le visiter régulièrement pour entrevoir les nouvelles images astrophotographiques.</p><br />
<p align="center">Je vous souhaite une bonne visite !</p>
</div>
</div>
<br></br>
<div class="row">
</div>
<div id="content-2">
<div id="presentation-image-récente">
<p>Dernière image publiée</p>
</div>
<div id="presentation-image">
<li class="image">
<img src='download.jpg' class="img-responsive" width="1900px" />
<p></p>
<figcaption>
<div>
<center>
<p></p>
<p><b>some (text)</b></p>
</center>
</div>
</figcaption>
</li>
</div>
</div>
<div class="row">
</div>
<br></br>
</div>
</body>
</html>
You'll want to play with row and column divs/tags to get your website singing nicely on all devices. Tutorials are great!
I have this layout when the size of screen is greater than 768px:
But I want the vertical navbar height up to the footer even when resize the screen.
This is what I want:
with the background color obviously.
This is html file and css file!
article {
text-align: left;
}
header {
background: black;
color: white;
padding: 10px;
text-align: center;
}
nav {
background: #eee;
padding: 10px;
text-align: center;
}
ul {
list-style-type: none;
padding: 0; /*Tolgo il padding da ul*/
}
li a{
display: block; /* Separo per riga i padding*/
padding: 8px 16px;
color: #000; /* Rimuovo il classico colore viola del link*/
text-decoration: none; /*rimuovo la sottilineatura del link*/
}
li a:hover { /* Cosa fare quando il mouse si trova sopra*/
background-color: #555;
color: white;
}
footer{
background: #aaa;
color: white;
padding: 0px;
}
img{
padding: 10px;
height: 505px;
width: 829px;
}
/*Riposiziono gli elementi se la larghezza è >=768px per tutti i dispositivi*/
#media all and (min-width: 768px){
nav {
text-align: left;
max-width: 200px;
float: left; /*Sposto il contenuto a destra*/
}
article {
margin-left: 250px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link rel="stylesheet" href="Index.css">
</head>
<body>
<header>
<h1 id="T">Index</h1>
</header>
<nav>
<ul>
<li><a>Topologie</a></li>
<li><a>Classificazione</a></li>
<li><a>Dizionario terminologico</a></li>
<li>Domini</li>
<li><a>Apparati</a></li>
</ul>
</nav>
<article>
<h2>Definizione di Rete</h2>
Una rete di telecomunicazioni è un insieme di dispositivi e dei loro collegamenti
(fisici o logici) che consentono la trasmissione e la ricezione di informazioni di
qualsiasi tipo tra due o più utenti situati in posizioni geograficamente distinte,
effettuandone il trasferimento attraverso cavi, sistemi radio o altri sistemi elettromagnetici
o ottici.
<br><br><img src="Immagini/ImmagineRete.png">
</article>
<footer>
<p>Ultimo aggiornamento: Sabato 19 Maggio</p>
<p>Torna all'inizio</p>
</footer>
</body>
</html>
I want this behavior:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_flexbox
In the example above the navbar height expands to the footer.
I will wrap the nav and the article inside main tag and give it display: flex and it will take the highest height and also remove the float from the nav you don't need it as long as you are using dispaly:flex by default its flex-direction:row they will be next to each other
<main>
<nav></nav>
<article></article>
</main>
p { margin: 0; }
article {
text-align: left;
}
header {
background: black;
color: white;
padding: 10px;
text-align: center;
}
nav {
background: #eee;
padding: 10px;
text-align: center;
}
ul {
list-style-type: none;
padding: 0; /*Tolgo il padding da ul*/
}
li a{
display: block; /* Separo per riga i padding*/
padding: 8px 16px;
color: #000; /* Rimuovo il classico colore viola del link*/
text-decoration: none; /*rimuovo la sottilineatura del link*/
}
li a:hover { /* Cosa fare quando il mouse si trova sopra*/
background-color: #555;
color: white;
}
footer{
background: #aaa;
color: white;
padding: 0px;
}
img{
padding: 10px;
height: 505px;
width: 829px;
}
/*Riposiziono gli elementi se la larghezza è >=768px per tutti i dispositivi*/
#media all and (min-width: 768px){
main {
display: flex;
}
nav {
text-align: left;
max-width: 200px;
margin-right: 50px;
}
}
<header>
<h1 id="T">Index</h1>
</header>
<main>
<nav>
<ul>
<li><a>Topologie</a></li>
<li><a>Classificazione</a></li>
<li><a>Dizionario terminologico</a></li>
<li>Domini</li>
<li><a>Apparati</a></li>
</ul>
</nav>
<article>
<h2>Definizione di Rete</h2>
Una rete di telecomunicazioni è un insieme di dispositivi e dei loro collegamenti
(fisici o logici) che consentono la trasmissione e la ricezione di informazioni di
qualsiasi tipo tra due o più utenti situati in posizioni geograficamente distinte,
effettuandone il trasferimento attraverso cavi, sistemi radio o altri sistemi elettromagnetici
o ottici.
<br><br><img src="Immagini/ImmagineRete.png">
</article>
</main>
<footer>
<p>Ultimo aggiornamento: Sabato 19 Maggio</p>
<p>Torna all'inizio</p>
</footer>
</body>
</html>
Set the height of your nav to the height of the current screen size, I'm pretty sure this will do the job.
nav {
background: #eee;
padding: 10px;
text-align: center;
height: 100vh;
}
I have some paragraphs with some tooltips inside, problem is some of these tooltips doesn't stay inside the phrase and starts in a new string.
body {
background-color: black;
}
.col1 {
position: relative;
float: left;
left: 125px;
width: 60%;
padding: 0;
margin-left: 30px;
background-color: #FFFFFF;
border: 1px solid gray;
box-shadow: 5px 5px 5px gray;
}
.col1 img {
position: relative;
width: 100%;
height: 80px;
margin: 0;
padding: 0;
}
.col1 h2 {
position: relative;
text-align: center;
top: -58px;
}
.col1 p {
margin: 0;
padding: 0;
}
.tooltip, .tooltip2, .tooltip3, .tooltip4 {
position: relative;
display: inline-block;
padding: 0;
margin: 0;
cursor: pointer;
color: #5790ce;
}
.tooltip:hover .info, .tooltip:focus .info,
.tooltip2:hover .info2, .tooltip2:focus .info2,
.tooltip3:hover .info3, .tooltip3:focus .info3,
.tooltip4:hover .info4, .tooltip4:focus .info4 {
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
}
.info {
box-sizing: border-box;
position: absolute;
bottom: -380px;
left: 95px;
display: block;
background: #FFFFFF;
border: 1px solid #000000;
width: 500px;
font-size: 25px;
line-height: 24px;
text-align: justify;
cursor: text;
visibility: hidden;
opacity: 0;
transform: translate3d(0, -20px, 0);
transition: all .5s ease-out;
}
.info2 {
box-sizing: border-box;
position: absolute;
bottom: -333px;
left: 88px;
display: block;
background: #FFFFFF;
border: 1px solid #000000;
width: 500px;
font-size: 25px;
line-height: 24px;
text-align: justify;
cursor: text;
visibility: hidden;
opacity: 0;
transform: translate3d(0, -20px, 0);
transition: all .5s ease-out;
}
.info3 {
box-sizing: border-box;
position: absolute;
bottom: -333px;
left: 88px;
display: block;
background: #FFFFFF;
border: 1px solid #000000;
width: 500px;
font-size: 25px;
line-height: 24px;
text-align: justify;
cursor: text;
visibility: hidden;
opacity: 0;
transform: translate3d(0, -20px, 0);
transition: all .5s ease-out;
}
.info4 {
box-sizing: border-box;
position: absolute;
bottom: -333px;
left: 88px;
display: block;
background: #FFFFFF;
border: 1px solid #000000;
width: 500px;
font-size: 25px;
line-height: 24px;
text-align: justify;
cursor: text;
visibility: hidden;
opacity: 0;
transform: translate3d(0, -20px, 0);
transition: all .5s ease-out;
}
.info:before,
.info2:before,
.info3:before,
.info4:before {
position: absolute;
content: '';
width: 100%;
height: 14px;
bottom: -14px;
left: 0;
}
.info:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
transform: rotate(45deg);
bottom: 378px;
right: 494px;
margin-left: -5px;
background: #8d7200;
}
.info2:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
transform: rotate(45deg);
bottom: 331px;
right: 494px;
margin-left: -5px;
background: #8d7200;
}
.info3:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
transform: rotate(45deg);
bottom: 331px;
right: 494px;
margin-left: -5px;
background: #8d7200;
}
.info4:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
transform: rotate(45deg);
bottom: 331px;
right: 494px;
margin-left: -5px;
background: #8d7200;
}
.text, .text2, .text3, .text4 {
display: block;
padding: 14px 17px 35px 17px;
color: #8d7200;
}
.more, .more2, .more3, .more4 {
display: inline;
position: relative;
bottom: 20px;
left: 215px;
margin: 0;
padding: 3px 10px;
font-family: 'Times New Roman', sans-serif;
text-decoration: none;
color: green;
font-size: 20px;
font-weight: bold;
border: 2px solid green;
border-radius: 5px;
transition: background-color 0.5s, color 0.5s;
}
.more:hover, .more:focus,
.more2:hover, .more2:focus,
.more3:hover, .more3:focus,
.more4:hover, .more4:focus {
background-color: green;
color: #FFFFFF;
}
.row:after {
content: "";
display: table;
clear: both;
}
<div class="row">
<div class="col1">
<img src="images/corner.png"><h2>GENERALITA'</h2>
<p>L'Umbria è una delle 20 regioni dell'Italia centrale, ricca di paesaggi immersi nel
verde delle valli e di borghi antichi, comprende 888.908 abitanti e si trova nel cuore
della penisola con una superficie di 8.456 km². Di questa regione fa parte il quarto
lago naturale più esteso d'Italia, il
<div onclick="void(0);" class="tooltip">Trasimeno
<div class="info">
<div class="text">Situato in posizione centrale rispetto alle città d’arte
del centro Italia il suo comprensorio è composto da otto comuni, alcuni dei
quali adagiati sulle colline (Città della Pieve, Paciano, Panicale e
Piegaro) ed altri (Castiglione del Lago, Magione, Passignano sul Trasimeno
e Tuoro sul Trasimeno) direttamente affacciati sullo specchio d´acqua.<br><br>
Della bellezza e armonia di questi luoghi se ne accorse anche il principe
Trasimeno che, rimasto affascinato da questo paesaggio, si imbatté nella
bellezza della ninfa Agilla. Da questo duplice incontro nacque una passione
che finì tragicamente con la morte del principe. Da allora il lago prese il
nome di Trasimeno e si dice che quando il vento accarezza le sue acque, si
possa ancora udire il malinconico lamento della ninfa Agilla che piange
alla ricerca del suo amato.</div>
<a class="more" href="#" target="_blank">More</a>
</div>
</div>, il lago di
<div onclick="void(0);" class="tooltip2">Piediluco
<div class="info2">
<div class="text2">Piediluco è un pittoresco centro il cui nome significa "ai
piedi del bosco sacro". Con un assetto rimasto quello del medioevo, con le sue
basse casette colorate, è in realtà dislocato nello stretto lembo di terra che
corre tra il lago ed il monte. Il lago, incassato tra rilievi boscosi, ha
l’aspetto di uno specchio d’acqua alpino. Il paese è dominato dai resti della
Rocca risalente al XI secolo, ormai in parte in rovina, rimane pur sempre
superba ed imponente.<br><br>Molto suggestivo, è circondato da rilievi boscosi,
tra i quali è caratteristica per la sua forma di largo cono la montagna dell'Eco.
Questa montagna deve il suo nome al fatto che è in grado di rimandare un intero
endecasillabo in maniera perfetta.</div>
<a class="more2" href="#" target="_blank">More</a>
</div>
</div>, che confina con
il Lazio, e il bacino artificiale di
<div onclick="void(0);" class="tooltip3">Corbara
<div class="info3">
<div class="text3">Il lago di Corbara è un lago dell'Italia centrale, di origine artificiale,
formatosi con la costruzione negli anni sessanta del bacino idroelettrico omonimo sul fiume Tevere.
Prende il nome dalla frazione di Corbara, località del comune di Orvieto. Fa parte, unitamente ai
territori circostanti, del Parco fluviale del Tevere, area naturale protetta dell'Umbria.<br><br>
Nei pressi del lago si trovano "Vissani", uno dei templi della gastronomia italiana e alcune delle
più rinomate e prestigiose aziende vinicole dell'Umbria, riunite nel Consorzio di tutela del Lago di
Corbara DOC.</div>
<a class="more3" href="#l" target="_blank">More</a>
</div>
</div>. In Umbria vi sono anche molti torrenti
di piccole dimensioni e numerosi fiumi: il Tevere, che raccoglie quasi tutte le acque
degli altri fiumi umbri, il Nera, il Paglia, il Chiascio, il Topino ed il Nestore.
Risaltano tra i "minori" il Corno, il Fersinone, il Clitunno e vari torrenti.</p><br>
<p>La bellezza dell’Umbria nasce dalla fusione tra l'arte e la natura, da luoghi
evocativi, dalla presenza di capolavori rinascimentali e dai suoi borghi medioevali
nelle colline.</p><br>
<p>Il capoluogo umbro è
<div onclick="void(0);" class="tooltip4">Perugia
<div class="info4">
<div class="text4">Perugia, la grande "Arce Guelfa", sorge al centro della regione, con i 5 rioni storici
racchiusi dalle mura Etrusche. Quando la città di Roma era poco più di un accampamento di capanne, nella
Perugia etrusca si entrava da ben 7 porte, tra cui particolarmente imponente, la Porta Pulchra o d'Augusto.
<br><br>Entrando nella città da Porta San Pietro, s'incontra a destra la Basilica di San Domenico. Si
raggiunge poi la Piazza del Sopramuro, dove si allineano il palazzo quattrocentesco dell'Università Vecchia,
unito al Palazzo del Capitano del Popolo. Proseguendo si apre una delle importanti piazze d'Italia: la
Piazza Grande di Perugia (Piazza IV Novembre), dominata al centro dalla Fontana Maggiore risalente al '200.
<br><br>Nella piazza, si apre il superbo complesso monumentale che oltre alla fontana, comprende anche la
Cattedrale e lo splendido Palazzo dei Priori.<br><br>La rampa di Via delle Prome, partendo dall'Arco d'Augusto,
conduce al punto più alto della città, dove sorgeva la fortezza di Porta Sole eretta nel secolo XIV dal
Gattapone e in seguito distrutta a furore di popolo. Da trascurare il complesso di San Francesco, e
l'Oratorio di San Bernardino: capolavoro d'Agostino di Duccio.</div>
<a class="more4" href="#" target="_blank">More</a>
</div>
</div>, centro culturale di cui fanno parte due università
e alcune manifestazioni di importanza internazionale, mentre le province sono
Perugia e Terni; i centri maggiori sono Foligno, Città di Castello, Spoleto,
Gubbio, Assisi, Bastia Umbra, Orvieto, Amelia, Narni, Marsciano e Todi. Confina ad
est e a nord-est con le Marche, a ovest e a nord-ovest con la Toscana; a sud e
sud-ovest con il Lazio.</p><br>
<p>Tra le ricchezze della regione spicca la città medievale di Assisi, iscritta nella
lista dei siti Unesco “Patrimonio Mondiale dell’Umanità” e rappresenta un insieme di
capolavori del genio creativo umano. Ricca di tradizioni tra cui il Calendimaggio,
una rievocazione storica che trasforma la città in un antico borgo medievale abitato
da dame, cavalieri, arcieri e tanti altri personaggi storici. In provincia di Terni
sorge Orvieto, famosa per il Duomo; capolavoro dell'arte gotica; per i palazzi, i
vicoli medievali e il Pozzo di San Patrizio, intorno al quale girano due scale
elicoidali non comunicanti con 248 scalini da percorrere per raggiungere l’acqua a 62
metri di profondità.</p>
</div>
</div>
Fiddle: https://jsfiddle.net/LhjmLw8k/29/
As you can see from the example above two of the blue words (Trasimeno and Perugia) doesn't stay inside the phrase even if there is enough space at their disposal.
What can I do to bring the two words inside the phrase?
Set display: inline; style for your paragraphs:
.col1 p {
margin:
padding: 0;
display: inline;
}
Also add z-index with the value bigger than tooltip (which not set now, so even 1 should work) to .info when hovered over the tooltip, to cover them with tooltip information.
.tooltip:hover .info, .tooltip:focus .info,
.tooltip2:hover .info2, .tooltip2:focus .info2,
.tooltip3:hover .info3, .tooltip3:focus .info3,
.tooltip4:hover .info4, .tooltip4:focus .info4 {
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
z-index: 100;
}
Check this fiddle please.
Ok after a while I found out why of my problem and the right way to resolve it.
Basically I was unintentionally trying to nest a block element (a <div>) inside an inline element (a <p>) and that's clearly wrong because an inline element can't contain a block element. The right way to overcome the problem was to substitute all the <p> (inline elements>) with <div> (block element) so to have block elements inside other block elements and then style text with the appropriate CSS rules.
Now everything works as it should.
I have an horizontal menu and I can't find the way to make it fit with the 100% of my centered container page (from left side to right side).
Also I want every html main lists to get at the left side of the horizontal menu.
I think it's something related to my CSS code...
Right now my website looks like this: Link to image
body {
background-color: #2A2A2A;
}
h1 {
color: #FCFCFC;
padding-left: 8px;
background-color: 494949;
width: 100%;
height: 50px;
margin: 0px 0px 7px 0px;
/* margen arriba , margen dercha, margen abajo, margen izquierda */
border-bottom: 2.5px solid #C69AD3;
/*sombra color del solido*/
font-family: 'Oswald', sans-serif;
text-shadow: 3px 3px #353535;
font-size: 200%;
}
.center {
margin: auto;
width: 100%;
padding: 10px;
text-align: left;
text-align: bottom;
}
p {
color: white;
font-family: 'Oswald', sans-serif;
text-shadow: 0, 5px 0, 5px #343434
}
* {
margin: 0px;
/* colocacion del header en los id="header" */
padding: 0px;
/* colocacion del header en los id="header" */
}
#container {
width: 80%;
margin: 0 auto;
text-align: left;
}
#header {
background: #545;
margin: 3px 5px 3px 0x;
/* margen arriba , margen dercha, margen abajo, margen izquierda */
color: white;
font-family: 'Oswald', sans-serif, Helvetica, sans-serif;
text-shadow: 1px 1px #494949;
}
ul,
ol {
text-align: center;
list-style: none;
/* con el "list-style:none" hacemos que no se vean puntos ni otras formas en las listas, de modo que las palabras quedan solas en forma de lista. */
overflow: hidden;
}
.nav > li {
float: left;
/*posicion del menu horizontal*/
}
.nav li a {
background-color: 494949;
/*Color botones menú sin seleccion*/
color: #fff;
text-decoration: none;
/* quitamos el subrallado */
padding: 10px 100px;
/* altura y anchura del menu */
display: block;
margin: 0px 0px 1px 1px;
/* margen arriba , margen dercha, margen abajo, margen izquierda */
}
.nav li a:hover {
/* "hover" es cuando tienes el mouse encima*/
background-color: #6B6B6B;
}
.nav li ul {
display: none;
position: absolute;
/* posicion en cuando se despliega el menu, absolute=se abre y no mueve nada, relative=se desplaza todo objeto que este debajo */
white-space: nowrap;
text-align: left;
}
.nav li:hover > ul {
display: block;
}
.nav li ul li ul {
right: -140px;
top: 0px;
}
<html>
<head>
<title>Practica A3</title>
<link rel="stylesheet" type="text/css" href="estilo1.css" />
</head>
<div id="container">
<h1 class="center">Hello this is the website</h1>
<body>
<div id="header">
<nav class="menu-fixed">
<!-- Iniciamos la etiqueta del menu -->
<ul class="nav">
<!-- Inicio TODO -->
<li>Inicio
</li>
<!-- Principal -->
<li>Servicios
<!-- Principal -->
<ul>
<!-- Inicio secundaria -->
<li>Compra de entradas
</li>
<!-- Secundaria -->
<li>Consulta de conciertos
</li>
<!-- Secundaria -->
<li>Salas privadas
</li>
<!-- Secundaria -->
<li>Reserva de mesas
</li>
<!-- Secundaria -->
</ul>
<!-- Final secundaria -->
</li>
<li>Acerca de
<!-- Principal -->
<ul>
<!-- Inicio secundaria -->
<li>Submenu1
</li>
<!-- Secundaria -->
<li>Submenu2
</li>
<!-- Secundaria -->
<li>Submenu3
</li>
<!-- Secundaria -->
<li>Submenu4
</li>
<!-- Secundaria -->
</ul>
<!-- Final secundaria -->
</li>
<li>Contacto
</li>
<!-- Principal -->
</ul>
<!-- Final TODO -->
</nav>
<!-- Cerramos el menu con la nav -->
</div>
</br>
</br>
</br>
</br>
</br>
<p>Este es contenido de la pagina web. Simplemente se trata de un texto laaaaaaargo para ver como se posiciona y que tal quedaria con el resultado final.</br>
Esto es todo, gracias por la atencion.</p>
</body>
</div>
</html>
Also Live on fiddleYour navbar is get the full-width(80%) of container. Now the problem is you set the h1 and .center class width 100% with border-bottom. If you remove the width of h1 and .center class it will get inside the container width.
And the menu text center issue set the .nav li a {padding: 10px 100px 10px 10px;} like this. Also in your css some useless property which I comment out in css part and also try to give a short description with comment.
If you have any question regarding this . you can ask me in comment section. Thanks
body {
background-color: #2A2A2A;
}
h1 {
color: #FCFCFC;
padding-left: 8px;
background-color: #494949;
/*In here you don't set # so the color not showing */
height: 50px;
margin: 0px 0px 7px 0px;
/* margen arriba , margen dercha, margen abajo, margen izquierda */
border-bottom: 2.5px solid #C69AD3;
/*sombra color del solido*/
font-family: 'Oswald', sans-serif;
text-shadow: 3px 3px #353535;
/* font-size: 200%; [By default h1 font-size 2em means 200% so I don't think you need to use it again ] */
}
.center {
margin: auto;
padding: 10px;
text-align: left;
/*text-align: bottom; [This css is invalid. Three types is valid text-align: left/center/right]*/
}
p {
color: white;
font-family: 'Oswald', sans-serif;
text-shadow: 0, 5px 0, 5px #343434
}
* {
margin: 0px;
/* colocacion del header en los id="header" */
padding: 0px;
/* colocacion del header en los id="header" */
}
#container {
width: 80%;
margin: 0 auto;
/*text-align: left; [it means inside all text element will be align left. Don't use it here. User where you need. ] */
}
#header {
background: #545;
/* margin: 3px 5px 3px 0x; [This margin will be invalid coz you missed the "P" from last 0px] */
/* margen arriba , margen dercha, margen abajo, margen izquierda */
color: white;
font-family: 'Oswald', sans-serif, Helvetica, sans-serif;
text-shadow: 1px 1px #494949;
}
/*Change ul,ol class like this other wise if you have any other list item in your body section will be effected. This is also a example of valid css selctor. */
ul.nav,
.nav li ul {
list-style: none;
/* con el "list-style:none" hacemos que no se vean puntos ni otras formas en las listas, de modo que las palabras quedan solas en forma de lista. */
overflow: hidden;
}
.nav > li {
float: left;
/*posicion del menu horizontal*/
}
.nav li a {
background-color: #494949;
/*Again in here you don't set # so the color not showing */
/*Color botones menú sin seleccion*/
color: #fff;
text-decoration: none;
/* quitamos el subrallado */
padding: 10px 100px 10px 10px;
/*This is for the left to right menu*/
/* altura y anchura del menu */
display: block;
/*margin: 0px 0px 1px 1px; [This is margin create the gap between every li a tag if you want that gap you can use this.*/
/* margen arriba , margen dercha, margen abajo, margen izquierda */
}
.nav li a:hover {
/* "hover" es cuando tienes el mouse encima*/
background-color: #6B6B6B;
}
.nav li ul {
display: none;
position: absolute;
/* posicion en cuando se despliega el menu, absolute=se abre y no mueve nada, relative=se desplaza todo objeto que este debajo */
white-space: nowrap;
text-align: left;
}
.nav li:hover > ul {
display: block;
}
.nav li ul li ul {
right: -140px;
top: 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Practica A3</title>
<link rel="stylesheet" type="text/css" href="estilo1.css" />
</head>
<body>
<div id="container">
<h1 class="center">Hello this is the website</h1>
<div id="header">
<nav class="menu-fixed">
<!-- Iniciamos la etiqueta del menu -->
<ul class="nav">
<!-- Inicio TODO -->
<li>Inicio
</li>
<!-- Principal -->
<li>Servicios
<!-- Principal -->
<ul>
<!-- Inicio secundaria -->
<li>Compra de entradas
</li>
<!-- Secundaria -->
<li>Consulta de conciertos
</li>
<!-- Secundaria -->
<li>Salas privadas
</li>
<!-- Secundaria -->
<li>Reserva de mesas
</li>
<!-- Secundaria -->
</ul>
<!-- Final secundaria -->
</li>
<li>Acerca de
<!-- Principal -->
<ul>
<!-- Inicio secundaria -->
<li>Submenu1
</li>
<!-- Secundaria -->
<li>Submenu2
</li>
<!-- Secundaria -->
<li>Submenu3
</li>
<!-- Secundaria -->
<li>Submenu4
</li>
<!-- Secundaria -->
</ul>
<!-- Final secundaria -->
</li>
<li>Contacto
</li>
<!-- Principal -->
</ul>
<!-- Final TODO -->
</nav>
<!-- Cerramos el menu con la nav -->
</div>
<br>
<br>
<br>
<br>
<br>
<p>Este es contenido de la pagina web. Simplemente se trata de un texto laaaaaaargo para ver como se posiciona y que tal quedaria con el resultado final.<br>Esto es todo, gracias por la atencion.</p>
</div><!--End #Container DIV -->
</body>
</html>