problem ze strukturą

pytanie zadane 10 czerwca 2015 w HTML i CSS przez Kasia Nyrek Nowicjusz (150 p.)
zmienione kategorie 10 czerwca 2015 przez Arkadiusz Waluk

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text-html; charset=8859-2">
<title> Praca kontrolna</title>
<style type="text/css">
</style>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

<div id="strona">
<div id="baner">
<a href="baner.html" title="powrót na stronę główną"><img width="980" height="150" src="baner.png"/></a>
<a href="indexpr.html">klik</a>
</div>
<div id="Menu">Menu</br></br>
<div class="opis">
<a href="opis.html">Opis</a></br></div>
<div class="jakaliczba">
<a href="jakaliczba.html">jaka to liczba</a></br></div>
<div class="liczbycalkowite">
<a href="liczbycalkowite.html">Liczby całkowite z zakresu</a></br></div>
</div>
<div id="tekst">kliknij</div>
<div id="stopka">stopka</div>
</div>
</body>
</html>



body
{}


#strona
{
margin-left:auto;
margin-right:auto;
background-color:yellow;
width: 1000 px;
height:900 px;
font-family:Arial;
font-size:30 px;
}
#baner{

}
#menu{
width:380px;
height:600px;
background-color:purple;
}
.opis{
background-position: center-left;
width:380px;
height:190px;
background-color:green;}
.jakaliczba
{background-position: center-left;
width:380px;
height:190px;
background-color:lightgreen;}

.liczbycalkowite
{background-position: center-left;
width:380px;
height:190px;
background-color:blue;}

#tekst{
width:560px;
height:600px;
float:right;
background-color:red;
}

#stopka{
width: 1000px;
background-color:gray;

}

1 odpowiedź

odpowiedź 10 czerwca 2015 przez Pieniek Gaduła (3,330 p.)
edycja 10 czerwca 2015 przez Pieniek

Hej, przede wszystkim dajesz niepotrzebną spację między liczbą a px masz tak:

width: 1000 px;
height:900 px;

a powinno być tak:

width: 1000px;
height: 900px;

żeby obrazek miał 1000px musisz mu nadać wartość width="1000" w html-u (nadałeś mu wartość 980 więc ma tylko 980px). Powinno być tak:

<img width="1000" height="150" src="baner.png" />

Tagi <br /> wykorzystuje się jedynie jako entery w tekście nie do pozycjonowania strony więc je powywalaj (i tak nie działały bo piszesz tak </br> a powinno być tak <br/>

Wyśrodkowanie tekstu osiągasz taką linijką w css:

text-align: center;

a jeśli chodziło o środkowanie diva to prawidłowo to robiłeś (tylko dałeś tą spacje):

    margin-left: auto;
    margin-right: auto;
    width: 1000px;

Po tych zmianach efekt powinien być taki(jeszcze scentrowałem napis klik): link
Jak jeszcze z czymś masz problem to pisz z czym

komentarz 10 czerwca 2015 przez Pieniek Gaduła (3,330 p.)

AAa jeszcze:

background-position: center-left;

te linijki w kodzie są bez sensu nimi określasz pozycje tła którego nie masz ustawionego (ale nawet jak dodasz tło to raczej nie ma co ruszać jego pozycji)

+ nie przyjmują takiego argumentu jak center-left

komentarz 10 czerwca 2015 przez Pieniek Gaduła (3,330 p.)
edycja 10 czerwca 2015 przez Pieniek

I na sam koniec polecam Ci zrobić menu oparte na liście będzie dużo wygodniej http://www.kurshtml.edu.pl/css/poziome_menu,menu.html

I zajrzać na kanał yt autora tej strony:
https://www.youtube.com/user/MiroslawZelent

no i wgl powodzenia dalej : )

komentarz 10 czerwca 2015 przez Kasia Nyrek Nowicjusz (150 p.)

Dziękuję bardzo za odpowiedź! Niestety jestem w pracy i dopiero po 15 wykorzystam Twoje pomocne rozwiązania. Na pewno poproszę jeszcze o pomoc, bo muszę napisać i zagnieździć w tym kodzie jeszcze zadania w javie i nie bardzo wiem jak się do tego zabrać. Mam jeszcze podstrony(linki do nich na stronie głównej) i ten baner powinien być częścią wspólną tych podstron a jego klinknięcie ma powodować powrót na stronę główną . Innym problemem jest to, że jeszcze nie wiem jak to zrobię aby te linki otwierały się nie jako osonbe karty, tylko po prawej stronie strony głównej w divie # tekst. A może nie robić linków: opis, jakaliczba, liczbycakowite jako podstrony-tylko jakoś inaczej to rozwiązać?

pozdrawiam bardzo serdecznie i oznaczę Twoją odp jako najlepszą, jak tylko zorrientuję się jak to zrobić :)

komentarz 10 czerwca 2015 przez Kasia Nyrek Nowicjusz (150 p.)

Hej,

