Problem with localhost? or with code?

#1
xle_camry

Posted 28 June 2011 - 06:57 AM

Programmer

Members
141 posts

Dear friends! I have a problem.
I made a static web site. The problem is:
When I open my site.html in Explorer and Firefox, everything is ok.
But when I open it by localhost like: localhost\mydesign\site.html everything becomes unordered, texts dont fit to divs. My divs are absolute.
I dont understand why when i open with server through localhost it becomes unordered?
How it will be in the internet if I upload my site? What should I believe to?
Thanks.

#2
WingedPanther

Posted 28 June 2011 - 07:42 AM

A spammer's worst nightmare

Moderators
16,831 posts

Location:Upstate, South Carolina
Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

Are there any external CSS/JS files that you are linking in?

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

#3
SensiblePeanut

Posted 28 June 2011 - 09:35 AM

Newbie

Members
1 posts

I believe I've had a problem similar to this. I assume you're using Apache. I could access my PHP files by visiting http://localhost/project_name/..., but my images, CSS files and JS files were looked for in http://localhost/.../.

I'm not even sure why it works, but someone told me to do this and it worked.

I was told to add a virtual host to Apache by adding this to my [/b]httpd-vhosts.conf[/b] file:

<VirtualHost 127.0.0.1:80>

	UseCanonicalName Off

	VirtualDocumentRoot full_path_to_htdocs_folder/%-2/

</VirtualHost>

Then I had to map project_name.local to my hosts file.

Somehow it stopped removing the project_name folder from the URL, because it was no longer possible to go up a folder. I'm not sure if it works for you, but it's worth the try. It's not that much work.

#4
xle_camry

Posted 28 June 2011 - 10:42 AM

Programmer

Members
141 posts

Yes, of course, there is css file that i link. What can be my problem?

#5
WingedPanther

Posted 28 June 2011 - 11:31 AM

A spammer's worst nightmare

Moderators
16,831 posts

Location:Upstate, South Carolina
Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

My guess is the way you're linking it. Since you haven't shown us the HTML code, it's really hard to say for sure. It could also be your web-server configuration.

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

#6
xle_camry

Posted 28 June 2011 - 08:39 PM

Programmer

Members
141 posts

Dear Winged Panther, can it be the reason that i use "position:absolute;" divs? Because if texts become more, texts go down the div and they cant be seen. (Through localhost)
What are the difference among absolute, relative and fixed positions?

#7
mnagaria

Posted 29 June 2011 - 12:37 AM

Newbie

Members
6 posts

Hi,

do not think the position can be an issue in this case. Reason being if it was the issue it would not work in any case. linking to external css file which are not in your website directory might be an issue if they are not loading properly. Can you post a sample of your html here for us to review? Also are you using Apache or IIS?

codecall.net

#8
WingedPanther

Posted 29 June 2011 - 04:25 AM

A spammer's worst nightmare

Moderators
16,831 posts

Location:Upstate, South Carolina
Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

I wouldn't think that's the issue. absolute, relative, and fixed refer to how the div's are arranged on the page. As I said before, without seeing the code, it'll be really hard to figure out why it renders differently one way vs the other.

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

#9
xle_camry

Posted 29 June 2011 - 05:32 AM

Programmer

Members
141 posts

mnagaria and WingedPanther, I also tried to open in Opera - it works. The only problem is that it doesnt work in Mozilla Firefox. Ok, now I will paste my code.

#10
xle_camry

Posted 29 June 2011 - 05:40 AM

Programmer

Members
141 posts


<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>my title</title>

<link href="stylesheets/styles.css" type="text/css" rel="stylesheet" />


</head>


<body>

<div class="page">

<div class="header">

<div class="topmenu">

<ul>

<li><a href="index.html">Baş sahypa</a></li>

<li><a href="services.html">Hyzmatlarymyz</a></li>

<li><a href="#">Biz hakda</a></li>

<li><a href="contactus.html">Habarlaşmak</a></li>

