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

Pokaż 8 poprzednich komentarzy

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