I'm creating a website using HTML5, and CSS3. I've been creating a Image with pure CSS and having some trouble when I put two CSS images together and one of them has a few lines of text.
I'll get straight to the point now - I've created a square Image and divided them together. I've placed some text in one of them using:
<p></p>
Here's the source of the the CSS Image with the text:
#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;
Here's the second CSS Image source:
#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
}
Okay, now moving onto the HTML5 source:
<a id="bottom"></a></div>
<!--Begin page -->
<div id="right">
<p>FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFff</p>
</div>
Okay, now I apologise If this question seems stupid to you, just to backup everything I've explained I've provided a Image of the problem I'm fancing for you to get a better understanding.
