Skocz do zawartości
Gibek

Kodowanie Layoutu

Przez Gibek, w xHTML / CSS / Javascript

Polecane posty

Gibek    0

Gibek
Napisano

Witam w ramach ćwiczeń koduje sobie layout ale w trakcie pracy zauważyłem dziwny błąd a mianowicie na komputerze stacjonarnym ( monitro 22 cale ) oraz laptopie ( 15,6 ) nie ma żadnego problemu z wyświetlaniem strony natomiast na telefonie jest dziwna przerwa po prawej stronie i nie mam pojęcia gdzie zrobiłem błąd i czemu tylko na telefonie jest błąd.

Proszę o pomoc, stronę online można podejrzeć na www.gibek.ct8.pl

 

Zdjęcie z telefonu w załączniku 

<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Ćwiczenia</title>
<meta http-equiv="Content-Language" content="pl" />

<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">



</head>

<body>
<div id="top"> 

				<div id="nav">
                <ul>
                	<li><a href="#" class="activ"> Home  </a></li>
                    <li><a href="#"> Services </a></li>
                    <li><a href="#"> Portfolio  </a></li>
                    <li><a href="#"> Blog </a></li>
                    <li><a href="#"> Hire me </a></li>
               </ul>
               
               <img src="img/logo.png" alt="" />
               
               <div id="slid"> <a href="#"> View my work  </a> </div>
               
				</div>
                
</div>

<div id="service">

 <div id="serwis">
   
<!-- Kolumna 1  --> 
   <div id="web-design"> 
   
   <img src="img/1.png" alt="" /> 
   
   <p>Web Desing</p> 
   
   <div id="txt">  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dictum metus nec nunc consectetur dapibus. Donec tristique ornare tempor. . </div>
   
    </div>

<!-- Kolumna 2  -->     
     <div id="mobile-design"> 
   
   <img src="img/2.png" alt="" /> 
   
   <p>Mobile Desing</p> 
   
   <div id="txt">  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dictum metus nec nunc consectetur dapibus. Donec tristique ornare tempor. . </div>
   
    </div>





 </div>


</div>

<div id="portfolio"> 

<div id="txt-area1"> 

<p>Bartłomiej Dałek</p>
<br />
<p class="in"> 30.08.2013</p>
<br /><br />

<div id="kol">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis mauris, iaculis eget dapibus mollis, sodales eu lacus. Aenean commodo in turpis et laoreet. Suspendisse non faucibus erat, quis tincidunt sem. Donec semper eros posuere, fringilla leo sed, bibendum est. Nunc feugiat orci a tellus condimentum, non ullamcorper neque luctus. In nulla tortor, venenatis vitae vestibulum sit amet, tincidunt elementum ipsum.</p>
</div>
<br /><br />
<p class="in">Klient :</p>
<br />
<p > Joe Tree </p>
<br />
<p class="in">Zadanie :</p>
<br />
<p > Kodowanie Layoutu </p>

<img src="img/iphone5.png" alt="" id="iphone" />

			</div>

</div>

<div id="hello"> </div>


</body>
</html>


#top { background:url(../img/header.jpg); height:660px;}

#nav { width:950px; margin:0 auto;}

#nav ul { margin:0; padding: 50px 0; float:right; }

#nav ul li { display:inline; list-style: none; padding:10px; }

#nav ul li a { text-decoration:none; color:#000;  transition-duration: 1s; color:#FFF;}

.activ { font-weight:bold; }

#nav > img {position:absolute; margin-top:50px;}

#slid { background:url(../img/sider.png); width:794px; height:390px; position:absolute; margin-top:129px; }

#slid a { text-decoration:none; color:#FFF; font-weight:bold; display:block; position:absolute; top:347px; left:33px; font-size:17px; transition:1s;}

#slid a:hover { color:#F00;}

#service { background:#FFF; height:400px; }

#serwis { width:950px; margin:0 auto; margin-top:200px; }

#web-design { font-size:31px;  font-family: 'Open Sans Condensed', sans-serif;}

#web-design p { display:block; position:absolute; margin-left:80px; margin-top:-55px;}

#txt {width:300px; font-size:22px; margin-left:80px; }

#mobile-design { font-size:31px;  font-family: 'Open Sans Condensed', sans-serif; margin-left:550px; margin-top:-178px;}

#mobile-design p { display:block; position:absolute; margin-left:80px; margin-top:-55px;}

#portfolio { height:650px; background:rgba(204,204,204,0.5);}

#txt-area1 { width:950px; margin:0 auto; padding:100px;}

#txt-area1 p {font-family: 'Lato', sans-serif; font-size:19px;}
.in { color:rgba(153,153,153,0.6); font-size:1px;}

#kol { width:500px; font-family: 'Open Sans Condensed', sans-serif;}

#iphone { display:block;  float:right;   margin-top:-530px;}

#hello { height:700px; background:#FFF;}

post-21633-0-76457700-1377726194_thumb.png

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

GyniO    10

GyniO
Napisano

Łatwiej byłoby gdybyś dał dostęp via www.

 

Mało komu się będzie chciało tworzyć pliki i to sprawdzać...

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Gibek    0

Gibek
Napisano

dzięki niestety to rozwiązanie nic nie dało, ale usiadłem i w końcu rozwiązałem problem który był banalny ( jak go znalazłem :P ) mianowicie do wyśroddkowania #txt-area1 użyłem paddingu który był odpowiedzialny za całe zdarzenie :)

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się
Przejdź do listy tematów xHTML / CSS / Javascript
×