</ul>


</div>

</div>


<div class="leftmenu">

<ul>

<li><a href="index.html">Baş sahypa</a></li>

<li class="selected"><a href="services.html">Hyzmatlarymyz</a></li>

<li><a href="#">Biz hakda</a></li>

<li><a href="contactus.html">Habarlaşmak</a></li>

</ul>

</div>


<div class="content">

<br /> 

  <ol>

  <li> <b>Web saýtlary taýýarlamak (Web design)</b> </li> <br />

  <ul>

  <li> Web saýt - internetdäki ýüzüňiz. Ökde programmistlerimiz we web dizaýnerlerimiz<br /> 

  iş ýerleriňiz, kärhanadyr-edaralaryňyz üçin, şahsy sahypalaryňyz üçin ýokary hilde<br /> 

  we sada tärde web saýtlary taýýarlap bererler. Web saýtlary islendik görnüşde we<br />

  iň gysga möhletde taýýarlap bereris. </li> 

  </ul>

  <br /> <br />

  <li> <b>Surat we Wideo işleri (Photo and Video design)</b> </li> <br />

  <ul>

  <li> Ýatdan çykmajak pursatlaryňyzy bezemek, portret, gutlag hatlary, çakylyk ýasamak, <br />

    maşgala suratlaryňyzy bezemek hem-de foto klip we wideo işlerini dizaýnerlerimiz  <br /> 

   soňky çykan maksatnamalarda işläp taýýarlaýarlar.  </li>

  </ul> 

  <br /> <br />

  <li><b> Kompýuter hyzmatlary</b> </li> <br />

  <ul>

  <li> "Windows" ulgamyny gurmak, kompýuterlere gerek maksatnamalary gurmak we <br />

    "JAVA" maksatnamasynda kiçi programmalar ýazmak ýaly işleri hödürleýäris.  </li>

  </ul> 

  </ol>


</div>


<div class="contentphoto"><img src="images/services.jpg"></div>


<div class="footer">

<a href="#">Baş sahypa</a> | <a href="#">Hyzmatlarymyz</a> | <a href="#">Biz hakda</a> |  <a href="#">Habarlaşmak</a> <br /> 

<br />

Ähli hak we hukuklary goraglydyr © 2011 <br />

My company <br />

Habarlaşmak üçin telefon: 252525; <br/>

E-mail: info@mycompany.com



</div>

</div>


</body>

</html>

#11
xle_camry

Posted 29 June 2011 - 05:42 AM

Programmer

Members
141 posts

My css:


html, body{

	margin: 0;

	padding: 0;

}

body {

	

	text-align: center;

	font: 11px verdana, arial, sans-serif;

	color: #74653D;

	background-color: #f4f6fb;

	padding-bottom: 10px;

	padding-top: 31px;

}

.topmenu ul{

	margin: 0 200px;

	padding: 0;

	width: 540px;

	list-style:none;

	float:left;

}


.topmenu ul li{

display: block;

background-color:#000066;

float:left;

border:thin;

border-style: solid;

}


.topmenu ul a{

display:block;

padding: 0 2em;

line-height: 2.1em;

text-decoration: none;

color:#FFFFFF;

}

ul a:hover{

text-decoration:underline;


}

.page {

	position:absolute;

	left:86px;

	top:22px;

	width:1000px;

	height:840px;

	z-index:1;

	margin: 0;

	padding: 0;

	background-color:#FFFFFF;

	border-top-width: thin;

	border-right-width: thin;

	border-bottom-width: thin;

	border-left-width: thin;

	border-top-style: dashed;

	border-right-style: dashed;

	border-bottom-style: dashed;

	border-left-style: dashed;

}

.header {

	position:absolute;

	left:10px;

	top:7px;

	width:980px;

	height:190px;

	z-index:2;

	margin: 0;

	padding: 0;

	border-top-width: thin;

	border-right-width: thin;

	border-bottom-width: thin;

	border-left-width: thin;

	border-top-style: dashed;

	border-right-style: dashed;

	border-bottom-style: dashed;

	border-left-style: dashed;

	background-image: url(../images/head.jpg);

}

