Brak części strony

0

Witajcie,
robię swoją pierwszą stronę w html/css i jak to na początku bywa mam problem. Po ostylowaniu całego headera nie ma go po wrzuceniu strony na serwer.

#header {
	width: 980px;
	height: 115px;
	background-color: #FFF;
	box-shadow: #000 0 1px 8px;
}
.logo {
	width: 154px;
	height: 53px;
	margin-top: 33px;
	margin-left: 24px;
	float: left;
}
.menu {
	display: block;
	width: 685px;
	height: 18px;
	margin-top: 60px;
	float: left;
	text-transform: uppercase;
	font-size: 14px;
	font-family: "questrial";
}

Menu jeszcze nie jest do końca gotowe, lecz nie zmienia to faktu, że logo powinno być widoczne. Jeżeli będzie potrzeba wstawię resztę kodu (czy to html czy css). Pozdrawiam i serdecznie dziękuję za pomoc.

0
Dragones napisał(a):

Jeżeli będzie potrzeba wstawię resztę kodu (czy to html czy css).

No, raczej by się przydał :] Dawaj html, który to css "obsługuje"... ;) I napisz, co to znaczy "nie widać loga". Białego prostokąta na białym tle nie widać...

Nie wiem czy to Ci pomoże, ale dobrze sobie czasem ustawiając elementy dać w stylach dla niego tymczasowo np. border: 1px solid red;, pozwala to dokładnie zobaczyć jak element się "rozkłada".

0

So... 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" />
<script type="text/javascript" src="coin-slider/jquery-1.4.2.js"></script>
<script type="text/javascript" src="coin-slider/coin-slider.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#coin-slider').coinslider({width: 980, height: 360, navigation: false, delay: 5000, effect: 'rain', hoverPause: true });
	});
</script>
<link rel="stylesheet" type="text/css" media="screen" href="style/style.css" />
<title>Wiatrak- klimatyzacje i wentylacje</title>
</head>
<body>
<!--HEADER-->
<div id="page">
<div id="header">
<!--LOGO-->
<div class="logo">
<img src="img/images/logo.png" alt="logo" />
</div>
<!--MENU-->
<div class="menu">
<ul>
<li><a href="#"><span>OFERTA</span></a></li>
<li><a href="#"><span>PRODUKTY</span></a></li>
<li><a href="#"><span>PROMOCJE</span></a></li>
<li><a href="#"><span>SERWIS</span></a></li>
<li><a href="#"><span>REFERENCJE</span></a></li>
<li><a href="#"><span>KONTAKT</span></a></li>
</ul>
</div>
</div>
<!--SLIDER-->
<div id='coin-slider'>
<img src='img/slider.png' />
<span>
Przykładowy opis
</span>
<img src='img/slide.png' />
<span>
Inny opis
</span>
<img src="img/slid.png" />
<span>
Opis
</span>
</div>

I reszta CSS:

@charset "utf-8";
/* CSS Document */
@font-face {
	font-family: "font";
	src: url(../font-regular.ttf) format('opentype');
}
* {
	margin: 0;
	padding: 0;
}
body {
	background: #FFF;
	color: #000;
	font-family: "questrial";
}
#page {
	width: 980px;
	margin: 0 auto;
}
<!--HEADER-->
#header {
	width: 980px;
	height: 115px;
	background-color: #FFF;
	box-shadow: #000 0 1px 8px;
}
.logo {
	width: 154px;
	height: 53px;
	margin-top: 33px;
	margin-left: 24px;
	float: left;
}
<!--SLIDER-->
.coin-slider { 
	overflow: hidden;
	zoom: 1; 
	position: relative; 
}
.coin-slider a { 
	text-decoration: none; 
	outline: none; 
	border: none; 
}
.cs-buttons { 
	font-size: 0px;
	padding: 10px; 
	float: left; }
.cs-buttons a {
	margin-left: 5px; 
	height: 10px; 
	width: 10px; 
	float: left; 
	border: 1px solid #B8C4CF; 
	color: #B8C4CF; 
	text-indent: -1000px; }
.cs-active { 
	background-color: #B8C4CF; 
	color: #FFFFFF; 
}
.cs-title { 
	width: 960px; 
	padding: 10px; 
	background-color: #6098b5; 
	color: #FFFFFF; 
	font-family: "font";
	font-size: 22px;
}

