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

Pytanie html/css

Object Storage Arubacloud
0 głosów
115 wizyt
pytanie zadane 28 maja 2019 w HTML i CSS przez WasiliewSaszka Użytkownik (700 p.)

Witam, robiąc zadanie  natrafiłem na problem, treść zadnia zmusza mnie do stworzenia diva w divie, najlepiej

będzie jak prześle obrazek, a potem kod, wtedy będzie mi łatwiej wytłumaczyć istotę problemu.

 Chodzi mi o ten mniejszy czerwony div, tu jest kod 

 

HTML:

<!DOCTYPE html>
<html>
<head>
 
<meta charset"utf-8">
 
<meta name="description" content="szkielet strony">
<title>szkielet strony internetowej</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
 
</head>
 
<body>
 
<div id="container">
 
<div class="rectangle">

<div class="niew1"></div>
<div class="k1"></div> 
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
<div class="p4"></div>
<div class="p5"></div>
<div class="p6"></div>
<div class="p7"></div>
<div class="p8"></div>
<div class="p9"></div>
<div class="k2"></div>

 
<div style="clear:both;"></div>
 
 
 <div class="niew2"></div>
<div class="p10"></div>
<div class="mega"></div>
<div class="p11"></div>

<!  *POCZĄTEK BRAKU FLOAT LEFT*  !>

<div class="p12"></div>
<div class="p13"></div>


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


<div class="p14"></div>
<div class="p15"></div>


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


<div class="p16"></div>
<div class="p17"></div>


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


<div class="p18"></div>
<div class="p19"></div>


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


<div class="p20"></div>
<div class="p21"></div>


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


<div class="p22"></div>
<div class="p23"></div>


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


<div class="p24"></div>
<div class="p25"></div>


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


<div class="p26"></div>
<div class="p27"></div>

<!  *KONIEC BRAKU FLOAT LEFT*  !>

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

<div class="k3"></div> 
<div class="p28"></div>
<div class="p29"></div>
<div class="p30"></div>
<div class="p31"></div>
<div class="p32"></div>
<div class="p33"></div>
<div class="p34"></div>
<div class="p35"></div>
<div class="p36"></div>
<div class="k4"></div> 

</div>
 
</div>

</body>
</html>

 

 

 

CSS:

