The health benefits page follows the same arrangement as my other 3 section pages - About us and menu.
Therefore I wrote up the style sheet for the 3 main sections as I had done for the previous page.
#healthbenefits-pink{
width:1024px;
height:680px;
background-color:#F09;
margin-bottom:10px;
background-image:url(images/healthbenefitspink.png)
}
#healthbenefits-blue {
width:1024px;
height:530px;
background-color:#CFF;
margin-bottom:10px;
background-image:url(images/healthbenefitsblue.png)
}
#healthbenefits-green {
width:1024px;
height:530px;
background-color:#6C3;
margin-bottom:10px;
background-image:url(images/healthbenefitsgreen.png)
}
I only had one piece of text to overlay ontop of the pink section which was very easy to do.
I styled this in terms of colour and size in the style sheet, called the div tag to the html, then positioned it on the page using the inspect element tool.
Text style:
#healthbenefitspink-text {
display: inline-block;
width: 400px;
height: 70px;
color: #ffffff;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: 100;
}
In HTML:
<div id="healthbenefitspink-text">
Know what's in your yoghurt.
</div>
In order to do this I styled what I wanted my text and text boxes to look like on my web page, using my wireframes for measurement reference:
Left column:
#healthbenefits-green_textleft {
float: left;
margin: 220px 0 0 0;
width: 240px;
height: 170px;
color:#6C3;
background-color:#FFF;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin-left: 30px;
font-size: 14px;
padding-right:20px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
Right column:
#healthbenefits-green_textright {
float: right;
margin: 220px 0 0 0;
width: 240px;
height: 165px;
color:#6C3;
background-color:#FFF;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin-right: 30px;
font-size: 14px;
padding-right:20px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
The text is styled to adhere to the rest of he website, and is coloured to match that of the background colours. I have again used to border radius edit to control the sharpness on the edges of the boxes I have included.
I then called these div tags into my html code and created an unordered list, so that each set of sentences I wrote would be formatted in bullet points, an ordered list would mean that each of my points would be numbered which is not what I wanted.
<div id="healthbenefits-green">
<div id="healthbenefits-green_textleft">
<ul>
<li>%100, all natural, freshly made on site daily.</li>
<li>Fat free and around 60 calories.</li>
<li>No artificial sweetners and no added sugar.</li>
<li>Gluten free.</li>
<li>Vegan dairy free option availible.</li>
</ul> </div>
<div id="healthbenefits-green_textright"><ul>
<li>No artificial ingredients or ready made mix.</li>
<li>No calories from fat or high sugar content.</li>
<li>Doesn't only have a dairy option.</li>
<li>No high refined sugar.</li>
<li>No modified food starch.</li>
</ul></div>
Below is the result of these columns:
Creating the table overlay for my middle section (blue):
Unsure how to go about creating a table I asked a friend who walked me through and taught me the process:
First I had to go to the table menu and select to make a table:
I put in the values according to my wireframe and selected the amount of columns and rows I needed which inserted this piece of code into my html:
<table width="460" border="0">
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
I used design view to alter the table in terms of column width and height, For example this is how a table appears once made from the menu, in design view.
I then started to plug in the content for the table and resize the width of the columns so that they were appropriate the the content.
Once I had done this in design view It had automatically changed my source code to this:
<table width="460" height="138" border="0" align="center" cellspacing="0">
<tr>
<th width="83" scope="row">100ml</th>
<th width="92">Frurt dairy</th>
<th width="120">Frurt non dairy</th>
<th width="148">Regular Ice cream</th>
</tr>
<tr>
<th scope="row">Kcal</th>
<td>60 Kcl</td>
<td>50 Kcl</td>
<td>155 Kcl</td>
</tr>
<tr>
<th scope="row">Fat</th>
<td>0g</td>
<td>0.1g</td>
<td>7.9g</td>
</tr>
<tr>
<th scope="row">Carbs</th>
<td>12g</td>
<td>8.42g</td>
<td>5g</td>
</tr>
<tr>
<th scope="row">OWS</th>
<td>8g</td>
<td>6g</td>
<td> </td>
</tr>
<tr>
<th height="30" scope="row">Protein</th>
<td>3.4g</td>
<td>3.4g</td>
<td>2.7g</td>
</tr>
</table>
Now that I had the frame work for my table down I went into css to design the aesthetics of the table:
#healthbenefitstable {
float: left;
width: 440px;
height: 130px;
color: #36C;
background-color: #FFF;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin-left: 40px;
font-size: 14px;
padding-right: 20px;
padding-bottom: 20px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
margin-top: 240px;
margin-right: 0;
margin-bottom: 0;
padding-top: 15px;
padding-bottom: 15px;
font-weight: normal;
}
Once I had got my table how I wanted it by playing around with values such as the margins and padding etc, I got the result below:
No comments:
Post a Comment