Currently, I'm in the process of building a website using HTML5 and CSS3. One particular challenge I've come across is when trying to integrate two CSS images together, with one containing a few lines of text.
Let me get straight to the issue at hand - I have successfully created a square image and combined them. The problem arises when adding text within one of these images using:
<p></p>
First, let's take a look at the CSS for the image with text included:
#right {
background-color: #FFFFFF;
height: 900px;
position:absolute;
border-width:1px;
display: block;
border-style:solid;
margin-left: auto;
font-family: 'Ubuntu', sans-serif;
font-size: 85%;
margin-right; auto;
color: #000000;
border-right-color:white;
border-color:grey;border-style:solid;
border-top-left-radius: 5px;
top:300px;
width: 300px;
left:102px;
Next, here is the CSS for the second image:
#middle {
background-color: #FFFFFF;
height: 900px;
position:absolute;
color: #000000;
display: block;
margin-left:auto;
border-right-color:white;
border-width:1px;
text-align:center;
margin-right; auto;
border-left-color:white;
top:300px;
border-top-color:grey;
border-style:solid;
width: 560px;
left: 390px
}
Now, let's move on to the HTML5 source code:
<a id="bottom"></a></div>
<!--Begin page -->
<div id="right">
<p>FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFff</p>
</div>
If my question seems basic or unclear, I apologize. To further illustrate the problem I am facing, I have attached an image for you to reference and better understand the issue at hand.