Precyzyjniej mówiąc sprawa wygląda tak: Nie ostylowałem jeszcze menu do końca jednak mimo wszystko na samej górze strony powinno być widoczne logo, a jego tam nie ma (slider podchodzi na samą górę- tak jakby cały header był nie obecny). Czy jest to wina tego menu? Chciałem zrobić proste menu (sam tekst, bez buttonów i szczerze powiem nie wiem jak się za to do końca zabrać :P).
BTW. Pod header'em nie ma również cienia.
Dziękuję za wszelką formę pomocy i serdecznie pozdrawiam.

1

Tak na szybko mała uwaga, sprawdź:

obrazek w logo ma postać: <img src="img/images/logo.png" alt="logo" />
obrazki w innych miejscach mają postać: <img src='img/slider.png' />

jesteś pewien, że ścieżka do obrazka logo jest poprawna? Nie za dużo o ten images?

jeszcze jedna uwaga: <!--SLIDER--> - nie rób tak w pliku css, to jest komentarz html-owski wybitnie, jeśli chcesz dodać kometarz w pliku css pisz to w ten sposób: /* SLIDER */

Zobacz: wpisałem ten kod bez tych komentarzy tutaj http://jsfiddle.net/5tV4E/ i wyświetlił mi cień, wyświetlił miejsce na obrazek logo, czyli wygląda na to, że te dwie uwagi powyżej i wszystko będzie grało...

0

Hej,
w dalszej części kodowania napotkałem na kolejne problemy.
a) chciałbym zrobić proste menu (sam tekst, bez buttonów) po prawej części strony, lecz kompletnie nie wiem jak się za to zabrać.
b) jak widać cień w headerze jest "naokoło" a chciałbym mieć go tylko na dole (tak aby nachodził na zdjęcia ze slidera).
c) pod sliderem są loga kilku firm i chciałbym je wypozycjonować idealnie na środku (wysokość pola na te loga wynosi 100px). Teraz pytanie czy muszę każde logo pozycjonować osobno (tzn. podawać margines górny, dolny itd) czy da się to jakoś z automatu zrobić? Każde logo chyba powinno mieć takie same wymiary, żeby było łatwiej to zrobić?

Kod: http://jsfiddle.net/W3eer/
Jeżeli potrzebne są jeszcze jakieś pliki/fragmenty kodu proszę o informację.

Bardzo proszę o pomoc i wyrozumiałość - każdy kiedyś zaczynał :)

Pozdrawiam.

1

a. google - wpisz css menu, setki, tysiące przykładów - do wyboru do koloru ;)
b. google - wpisz css shadow bottom only - daje np. dobrą odpowiedź tutaj: http://stackoverflow.com/questions/5460129/drop-shadow-only-bottom-css3 wraz z pokazanym działaniem: http://jsfiddle.net/UnsungHero97/ARRRZ/2/
c. nie wystarczy dla tego diva z logami firm dać text-align: center; - będą po środku? A dla wszystkich możesz ustawić jakąś regułę w css-ie je opisujące np #coin-slider img {margin: 10px;}, tak ustawiasz marginesy dla wszystkich obrazków znajdujących się w divie coin-slider

0

Serdecznie dziękuję za odpowiedź. Mam nadzieję, że to już ostatni problem jaki mam przy kodowaniu tego :)
Wyrównałem wszystkie loga firm tylko nie wiem jak zrobić aby zaczynały się one od samego początku, tzn. najpierw jest napis "montujemy..." a pod nim są loga. Chciałbym aby zaczynały się one tuż pod napisem, a nie obok niego (myślę, że screen najlepiej to zobrazuje)

Przechwytywanie.PNG

.support {
	width: 980px;
	height: 100px;
	padding-top: 16px;
	padding-left: 25px;
}
.support p {
	color: #4a4a4a;
	font-family: "font";
	font-size: 12px;
	float: left;
	width: 140px;
	height: 14px;
}
.support img {
	padding-right: 40px;
	text-align: center;
	margin-top: 20px;
}

Pozdrawiam

0

Czyli nie wyśrodkowane, ale od napisu? Hmm, i znowu niewielka część kodu...

