How do you nest divs in a function?

[aykaramba]

I am working through trying to replicate this template: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_examples_album

I am able to replicate various layout features using either panels or a single page application and in general manipulate individual elements. However, one of the key layout features of html is nested DIV objects. Obviously we can easily parent divs in the BUILDER. However, I cannot figure out how to nest dives using code in a function.

This functions works fine:
(defun make-new-div (panel target) (create-div panel :content "hello" :class "w3-third w3-row-padding w3-margin-top") )
I just cannot figure out how to nest divs using code to achieve certain layout goals. So, for example, I would like to be able to create the following hierarchical relationship:

div
div
div
/div
/div
/div

Does anyone know how this can be done using code?

[rabbibotton]

(create-div panel :content "hello")
(create-div panel :content "hello")
(create-div panel :content "hello")
(create-br panel)
(let* ((c1 (create-div panel :content "outer" :class "w3-border"))
       (c2 (create-div c1 :content "inside c1" :class "w3-border"))
       (c3 (create-div c2 :content "inside c2" :class "w3-border")))
  (create-div c3 :content "inside c3" :class "w3-border"))

[aykaramba]

Ahhhh, I see it now. You use this everywhere. Very clever. Thank you!

[aykaramba]

For any newbies wondering, here is how to replicate a single row of the gallery from this page: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_examples_album

Code:

(let* (

 ;; row
 (c1 (create-div panel :content ""  :class "w3-row-padding w3-margin-top"))

 ;; 1/3rd container
 (c2 (create-div c1 :content "" :class "w3-third"))
 ;; the card to stuff the image into
 (c3 (create-div c2 :content "" :class "w3-card-4 "))
 ;; the image inside the card
 (c4 (create-img c3 :url-src "http://127.0.0.1:8080/img/w01.jpg" :style "width:100%"))
 ;; image label
 (c5 (create-div c3 :content "PICTURE NAME" :class "w3-container w3-padding "))

 
 ;; 1/3rd container
 (c2 (create-div c1 :content "" :class "w3-third"))
 ;; the card to stuff the image into
 (c3 (create-div c2 :content "" :class "w3-card-4 "))
 ;; the image inside the card
 (c4 (create-img c3 :url-src "http://127.0.0.1:8080/img/w01.jpg" :style "width:100%"))
 ;; image label
 (c5 (create-div c3 :content "PICTURE NAME" :class "w3-container w3-padding "))

 
 ;; 1/3rd container
 (c2 (create-div c1 :content "" :class "w3-third"))
 ;; the card to stuff the image into
 (c3 (create-div c2 :content "" :class "w3-card-4 "))
 ;; the image inside the card
 (c4 (create-img c3 :url-src "http://127.0.0.1:8080/img/w01.jpg" :style "width:100%"))
 ;; image label
 (c5 (create-div c3 :content "PICTURE NAME" :class "w3-container w3-padding "))))

This is unavoidable for layouts that require a lot of nested divs to get pixel perfect layouts particularly for layouts requiring rows and columns.

I hope that helps.

Thanks Rabbi for always following up even on really silly questions from noobs.

[rabbibotton]

No question is silly. It is as important as the answer. For example now I know more areas to stress when the time comes to write new tutorials etc