Jeszcze chciałabym aby div# strona zaczynał się na pozieomie wysokości diva #opis.

a nie na dole !

komentarz 10 czerwca 2015 przez Pieniek Gaduła (3,330 p.)

A więc tak

#menu {
    background-color: purple;
    float: left;
}

#tekst {
    width: 560px;
    height: 600px;
    float:left;
    background-color: red;
}

#stopka {
    clear: both;
    width: 1000px;
    background-color: gray;
}

+ w html-u zmień id diva Menu na menu
Efekt powinien być taki: link

komentarz 10 czerwca 2015 przez Pieniek Gaduła (3,330 p.)
edycja 10 czerwca 2015 przez Pieniek

Co do podstron to sposobów na jakie można to zrobić jest multum pytanie jakim masz to zrobić na zajęcia. Ale wydaje mi się że skoro dopiero się uczysz tworzenia szablonów to nie ma co kombinować i wystarczy że przekopiujesz szablon strony głównej i pozmieniasz treść.

Tak z ciekawości na co robisz ten projekt?

komentarz 10 czerwca 2015 przez Kasia Nyrek Nowicjusz (150 p.)

Przepraszam, wprowadziłam Cię w błąd- div # tekst ma zaczynać się na takiej samej wysokości jak .opis tylko po prawej stronie ( ten czerwony blok ma pójść do góry i skończyć się przed stopką . Px- sobie zmienię aby wyrównać - chodzi mi tylko o zmianę położenia.

Wszystko ma zawierać się w divie strona.

i jeszcze jedno

baner powinien być częścią wspólną linków a jego klinknięcie ma powodować powrót na stronę główną . Innym problemem jest to, że jeszcze nie wiem jak to zrobię aby te linki otwierały się nie jako osobne karty, tylko po prawej stronie strony głównej w divie # tekst. - na czerwonym tle.

komentarz 10 czerwca 2015 przez Pieniek Gaduła (3,330 p.)

Domyśliłem się zobacz efekt w linku który wysłałem (albo tu)

Skoro zawartość ma się otwierać w divie treść najłatwiej będzie to zrobić przy pomocy javascript i tu pytanie uczysz się pisać w javascript czy w javie? :D

komentarz 10 czerwca 2015 przez Kasia Nyrek Nowicjusz (150 p.)

na egzamin z aplikacji i witryn internetowych. Jak chceszcz to wyślę Ci cały egzamin w pdf - jest to jeden z egzaminów praktycznych na E14 z ubiegłych lat.

Niestety , jestem bardzo niedouczona, bo za mało czasu poświęciłam na to i jak widzisz brakuje mi podstaw. Do tej pory zrobiłam tylko parę stron ale w formie tabel i bez css- wszystko w html.

komentarz 10 czerwca 2015 przez Pieniek Gaduła (3,330 p.)

To nie jest trudny materiał ale ja się uczyłem tworzenia stron hobbistycznie i mogę popełnić jakiś błąd merytoryczny a nie chciał bym Cie wprowadzić w błąd. Najlepiej chyba będzie jeśli zrobisz dzisiaj najwięcej ile dasz radę sama zastanowisz się z czym potrzebujesz pomocy. I z edytujesz wcześniejsze pytanie tak by była w nim treść egzaminu, twój obecny kod i twoje pytania. Na tym forum jest parę osób specjalizujących się i w css i w javasript i pownno wszystko szybko pójść : ) a tu już teraz nikt nie trafi po ktoś oznaczył to pytanie jako ukryte. (nie jestem pewien czy samo zedytowanie wrzuci post na topkę jeśli nie dodaj tam odpowiedz)

komentarz 11 czerwca 2015 przez Kasia Nyrek Nowicjusz (150 p.)

Bardzo mi pomogłeś - dzięki za podpowiedzi- może jutro tak zrobię ale jeszcze wcześniej Cię poproszę , abyś zerknął na to, co zrobiłam.

Chodzi mi o to aby link- podstrona -"liczby całkowite otwierał się w bloku "tekst"

Dziękuję

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text-html; charset=8859-2">
<title> jaka liczba</title>
<style type="text/css">
</style>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

<div id="strona">
<div id="baner">
<a href="baner.html" title="powrót na stronę główną"><img width="1000" height="150" src="baner.png"/></a>
<a href="indexpr.html"></a>
</div>
<div id="menu">Menu
<div class="opis">
<a href="opis.html">Opis</a></div>
<div class="jakaliczba"></div>
<div id="tekst">

<script type="text/javascript">
var temp=0;
var a=prompt("podaj liczbe",""); 
var b=prompt("podaj liczbe","");
var c=prompt("podaj liczbe",""); 

if(a<b){
temp=a;
a=b;
b=temp;
}
if (a<c){
temp=a;
a=c;
c=temp;
}
if (b<c){
temp=b
b=c;
c=temp;
}
document.write(a+", "+b+", "+c);
</script>
<a href="indexpr.html">Powrót na stronę główną</a></div>
<div class="liczbycalkowite">
<a href="liczbycalkowite.html">Liczby całkowite z zakresu</a></div>
</div>