.topmenu {

	position: absolute;

	left:0px;

	margin: 0;

	padding: 0;

	top:199px;

	width:980px;

	height:26px;

	z-index:3;

	border-top-width: thin;

	border-right-width: thin;

	border-bottom-width: thin;

	border-left-width: thin;

	border-top-style: dashed;

	border-right-style: dashed;

	border-bottom-style: dashed;

	border-left-style: dashed;

}

.leftmenu {

	position:absolute;

	left:10px;

	top:241px;

	width:200px;

	height:410px;

	z-index:4;

	border-top-width: thin;

	border-right-width: thin;

	border-bottom-width: thin;

	border-left-width: thin;

	border-top-style: dashed;

	border-right-style: dashed;

	border-bottom-style: dashed;

	border-left-style: dashed;

}

.leftmenu ul {

    margin: 0px;

    padding: 20px;

    list-style-type: none;

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size:12px;}

	

	.leftmenu ul a {

	display:block;

	border: 0.5px outset;

	width:160px;

	height:30px;

	line-height:30px;

	color:#fff;

	text-decoration:none;

	text-indent:2px;

	background-repeat: no-repeat;

	background-image: url(../images/lmenu.gif);

}

.leftmenu ul li{

display: block;

float:left;

border:thin;

border-style: solid;

background-color: #000066;

}

.leftmenu a:hover, .selected a{

  background-position: right;

}

	

	

.content {

	position: absolute;

	left:221px;

	top:241px;

	width:580px;

	height:410px;

	z-index:5;

	text-align: left;

	font: 11px verdana, arial, sans-serif;

	color: #000000;

	border-top-width: thin;

	border-right-width: thin;

	border-bottom-width: thin;

	border-left-width: thin;

	border-top-style: dashed;

	border-right-style: dashed;

	border-bottom-style: dashed;

	border-left-style: dashed;

}

.contentindx {

	position: absolute;

	left:221px;

	top:241px;

	width:770px;

	height:410px;

	z-index:5;

	text-align: left;

	font: 11px verdana, arial, sans-serif;

	color: #000000;

	border-top-width: thin;

	border-right-width: thin;

	border-bottom-width: thin;

	border-left-width: thin;

	border-top-style: dashed;

	border-right-style: dashed;

	border-bottom-style: dashed;

	border-left-style: dashed;

}

.content ul li {

    line-height:25px;

	color:#111111;

	text-decoration:none;

}

.contentphoto {

	position:absolute;

	left:810px;

	top:241px;

	width:181px;

	height:410px;

	z-index:2;

	border-top-width: thin;

	border-right-width: thin;

	border-bottom-width: thin;

	border-left-width: thin;

	border-top-style: dashed;

	border-right-style: dashed;

	border-bottom-style: dashed;

	border-left-style: dashed;

}

.footer {

	position:absolute;

	float:none;

	left:11px;

	top:661px;

	width:980px;

	height:143px;

	z-index:6;

	text-align:center;

	color:#FFFFFF;

	padding: 15px 0;

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size:12px;

	line-height:1.5em;

	background-color:#000066;

	border-top-width: thin;

	border-right-width: thin;

	border-bottom-width: thin;

	border-left-width: thin;

	border-top-style: dashed;

	border-right-style: dashed;

	border-bottom-style: dashed;

	border-left-style: dashed;

}

.footer a {color:#FFFFFF;

text-decoration:none;}

.footer a:hover {color:#FFFFFF;

text-decoration:underline;}

#12
WingedPanther

Posted 29 June 2011 - 06:10 AM

A spammer's worst nightmare

Moderators
16,831 posts

Location:Upstate, South Carolina
Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

Have you looked at it with the HTML validator plugin? It's giving 6 validation errors, that may be affecting the rendering in FF.

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog