buonasera a tutti,
ho da poco iniziato a studiare html e css e sto provando a creare l'homepage di un sito. Tuttavia, ho un problema: la pagina web non scorre e i div che sotto l'apertura del browser non sono visibili.
Ho letto le precedenti discussioni sul tema e ho cercato di ricavarne degli spunti per risolvere il problema, ma senza successo. Mi potete dare una mano?
Di sotto il codice:
questo il CSS:
ho da poco iniziato a studiare html e css e sto provando a creare l'homepage di un sito. Tuttavia, ho un problema: la pagina web non scorre e i div che sotto l'apertura del browser non sono visibili.
Ho letto le precedenti discussioni sul tema e ho cercato di ricavarne degli spunti per risolvere il problema, ma senza successo. Mi potete dare una mano?
Di sotto il codice:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Il mio sito</title>
<link rel="stylesheet" type="text/css" href="style2.css"/>
<link href="https://fonts.googleapis.com/css?family=Hind|Play" rel="stylesheet">
</head>
<body>
<div id="header">
<div class="wrap">
<div id="testo-header">
<h1>Mio Sito</h1>
</div>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#" class="selected">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">Contatti</a></li></li>
</ul>
</div>
<div id="main">
<div class="wrap">
<div id="title">
<a href="#" class="selected">B</a>
<ul id="social">
<li><img src="..." width="25" height="25"></li>
<li><img src="..." width="25" height="25"></li>
<li><img src="..." width="25" height="25"></li>
</ul>
<h2>Esempio</h2>
<img src="..." alt="esempio">
</div>
<div id="content">
<div id="subcontent1">
<h3>Sottoesempio</h3>
<ul id="ingr">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
</div>
<div id="comments"></div>
</div>
<div id="aside">
</div>
</div>
</div>
<footer>
</footer>
</body>
</html>questo il CSS:
HTML:
*{margin: 0; box-sizing: border-box}
body {
height: 100%;
}
h1, h2, h3, h4, h5 {
font-family: sans-serif;
color: #c76161;
}
h1 {
font-size: 2.2em;
font-weight: bold;
}
h2 {
font-size: 2em;
padding-bottom: 15px;
}
h3 {
font-size: 1.4em;
padding-bottom: 15px;
border-bottom: 1px solid #888888;
}
.wrap {
width: 59em;
margin: 0 auto;
height: 100%
}
a {
color: #3a7777;
text-decoration: none;
font-family: sans-serif;
}
a:hover, a.selected {
color: #F5AF33;
}
img.resize {
width: 944px;
}
#header {
background: url("...") 100% no-repeat;
background-position: center center;
position: fixed;
right: 0;
left: 0;
top:0;
display: block;
width: 100%;
height: 14.37em;
}
#testo-header{
background-color: white;
height: 4.375em;
width: 50%;
position: absolute;
top: 5em;
left: 0;
text-align: center;
line-height: 4.375em;
z-index: 2;
padding-left: 8em;
}
#testo-header:before {
content: '\0020';
background-image: url(...);
background-repeat: no-repeat;
width: 100%;
height:5.625em;
display:block;
position: absolute;
left: 11.25em;
z-index: -1;
}
ul#nav {
background-color: white;
height: 70px;
width: 50%;
position: absolute;
top: 80px;
right: 0;
font-family: 'Hind', sans-serif;
font-size: 1em;
font-weight: bold;
list-style-type: none;
line-height: 35px;
display: block;
z-index: 5;
}
ul#nav li {
float: left;
text-align: center;
vertical-align: text-top;
padding: 20px;
}
#nav strong.active, ul#nav li a:hover {
color: #F5AF33;
}
#main {
background-color: white;
position: relative;
top:1em;
}
#title {
height: 15em;
position: absolute;
border-top: 1px solid #888888;
width: 944px;
margin: 0 auto;
line-height: 36px;
padding-top: 20px;
padding-bottom: 20px;
}
ul#social {
list-style: none;
display: block;
position: absolute;
top: 20px;
right: 0;
}
ul#social li {
padding: 3px;
float: left;
}
#content {
background-color: white;
display: block;
position: relative;
width: 600px;
height: 400px;
top: 350px;
}
#subcontent1 {
min-height: 300px;
position: relative;
}
Ultima modifica di un moderatore:
