CSS: Proporcja rozmiaru bannera

Alternative · 2 Czerwca 2011

banner { 

position: fixed; 
left: 10%; 
top: 5%;
height:20%;
right: 10%;
background-color: aqua; 

}

Selektor "banner" jest przeznaczony na banner, i powiedzmy mam 1024x768 obszar w przeglądarce, banner stanowi u mnie 80% tego obszaru więc ma szerokość około 819px a wysokość około 153px, no i sobie taki dam, wszystko ładnie, ale odpale u pana od informatyki, a on ma na przykład obszar 800x600 no to banner.jpg będzie większy od selektora "banner" w którym ma się znajdować. Czy wówczas obrazek zmniejszy się automatycznie i dopasuje się do rozmiaru selektora, czy też trzeba to zrobić ręcznie? Jeżeli tak to jak?

Arkarius · 2 Czerwca 2011

Ja bym Ci proponował na 'sztywno' robić tzn operować pixelami zamiast procentami, wtedy wszędzie będzie tak samo wyświetlać.

Alternative · 2 Czerwca 2011

To podaj mi proszę przykład stabilnego i kompatybilnego układu banner, nawigacja i treść bo kombinuje i kombinuje i mnie szlag trafia

edit: bo pixele to sobie bym mógł ustawić pod warunkiem, że wszystko będzie wycentrowane a jak daję align: center to zero reakcji

Arkarius · 2 Czerwca 2011

Proszę. To jest podstawowy szablon strony od którego zaczynam zabawe z html.

E: w sekcji head możesz dać ten swój baner, tylko pozmieniaj szerokości na pasujące Tobie.

Alternative · 2 Czerwca 2011

Ojoj nawalone kodu, a ja chciałem w kilkunastu linijkach jak najprościej.

Teraz zdecydowałem się na takie coś:

menu {
align: center;
width: 800;
height: 80;
background-color: gray;
top: 170;
}

W index.htm:

[...]
<menu>Button 1 Button 2 ....</menu>

I z jakiej racji zamiast wyswietlić mi ten blok tak jak chcę, otrzymuję szary pasek DŁUŻSZY niż 800px o wysokości niecałe 30px z napisem Button 1 Button 2 .... z lewej strony jakby z akapitem przed tym napisem? Ponadto pasek zamiast być wyśrodkowany, zaczyna się z lewej strony i kończy w 70% szerokości ekranu (tak na oko). No po prostu jestem bliski rozpaczy...

Edit: Może powiem tak. Olejcie to co wyżej napisałem, ja chcę po prostu jeden kod, oddzielny, nie całej strony, w którym są napisane parametry żeby był jeden szary blok, wyśrodkowany na ekranie, szerokość 800, wysokość 100 i jeżeli zadziała to będę wdzięczny.

Dawka83 · 2 Czerwca 2011

:o

<div id="menu"></div>

Czytałeś ty kiedyś jakiś kurs? Poza tym:

(..)
width: 800px;
height: 80px;
(...)

gnysek · 2 Czerwca 2011

dla diva zewnętrznego:

margin: 0 auto;

Zapewne nie działa w MSIE 5 i 6.

Kofel · 3 Czerwca 2011

Zapewne nie działa w MSIE 5 i 6.

działa, trzeba tylko doctype ustawić dobre

Alternative · 3 Czerwca 2011

Dobrze a więc tak:

CSS

banner {

align: center;
width: 800px;
height: 154px;
background-color: aqua;

}

HTML

<div id="banner">
Tekst tekst tekst
</div>

Co otrzymuję? Można by powiedzieć, że nic. Po prostu "Tekst tekst tekst" napisane normalnie na pustej białej stronie w lewym górnym rogu. Jakoś nie mogę dostrzec prostokąta o kolorze aqua, wycentrowanego o wymiarach 800x154 z napisem Tekst tekst tekst.

E: A jak dam nie <div id=(...), tylko <banner> </banner> To jest tak samo, z tym że tekst jest na aqua tle.

Dawka83 · 3 Czerwca 2011

Ehm miszczu w css to #banner

Arkarius · 3 Czerwca 2011

jeśli on rzeczywiście odwoływał się do tego diva bez '#' to zwątpie.. xD

gnysek · 4 Czerwca 2011

No i jak ma go wycentrowac, skoro nie ma centrowania dodane ? :)

Alternative · 5 Czerwca 2011

