mercredi 26 mai 2021

XML decoration with CSS

I have a valid XML file that contains a lot of information for many books. For the web design, I need to create a CSS file in order to style the representation of the data. I have already proceeded to a result but yet I can't achieve to contain all the information shown below to be placed into a box. I need to contain all the information including the title ("The Ugly Truth") into a box. But I'm struggling without HTML divs.

Until now: enter image description here

XML file:

<?xml version = "1.0"  encoding = "utf-8"?>
<!DOCTYPE online_bookshop SYSTEM "online_bookshop_new.dtd"> 
<?xml-stylesheet type="text/css" href="bookshop.css"?>

<online_bookshop free_ship="no">
    <heading>Dreamy Book Storage</heading>
    <name>The Ugly Truth</name>
    <author_list>
        <author auid="_5" name="Elin">Author: Jeff Kinney</author>
    </author_list>
    (..many elements included..)
</online_bookshop>

CSS file:

online_bookshop{
    color: whitesmoke;
    background-color: gray;
    width: 100%;
    background-image: url(bookstore.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}

heading, name, author_list, ISBN, dimensions, illustration, translation, pages, language, cost_information, other_information, weight, contact_details, other_partners, review, for_ages, publisher{
    display: block;
    text-align: center;
}

heading{
    color: red;
    font-size: 50px;
    background-color: rosybrown;
}

name{
    font-size: 40px;
    font-weight: bold;
    font-family: 'Times New Roman', Times, serif;
}

Any thoughts?

Aucun commentaire:

Enregistrer un commentaire