|
|||||||
|
|
|
 |
|
|
Strumenti |
12-05-2013, 20:48
|
#1 |
|
Senior Member
Iscritto dal: Oct 2004
Messaggi: 1945
|
[CSS/HTML5] - Posizionamento elementi
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)  Sembrano non esserci problemi Questa invece è il risultato su Opera  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)  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. Codice:
@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;
}
Codice:
<!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>
|
|
|
|
|
| Strumenti | |
|
|
Tutti gli orari sono GMT +1. Ora sono le: 16:30.
