annonymous - 6/25/2013 11:07:48 AM

Here is a vertical menu strip

annonymous - 6/25/2013 11:08:21 AM

Here is the code for it

<style>
.vstrip
{
border:5px solid lavender;
padding:0px;
}
.vstrip p.header 
{
  background:lavender;
  color:navy;
  font-weight:bold;
  margin:0px;
  font-family:verdana;
  font-size:16px;
}

.vstrip p 
{
  color:green;
  margin:0 5 0 5;
  font-family:Georgia;
}

</style>
<div style="width:150" class="vstrip">
<p class="header">Custom UIs</p>
<p>Custom Views
<p>Custom Components
<p>Custom Layouts
<p>OpenGL ES 2.0
</div>

satya - 6/26/2013 10:04:46 AM

html book background

Show images for: html book background

satya - 6/26/2013 10:13:34 AM

how do you specify html absolute position of a div

how do you specify html absolute position of a div

Search for: how do you specify html absolute position of a div

satya - 6/26/2013 10:19:50 AM

test

UI

Custom Views

Custom Components

Custom Layouts

OpenGL ES 2.0

satya - 6/26/2013 10:20:23 AM

Here is what produced it

<style>
.a2_vstrip
{
    position:relative;
    width:180px;
    height:140px;
    border:5px solid lavender;
    padding:0px;
}

.a2_image
{
  width:100%;
  height:95%;
}

.a2_vstrip p.header 
{
  background:lavender;
  color:navy;
  font-weight:bold;
  margin:0px;
}

.a2_vstrip p 
{
  color:purple;
  margin:0 5 0 5;
  font-family:Georgia;
  font-weight:bold;
}

.a2_body
{
  position:absolute;
  top:30px;
  left:10px;
}
</style>

    
<div class="a2_vstrip">
<p class="header">UI</p>
   
    <div class="a2_image_div">
    <img class="a2_image"  src="http://www.garchibald.com/ebooks/The-Three-Little-Pigs/Open-Book.jpg"/>
    </div>

<div class="a2_body">
    <p>Custom Views
    <p>Custom Components
    <p>Custom Layouts
    <p>OpenGL ES 2.0
</div>
</div>

satya - 6/26/2013 10:43:15 AM

test

Customized UI

---

Custom Views

Custom Components

Custom Layouts

OpenGL ES 2.0

satya - 6/26/2013 10:44:15 AM

Here is how this works

<style>
.a3_vstrip
{
    position:relative;
    width:250px;
    height:180px;
    padding:0px;
}
.a3_hr
{
   width:100%;
   background-color:purple;
   height:2px;
   margin:0;
}

.a3_image
{
  width:100%;
  height:100%;
}

.a3_vstrip p.header 
{
  color:navy;
  font-weight:bold;
  margin:0px;
}

.a3_vstrip p 
{
  color:purple;
  margin:0 5 0 5;
  font-family:Georgia;
  font-size:16px;
}

.a3_body
{
  position:absolute;
  top:10px;
  left:50px;
}
</style>

    
<div class="a3_vstrip">
    <div class="a3_image_div">
    <img class="a3_image"  src="http://www.garchibald.com/ebooks/The-Three-Little-Pigs/Open-Book.jpg"/>
    </div>
    
<div class="a3_body">
    <p class="header">Customized UI</p>
    <hr class="a3_hr"/>
    <p>Custom Views
    <p>Custom Components
    <p>Custom Layouts
    <p>OpenGL ES 2.0
</div>
</div>

satya - 6/26/2013 11:05:12 AM

Styling an hr with CSS

Styling an hr with CSS

satya - 6/26/2013 11:07:06 AM

Books on CSS

Books on CSS

satya - 7/10/2013 9:14:57 AM

html image as background tag

html image as background tag

Search for: html image as background tag

satya - 7/10/2013 9:18:28 AM

you can do this

<div background="your-image-url"/>

satya - 7/10/2013 9:38:56 AM

That doesn't work for a div it appears instead you have to use

<style>
.a4_example 
{
width:100;
height:100;
background-image:url("your-url") no-repeat;
background-repeat: no-repeat;
}
</style>

<div class="a4_example">

</div>

satya - 7/10/2013 9:39:17 AM

See this link for more

See this link for more

satya - 7/10/2013 9:39:38 AM

css tag background-repeat options

css tag background-repeat options

Search for: css tag background-repeat options

satya - 7/17/2013 1:53:28 PM

I like this color

satya - 7/17/2013 1:53:59 PM

To further refining inspect this element in chrome and adjust the color further

To further refining inspect this element in chrome and adjust the color further