body
{
background-color: #cde6d0;
}
#container
{
width:1910px;
margin-left:auto;
margin-right: auto;
 
}
.rectangle
{
    width: 1900px;
    margin-left:auto;
    margin-right: auto;
}
.niew1
{
	width: 425px;
	height: 140px;
	float: left;	
}
.k1
{
	background-color: #ffffff;
    width: 140px;
    height: 140px;
    float: left;
    border:1px solid #111111;
    margin-right: 1px;
}	
.p1
{
    width: 72px;
    height: 140px;
     background-color: #ffffff;
    float: left;
    border:1px solid #111111;
    margin-right: 1px;
}
.p2
{
        width: 72px;
    height: 140px;
    background-color: #ffffff;
    float: left;
    border:1px solid #111111;
    margin-right: 1px;  
}
.p3
{
        width: 72px;
    height: 140px;
    background-color: #ffffff;
    float: left;
    border:1px solid #111111;
    margin-right: 1px;
}
.p4
{
        width: 72px;
    height: 140px;
    background-color: #ffffff;
    float: left;
    border:1px solid #111111;
    margin-right: 1px;  
}
.p5
{
        width: 72px;
    height: 140px;
    background-color: #ffffff;
    float: left;
    border:1px solid #111111;
    margin-right: 1px;
}
.p6
{
        width: 72px;
    height: 140px;
    background-color: #ffffff;
    float: left;
    border:1px solid #111111;
    margin-right: 1px;
}
.p7
{
        width: 72px;
    height: 140px;
    background-color: #ffffff;
    float: left;
    border:1px solid #111111;
    margin-right: 1px;
}
.p8
{
        width: 72px;
    height:140px;
    background-color: #ffffff;
	float: left;
    border:1px solid #111111;
    margin-right:1px;
}
.p9
{
        width: 72px;
    height:140px;
    background-color: #ffffff;
	float: left;
    border:1px solid #111111;
    margin-right:1px;
}
.k2
{
        width: 140px;
    height:140px;
    background-color: #ffffff;
	float: left;
    border:1px solid #111111;
    margin-right:1px;
}
.niew2
{
	width: 425px;
	height: 140px;
	float: left;
}
.p10
{
        width: 140px;
    height:72px;
    background-color: #ffffff;
	float: left;
    border:1px solid #111111;
    margin-right:1px;
	margin-top: 1px;
}
.mega
{
        width: 673px;
    height:673px;
    background-color: #ffffff;
	float: left;
    border:1px solid #111111;
    margin-right:1px;
	margin-top: 1px;
}
.p11
{
        width: 140px;
    height:72px;
    background-color: #ffffff;
	float: left;
    border:1px solid #111111;
    margin-right:1px;
	margin-top: 1px;
}
.p12
{
        width: 140px;
    height:72px;
    background-color: #ffffff;
    border:1px solid #111111;
    margin-left:425px;
	margin-top: 76px;
}
.p13
{
        width: 140px;
    height:72px;
    background-color: #ffffff;
    border:1px solid #111111;
    margin-left:1244px;
	margin-top: -74px;
}
.p14
{
        width: 140px;
    height:72px;
    background-color: #ffffff;
    border:1px solid #111111;
    margin-left:425px;
	margin-top: -525px;
}
.p15
{
        width: 140px;
    height:72px;
    background-color: #ffffff;
    border:1px solid #111111;
    margin-left:1244px;
	margin-top: -74px;
}
.p16
{
        width: 140px;
    height:72px;
    background-color: #ffffff;
    border:1px solid #111111;
    margin-left:425px;
	margin-top: -450px;
}
.p17
{
        width: 140px;
    height:72px;
    background-color: #ffffff;
    border:1px solid #111111;
    margin-left:1244px;
	margin-top: -74px;
}
.p18
{
        width: 140px;
    height:72px;
    background-color: #ffffff;
    border:1px solid #111111;
    margin-left:425px;
	margin-top: -375px;
}
.p19
{
        width: 140px;
    height:72px;
    background-color: #ffffff;
    border:1px solid #111111;
    margin-left:1244px;
	margin-top: -74px;
}
.p20
{
        width: 140px;
    height:72px;
    background-color: #ffffff;
    border:1px solid #111111;
    margin-left:425px;
	margin-top: -300px;
}
.p21
{
        width: 140px;
    height:72px;
    background-color: #ffffff;
    border:1px solid #111111;
    margin-left:1244px;
	margin-top: -74px;
}
.p22
{
        width: 140px;
    height:72px;
    background-color: #ffffff;
    border:1px solid #111111;
    margin-left:425px;
	margin-top: -225px;
}
.p23
{
        width: 140px;
    height:72px;
    background-color: #ffffff;
    border:1px solid #111111;
    margin-left:1244px;
	margin-top: -74px;
}
.p24
{
        width: 140px;
    height:72px;
    background-color: #ffffff;
    border:1px solid #111111;
    margin-left:425px;
	margin-top: -150px;
}
.p25
{
        width: 140px;
    height:72px;
    background-color: #ffffff;
    border:1px solid #111111;
    margin-left:1244px;
	margin-top: -74px;
}
.p26
{
        width: 140px;
    height:72px;
    background-color: #ffffff;
    border:1px solid #111111;
    margin-left:425px;
	margin-top: -75px;
}
.p27
{
        width: 140px;
    height:72px;
    background-color: #ffffff;
    border:1px solid #111111;
    margin-left:1244px;
	margin-top: -74px;
}
.k3
{
        width: 140px;
    height:140px;
    background-color: #ffffff;
	float: left;
    border:1px solid #111111;
    margin-left:425px;
}
.p28
{
    width: 72px;
    height: 139px;
     background-color: #ffffff;
    float: left;
    border:1px solid #111111;
    margin-left:1px;
	margin-top: 1px;
}
.p29
{
    width: 72px;
    height: 139px;
     background-color: #ffffff;
    float: left;
    border:1px solid #111111;
    margin-left:1px;
	margin-top: 1px;
}
.p30
{
    width: 72px;
    height: 139px;
     background-color: #ffffff;
    float: left;
    border:1px solid #111111;
    margin-left:1px;
	margin-top: 1px;
}
.p31
{
    width: 72px;
    height: 139px;
     background-color: #ffffff;
    float: left;
    border:1px solid #111111;
    margin-left:1px;
	margin-top: 1px;
}
.p32
{
    width: 72px;
    height: 139px;
     background-color: #ffffff;
    float: left;
    border:1px solid #111111;
    margin-left:1px;
	margin-top: 1px;
}
.p33
{
    width: 72px;
    height: 139px;
     background-color: #ffffff;
    float: left;
    border:1px solid #111111;
    margin-left:1px;
	margin-top: 1px;
}
.p34
{
    width: 72px;
    height: 139px;
     background-color: #ffffff;
    float: left;
    border:1px solid #111111;
    margin-left:1px;
	margin-top: 1px;
}
.p35
{
    width: 72px;
    height: 139px;
     background-color: #ffffff;
    float: left;
    border:1px solid #111111;
    margin-left:1px;
	margin-top: 1px;
}
.p36
{
    width: 73px;
    height: 139px;
     background-color: #ffffff;
    float: left;
    border:1px solid #111111;
    margin-left:1px;
	margin-top: 1px;
}
.k4
{
        width: 140px;
    height:140px;
    background-color: #ffffff;
	float: left;
    border:1px solid #111111;
    margin-left:1px;
}

