Ajutor html

J.D

Active Member
Registered
Full Member
Salut.
Am si eu nevoie de putin ajutor din partea cuiva care se pricepe la html.
Am nevoie de un dreptunghi alb cu borduri negre, lat de vreo 400px si lung de vreo 700px. In interiorul lui sus sa fie o poza, sub poza un scris (bla bla bla) iar sub scris sa pot pune un iframe.
Multumesc mult. Sper ca m-am facut inteles. :)
 
Cu siguranta sa fie si responsive ? Sau cum ... de ce nu dai exemplu ceva ce este deja ? sau o pagina care are ...
Vrei varianta de desktop? De mobil ?
 
Cu siguranta sa fie si responsive ? Sau cum ... de ce nu dai exemplu ceva ce este deja ? sau o pagina care are ...
Vrei varianta de desktop? De mobil ?
O sa-l bag in widget in wordpress, tema e responsive si automat il face si pe el responsive. Chestia e ca n-am gasit o pagina care are. Ca altfel copiam codul sursa de acolo. Doar poza de mai sus o am
 
Sunt pluginuri care fac asta, gen acesta https://wordpress.org/plugins/zotabox/
Iar cu acest site iti poti face singur formatul de mai sus.
http://divtable.com/generator/
 
Se pare ca m-am pacalit la faza cu responsive si tema nu influenteaza widget-urile :(
Ce trebuie adaugat ca sa poata fi responsive codul?
 
Ce trebuie adaugat ca sa poata fi responsive codul?
Daca tema este responsiva sau are auto size in functie de bock, atunci nu trebuie sa faci nimic, decat sa pui codul.
Sau poti face codul tau responsive cu acest generator
Cod:
https://ianrmedia.unl.edu/responsive-table-generator-tool
 
Ti-am facut un cod, a iesit asa:
NuVJ7D9.png

HTML
HTML:
<div class="dreptunghi-alb">
<img src="https://i.imgur.com/ySqzMkN.png" class="poza" alt="imagine"/>
<p class="para-custom">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class="container-iframe"><iframe width="395" height="315" src="https://www.youtube.com/embed/7wtfhZwyrcc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
</div>


CSS
HTML:
.dreptunghi-alb {
max-width: 400px;
height: auto;
border: 2px solid;
border-color: #000;
}

.poza {
max-width: 100%;
height: auto;
display: block;
}

.para-custom {
padding-left: 2px;
background-color: #686868;
}

.container-iframe {
padding-left: 2px;
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}

.container-iframe iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
 
pai ... ca sa mearga un widget html in wordpress ai nevoie de responsive. Insa stilul responsive il declari in fisierul de stiluri in wordpress, acel css. Tu ai cerut html, am incercat sa iti ofer ce ai cerut tocmai din cauza ca ai spus ca ai nevoie de cod pe care nu l-ai gasit. Am avut prea putine informatii pentru a face ceva.
Mai stiu ca, iframe nu merge cum vrei tu in wordpress, va trebui sa faci ceva artificii in functiile wordpress ... ca sa te lase sa afisezi iframe ... asa stiu eu ...
 
Poftim:
Demo:
ep3Tcqk.png



Cod:
Cod:
<style type="text/css">
.widget_iframe {
    width: 400px;
    background: #fff;
    border:2px solid #000;
    padding:5px;
}
.widget_iframe img {
    width:100%;
}
.widget_iframe iframe {
    width: 100%;
}

@media screen and (max-width: 910px)  { 
    .widget_iframe {
        width: 100%;       
    }

}
</style>

<div class="widget_iframe">
    <img src="https://dummyimage.com/400x300/048fe0/ffffff&text=IMAGINEA+TA+AICI">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pretium sit amet nisi vitae maximus. Sed porttitor elementum pulvinar. Phasellus dignissim semper erat. Aliquam erat volutpat. Integer id euismod purus. Curabitur fringilla diam lorem, a consequat magna lobortis vitae. Nam in vehicula tortor, vitae tristique ex.</p>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/-98SH4YwUSI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
 
Loading...
Back
Sus