I’ve managed to create the design parts that I want to display on a web page. The page consists of a body with a border around it. I want to place other design elements within that body, within those borders. The other elements (name, photo, birth, marriage, bio, children, thumbnails) are all defined and styled in CSS and display in my browser, but I can’t figure out how to place them where I want them.
Placement should be very similar to this mockup but with styling applied.
I’ve got a mental block that I can’t seem to get around. Looking at the html file you will see that I defined a series of boxes. All of those boxes are to be placed inside the larger .body frame.
I’ve tried using position without success. I looked at grid but don’t think that will work either, but I might be wrong. I’ve looked at the problem for a couple days now and can’t seem to find any new way to look at it. Is what I’m trying to do impossible? Am I trying the wrong tools? If so, which tools should I use? I am coming back to both HTML and CSS after a very long time without using them. I’ve been through most of the W3C tutorials but didn’t find examples of what I want to do.
I didn’t post code here because it’s available (I think) in the github repo referenced above. If that is the wrong way to make it available, let me know how I should post it.
OK, I’ll post the code here but I thought it would clutter things up. That’s why I referenced the repo, which should be public now. Is using a githup repo the wrong protocol for sharing code here?
Here’s the HTML:
<!-- THIS IS THE HTML-CSS INTEGRATION TEST INDEX FILE -->
<html lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
</html>
<body>
<div>
<p class="body" align-text:center;>
<p class="name">Robert Haddon Hutchins
<p class="photo">photo
<p class="birth">Date:<br>Place:<br>Parents Names:
<p class="marriage">Spouse Name:<br>Date:<br>Place:
<p class="death">Date:<br>Place:<br>Burial Site:
<p class="bio">Biography:
<!--Make Bio box fit within body and place a 'more'
hyperlink to see the whole thing -->
<p class="children">Children:
<!--Make Bio box fit within body and place a 'more'
hyperlink to see the whole thing-->
Mary Frances Elisabeth Hutchins, b.13 August 1983
<div class="thumbnails">More Photos:
</div>
</p>
</body>```
And here's the CSS:
```/* THIS IS THE CSS-HTML INTEGRATION TEST CSS FILE */
.body
{
position:relative;
left: 19%;
right: 17%;
margin-top: 1%;
margin-bottom; 2%;
border-style:ridge;
border-width:5px;
border-radius:25px;
width: 800px;
height:530px;
background-color:bisque;
text-align:center;
font-size:14px;
font-family:Verdana;
}
.border
{
}
.name
{/* <div class="name-square"> */
position:relative;
margin-left: 31%;
margin-right: 27%;
margin-top: 3%;
border-style:ridge;
border-width:2px;
color:rgb(106, 5, 5);
border-radius:5px;
text-align:center;
font-size: 22px;
height: 30px;
width: 500px;
}/*left-align
text-align:center;*/
.photo
{/*FIXED [if exists PHOTO]
<div class="photo-square">*/
margin-left: 20%;
margin-right: 60%;
border-style:ridge;
border-radius: 5px;
border-width:2px;
text-align:center;
height: 225px;
width: 225px;
}/*left-align DIV1? */
.birth
{/*FIXED [if exists BIRTH]
<div class="birth-square"> </div>*/
margin-left: 40%;
margin-right: 40%;
border-style:ridge;
border-radius: 5px;
border-width: 2px;
padding-left: 10px;
padding-top: 1px;
padding-bottom: 1px;
text-align: left;
height: 60px;
width: 460px;
}/* date - line 1
place - line 2
parents - line 3*/
.marriage
{/*FIXED [if exists MARRIAGE]
<div class="marriage-square"> </div> */
margin-left: 40%;
margin-right: 40%;
border-style:ridge;
border-radius: 5px;
border-width:2px;
padding-left: 10px;
padding-top: 1px;
padding-bottom: 1px;
text-align: left;
height: 60px;
width: 460px;
}/*right-align DIV2?
MARRIAGE
spouse - line 1
date - line 2
place - line 3*/
.death
{/*FIXED [if exists DEATH]
<div class="death-square"> </div>*/
margin-left: 40%;
margin-right: 40%;
border-style:ridge;
border-radius: 5px;
border-width:2px;
padding-left: 10px;
padding-top: 1px;
padding-bottom: 1px;
text-align: left;
height: 60px;
width: 460px;
}/*right-align DIV2?
DEATH
date - line 1
place - line 2
buried at - line 3 */
.bio
{/* OPTIONAL [if exists BIO]
<div class="bio-square"> </div> */
margin-left: 20%;
margin-right: 60%;
border-style:ridge;
border-radius: 5px;
border-width:2px;
text-align:left;
padding-left: 10px;
padding-top: 1px;
padding-bottom: 1px;
height: 60px;
width: 726px;
} /* left-align */
.children
{/* OPTIONAL [if exists CHILDREN
<div class="children-square"> </div>*/
margin-left: 20%;
margin-right: 60%;
border-style:ridge;
border-radius: 5px;
border-width:2px;
text-align: left;
padding-left: 10px;
padding-top: 1px;
padding-bottom: 1px;
height: 40px;
width: 726px;
}/* left-align */
.thumbnails
{/* OPTIONAL [if exists THUMBNAILS
<div class="thumbnails-square"> </div>*/
margin-left: 20%;
margin-right: 60%;
border-style:ridge;
border-radius: 5px;
border-width:2px;
text-align:left;
padding-left: 10px;
padding-top: 1px;
padding-bottom: 1px;
height: 60px;
width: 726px;
}/* left-align
{border style:solid}
border radius: 5px
hyperlinks to large photos */
Thanks for the responses and for cleaning up after me. You can see that I’m new here and learning how best to use the forums. I’ll try to remember to make the github repo a link.
I had some difficulty getting GIT/Github set up and using it properly. At one point my github repo was private but I think it is now public. I say this in case you run into it still being private. I have little confidence in my ability to use the tools correctly.
I’ve posted this question before, but got no response other than to point out typos and other errors. What I need is for someone to help me understand how to do what I’m trying to do. My github repo is GitHub - RHH42/the-clan . It is supposed to be public; so if you have trouble accessing it, please let me know and I’ll try to fix it. I want to keep my css styles in a separate file from my html. IOW, I don’t want to use internal or in-line css styling except as a last resort.
I want to design a display screen that shows a box with borders (which I’ve done; see .frame in my CSS file). Then, I want to place within that screen, a series of boxes for data and images. I’ve tried using the <div> tag, id= "identifier", container="container",class="identifier" and nothing has worked to place the boxes within the frame. I’ve managed to create the visual content which displays on my web page. The problem is that the images don’t display as overlays, like I want them.
I’ve searched for answers and found none, probably because I don’t know how to phrase a search argument. I’ve read css and html how-to articles and tutorials. I’ve even searched and read articles about using html and css to create displays. Nothing has worked; so I’m back here pleading for help. I can’t even get my box legends to appear beside boxes for the data they identify.
Here is a screenshot showing my overall web page. The content in the middle was done with <p . . . ></p> statements in the html as you can see.
Everything below the red horizontal line should appear within the bordered area above it. The green lines show what I mean about aligning legends with the boxes that contain data or images.
I don’t know how to describe what I want to do any better than this. It is quite possible that I’m trying to do something that cannot be done, but I’ve seen countless web pages with this sort of display. I just don’t know how it’s done.