W programie klasa p ( np: p1, p5,p20) odpowiada za przypisany prostokąt.

Klasa k( np: k1,k2) odpowiada za przypisany kwadrat.

Klasa niew odpowiada za niewidzialny div, bo miałem wcześniej problem z rozmieszczeniem i właśnie tak sobie 

poradziłem

Klasa mega odpowiada za ten duży kwadrat.

Klasa obr odpowiada za ten mniejszy div ktorego nie mogę zrobić,

Moje pierwsze pomysły były takie żeby w html w divach zrobić coś takiego, to miał być div w divie.

<div class="p1"><div class="obr1"></div></div>

A w cssie zrobić tak.

.p1
{
    width: 72px;
    height: 140px;
     background-color: #ffffff;
    float: left;
    border:1px solid #111111;
    margin-right: 1px;
}
.obr1
{
    width: 72px;
    height: 25px;
	 background-color: #cc0000;
	 border:1px solid #111111;
}

tylko że pomysł nie wypalił lub składnia jest źle dobrana sad, obraz się rozlewa po całym ekranie, najgorsze jest to

że straciłem pomysł jak to naprawićsad.

Za każdą pomoc z góry dziękuję, za słowa krytyki również, kod pewnie można by było napisać 4x krócej, niestety

polecenie było żeby zrobić tylko i wyłącznie w divach, więc innego wyjścia nie ma, no chyba że ktoś ma na to inny pomysł.

 komentarz 28 maja 2019 przez Mariusz08 Maniak (62,300 p.)

Nie wiem kto daje polecenia, żeby takie rzeczy robić na zwykłym drzewku DOM angry

1 odpowiedź

+1 głos
odpowiedź 28 maja 2019 przez dawid6512 Gaduła (4,550 p.)
wybrane 28 maja 2019 przez WasiliewSaszka
 
Najlepsza
po 1. zamiast float:left użyj flexbox lub grid.

po 2. daj .p1 position:relative, a .obr1 daj position:absolute;bottom:0;
 komentarz 28 maja 2019 przez WasiliewSaszka Użytkownik (700 p.)
Dziękuję za pomoc, zobaczę czy działa :)
 komentarz 28 maja 2019 przez WasiliewSaszka Użytkownik (700 p.)

@dawid6512, Dziękuję za pomoc, buszując po internecie udało mi się zrobić zamierzony efekt, mimo że składni flexbox nie znałem to zajęło mi tylko kilka chwil by zrozumieć zamysł.

Przez cały czas byłem negatywnie nastawiony, myślałem że ciągle robie coś źle, sprawiłeś że 

zacząłem bardziej wierzyć w siebie, dziękujęyes

 

 komentarz 29 maja 2019 przez dawid6512 Gaduła (4,550 p.)
nie ma sprawy :D

Podobne pytania

0 głosów
4 odpowiedzi 236 wizyt
html css szybkie pytanie html-css
pytanie zadane 26 kwietnia 2020 w HTML i CSS przez jaqb Początkujący (430 p.)
0 głosów
1 odpowiedź 141 wizyt
Pytanie dotyczącę 3 kursu HTML
pytanie zadane 20 marca 2016 w HTML i CSS przez pitruk Nowicjusz (140 p.)
0 głosów
0 odpowiedzi 71 wizyt
CSS pytanie dotyczące odcinka 3
pytanie zadane 27 kwietnia 2020 w HTML i CSS przez Hadis Nowicjusz (120 p.)

92,555 zapytań

141,402 odpowiedzi

319,553 komentarzy

61,939 pasjonatów

Kategorie pytań
Programowanie
Sprzęt komputerowy
Systemy operacyjne, programy
Sieci komputerowe
Hostingi, domeny, usługi
Urządzenia mobilne
Bezpieczeństwo, hacking
Rozwój zawodowy, nauka, praca
Egzaminy zawodowe
Matematyka, fizyka, logika
Grafika i multimedia
Ogłoszenia, zlecenia
Nasze projekty
Nasze poradniki
Sprawy forum
Offtop
Programowanie
C i C++ HTML i CSS JavaScript PHP SQL, bazy danych C# Java SPOJ Python Ruby Assembler Visual Basic Android, Swift, Symbian OpenGL, Unity Inne języki Algorytmy Systemy CMS Mikrokontrolery

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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...