clockover
12-05-2013, 19:48
Salve a tutti. Sto studiando un po di HTML5 e CSS e mi sto trovando di fronte ad alcune difficoltà, soprattutto per quanto riguarda il posizionamento degli elementi. Come browser principale uso Chrome e per editor Netbeans.
Sto facendo delle prove su una singola pagina con due blocchi laterali fissi e un video centrale. Il blocco di sinistra contiene una lista non ordinata con dei link (che ovviamente non linkano a nulla) mentre il blocco di destra contiene del testo. Il video è un mp4 e per ora non ha alcuna importanza. L'header invece contiene semplicemente il titolo della pagina.
Questa è il risultato su Google Chrome (ho provato anche su un computer Windows con Explorer - non ricordo la versione - e per ora sembra un risultato uguale a Chrome)
http://imageshack.us/a/img694/9493/chromegy.png
Sembrano non esserci problemi
Questa invece è il risultato su Opera
http://imageshack.us/a/img546/7387/operaw.png
E qui invece i problemi ci sono. Il video sembrerebbe avere un margine superiore negativo e quindi viene coperto quasi completamente dalla barra
Questo per quanto riguarda firefox (chiedo scusa per le dimensioni dello screeshot non so che cavolo ho combinato)
http://imageshack.us/a/img198/9985/firefoxpv.png
Anche qui sembra esserci un problema di posizionamento del video (per ora non mi interessa la codifica del file video)
Negli ultimi due browser inoltre, e qui però ancora non mi ci sono impegnato, il blocco destro non permette la visualizzazione di tutto il testo ma viene tagliato.
Il problema reale comunque è quello del posizionamento del video... Come potrei fare?
Allego il codice CSS e HTML. Siate buoni dato che sto cominciando ora a studiare queste code.
@font-face{
font-family: hand;
src: url('../fonts/Handwriter.ttf');
}
body, html{
margin: 0;
padding: 0;
background-color: black;
color: white;
}
li{
margin: 20px 0;
list-style: none;
}
ul{
margin-top: 40%;
}
aside{
position: fixed;
width: 20%;
height: 100%;
}
aside.right{
right: 0;
top: 0;
}
aside.right p{
text-align: justify;
padding: 0 4%;
margin-top: 40%;
}
video{
position: absolute;
left: 20%;
width: 60%;
max-height: 100%;
z-index: 10;
}
header{
position: absolute;
width: 100%;
z-index: 20;
text-align: center;
}
header h1{
font-family: hand;
font-size: 3em;
}
<!DOCTYPE html>
<?php require 'scripts/utils.php' ?>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>NEXT</title>
<link rel="stylesheet" href="stylesheet/style.css"/>
</head>
<header>
<h1>Conte Mascetti</h1>
</header>
<aside class='left'>
<ul>
<?php
echo linka('Home', "home");
echo linka('Contacts', "conta");
echo linka('Maps', "map");
echo linka('Jobs', "home");
?>
</ul>
</aside>
<video controls>
<source src='video/Emma.mp4' />
</video>
<aside class='right'>
<p><?php echo lorem(6) ?></p>
</aside>
</body>
</html>
Sto facendo delle prove su una singola pagina con due blocchi laterali fissi e un video centrale. Il blocco di sinistra contiene una lista non ordinata con dei link (che ovviamente non linkano a nulla) mentre il blocco di destra contiene del testo. Il video è un mp4 e per ora non ha alcuna importanza. L'header invece contiene semplicemente il titolo della pagina.
Questa è il risultato su Google Chrome (ho provato anche su un computer Windows con Explorer - non ricordo la versione - e per ora sembra un risultato uguale a Chrome)
http://imageshack.us/a/img694/9493/chromegy.png
Sembrano non esserci problemi
Questa invece è il risultato su Opera
http://imageshack.us/a/img546/7387/operaw.png
E qui invece i problemi ci sono. Il video sembrerebbe avere un margine superiore negativo e quindi viene coperto quasi completamente dalla barra
Questo per quanto riguarda firefox (chiedo scusa per le dimensioni dello screeshot non so che cavolo ho combinato)
http://imageshack.us/a/img198/9985/firefoxpv.png
Anche qui sembra esserci un problema di posizionamento del video (per ora non mi interessa la codifica del file video)
Negli ultimi due browser inoltre, e qui però ancora non mi ci sono impegnato, il blocco destro non permette la visualizzazione di tutto il testo ma viene tagliato.
Il problema reale comunque è quello del posizionamento del video... Come potrei fare?
Allego il codice CSS e HTML. Siate buoni dato che sto cominciando ora a studiare queste code.
@font-face{
font-family: hand;
src: url('../fonts/Handwriter.ttf');
}
body, html{
margin: 0;
padding: 0;
background-color: black;
color: white;
}
li{
margin: 20px 0;
list-style: none;
}
ul{
margin-top: 40%;
}
aside{
position: fixed;
width: 20%;
height: 100%;
}
aside.right{
right: 0;
top: 0;
}
aside.right p{
text-align: justify;
padding: 0 4%;
margin-top: 40%;
}
video{
position: absolute;
left: 20%;
width: 60%;
max-height: 100%;
z-index: 10;
}
header{
position: absolute;
width: 100%;
z-index: 20;
text-align: center;
}
header h1{
font-family: hand;
font-size: 3em;
}
<!DOCTYPE html>
<?php require 'scripts/utils.php' ?>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>NEXT</title>
<link rel="stylesheet" href="stylesheet/style.css"/>
</head>
<header>
<h1>Conte Mascetti</h1>
</header>
<aside class='left'>
<ul>
<?php
echo linka('Home', "home");
echo linka('Contacts', "conta");
echo linka('Maps', "map");
echo linka('Jobs', "home");
?>
</ul>
</aside>
<video controls>
<source src='video/Emma.mp4' />
</video>
<aside class='right'>
<p><?php echo lorem(6) ?></p>
</aside>
</body>
</html>