• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

co zrobić aby link nie wyjeżdzał po za div ?

VPS Starter Arubacloud
0 głosów
374 wizyt
pytanie zadane 26 lipca 2019 w HTML i CSS przez Radek Koniarski Użytkownik (870 p.)
otagowane ponownie 26 lipca 2019 przez Radek Koniarski
Co zrobić aby link nie wyjeżdzał po za div ? tak jak na zdjęciu elemety a  ( miejscowości )

https://imagizer.imageshack.com/img921/1214/a82XZw.png






<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <title>onet.pl</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/d1c838dcd7.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,700&display=swap&subset=latin-ext" rel="stylesheet">


</head>

<body>
    <header>
        <div class="logo"><img src="img/logo.png"> </div>
        </div>



    </header>
    <nav>
        <ul>
            <li>
                <a href="#">piłka nożna</a>
                <a href="#">f1</a>
                <a href="#">siatkówka</a>
                <a href="#">żużel</a>
                <a href="#">ręczna</a>
                <a href="#">tenis</a>
                <a href="#">kolarstwo</a>
                <a href="#">boks</a>
                <a href="#">mma</a>
                <a href="#">ofsajd</a>
            </li>
        </ul>



    </nav>


    <main>

        <div class="imgsection">
            <h1>Brazylia wygrała mecz o półfinał ! </h1>
        </div>


        <div class="sekcje">
            <div class="section2">
                <img src="img/section2img.jpg">
                <p>motor klasyczny</p>

            </div>

            <div class="section2">
                <img src="img/section2img.jpg">
                <p>motor klasyczny</p>

            </div>
            <div class="section2">
                <img src="img/section2img.jpg">
                <p>motor klasyczny</p>

            </div>
            <div class="section2">
                <img src="img/section2img.jpg">
                <p>motor klasyczny</p>

            </div>
            <aside>
                <div class="asideicons">
                    <div class="icons"><i class="fas fa-bolt"></i>
                        <p>1123</p>


                    </div>
                    <div class="icons"><i class="fas fa-bolt"></i>
                        <p>1223</p>


                    </div>
                    <div class="icons"><i class="fas fa-bolt"></i>
                        <p>1233</p>


                    </div>
                    <div class="icons"><i class="fas fa-bolt"></i>
                        <p>1233</p>


                    </div>
                </div>

                <div class="sectionaside">

                    <div id="icon"> <i class="fas fa-map-pin"></i></div>

                    <button>lista</button>
                    <div class="contentbutton">
                        <ul class="linki">
                            <li><a href="">Białystok</a></li>
                            <li><a href="">Warszawa</a></li>
                            <li><a href="">Opole</a></li>
                            <li><a href="">Wrocław</a></li>
                            <li><a href="">Katowice</a></li>
                            <li><a href="">Kraków</a></li>
                            <li><a href="">Lublin</a></li>
                            <li><a href="">Poznań</a></li>
                            <li><a href="">Gorzów</a></li>
                            <li><a href="">Sopot</a></li>
                            <li><a href="">Gdańsk</a></li>
                        </ul>





                    </div>

                </div>
            </aside>

    </main>




</body>

</html>
* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

body {
    font-family: 'Fira Sans', sans-serif;

}



header {
    height: 70px;
    border-bottom: 1px solid gray;
    position: relative;


}

.logo {
    width: 15%;
    top: 7px;
    left: 100px;
    position: absolute;
}

.logo img {
    height: auto;
    width: 100%;
}

nav {
    width: 100%;
    height: auto;


}

nav li {

    list-style: none;
    margin-top: 20px;
    text-align: center;



}

nav li a {

    text-decoration: none;
    text-transform: uppercase;
    padding: 20px;
    color: black;
}

nav li a:hover {
    background-color: #ecf0f1;

}



main {

    height: 500vh;
    width: 1024px;
    margin: 0 auto;
    margin-top: 50px;
    position: relative;


}



.imgsection {
    width: 1024px;
    height: 587px;
    position: relative;

}

.imgsection {
    background-image: url(img/photo1.jpg);


}

.imgsection h1 {
    font-size: 55px;
    color: White;
    position: absolute;
    top: 75%;
    margin: 0 0 60px 60px;
    border-left: 10px solid yellow;
    padding-left: 30px;
    text-shadow: 2px;
    rgba(0, 0, 0, .3);
}


.sekcje {
    width: 1024px;

    height: 500px;
    position: relative;

}

.section2 {
    width: 35%;
    float: left;
    padding: 20px 20px 0 0;

}

.section2 img {
    max-width: 100%;
    height: auto;
}