<div id="stopka">stopka</div>
</div>
</body>
</html>



body
{}


#strona
{
margin-left:auto;
margin-right:auto;
background-color:white;
width: 1000px;
height: 800px;
font-family:Arial;
font-size:30px;
}
#baner{
text-align: center;
}
#menu{
text-align: center;
float: left;
width:400px;
height:600px;
background-color:yellow;
}
.opis{
width:400px;
height:189px;
background-color:green;}
.jakaliczba
{
width:400px;
height:189px;
background-color:lightgreen;}

.liczbycalkowite
{
width:400px;
height:188px;
background-color:lightblue;}

#tekst{
float: left;
width:600px;
height:600px;
background-color:orange;
}

#stopka{
text-align: center;
clear: both;
width: 1000px;
background-color:yellow;
padding-bottom;
}

A stopkę chciałam obniżyć do końca bloku strony, który jest teraz koloru białego, aby była lekka biała przerwa u dołu i stąd ten padding-bottom, ale to nie zadziałało

pozdrawiam i jeszcze raz wielkie dzięki :)

komentarz 11 czerwca 2015 przez Pieniek Gaduła (3,330 p.)
edycja 11 czerwca 2015 przez Pieniek

Usuń podstrony wystarczy Ci index.html (i plik css)
Chyba lepiej pójdzie jeśli wyślę Ci gotowy kod i potem go wytłumacze

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text-html; charset=8859-2">
    <title> Praca kontrolna</title>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

    <div id="strona">
        <div id="baner">
           <img width="1000" height="150" src="baner.png" />klik
        </div>
        <div id="menu">
            Menu
            <div class="opis">
                Opis
            </div>
            <div class="jakaliczba">
                jaka to liczba
            </div>
            <div class="liczbycalkowite">
                Liczby całkowite z zakresu
            </div>
        </div>
        <div id="tekst">
            
        </div>
        <script type="text/javascript">
            document.getElementById("baner").onclick = function () {
                document.getElementById('tekst').innerHTML = "";
            }

            document.getElementsByClassName("opis")[0].onclick = function () {
                var temp = 0;
                var a = prompt("podaj liczbe", "");
                var b = prompt("podaj liczbe", "");
                var c = prompt("podaj liczbe", "");

                if (a < b) {
                   temp = a;
                   a = b;
                   b = temp;
                }
                if (a < c) {
                   temp = a;
                   a = c;
                   c = temp;
                }
                if (b < c) {
                   temp = b
                   b = c;
                   c = temp;
                }

                document.getElementById('tekst').innerHTML = (a + "," + b + "," + c);
            }
            
        </script>

        <div id="stopka">stopka</div>
    </div>
</body>
</html>

body {
}


#strona {
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    width: 1000px;
    height: 800px;
    font-family: Arial;
    font-size: 30px;
}
#baner {
    text-align: center;
    cursor: pointer;
}
#menu {
    text-align: center;
    float: left;
    width: 400px;
    height: 600px;
    background-color: yellow;
    cursor: pointer;
}
.opis {
    width: 400px;
    height: 189px;
    background-color: green;
}
.jakaliczba {
    width: 400px;
    height: 189px;
    background-color: lightgreen;
}

.liczbycalkowite {
    width: 400px;
    height: 188px;
    background-color: lightblue;
}

#tekst {
    float: left;
    width: 600px;
    height: 600px;
    background-color: orange;
}

#stopka {
    text-align: center;
    clear: both;
    width: 1000px;
    background-color: yellow;
}

Przede wszystkim cały czas miałaś w html tag o id "Menu" a w css "menu" i przez to nie był prawidłowo ustawiony element o id "tekst"

skrypt przesunąłem za tag o id tekst by element ten został wczytany zanim odpali się skrypt (dzięki temu możemy mu zmieniać wartość)

a dalej idzie to tak:
document - obiekt przechowujący całą wczytaną stronę
document.getElementById("baner") - Z obiektu przechowującego całą wczytaną stronę bierzemy element o id "baner"
document.getElementById("baner").onclick = function(){...} - przypisujemy zdarzeniu "przy naciśnięciu" elementu o id "baner" funkcję {...}
document.getElementById('tekst').innerHTML = "" - zmieniamy zawatrość elementu o id "tekst" na "" ("" czyli nic więc usuwamy wszystko co jest w elemencie o id tekst)
document.getElementsByClassName("opis")[0] - Z obiektu przechowującego całą wczytaną stronę bierzemy pierwszy(czyli zerowy bo w informatyce zaczyna się numerować od 0) element o klasie opis

A jeszcze wywaliłem hiperłącza(bo wystarczy strona index.html) i ustawiłem w css atrybut elementów o id menu i baner na pointer by po najechaniu myszką pojawiała się łapka