Witam.
Od niedawna zajmuję się css'em, do tej pory szło gładko, jednak dziś pojawił się pewien problem, z którym nie mogę się uporać.
Pracuję w Dreamweaver'ze CS6. Kiedy tam podglądam jak prezentuje się mój projekt to wszystko jest idealnie, jednak w momencie włączenia strony w dowolnej przeglądarce to elementy (konkretnie dwa) nie zachowują się tak jak powinny.
W Dreamweaver'ze menu jest idealnie dopasowane, mieści się w jednej linii, a w przeglądarce "rozjeżdża" się do dwóch. Kolejny problem ze zdjęciem. W programie jest na swoim miejscu, a kiedy przechodzę do przeglądarki pojawia się na swojej pozycji jednak po przeciwnej stronie dokumentu. Dodam, że nie może być to wina wymiarów strony, ponieważ po obu bokach zostaje spory (z 400px) margines. Dla lepszego zrozumienia mojego problemu wrzucam schematyczny rysunek całej sytuacji:
Prosiłbym o pomoc w rozwiązaniu mojego problemu. Z góry dziękuję i pozdrawiam.
0
0
Przy użyciu WYSIWYG? Coś więcej?
Poniżej zamieszczam kod:
-html
<!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" />
<meta http-equiv="content-language" content="pl" />
<title>2byy- officaial website</title>
<link href="css/o_nas.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="calosc">
<!--HEADER-->
<div id="header">
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="logo"border="0" /></a>
</div>
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="o_nas.html">O nas</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</div>
<!--Content-->
<div id="content">
<div id="zeszyt">
<div class="h1_content">
<p>O nas...</p>
</div>
<div class="txt_content">
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue.</p>
</div>
</div>
<div id="telefon">
</div>
</div>
<!--Footer-->
<div id="footer">
<div class="copy">
<p>Copyright 2012 by lorem.com! All rights reserved!</p>
</div>
<div class="name">
<p>Imię i nazwisko</p>
</div>
</div>
</div>
</body>
</html>
-css
@charset "utf-8";
@font-face {
font-family: "kuba_reczny";
src: url (../KUBA_reczny.ttf);
}
* {
margin: 0;
padding: 0;
}
body {
background: url(../images/bg.png) repeat;
color: #000;
font-family: "kuba_reczny";
}
#calosc {
width: 1020px;
margin: 0 auto;
}
#header {
width: 1020px;
height: 160px;
margin: 0 auto;
}
.logo {
margin-left: 111px;
margin-top: 14px;
width: 256px;
height: 156px;
float: left;
}
.menu {
width: 452px;
height: 161px;
float: right;
margin-top: 14px;
padding-top: 9px;
padding-right: 85px;
background: url(../images/menu_bg.png) no-repeat;
}
.menu ul {
list-style: none;
display: block;
padding-top: 60px;
padding-left: 40px;
}
.menu ul li {
display: inline;
padding-right: 120px;
}
.menu ul li a {
color: #000;
font-size: 24px;
font-family: "kuba_reczny";
text-decoration: none;
}
.menu ul li a:hover {
color: #F00;
text-decoration: underline;
}
#content {
width: 900px;
height: 524px;
margin-top: 83px;
margin-left: 117px;
}
#telefon {
position: relative;
z-index: 1;
right: 160px;
top: 20px;
width: 227px;
height: 271px;
background: url(../images/telefon.png);
}
#zeszyt {
float: left;
width: 793px;
height: 524px;
background: url(../images/o_nas_bg.png) no-repeat;
}
.h1_content {
width: 285px;
height: 55px;
font-size: 48px;
padding-left: 420px;
padding-top: 135px;
font-family: "kuba_reczny";
}
.txt_content {
width: 595px;
height: 226px;
padding-top: 75px;
margin-left: 98px;
font-size: 24px;
font-family: "kuba_reczny";
}
#footer {
width: 1020px;
height: 59px;
background: url(../images/footer_bg.png);
margin-top: 190px;
}
.copy {
font-family: "kuba_reczny";
font-size: 18px;
padding-top: 20px;
padding-left: 30px;
float: left;
}
.name {
font-family: "kuba_reczny";
font-size: 18px;
padding-top: 20px;
float: right;
padding-right: 30px;
}
Pozdrawiam
0
Mógłby mi ktoś pomóc?
W dalszym ciągu nie mogę się z tym uporać, przez co moja nauka css stoi w miejscu.
Pozdrawiam :)
0
Pracuję w Dreamweaver'ze CS6.
Chyba znalazłem problem.
I nie, nie "uczysz" się css. I "pozycjonowanie" dotyczy trochę czegoś innego, ale rozumiem skrót myślowy.
0
Co ma program do problemu? Winny jest kod (pytanie tylko, w którym miejscu popełniłem błąd).
Oczywiście pisząc pozycjonowanie miałem na myśli "ustawianie" poszczególnych elementów, a nie pozycjonowanie w wyszukiwarkach ;)
Pozdrawiam
0
Z menu już się uporałem. Pozostał tylko problem tego obrazka.
Ma ktoś jakiś pomysł dlaczego tak się dzieje?
Pozdrawiam.