aside {
    height: 300px;
    width: 30%;
    position: absolute;
    top: 0;
    left: 70%;
    margin-top: 20px;

}

.asideicons {

    width: 100%;
    height: 60px;
    border-bottom: 1px solid gray;
}

.icons {
    font-size: 20px;
    margin-left: 30px;
    float: left;
    text-align: center;
    margin-top: 10px;
    transition: .4s;
    border-bottom: 2px solid yellow;

}

.icons:nth-of-type(2),
.icons:nth-of-type(3),
.icons:nth-of-type(4) {
    border-bottom: 0px;
}

.icons:nth-of-type(2):hover,
.icons:nth-of-type(3):hover,
.icons:nth-of-type(4):hover {

    border-bottom: 2px solid gray;
}

.sectionaside {
    position: relative;
    width: 100%;
    height: 150px;


}

#icon i {
    margin: 10px 0 0 5px;
    font-size: 20px;
    border-right: 1px solid gray;
    padding-right: 5px;


}

.sectionaside button {
    top: 10px;
    left: 30px;
    text-decoration: none;
    position: absolute;
    color: black;


}


.contentbutton {
    position: relative;
    height: 350px;
    widows: 100%;
    background-color: aqua;

}

.linki {
    position: absolute;
    height: 80%;
    width: 100%;
    background-color: chartreuse;
    bottom: 0;

}

.linki ul {
    display: block;
}

.linki li {
    width: 50px;
    height: auto;
    list-style: none;
    margin-top: 10px;
    display: block;

}

.linki a {
    text-decoration: none;
    text-transform: uppercase;
    color: black;
    display: block;


}

 

komentarz 26 lipca 2019 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
pokaz kod html i css (na screenie jest za malo)
komentarz 26 lipca 2019 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

@Radek Koniarski, pokazales kod ale jednoczesnie usunoles tresc. Nie kazdy teraz widzi o co pytasz :)

 

 

@Admini, tutaj chyba kolega pomylił tagi. Ten kod nie ma za wiele wspolnego z JS 

komentarz 26 lipca 2019 przez Radek Koniarski Użytkownik (870 p.)
zmieniłem już
komentarz 26 lipca 2019 przez Radek Koniarski Użytkownik (870 p.)
już dodany

1 odpowiedź

0 głosów
odpowiedź 26 lipca 2019 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
<div class="contentbutton">

Posiada atrybut 

height: 350px;

dlatego to wyjezdza za obreb diva

komentarz 26 lipca 2019 przez Radek Koniarski Użytkownik (870 p.)
w contentbutton jest jeszcze ul class linki  zamiast tego zostawiłem normalnego ul i dałem wyżej diva o klasie linki ale dalej to nie działa .., przecież w contentbutton jest własnie ten div o klasie linki w którym są a  i one powinny być dopasowane do tego diva tak sie nie dzieje.. o co chodzi
komentarz 26 lipca 2019 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

div contentbutton  ma na sztywno ustawione height: 350px;

Jeśli zawartość (twoja lista) będzie zawierać więcej elementów i wyjedzie poza te 350 px to rozwali Ci tego diva. Optymalnym rozwiazaniem było by zastosowanie resonsywnosći z bootstrapa ale w Twoim przypadku wystarczy zwiększyć ten height np do 600px;

komentarz 26 lipca 2019 przez Radek Koniarski Użytkownik (870 p.)
z tym że ja chciałbym zrobić tak jak na onecie aby były dwie kolumny
komentarz 26 lipca 2019 przez Radek Koniarski Użytkownik (870 p.)

@pawi125, https://imagizer.imageshack.com/img922/9638/bxwnnE.png

Chciałbym aby tak to wyglądało  (mniej więcej) chodzi mi o te kolumny tylko

komentarz 26 lipca 2019 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

Optymalnym rozwiazaniem bedzie bootstrap. Kurs do bootsrapa zrobił p. Zeletn i jest bardzo przystepny. 

Możesz skorzystać też z selecta (inny wyglad ale bedzie robil to samo)

Jesli na upartego chcesz to robic na sztywno (jesli wiesz ile elementow chcesz wrzucic) musisz w divie contentbutton zrobic dwa mniejsze divy i ulozyc je obok siebie. Do kazdego pojedynczego divu wrzucic polowe elementow listy z miastami.

Podobne pytania

0 głosów
3 odpowiedzi 351 wizyt
0 głosów
5 odpowiedzi 903 wizyt
pytanie zadane 2 października 2019 w HTML i CSS przez Lodomir Początkujący (480 p.)
0 głosów
2 odpowiedzi 624 wizyt

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...