Hi guys, I'm not really advanced in html or css, and I'm having a problem that is really getting me out of my nerves. So I redesigned my portfolio site with dreamweaver as my main html css editor. But with the Web developer toolbar I modified things to take the final choises.
In fact my site is just a html file with a flash file with my portfolio, and a modal box with the contact form.
The problem I'm having is that my wrapper background is not showing up, this background is the same i'm using in the modal box, but it isn't showing up there either. And some other images i put on the modal box are just not there. And my footer background isn't showing either, at first i thought the files weren't uploaded correctly but i direct link to one of themm and they are uploaded.
I tried to solve this problem but didn't make it, in dreamweaver preview in Firefox, Safari, IE and Flock my site looks fine but in the real network doesn't work.
PS: my site is in spanish, because it's my native language. but i think that doesn't matter because the html and css are universal code.
my site is www.aleksey.net23.net hosted free in 000webhost.
and here is the Html. validated in w3c
and the css also validated only with warnings of CSS3 not supported in some browsers or versions of CSS
it should have a lot of mistakes but thats why i'm asking for help.
PD: Something curious is that the header background and another png in the header are showing perfectlly.
PROBLEM SOLVED, MY MISTAKE IN THE CSS CODE LOL.
In fact my site is just a html file with a flash file with my portfolio, and a modal box with the contact form.
The problem I'm having is that my wrapper background is not showing up, this background is the same i'm using in the modal box, but it isn't showing up there either. And some other images i put on the modal box are just not there. And my footer background isn't showing either, at first i thought the files weren't uploaded correctly but i direct link to one of themm and they are uploaded.
I tried to solve this problem but didn't make it, in dreamweaver preview in Firefox, Safari, IE and Flock my site looks fine but in the real network doesn't work.
PS: my site is in spanish, because it's my native language. but i think that doesn't matter because the html and css are universal code.
my site is www.aleksey.net23.net hosted free in 000webhost.
and here is the Html. validated in w3c
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<title>Alexei Prada Nagai | Portafolio Web</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="contact.js">
</script>
<script src="../../Scripts/swfobject_modified.js" type="text/javascript">
</script>
</head>
<body>
<div id="wrapper">
<div id="header_wrap">
<div id="header"></div>
</div>
<div id="main">
<div id="portfolio"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="650" id="FlashID" title="Portafolio"><param name="movie" value="preloader.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- Esta etiqueta param indica a los usuarios de Flash Player 6.0 r65 o posterior que descarguen la versión más reciente de Flash Player. Elimínela si no desea que los usuarios vean el mensaje. -->
<param name="expressinstall" value="../../Scripts/expressInstall.swf" />
<!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocúltela a IE mediante IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="preloader.swf" width="1000" height="650"><!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="../../Scripts/expressInstall.swf" />
<!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. -->
<div>
<h4>El contenido de esta página requiere una versión más reciente de Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>--></object> <!--<![endif]--></object></div>
<div id="quotes">
<div id="intro"></div>
<div id="quote1">
<p>"La mirada llega primero que las palabras. Los niños miran y reconocen las cosas antes de poder hablar"</p>
<h2>- John Berger, Modos de Ver</h2>
</div>
<div id="quote2">
<p>"El diseño es la inteligencia hecha visible"</p>
<h2>- Alina Wheeler</h2>
<p>"Menos es más"</p>
<h2>- Robert Browning</h2>
</div>
<div id="container">
<p><a class="modal" href="#"><img src="Images/contact_box.png" alt="Contact" width="300" height="272" /></a>.</p>
</div>
</div>
</div>
<div id="contact">
<div id="social">
<div id="email2">
<h3>Email</h3>
<p>alexei.nagai@gmail.com</p>
<h3>Redes Sociales</h3>
<p><a href="http://www.facebook.com/alexei.nagai" target="_blank"><img src="Images/FB.png" width="42" height="42" alt="Facebook" /></a> <a href="http://twitter.com/#!/AlekseyNa" target="_blank"><img src="Images/twit.png" width="42" height="42" alt="Twitter" /></a></p>
</div>
</div>
<div id="close"></div>
<div id="contact_header"></div>
<p class="success">Gracias! Tue mensaje ha sido enviado.</p>
<form action="send.php" method="post" name="contactForm" id="contactForm">
<p><input name="name" id="name" type="text" size="30" value="Nombre" /></p>
<p><input name="email" id="email" type="text" size="30" value="Email" /></p>
<p>
<textarea name="comment" id="comment" rows="5" cols="40">
Mensaje
</textarea></p>
<p><input type="submit" id="submit" name="submit" value="" /></p>
</form>
</div>
<div id="mask"></div>
<div id="footer_wrap">
<div id="footer">
<p>Copyright © 2011 | Alexei Prada Nagai</p>
</div>
</div>
</div>
<!-- [url]www.000webhost.com[/url] Analytics Code -->
<script type="text/javascript" src="http://analytics.hosting24.com/count.php">
</script><noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript><!-- End Of Analytics Code -->
</body>
</html>
Code:
/* CSS Document */
body {
margin:0px;
padding: 0px;
}
#wrapper {
width: 100%;
margin-top: 0px;
margin:auto;
background: url(images/bgwrap.jpg);
}
#header_wrap{
position: relative;
width: 100%;
height:200px;
margin:auto;
background-image: url(Images/bkgd.png);
background-repeat: repeat-x;
background-position:center center;
}
#header{
width:1100px;
height:200px;
margin:auto;
background-image: url(Images/alexei.png);
background-repeat: no-repeat;
background-position: center center;
}
#main {
width:1100px;
margin:auto;
overflow:hidden;
clear:none;
}
#portfolio{
width:1000px;
height:650px;
margin:auto;
}
#quotes{
height:350px;
width:1100px;
margin:auto;
}
#intro {
width:1100px;
height:25px;
}
#quote1{
float:left;
width:300px;
height:300px;
margin-bottom:25px;
margin-left:50px;
}
#quote2{
float:left;
width:300px;
height:300px;
margin-bottom:25px;
margin-left:50px;
}
#quote1 p{
font-family:"garamond", "Times New Roman", Times, serif;
font-style:italic;
padding: 20px;
font-size:25px;
margin-top:0;
}
#quote2 p{
font-family:"garamond", "Times New Roman", Times, serif;
font-style:italic;
padding: 20px;
font-size:25px;
margin-top:0;
}
#quote3 p{
font-family: "calibri", Arial, Helvetica, sans-serif;
font-size:15px;
margin-top:0;
text-align:right;
}
#quotes h2{
font-family: "calibri", Verdana, Geneva, sans-serif;
font-size:20px;
padding:10px;
color: #003366;
text-shadow: 0px 2px 1px white;
margin-top:0;
line-height:2px;
text-align:right;
}
#footer_wrap{
background-image: url(images/footerbg.png);
background-repeat: repeat-x;
background-position:center center;
height:250px;
width:100%;
line-height:2em;
}
#footer{
height:100px;
width:1100px;
margin:auto;
}
#footer p{
font-family:helvetica, arial, verdana, sans-serif;
font-size:12px;
text-align:center;
color:white;
margin-top:0;
padding-top:15px;
text-shadow: 0px 2px 1px black;
}
/* CSS Contact Form */
#container {
float:left;
width:300px;
height:300px;
margin-bottom:25px;
margin-left:50px;
border:none;
}
/*contact form*/
#mask {
background-color:#000;
display:none;
left:0;
position:absolute;
top:0;
width:100%;
height:1450px;
z-index:9000;
}
#contact {
background:url(images/bgwrap.jpg);
display:none;
left:50%;
margin-left:-300px;
position:absolute;
top:90px;
width:600px;
z-index:9999;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding:20px 20px 0px;
}
#social {
width:200px;
position:absolute;
left:370px;
top:120px;
padding-left:30px;
border-left: 2px solid #663333;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#email2 {
font-family: Verdana, Geneva, sans-serif;
font-size:10pt;
font-style:italic;
text-align:left;
color: #663333;
}
#email2 h3 {
font-family: "Courier New", Courier, monospace;
font-size:14pt;
font-style:normal;
}
#close {
background:url(images/close.png) no-repeat right;
cursor:pointer;
height:24px;
width:24px;
position:relative;
left:605px;
bottom:30px;
}
#contact_header {
background:url(images/contact_header.png) no-repeat left;
font-family:arial, sans-serif;
font-size:30px;
font-weight:700;
line-height:50px;
padding:5px 5px 10px 60px;
height:40px;
}
/* form components */
input,textarea {
border:1px solid silver;
background-color:#fff;
color:#404040;
font-size:10px;
font-family:Verdana, Arial, sans-serif;
text-transform:regular;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin:10px 0;
padding:10px;
}
input:hover[type=text],input:focus[type=text],textarea:hover,textarea:focus {
background-color:#E0E0E0;
border:1px solid #000;
}
input[type=text],textarea {
width:300px;
}
#submit {
border:none;
width:181px;
height:54px;
background:url(images/submit.png);
}
#submit:hover {
cursor:pointer;
}
/* alert messages */
.success,.error {
color:#000;
display:none;
font-size:15px;
font-weight:700;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
padding:5px 10px 5px 10px;
margin-bottom: 10px;
}
.success {
background-color:#9F6;
border:1px solid #0F0;
width:300px;
}
.error {
background-color:#F66;
border:1px solid red;
width:300px;
}
it should have a lot of mistakes but thats why i'm asking for help.
PD: Something curious is that the header background and another png in the header are showing perfectlly.
PROBLEM SOLVED, MY MISTAKE IN THE CSS CODE LOL.
Comment