no a jak to centrowanie dodać xd?

edit: dobra mam thx

PsichiX · 5 Czerwca 2011

hihi, ale sie z tym bawicie. wystarczylo:

position: relative;

margin-left: 50%;

left: -400px;

lub:

position: relative;

margin-left: auto;

margin-right: auto;

Alternative · 5 Czerwca 2011

a mam jeszcze jedno pytanie: wiem że w html'u można zrobić takie coś, że jest osobny kolor linku, linku na którym już się było i linku na który najechał kursor, ale jak to zrobić w CSS, bo będzie mi wygodniej?

edit: Udało mi się znaleźć. Ale tak przy okazji to jeszcze mam jeden problem:

Dałem takie coś w <head>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="pl" 
lang="pl">
<meta http-equiv="content-type" content="text/html; 
charset=iso-8859-2"/>

Ale np "ą" i tak się zmienia na jakiś dziwny znak, nie ma polskich :S Może jeszcze w notatniku zmienić kodowanie?

PsichiX · 5 Czerwca 2011

kodowanie pliku tez zmien na utf-8, notepad++

Kofel · 5 Czerwca 2011

#up

<meta http-equiv="content-type" content="text/html;
charset=iso-8859-2"/>

PsichiX · 5 Czerwca 2011

tylko, ze jesli tworzy sie strony unicode, to poleca sie stosowanie kodowania unicode

Alternative · 5 Czerwca 2011

Ok działa. I kolejne pytanie:

Ten div z tekstem O Koronowie to div "content", a ten najjaśniejszy na którym są wszystkie to "pad" (taka podkładka xd). No i teraz co zrobić, aby pad miał zawsze większy height od content o 10px, a nie odwrotnie?

Kod CSS:

body {

background-color: #5F9EA0;

}

#pad {

position: relative;
width: 820px;
background-color: #E0FFFF;
margin: 0 auto;

}

#banner {

position: relative;
top: 10px;
width: 800px;
height: 154px;
margin: 0 auto;
top: 10px;

}

#menu {

position: relative;
text-align: center;
background-color: #6495ED;
top: 20px;
width: 800px;
height: 32px;
margin: 0 auto;

font-size: 20px;
font-family: "Arial Black";

}

a:link { color: #FFD700; }
a:visited { color: #FFD700; }
a:hover { color: red; }
a:active { color: green; }

#content {

position: relative;
background-color: #AFEEEE;
top: 30px;
width: 800px;
margin: 0 auto;
text-align: justify;

font-size: 17px;
font-family: Arial;

}

#footer {

position: relative;
top: 100px;
width: 800px;
height: 20px;
margin: 0 auto;

font-size: 13px;
color: #800000;
text-align: center;

}

Edit:

Ratujcie, muszę to mieć na jutro :C

Ogólnie to jestem przybity, gdyż odpaliłem tą strone w Firefoxie i w IE - jest mega totalny syf, to obrazka nie ma, to nie jest wycentrowane, krzywo, itd. Ja pierdole za przeproszeniem

Kofel · 6 Czerwca 2011

tylko, ze jesli tworzy sie strony unicode, to poleca sie stosowanie kodowania unicode

a gdzie on napisał, że robi w Unicode?

gnysek · 6 Czerwca 2011

Nie wiem gdzie masz jakie ID, to skąd mam wiedzieć, co Ci poprawić?

Musiałbyś dać też kod strony.

Dawka83 · 6 Czerwca 2011

Daj na końcu tego białego diva po tym niebieskim:

<div style="clear: both;"></div>

Kofel · 6 Czerwca 2011

Daj na końcu tego białego diva po tym niebieskim:
<div style="clear: both;"></div>

A co to robi? Nie rzucajcie suchą odpowiedzią

Dawka83 · 6 Czerwca 2011

Na 99% rozwiąże problem. Wiem z własnego doświadczenia.

Kofel · 6 Czerwca 2011

Pytałem się co to robi o.0

Dawka83 · 6 Czerwca 2011

http://www.kurshtml.edu.pl/css/przyleganie...cjonowanie.html

gnysek · 6 Czerwca 2011

Ja tam nie widzę floatów, więc nie wiem jak Ci to pomoże...

CSS: Proporcja rozmiaru bannera

Rekomendowane odpowiedzi

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Odnośnik do komentarza

Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Zarejestruj nowe konto

Zaloguj się

Ostatnio przeglądający 0 użytkowników