O ile dobrze zrozumiałem, to po prostu dodaj w .support { wyrównanie do lewej text-align: left; i dobierz wartość padding-left:, tak, żeby uzyskać pożądany efekt. Nie widzę całości, więc nie bardzo wiem co np. w .support p { robi float: left? itp.

0

Jest tak, chcę aby był tuż pod sliderem napis a pod samym napisem loga.

HTML

<div class="support">
<p>Montujemy sprzęt firm:</p>
<a href="#"><img src="img/sup_black/images/airwell.png" alt="Airwell" height="45" class="air" onmouseover="this.src='img/images/airwell.png'" onmouseout="this.src='img/sup_black/images/airwell.png'" /></a>
<a href="#"><img class="cool" src="img/sup_black/images/cool.png" onmouseover="this.src='img/images/cool.png'" onmouseout="this.src='img/sup_black/images/cool.png'" alt="Coolwex" width="128" height="45" /></a>
<a href="#"><img class="lg" src="img/sup_black/images/lg.png" onmouseover="this.src='img/images/lg.png'" onmouseout="this.src='img/sup_black/images/lg.png'" alt="LG" width="91" height="45" /></a>
<a href="#"><img src="img/images/panasonic.png" alt="Panasonic" height="45" class="pan" /></a>
<a href="#"><img class="fuji" src="img/sup_black/images/fuji.png" onmouseover="this.src='img/images/fuji.png'" onmouseout="this.src='img/sup_black/images/fuji.png'" alt="Fujitsu" /></a>
<a href="#"><img src="img/sup_black/images/samsung.png" alt="Samsung" height="45" class="samsung" onmouseover="this.src='img/images/samsung.png'" onmouseout="this.src='img/sup_black/images/samsung.png'" /></a>
</div>

A teraz mam pod napisem wcięcie i to chcę usunąć.
Dziękuję za pomoc i pozdrawiam.

0

FF+firebug albo Chrome bez dodatków; wciskasz F12, klikasz na drugą ikonkę od lewej strony, klikasz na elemencie, który chcesz poprawić i patrzysz jakie ma ustawienia stylów. W większości przypadków od razu widać, dlaczego jest ustawiony w takim miejscu, a nie innym.

To już nie czasy notatnika i Netscape'a ;-)

0

No zrobiłem to i co mi po tym, że widzę "ramkę" dla tego elementu i zaznaczony jest jego kod? Dalej to nie rozwiązuje problemu- nic odkrywczego tam nie ma.
Dziękuję za tak liczną pomoc i pozdrawiam.

2

Popatrz na poniższy obrazek i zastanów się, jak zdołałem zmienić rozmiar czcionki nie edytując html strony. Potem zastanów się, czy "na żywca" można zmieniać tylko rozmiar czcionki, czy może też padding, margin, border itp. Potem najedź na taki krzywo położony element, zaznacz go, najedź na niego w html pokazanym w firebug i zobacz, że to już nie tylko prostokącik, ale więcej prostokątów w różnych kolorach. Każdy z kolorów pokazuje co innego - jeden odpowiada za margines, drugi za padding, trzeci za bazowy rozmiar elementu. Jednocześnie w zakładce ze stylami pokażą się zdefiniowane wartości stylów dla tego elementu. Możesz je zmieniać, usuwać, dodawać nowe i na żywo widzieć co powodują (możesz też na żywo edytować sam html i dodawać klasy oraz style). Jak już ustalisz właściwe parametry, zaznaczasz je i kopiujesz je sobie do schowka, a potem wrzucasz do css. Nic skomplikowanego, wystarczy spędzić raz kilkadziesiąt minut i przeklikać się przez firebug.
firebug.png

Niżej masz pokazane o co mi chodziło z różnymi kolorami prostokątów, na wypadek gdybyś nie załapał na podstawie opisu:
firebug2.png




firebug3.png

0

Serdecznie dziękuję za tak klarowne tłumaczenie.
Problem już rozwiązałem tylko jeszcze chciałbym się dowiedzieć jak "nadpisać" jakiś styl. Precyzyjniej mówiąc mam dla każdego logo padding-right ustawiony na ~100px, a dla ostatniego logo chciałbym usunąć ten padding (bez tego loga nie mieszczą się w jednej linii). Dodając ostatniemu logo class i w css ustawiając padding-right: 0px !important nie działa.
Pozdrawiam

0

dodaj ostatniemu dodatkową klasę last i wykorzystaj ją, albo użyj selektora :last z css3 (ale będzie działać tylko na najnowszych przeglądarkach). jeśli używasz !important w tak prostym layoucie, to znaczy że coś spieprzyłeś.

1 użytkowników online, w tym zalogowanych: 0, gości: 1