I need to insert more scrolling so that the user can scroll more and see the content properly and not behind another text.. How could I do that or something like that as long as users can properly display the content. Here's my code (I know it's messy but I am new at this):
<html>
<head>
<title>The Dream - Cos'è</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<!-- Create navigation bar-->
<style>
#TopBar{
position:fixed;
top:0;
left:0;
width:100%;
height:40px;
background-color:#181818;
}
</style>
<div id="TopBar"></div>
<!-- Create Page Links -->
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
color: white;
position: fixed;
font-family: sans-serif;
font-size: 20px;
padding-left: 163px;
}
</style>
<style>
li {
display: inline;
margin: 5px;
}
</style>
<style>
a{color: #ffffff;
text-decoration:none;
}
</style>
<ul>
<li>Cos'è</li>
<li>Chi Siamo</li>
</ul>
<style>
al {
list-style-type: none;
margin: 0;
padding: 0;
color: white;
position: fixed;
font-family: sans-serif;
font-size: 20px;
right: 140px;
}
</style>
<style>
li {
display: inline;
margin: 5px;
}
</style>
<style>
a{color: #ffffff;
text-decoration:none;
}
</style>
<al>
<li>News</li>
<li>Video</li>
<li>Gallery</li>
</al>
<!-- Create Text "#thedream"-->
<style> h2
{
position:fixed;
right:50px;
bottom:15px;
color:black;
z-index: 0;
}
</style>
<h2>#THEDREAM</h2>
<!-- Add Social Text and Links -->
<style>
h3 {
position:fixed;
left:50px;
bottom:35px;
color:black;
z-index: 0;
}
</style>
<h3>Seguici Su:</h3>
<a href="https://www.facebook.com/pages/TheDream-IL-FILM/668675889932418?ref=aymt_homepage_panel">
<img src="FB-logo.png" alt="FB Icon" style="position:fixed;bottom:22px;left:57px;width:29px;height:29px;border:0;z-index:1;">
</a>
<a href="https://www.youtube.com/channel/UC-0xXwA-gAqNPtcMwMnI-8Q">
<img src="YouTube-logo.png" alt="YT Icon" style="position:fixed;bottom:10px;left:82px;width:55px;height:55px;border:0;z-index:1;">
</a>
<style>
div {
background-color: white;
top: 40px;
margin: 0;
}
</style>
<!-- Bio 1 -->
<div>
<style>
h5 {
list-style-type: none;
margin: 0;
position: relative;
font-size: 20pt;
font-family: sans-serif;
left: 175px;
top: 50px;
color:#585858;
z-index: -1;
}
</style>
<h5>Gianfranco Marascia</h5>
<style>
p1{
list-style-type: none;
margin-right: 133px;
position: absolute;
font-size: 15pt;
font-family: sans-serif;
left: 175px;
top:100px;
color:black;
z-index: -1;
}
</style>
<style>
a.class1{color: black;
text-decoration:underline;
}
</style>
<p1><img src="Gianfranco.jpg" width="150" height="150" float= "left" hspace= "5px" align= "left">
Gianfranco Marascia nasce a Palermo nel 1995. Egli cresce a Baucina, un paese nella provincia di Palermo nell'entro terra siciliano. E' un ragazzo molto estroverso con la passione per i computer e, soprattutto, per il video/foto editing. Già da giovane inzia a girare video musicali con altri talenti compaesani come il percussionista Santi Orlando e la cantante Raffaella Poma. Visto non solo il suo talento per i video musicali ma anche per gli eventi paesani egli decide di passare alla scrittura del primo suo cortometraggio: The Dream.
</p1>
</div>
<!-- Bio #2 -->
<style>
h6 {
list-style-type: none;
margin: 0;
position: absolute;
font-size: 20pt;
font-family: sans-serif;
right: 133px;
top:275px;
color:#585858;
z-index: -1;
}
</style>
<h6>Dario Ferrara</h6>
<style>
p2{
list-style-type: none;
margin-left: 175px;
position: absolute;
font-size: 15pt;
font-family: sans-serif;
right: 133px;
top:325px;
color:black;
z-index: -1;
}
</style>
<p2><img src="Dario.jpg" width="150" height="150" float= "right" align= "right">
Dario Ferrara nasce il 28 agosto 1985. Laurea triennale in Sassofono Classico, carattere estroverso, passione per la musica, informatica, hi-tech, calcio e recitazione. Attualmente studia presso l'Universita' di Medicina e Chirurgia di Verona con l'obiettivo di conseguire la laurea in Scienze Infermieristiche.
</p2>
<!-- Bio 3 -->
<style>
h7 {
list-style-type: none;
margin: 0;
position: absolute;
font-size: 20pt;
font-family: sans-serif;
left: 175px;
top: 500px;
color:#585858;
z-index: -1;
}
</style>
<h7><b>Alex Cali</b></h7>
<style>
p3{
list-style-type: none;
margin-right: 133px;
position: absolute;
font-size: 15pt;
font-family: sans-serif;
left: 175px;
top:550px;
color:black;
z-index: -1;
}
</style>
<p3><img src="Me.jpg" width="150" height="150" float= "left" hspace= "5px" align= "left">
Alex Cali nasce a Palermo il 18 Gennaio 1997 e cresce in un piccolo paese della Sicilia, Ventimiglia di Sicila. Fin da piccolo sviluppa una passion per Il cinema e per la tecnologia, in particolare per i computer e dispositivi multimediali. Alla tenera eta di 17 si trasferisce in Canada dove procede i suoi studi superiori al St. Maximilian Kolbe CHS dove impara a programmare in Java, Turing e HTML/CSS. A settembre andrà al Seneca College dove studiera per conseguire una laurea in Sviluppo del Software.
</p3>
</body>
</html>``
One first suggestion:
<!DOCTYPE html>
<html>
<head>
<title>The Dream - Cos'è</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#TopBar{
position:fixed;
top:0;
left:0;
width:100%;
height:40px;
background-color:#181818;
}
ul {
display: block;/*list-style-type: none;*/
margin: 0 0 0 180px;
padding: 0;
color: white;
position: fixed;
font-family: sans-serif;
font-size: 20px;
}
li {
display: inline;
margin: 5px;
}
a {color: #ffffff;
text-decoration:none;
}
li.one {
display: inline;
margin: 5px;
}
li.one a {
color: #ffffff;
text-decoration:none;
}
a.class1 {color: black;
text-decoration:underline;
}
al {
display: block;/*list-style-type: none;*/
margin: 0;
padding: 0;
color: white;
position: fixed;
font-family: sans-serif;
font-size: 20px;
right: 180px;
}
div {
background-color: white;
top: 40px;
margin: 0;
}
p1{
display: block;/*list-style-type: none;*/
margin-right: 180px;
position: absolute;
font-size: 15pt;
font-family: sans-serif;
left: 180px;
top:100px;
color:black;
z-index: -1;
}
p2{
display: block;/*list-style-type: none;*/
margin-left: 180px;
position: absolute;
font-size: 15pt;
font-family: sans-serif;
margin-right: 180px;
top:325px;
color:black;
z-index: -1;
}
p3{
display: block;/*list-style-type: none;*/
margin-right: 180px;
position: absolute;
font-size: 15pt;
font-family: sans-serif;
left: 180px;
top:550px;
color:black;
z-index: -1;
}
p1, p2, p3 {
text-align:justify;
height:160px;
overflow-y:scroll;
}
h2 {
position:fixed;
right:50px;
bottom:15px;
color:black;
z-index: 0;
font-size: 110%;
}
h3 {
position:fixed;
left:50px;
bottom:35px;
color:black;
z-index: 0;
}
h5 {
display: block;/*list-style-type: none;*/
margin: 0;
position: relative;
font-size: 20pt;
font-family: sans-serif;
left: 180px;
top: 50px;
color:#585858;
z-index: -1;
}
h6 {
display: block;/*list-style-type: none;*/
margin: 0;
position: absolute;
font-size: 20pt;
font-family: sans-serif;
right: 180px;
top:275px;
color:#585858;
z-index: -1;
}
h7 {
display: block;/*list-style-type: none;*/
margin: 0;
position: absolute;
font-size: 20pt;
font-family: sans-serif;
left: 180px;
top: 500px;
color:#585858;
z-index: -1;
}
div.clear {
clear:all;
}
</style>
</head>
<body>
<div id="TopBar"></div>
<ul>
<li>Cos'è</li>
<li>Chi Siamo</li>
</ul>
<al>
<li class="lione">News</li>
<li class="lione">Video</li>
<li class="lione">Gallery</li>
</al>
<h2>#THEDREAM</h2>
<h3>Seguici Su:</h3>
<a href="https://www.facebook.com/pages/TheDream-IL-FILM/668675889932418?ref=aymt_homepage_panel">
<img src="FB-logo.png" alt="FB Icon" style="position:fixed;bottom:22px;left:57px;width:29px;height:29px;border:0;z-index:1;">
</a>
<a href="https://www.youtube.com/channel/UC-0xXwA-gAqNPtcMwMnI-8Q">
<img src="YouTube-logo.png" alt="YT Icon" style="position:fixed;bottom:10px;left:82px;width:55px;height:55px;border:0;z-index:1;">
</a>
<div>
<h5>Gianfranco Marascia</h5>
<p1><img src="Gianfranco.jpg" width="150" height="150" float="left" style="margin: 0 10px 0 0" align= "left">
Gianfranco Marascia nasce a Palermo nel 1995. Egli cresce a Baucina, un paese nella provincia di Palermo nell'entro terra siciliano.
È un ragazzo molto estroverso con la passione per i computer e, soprattutto, per il video/foto editing. Già da giovane inzia a girare
video musicali con altri talenti compaesani come il percussionista
Santi Orlando
e la cantante Raffaella Poma.
Visto non solo il suo talento per i video musicali ma anche per gli eventi paesani egli decide di passare alla scrittura del primo
suo cortometraggio: The Dream.</p1>
</div>
<h6>Dario Ferrara</h6>
<p2><img src="Dario.jpg" width="150" height="150" float= "right" style="margin: 0 0 0 10px" align= "right">
Dario Ferrara nasce il 28 agosto 1985. Laurea triennale in Sassofono Classico, carattere estroverso, passione per la musica,
informatica, hi-tech, calcio e recitazione. Attualmente studia presso l'Universita' di Medicina e Chirurgia di Verona con
l'obiettivo di conseguire la laurea in Scienze Infermieristiche.</p2>
<h7><b>Alex Cali</b></h7>
<p3><img src="Me.jpg" width="150" height="150" float= "left" style="margin: 0 10px 0 0" align= "left">
Alex Cali nasce a Palermo il 18 Gennaio 1997 e cresce in un piccolo paese della Sicilia, Ventimiglia di Sicila.
Fin da piccolo sviluppa una passion per Il cinema e per la tecnologia, in particolare per i computer e dispositivi
multimediali. Alla tenera eta di 17 si trasferisce in Canada dove procede i suoi studi superiori al St. Maximilian
Kolbe CHS dove impara a programmare in Java, Turing e HTML/CSS. A settembre andrà al Seneca College dove studiera
per conseguire una laurea in Sviluppo del Software.</p3>
</body>
</html>
See also: http://jsfiddle.net/bf50t4ty/2/
Personally, I would have re-written most of the code differently, but here I tried most to edit your MWE. Several other things should be fixed then and some more order should be done.
The CSS lines implementing what you asked for are
height:160px;
overflow-y:scroll;
in
p1, p2, p3 {
text-align:justify;
height:160px;
overflow-y:scroll;
}
Related
How can I make the timeline from this website https://www.dealema.pt/biografia/ ONLY using HTML and CSS (NO librarys)? And NO javascript or anything, just pure HTML and CSS.
I did the first image + text responsive, but I'm having hard time adding the rest... The "timeline-02" invades "timeline-01".
I want to make this as simple as possible and still look as identical as the timeline from the website. Doens't need to be perfect, just good enough.
My HTML code:
.timeline {
width: 100%;
margin-left: 115px;
margin-bottom: 115px;
}
.timeline:before {
content: ' ';
width: 1px;
height: 100%;
background: #181818;
position: absolute;
left: 50%;
}
.timeline-01 img {
float: left;
position: relative;
margin-left: 15%;
}
.timeline-01-text {
float: right;
margin-right: 5%;
font-family: Helvetica, Arial, sans-serif;
}
.timeline-01-text p {
color: #7e7e7e;
font-size: 15px;
line-height: 1.5;
}
.timeline-01 span {
position: absolute;
left: 50%;
width: 60px;
height: 60px;
line-height: 60px;
margin-left: -28px;
text-align: center;
font-size: 15px;
font-weight: 600;
color: #FFF;
background-color: #181818;
border-radius: 60px;
}
#media only screen and (max-width: 750px) {
.timeline:before {
left: 10%;
}
.timeline-01 span {
left: 10%;
}
.timeline-01 img {
display: none;
}
}
#media only screen and (min-width: 750px) {
.timeline-01-text {
float: right;
margin-left: 50%;
margin-right: 115px;
position: absolute;
font-family: Helvetica, Arial, sans-serif;
}
}
<section class="timeline">
<div class="timeline-01">
<img src="img/album-01.png" style="width: 170px; height: auto;">
<span class="timeline-01-year">2006</span>
<div class="timeline-01-text">
<h2>EXPRESSO DO SUBMUNDO</h2>
<br>
<p>Entre rimas e batidas, nasce o primeiro trabalho dos Dealema, o mítico “Expresso do Submundo”. Uma obra de coleccionador que faz parte da história do hip-hop em Portugal e que foi recentemente reeditado em formato K7, uma prenda aos fãs que nunca
tiveram acesso comercial a este disco.</p>
</div>
</div>
<div class="timeline-02">
<img src="img/album-01.png" style="width: 170px; height: auto;">
<span>2016</span>
<div class="timeline-02-text">
<h2>EXPRESSO DO SUBMUNDO</h2>
<br>
<p>Entre rimas e batidas, nasce o primeiro trabalho dos Dealema, o mítico “Expresso do Submundo”. Uma obra de coleccionador que faz parte da história do hip-hop em Portugal e que foi recentemente reeditado em formato K7, uma prenda aos fãs que nunca
tiveram acesso comercial a este disco.</p>
</div>
</div>
</section>
Good day,
I have the following table in html which is entirely displayed in bold. What I don't understand is that I have set the property font-weight to normal in my train_timetable_table element:
Have I missed to add a new element to my CSS configuration which would only show the first row in bold (identified in my example below by * I would like this row in bold *)
I hope that my question is clear enough and hopefully will save some time for future searches.
Many thanks for your time and your help to solve this matters.
Best wishes
/* Page entière (utilisé pour avoir une couverture globale en couleur) */
body {
background-color:#005580; /*night mode*/
background-color:#ccffcc; /*day mode*/
}
/* Affichage de l'en-tête */
#header {
font-family:Arial;
text-align:center;
position: relative;
background-color:#005580; /*night mode*/
background-color:#ccffcc; /*day mode*/
color:black;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
width:1000px;
height:80px;
}
/* Affichage de la barre de navigation */
#nav {
font-family:Arial;
position: relative;
line-height:50px;
background-color:#005580; /*night mode*/
background-color:#ccffcc; /*day mode*/
height:434px;
width:60px;
float:left;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/* Affichage des données essentielles (section) */
#section {
font-family:Arial;
font-size: 100%;
float:left;
background-color:#005580; /*night mode*/
background-color:#ccffcc; /*day mode*/
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
height:434px;
width:870px;
}
/* Affichage de la barre de pied d'écran (version de domooaweb) */
#footer {
font-family:Arial;
font-size: 60%;
text-align:center;
background-color:#005580; /*night mode*/
background-color:#ccffcc; /*day mode*/
color:black;
clear:both;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height:12px;
width:1000px;
}
#validity {
font-family:Arial;
font-size: 100%;
color:black;
position:fixed;
top: 110px;
left: 640px;
width:350px;
}
#reserved {
position:fixed;
top: 250px;
left: 200px;
color:black;
font-family:Arial, sans-serif;
font-size:18px;
}
#home_automation_tab
{
position: fixed;
height: 350px;
width: 900px;
top: 140px;
left: 140px;
}
#train_station img {
position: fixed;
top: 160px;
left: 140px;
z-index: 2;
}
#weather_img img {
position: fixed;
top: 160px;
left: 140px;
z-index: 2;
}
#emergency_img img {
position: fixed;
top: 160px;
left: 140px;
z-index: 2;
}
/* Affichage du logo */
#logo img {
position: fixed;
top: 12px;
left: 5px;
z-index: 2;
}
/* Affichage de l'icône météo */
#meteo_icon img{
position: fixed;
top: 12px;
left: 935px;
z-index: 2;
}
/* Affichage des prévisions météorologiques (températures) */
.meteoforecast_temperature{
font-family: Arial, Helvetica, sans-serif;
font-size: 26px;
font-weight: 900;
color: black;
}
/* Affichage des prévisions météorologiques (jour) */
.meteoforecast_day{
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: black;
}
/* Affichage des prévisions météorologiques (condition) */
.meteoforecast_condition {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: black;
}
/* Affichage de la météo dans le monde (scroller) */
#worldwide_meteo {
font-family:Arial;
font-size: 18px;
color:black;
top: 150px;
left: 145px;
width: 800px;
position: fixed;
}
/* Affichage de l'image d'erreur 404 (page non trouvée) */
#err404 img{
position: fixed;
top: 180px;
left: 180px;
}
/* Affichage de l'image de la météo mondiale */
#ww_meteo img{
position: fixed;
top: 200px;
left: 165px;
}
/* Affichage des icônes météo mondiale */
Marquee img {
vertical-align:middle
}
/* Table pour horaires de train (lundi-samedi) */
#table_train_timetable1
{
position: fixed;
top: 290px;
left: 139px;
z-index: 2;
}
/* Table pour prévisions météo 3 jours */
#table_forecast_3days
{
position: fixed;
top: 290px;
left: 139px;
z-index: 2;
}
.train_timetable_table
{
border: 1px solid black;
color: black;
border-color:gray;
font-weight:normal;
}
.train_timetable_table td
{
font-family:Arial, sans-serif;
font-size:14px;
padding:5px 5px 5px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
border-color:gray;
font-weight:normal;
}
.train_timetable_table th
{
font-family:Arial, sans-serif;
font-size:14px;
font-weight:normal;
padding:5px 5px 5px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
border-color:gray;
}
.train_timetable_table .title
{
font-weight:bold;
color:black;
border-color:gray;
}
.train_timetable_table .tablerows
{
vertical-align:top;
font-weight:normal;
}
.weather_forecast_table
{
border: 1px solid black;
}
.useful_numbers_table
{
border: 1px solid black;
color:black;
border-color:gray;
}
.temps_parcours_table
{
border: 1px solid black;
color: black;
border-color:gray;
}
.temps_parcours_table td
{
font-family:Arial, sans-serif;
font-size:14px;
padding:5px 5px 5px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
border-color:gray;
}
.temps_parcours_table th
{
font-family:Arial, sans-serif;
font-size:14px;
font-weight:normal;
padding:5px 5px 5px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
border-color:gray;
}
.temps_parcours_table .title
{
font-weight:bold;
color:black;
border-color:gray;
}
h2
{
position: fixed;
top: 100px;
left: 140px;
color:black;
}
progress[value] {
/* Reset the default appearance */
-moz-appearance: none;
appearance: none;
/* leave defaults in for other browsers */
background-size: 35px 20px, 100% 100%, 100% 100%;
color:purple;
}
progress::-webkit-progress-bar {
/* ici les styles généraux pour Webkit */
background-color: purple;
}
progress[value]::-webkit-progress-value {
background-color: purple;
}
<!DOCTYPE html>
<html>
<head>
<title>Domuob | home</title>
<meta http-equiv="refresh" content="360">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" type="text/css" href="css/mystyle_day.css" />
</head>
<body>
<div id="header">
<h1></h1>
<div id="section">
<h2>Horaires de train</h2>
<div id="train_station">
<img src="assets/pictures/zoo.png" alt="" style="width:850px;height:97px;">
</div>
<div id="table_train_timetable1">
<table class="train_timetable_table" style="width:840px">
<colgroup>
<col style="width: 210px">
<col style="width: 210px">
<col style="width: 210px">
<col style="width: 210px">
</colgroup>
<tr>
<th class="title" colspan="4"><img src="assets/icons/logo_s.png" alt ="" style="width:15px;height:15px;">** I would like this row in bold **</th>
</tr>
<tr>
<td class="tablerows"><b>05:36 05:51♦</b></td>
<td class="tablerows"><b>06:06 06:21♦ 06:36 06:51♦</b></td>
<td class="tablerows"><b>07:06 07:21♦ 07:36 07:51♦</b></td>
<td class="tablerows"><b>08:06 08:21♦ 08:36 08:51♦</b></td>
</tr>
<tr>
<td class="tablerows"><b>09:06 09:21♦ 09:36 09:51♦</b></td>
<td class="tablerows"><b>10:06 10:21♦ 10:36 10:51♦</b></td>
<td class="tablerows"><b>11:06 11:21♦ 11:36 11:51♦</b></td>
<td class="tablerows"><b>12:06 12:21♦ 12:36 12:51♦</b></td>
</tr>
</table>
</div>
<div id="validity">
<p align="right">Horaires valables du 11.12.2016 au 09.12.2017</p>
</div>
</div>
<div id="footer"> Duobweb version 0.0.7 </div>
</body>
</html>
Because you are using <b> tag everywhere in your table that's why it’s showing bold everywhere. Try to change that with <span> or something else.
Since you have added <b> Bold tag around the contents of Each cell, it is overriding the CSS property you set in the CSS File:
.train_timetable_table
{
border: 1px solid black;
color: black;
border-color:gray;
font-weight:normal;
}
Remove the <b> tag around each cell values.
because, by default b tag have font-weight: bold property.
Insert this code,if want remove affect font-weight:
.train_timetable_table .tablerows b {
font-weight: normal;
}
here is part of the CSS code, i cant seem to figure it out.
#About{
height:500px;
background: url("murano.jpg") no-repeat center;
}
I want to decrease the opacity of the imported background image
Add Opacity with your css
#About{
opacity :0.4;
height:500px;
background: url("murano.jpg") no-repeat center;
}
the best solution would be to create another div inside your #about div and position that div absolute while position your #about div to relative and give the background of this newly added div as rgba(0,0,0,0.5) where 0.5 represents the opacity
there is no css rule to provide opacity to background images.
when you put the opacity of #about div to 0.4 of course its child will inherit this property and any text inside about div will get the opacity of 0.4
<div id="about">
<div class="absolute">
</div>
</div>
#about{
position:relative;
background:url(..);
}
.absolute{
position:absolute;
background:rgba(0,0,0,0.5);
}
Use background-color: rgba(255, 255, 0, 0.3);
The 0.3 being the the alpha(opacity channel).
OR
Add an extra div to hold the background, and change the opacity there.
opacity: 0.4; filter:alpha(opacity=40);
Example :
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('http://i40.tinypic.com/3531bba.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
opacity: 0.4;
filter: alpha(opacity=40);
}
.head {
width: 150px;
height: 160px;
}
body {
font-family: tahoma, helvetica, arial, sans-serif;
font-size: 12px;
text-align: center;
background: #000;
color: #ddd4d4;
padding-top: 12px;
line-height: 2;
}
td,
th {
font-size: 12px;
text-align: left;
line-height: 2;
}
#wrapper {
margin: auto;
text-align: left;
width: 832px;
position: relative;
padding-top: 27px;
}
#body {
background: url(images/body_bg_1.gif) repeat-y;
width: 832px;
}
#bodyi {
background: url(images/body_top_1.gif) no-repeat;
width: 832px;
}
#bodyj {
background: url(images/body_bot_1.gif) bottom no-repeat;
padding: 1px 0;
}
#body2 {
background: url(images/body_bg_2.gif) repeat-y;
width: 832px;
}
#bodyi2 {
background: url(images/body_top_2.gif) no-repeat;
width: 832px;
}
#bodyj2 {
background: url(images/body_bot_2.gif) bottom no-repeat;
padding: 1px 0;
}
h1,
h2,
h3,
#nav,
#nav li {
margin: 0;
padding: 0;
}
#nav {
font-size: 10px;
position: absolute;
right: 0;
top: 12px;
line-height: 1.2;
padding-left: 120px;
}
#nav li {
float: left;
width: 108px;
list-style: none;
margin-left: 2px;
border-bottom: 1px solid black;
}
#nav a {
background: #738d09;
color: #2e3901;
font-weight: bold;
text-decoration: none;
display: block;
text-align: center;
padding: 1px 0;
}
#sidebar {
float: left;
width: 250px;
padding-left: 4px;
}
#sidebar .content {
padding-left: 24px;
}
#sidebar .content img {
float: left;
clear: left;
margin: 5px 5px 5px 0;
}
#sidebar .divider {
background: url(images/left_splitter.gif) center no-repeat;
height: 5px;
width: 169px;
}
#content {
float: right;
width: 462px;
}
#content1 {
float: left;
width: 800px;
}
#content1 .content {
margin: 7px 35px 7px 20px;
padding-left: 20px;
}
#content .content {
margin: 7px 55px 7px 17px;
}
#content .content table {
width: 310px;
margin-right: 0px;
}
#content .content table td,
#content .content table th {
padding-right: 10px;
}
#content .content table td.download {
text-align: right;
padding-right: 0px;
}
#content .divider {
background: url(images/right_splitter.gif) repeat-x;
height: 5px;
}
h1 {
position: absolute;
left: 0;
top: 0;
}
h2 {
font-size: 10px;
color: #cf9118;
margin: 1em 0;
}
h3 {
font-size: 10px;
margin: 1em 0;
}
h5 {
font-size: 20px;
color: #cf9118;
margin: 1em 0;
text-align: center;
}
h6 {
font-size: 18px;
margin: 1em 0;
}
p {
margin: 1em 0;
}
img {
border: 0;
}
img.left {
float: left;
margin-right: 14px;
}
img.right {
float: right;
margin-left: 14px;
}
.readmore {
text-align: right;
}
.hidden {
visibility: hidden;
}
.clear {
clear: both;
}
a {
color: #f0b33c;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #cf9118;
}
a:hover {
text-decoration: underline;
}
table a {
text-decoration: underline;
font-weight: normal;
color: #7f7c79;
}
#power {
color: #fff;
text-align: center;
}
#power a {
color: #fff;
}
<div id="background"></div>
<div class="head">
</div>
<div id="wrapper">
<ul id="nav">
<li>Inicio
</li>
<li>Sobre a banda
</li>
<li>Membros
</li>
<li>Bilhetes
</li>
<li>Galeria
</li>
<li>Área Pessoal
</li>
</ul>
<h1></h1>
<div id="body">
<div id="bodyi">
<div id="bodyj">
<div id="sidebar">
<div class="content">
<h2>Galeria de imagens</h2>
<p>Aqui poderá encontrar uma galeria de imagens da banda, com fotos de concertos, entre outras imagens.</p>
<p class="readmore">Ver
</p>
</div>
<div class="content">
<h2>Noticias</h2>
<h3>18 de Abril, 2011</h3>
<h4>"So Far Away" vai ter videoclip</h4>
<p>Muitos se questionavam se o mais recente single dos Avenged Sevenfold, "So Far Away", ia ter direito a um videoclip. Eis que surge a boa notícia para os fãs dos A7X: So Far Away vai ter videoclip. Já foram divulgadas algumas fotos do set de
filmagens.</p>
<h3>10 de Março, 2011</h3>
<h4>A7X nomeados para a Metal Hammer Golden Gods Awards 2011</h4>
<p>Os Avenged Sevenfold foram nomeados para a Metal Hammer Golden Gods Awards 2011 em duas categorias. As categorias onde os A7X estão a participar são as seguintes:
<p>
- Best International Band (Melhor Banda Internacional)
<p>
- Best Shredder (com o Synyster Gates) (Melhor Shredder)</p>
</div>
</div>
<div id="content">
<center>
<img src="images/avengeds.jpg" width="346" height="234" alt="four men walking" />
</center>
<div class="content">
<h2>O album mais recente</h2>
<img src="images/nightmare.jpg" width="82" height="80" alt="Unwired album cover" class="left" />
<p>Os californianos Avenged Sevenfold estão de volta aos discos com "Nightmare". Solos de guitarra, vocalizações rasgadas e um som contagiante continuam a ser a base do sucesso de uma das bandas de heavy-metal com mais fãs no mundo inteiro. Fundados
em 1999 por M. Shadows, Synyster Gates, Zacky Vengeance, Johnny Christ e The Rev - baterista que faleceu em Dezembro de 2009 passado e que foi substituido neste disco por Mike Portnoy, dos Dream Theater - os Avenged Sevenfold já contam com
cinco discos de originais na sua carreira.</p>
<div class="divider"></div>
<h2>Musicas com maior sucesso</h2>
<table summary="track downloads" border="0" cellspacing="0">
<tr>
<th width="55%">Faixa</th>
<th>Album</th>
<th class="hidden">Dowload links</th>
</tr>
<tr>
<td>Bat Country</td>
<td>City of Evil</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Beast and the Harlot</td>
<td>City of Evil</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Seize the Day</td>
<td>City of Evil</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Almost Easy</td>
<td>Avenged Sevenfold</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Afterlife</td>
<td>Avenged Sevenfold</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Nightmare</td>
<td>Nightmare</td>
<td class="download">Ouvir
</td>
</tr>
<tr>
<td>Welcome to the Family</td>
<td>Nightmare</td>
<td class="download">Ouvir
</td>
</tr>
</table>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div align="right">
<font size="2">text</font>
</div>
</div>
you would want to add the background to the #about:after and then apply the transparency to that. there is no way to add the transparency directly to the background as far as I know.
here is a link to a good article on this.
I want to make a responsive menu with only html and css , no Javascript.
I'm still practising.. maybe anyone can see why my menu doesn't appear when clicking on the label?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Frank.css">
<meta name="author" content="Frank Van Hoek">
<title>Frank</title>
</head>
<body>
<header>
<div class="logo" class="cfx">
<img class="imglogo" class="cfx" src="afbeeldingen/logo.png" alt="Logo">
</div>
<div class="facebook" class="cfx"></div>
<img class="facebook" class="cfx" src="afbeeldingen/facebook.png" alt="facebook">
</header>
<div class="wrapper" class="cfx">
<nav class="normaal" class="cfx">
<ul class="menu" class="cfx">
<li class="actief">Home</li>
<li>Leden</li>
<li>Parken</li>
<li>Evenementen</li>
<li>Over ons</li>
</ul>
</nav>
/************HAMBURGER***************/
<nav class="hamburger">
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle"></label>
<ul>
<li class="actief">Home</li>
<li>Leden</li>
<li>Parken</li>
<li>Evenementen</li>
<li>Over ons</li>
</ul>
</nav>
<div class="content" class="cfx">
<h2>BMX : Streetculture in Antwerp</h1>
<video controls><source src="afbeeldingen/StreetcultureInAntwerp.mp4" type="video/mp4"></video>
<p>Onze A.Way leden in dit filmpje zijn Tarik Begdouri, Zeno Peeters, Koen Vanden Broeck en Dimitri Huybrechts. De andere rijders zijn Niels Mertens, Stef de Backer, Brian O' Brien, Jonas van Oosterbosch en Juno Vereecken. Het werd gefilmd en gemonteerd door onze rijder Ilyas Deckers en de achtergrondmuziek is "Al'Tarba Vs Lord Lhus - 3 Amigos feat Dirty Dike & Jace Abstract".</p>
<h1>Nieuwsfeeds</h1>
<div class="nieuwsfeed">
<p class="bericht">
Dit weekend is het de 'Braaab BMX Contest 2015' in '040 BMX park' in Eindhoven. Dit wil je niet missen! Meer informatie vind je op de facebookpagina.
</p>
<p class="datum">
4 maart 2015
</p>
</div>
<div class="nieuwsfeed">
<p class="bericht">
Iemand die deze rail durft te grinden? - Locatie: Aan de schelde, niet ver van ATV
</p>
<p class="datum">
2 maart 2015
</p>
</div>
<div class="nieuwsfeed">
<p class="bericht">
Reminder!!! Deze zondag 2de meeting ivm Bmx jam stadspark - Locatie: Fietsenfikser - Tijdstip: 13u
</p>
<p class="datum">
26 februari 2015
</p>
</div>
<div class="nieuwsfeed">
<p class="bericht">
Deze vrijdag Pizza Friday om 5u in het Stadspark! Be there!
</p>
<p class="datum">
25 februari 2015
</p>
</div>
</div>
<footer>
<p>© All rights reserved - 2015</p>
</footer>
</div>
</body>
</html>
CSS
html
{
font-family: Arial, sans-serif;
height:100%;
margin: 0;
padding: 0;
}
img , video;
{
max-width: 100%;
height: auto;
}
body
{
height:inherit;
margin: inherit;
padding: inherit;
background-color: #000;
}
.wrapper
{
max-width: 900px;
min-width: 400px;
min-height:100%;
margin: 0 auto;
background-color: #000;
}
header
{
background-image:url(afbeeldingen/skyline.png);
margin: auto;
height: 336px;
width: inherit;
}
.logo
{
padding: 0 1.25em;
float: left;
}
.imglogo
{
width: 170px;
height: 170px;
}
.facebook
{
width: 40px;
height: 40px;
text-align:right;
float:right;
padding-top: 30px;
}
nav
{
width: 100%;
padding: 0px auto 0px auto;
}
ul.menu
{
list-style-type: none;
margin: 5px 10% 5px 10%;
padding: 5px auto 5px auto;
left: 0;
text-align: center;
}
.menu li
{
float:left;
margin: 5px auto 5px auto;
padding: 0px 1.875em 0px 1.875em;
background-color: #000;
text-align: center;
}
.menu li:first-child
{
padding: 0px 1.875em 0px 1.875em;
}
.menu li > a
{
display: block;
padding: 10px 0px 10px 0px;
margin: 0px 0px 0px 0px;
text-decoration: none;
color: #fff;
}
.menu li:hover, li.actief
{
background-color: #f08222;
}
.menu li:hover > a, li.actief >a
{
color: #000;
}
.hamburger
{
display: none;
}
.content
{
color: #fff;
display:block;
margin: 50px 7.7777777777777777777777777777778% 70px 7.7777777777777777777777777777778%;
}
.content video
{
width: 760px;
height: auto;
}
.content h1
{
text-decoration: underline;
margin: 50px auto;
}
.nieuwsfeed
{
margin: 30px auto;
padding: 0.625em;
border: 1px solid #fff;
border-radius: 5px;
}
.datum
{
text-align: right;
font-size: 0.8em;
}
.content a:link
{
color: #f08222;
}
.content a:visited
{
color: #e2ff00;
}
footer p
{
color: #fff;
font-size: 0.9em;
text-align: center;
margin: 200px auto 40px auto;
}
/**************************
* MEDIA QUERY *
*************************/
#media screen and (max-width: 820px)
{
html, body {
height: 100%;
}
body {
margin: 0;
overflow-x: hidden;
font-family: Arial, sans-serif;
}
.normaal
{
display:none;
}
.hamburger
{
display: inline-block;
}
#menu-toggle {
display: none;
}
#menu-toggle:checked ~ .hamburger ul{
left:0;
}
#menu-toggle:checked ~ .content {
left:240px;
}
#menu-toggle:checked + label {
left:250px;
}
label[for="menu-toggle"] {
position: fixed;
left:60px;
top:300px;
width: 30px;
height: 30px;
background-color: #0f0;
z-index: 2;
}
.hamburger ul{
position: fixed;
width: 240px;
height: 100%;
top:300px;
left: -240px;
background-color: #e34dd2;
color: white;
}
.hamburger ul {
margin: 0;
padding: 0;
list-style: none;
}
.hamburger li a {
display: block;
padding:0.5em 1em;
color: white;
border-bottom: 1px #424240 solid;
}
.container {
position: relative;
left:0;
padding: 2em;
}
nav, .container, label[for="menu-toggle"] {
-webkit-transition: left 0.5s;
transition: left 0.5s;
}
}
/*************************
* C L E A R F I X *
*************************/
.cfx::before, .cfx::after {
display: table;
line-height: 0;
content: "";
}
.cfx::after {
clear: both;
}
It would make more sense to use a responsive framework, such as Bootstrap, or Foundation.
Here is a simplistic example for a responsive navigation menu which utilises bootstrap.
Responsive navigation bar Preview
Responsive navigation bar Download
You have this:
.hamburger ul{
position: fixed;
width: 240px;
height: 100%;
top:300px;
left: -240px;
background-color: #e34dd2;
color: white;
}
position: fixed; means that its position values are in relation to the window/viewport. So having left: -240px; will move this element out of the viewport (i.e. make it invisible). Do you really want this? Even if that's intentionally and supposed to work together with this rule
#menu-toggle:checked ~ .hamburger ul{
left:0;
}
...to move it in, they are in the wrong order - the former rule will most likely overwrite the other one, making the element invisible...
I'm trying to position my sidebar on the right side of my content, but I still want it in the same 'box'. See:
As you can see in the picture it's on the right side, but it is not in the 'content' box, and I would like it to be almost directly under my menu. Please help.
My code looks like this (just ignore the danish commentary, that's just notes):
body {
background: #98c8d7;
width: 1000px;
margin: auto;
font-family: "Trebuchet ms", Verdana, sans-serif;
}
#header {
background: #fff url(banner.jpg) no-repeat;
margin: 10px 0 10px 0;
padding: 8em 2em 1em 2em;
text-align: center;
border-radius: 15px;
opacity: 0.8;
border: 1px dotted #000
}
/*Dette formaterer menuen */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link,
a:visited {
display: block;
width: 312.5px;
font-weight: bold;
color: #000;
background-color: #51a7c2;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
border: 1px solid #91cfca;
opacity: 0.8;
}
a:hover,
a:active {
background-color: #98c8d7;
}
#content {
background: #b4cdd9;
color: #000;
padding: 1em 1em 1em 1em;
top right bottom left
}
#tekst {
background: #98c8d7;
color: #000;
opacity: 0.8;
margin: 5px 0 5px 0;
padding: 0.5em 1em 1em 1em;
text-align: left;
}
#sidebar {
background: #b4cdd9;
color: #000;
width: 320px;
position: relative;
float: right;
margin: 5px 0 5px 0;
padding: 0.5em 1em 1em 1em;
text-align: left;
border-style: outset;
border-width: 3px;
border-color: black;
}
a {
color: #0060B6;
text-decoration: none;
}
a:hover {
color: #00A0C6;
text-decoration: none;
cursor: pointer;
}
<!doctype html>
<head>
<!-- Titel -->
<title>IT-hjælp til ældre</title>
<meta charset="utf-8">
<link href="CSS sheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Denne div indeholder dit content, altså din brødtekst -->
<div id="content">
<!--Header. Indeholder banner -->
<div id="header">
</div>
<!-- Menu -->
<ul>
<li>Forside
</li>
<li>Priser
</li>
<li>Kontakt
</li>
</ul>
<!-- Her kommer din brødtekst så -->
<div id="tekst">
<h1>Overskrift 1</h1>
<p>Her kan du skrive, hvad du tilbuder, hvorfor, hvorledes, til hvem og anden info</p>
<!-- Overskrift to. Der er flere former for overskrifter. H1 betegner en bestemt slags, H2 en mindre slags osv. Du kan godt bruge H1 flere gange -->
<h2>Underoverskrift 1</h2>
<p>Her kan du måske skrive lidt om dig selv og dine kvalifikationer?</p>
<div id="sidebar">
<h3>Leon Laksø</h3>
<p>Så-og-så-mange år i tjeneste, certificeret bla bla, alt muligt andet shit her. Måske et billede hvor du ser venlig ud?</p>
<p>Mail link kunne være her?</p>
</div>
</div>
</div>
</body>
</html>
One quick solution is to change your html structure and move sidebar as first child of div wih id #tekst:
body {
background: #98c8d7;
width: 1000px;
margin: auto;
font-family: "Trebuchet ms", Verdana, sans-serif;
}
#header {
background: #fff url(banner.jpg) no-repeat;
margin: 10px 0 10px 0;
padding: 8em 2em 1em 2em;
text-align: center;
border-radius: 15px;
opacity: 0.8;
border: 1px dotted #000
}
/*Dette formaterer menuen */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link,
a:visited {
display: block;
width: 312.5px;
font-weight: bold;
color: #000;
background-color: #51a7c2;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
border: 1px solid #91cfca;
opacity: 0.8;
}
a:hover,
a:active {
background-color: #98c8d7;
}
#content {
background: #b4cdd9;
color: #000;
padding: 1em 1em 1em 1em;
top right bottom left
}
#tekst {
background: #98c8d7;
color: #000;
opacity: 0.8;
margin: 5px 0 5px 0;
padding: 0.5em 1em 1em 1em;
text-align: left;
}
#sidebar {
background: #b4cdd9;
color: #000;
width: 320px;
position: relative;
float: right;
margin: 5px 0 5px 0;
padding: 0.5em 1em 1em 1em;
text-align: left;
border-style: outset;
border-width: 3px;
border-color: black;
}
a {
color: #0060B6;
text-decoration: none;
}
a:hover {
color: #00A0C6;
text-decoration: none;
cursor: pointer;
}
<body>
<!-- Denne div indeholder dit content, altså din brødtekst -->
<div id="content">
<!--Header. Indeholder banner -->
<div id="header"></div>
<!-- Menu -->
<ul>
<li>Forside
</li>
<li>Priser
</li>
<li>Kontakt
</li>
</ul>
<!-- Her kommer din brødtekst så -->
<div id="tekst">
<div id="sidebar">
<!-- move it here -->
<h3>Leon Laksø</h3>
<p>Så-og-så-mange år i tjeneste, certificeret bla bla, alt muligt andet shit her. Måske et billede hvor du ser venlig ud?</p>
<p>Mail link kunne være her?</p>
</div>
<h1>Overskrift 1</h1>
<p>Her kan du skrive, hvad du tilbuder, hvorfor, hvorledes, til hvem og anden info</p>
<!-- Overskrift to. Der er flere former for overskrifter. H1 betegner en bestemt slags, H2 en mindre slags osv. Du kan godt bruge H1 flere gange -->
<h2>Underoverskrift 1</h2>
<p>Her kan du måske skrive lidt om dig selv og dine kvalifikationer?</p>
</div>
</div>
</body>
Swapping your #tekskt and #sidebar around should be your main change. I've also adding a bit of margin for aesthetics.
Here is a Live Demo of it in action. :)
It will then look like:
body {
background: #98c8d7;
width: 1000px;
margin: auto;
font-family: "Trebuchet ms", Verdana, sans-serif;
}
#header {
background: #fff url(banner.jpg) no-repeat;
margin: 10px 0 10px 0;
padding: 8em 2em 1em 2em;
text-align: center;
border-radius: 15px;
opacity: 0.8;
border: 1px dotted #000
}
/*Dette formaterer menuen */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link,
a:visited {
display: block;
width: 312.5px;
font-weight: bold;
color: #000;
background-color: #51a7c2;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
border: 1px solid #91cfca;
opacity: 0.8;
}
a:hover,
a:active {
background-color: #98c8d7;
}
#content {
background: #b4cdd9;
color: #000;
padding: 1em 1em 1em 1em;
position: absolute;
}
#tekst {
background: #98c8d7;
color: #000;
opacity: 0.8;
margin: 5px 0 5px 0;
padding: 0.5em 1em 1em 1em;
text-align: left;
position: relative;
}
#sidebar {
background: #b4cdd9;
color: #000;
width: 320px;
position: relative;
float: right;
z-index: 5;
margin: 5px 0 5px 0;
padding: 0.5em 1em 1em 1em;
text-align: left;
border-style: outset;
border-width: 3px;
border-color: black;
margin: 1em;
}
a {
color: #0060B6;
text-decoration: none;
}
a:hover {
color: #00A0C6;
text-decoration: none;
cursor: pointer;
}
<!-- Denne div indeholder dit content, altså din brødtekst -->
<div id="content">
<!--Header. Indeholder banner -->
<div id="header"></div>
<!-- Menu -->
<ul>
<li>Forside
</li>
<li>Priser
</li>
<li>Kontakt
</li>
</ul>
<!-- Her kommer din brødtekst så -->
<div id="sidebar">
<h3>Leon Laksø</h3>
<p>Så-og-så-mange år i tjeneste, certificeret bla bla, alt muligt andet shit her. Måske et billede hvor du ser venlig ud?</p>
<p>Mail link kunne være her?</p>
</div>
<div id="tekst">
<h1>Overskrift 1</h1>
<p>Her kan du skrive, hvad du tilbuder, hvorfor, hvorledes, til hvem og anden info</p>
<!-- Overskrift to. Der er flere former for overskrifter. H1 betegner en bestemt slags, H2 en mindre slags osv. Du kan godt bruge H1 flere gange -->
<h2>Underoverskrift 1</h2>
<p>Her kan du måske skrive lidt om dig selv og dine kvalifikationer?</p>
</div>
</div>
What browser are you using? Working fine for me on firefox 33 and chrome 38.
JSFiddle
Try clearing your float.
#tekst {
background:#98c8d7;
color:#000;
opacity: 0.8;
margin:5px 0 5px 0;
padding:0.5em 1em 1em 1em;
text-align:left;
overflow: hidden; //*clears float*//
}