Tips – CSS Selectors and HTML Branches


As i mentioned in a previous post, I’m learning HTML/Javascript at the moment via Codecademy and will post stuff I have learnt, so others who follow/Google can learn. These are just snippets, but the site is a great learning tool.

So CSS Selectors – CSS is a very powerful way of styling and positioning your HTML elements. The syntax is simple, you use the HTML element as the selector! Good example is if you want all your list elements to have a red background color:

 

Full code can be found here on JSFiddle.

 

li {
 background-color: red;
}

So the above example will highlight any list (li) element red, What if you want to more selective of what you want as red, say for example just any ordered (ol) list (li) elements red? Easy:

 

Full code can be found here on JSFiddle.

 

ol li {
 background-color: red;
}

So the above example will highlight any list (li) element that is child of a parent ordered list (ol) elements. This small example shows branching works within HTML documents and how CSS selectors traverses the tree using the simple parent/sibling relationships. This is very powerful. And as mentioned in a previous post, you can be more specific by giving a more specific branching.

 

Full code can be found here on JSFiddle.

 

 

ol li {
    background-color: red;
}
div ol li {
    background-color: purple;
}

Images courtesy of Codecademy.

 

 

 

[MVC 3] MvcImage Project……Its Alive!…..


Over the last few months i have done the following blog posts to explain how to handle images using MVC and various technologies like JQuery and Entity Framework. Now the majority of hits i receive are concerning these blogs posts, so obviously Image Handling is a common Achilles heel. The posts are also being referenced in forums to answer Image related questions. So i have decided to create a Open Source project which combines all of these blog posts into one solution for people to use. This project can be found here for anyone who wants to use it:

Codeplex: http://mvcimage.codeplex.com/

Github: http://garfbradaz.github.com/MvcImage/

At the moment it includes everything i have blogged about and shows you how to extend the RegisterModel to include adding Images when registering a new user. I will be adding the following to the project moving forward as i want this to an organic project that grows:

  1. Adding Thumbnails to the database and displaying these
  2. A details page of users so you can view their details and the images – A User Dashboard for the Admin
  3. A Image FileResult.
  4. A PDF document explaining what the Project does and where.

MY ORIGINAL BLOG POSTS – Image Handlers – JQuery/ASP.NET/SQL DB & Entity Framework (MVC3)

Tutorial 1 – Image Preview – JQuery

Tutorial 2 – Image Preview – HTML Helpers

Tutorial3 – Upload Image – SQL Server & Entity Framework

Tutorial 4 – Images – Downloading Images

Tutorial 5 – Thumbnail Support

Enhanced by Zemanta

[CSS] inner Container – float issue


An age old problem apparently where a inner div is attached to a outer div element in the DOM tree. Now usually when the inner div grows in size (i.e. content is added), the outer div will size accordingly. The issue is when a float is applied to the inner div. This causes the container div to ignore what is happening to the inner div element, thus it will not resize based on the inner div.

 

Right, confused? Too many div’s to!  Here is an example of a page with float:left applied to the list elements (li):

 

 

 

 

As you can see, the list elements are floating left, BUT the outer div container (white block), hasn’t resized. Now removing float:left shows you how i want the container div (outer) to behave:

 

 

 

 

 

Unfortunately my lists are not behaving correctly. Now because im new to HTML/CSS i added a forum post to asp.net forums, where a kind chappy told me about the clearfix resolution.

http://forums.asp.net/t/1727780.aspx/1?float+left+issues+lists+

 

On Googling this fix to locate what it is doing, i found the following post which mentions an even cleaner fix adding overflow:auto to my outer container div:

http://www.sitepoint.com/simple-clearing-of-floats/

And like magic, this has worked! And here is the proof:

 

 

 

 

 

 

 

Enhanced by Zemanta

[MVC 3] Upload Image –SQL Server & Entity Framework


UPDATE: I have now combined all my MVC Image Handling  blog posts into a Open Source Project. Feel free to check this out once you have read the post.

http://mvcimage.codeplex.com/

Original Blog Post:

The last post i described how to create a HTML Helper for Image Previewing. This time around we will be uploading an image to a Database, which is handled little differently than normal CRUD operations.

The following block of code shows my Create action method within my UserProfile controller:

 1:         public ActionResult Create(UserProfile userprofile,
 2:          HttpPostedFileBase imageLoad2)
 3:         {
 4:             var profileimage = new Medium();
 5:  
 6:             if (imageLoad2 != null)
 7:             {
 8:                 using (Image img =
                        Image.FromStream(imageLoad2.InputStream))
 9:                 {
 10:  
 11:                     //--Initialise the size of the array
 12:                     byte[] file = new byte[imageLoad2.InputStream.Length];
 13:  
 14:                     //--Create a new BinaryReader and set the InputStream
 //-- for the Images InputStream to the
 16:                     //--beginning, as we create the img using a stream.
 17:                     BinaryReader reader =
                              new BinaryReader(imageLoad2.InputStream);
 18:                     imageLoad2.InputStream.Seek(0, SeekOrigin.Begin);
 19:  
 20:                     //--Load the image binary.
 21:                     file = reader.ReadBytes((int)imageLoad2.
                                   InputStream.Length);
 22:  
 23:                     //--Create a new image to be added to the database
 24:  
 25:                     profileimage.Created_Date = DateTime.Now;
 26:                     profileimage.Source = file;
 27:                     profileimage.File_Size = imageLoad2.ContentLength;
 28:                     profileimage.File_Name = imageLoad2.FileName;
 29:                     profileimage.Content_Type = imageLoad2.ContentType;
 30:                     profileimage.Height = img.Height;
 31:                     profileimage.Width = img.Width;
 32: #if DEBUG
 33:                     profileimage.Record_Status = "T";   //--Testing.
 34: #else
 35:                         profileimage.Record_Status = " ";/--Live.
 36: #endif
 37:  
 38:  
 39:  
 40:                 }
 41:             }
 42:  
 43:             if (ModelState.IsValid)
 44:             {
 45:  
 46:                 db.Media.AddObject(profileimage);
 47:                 db.SaveChanges();
 48:  
 49:                 return RedirectToAction("Index", "Home");
 50:  
 51:             }
 52:  
 53:             var viewModel = new UserProfileViewModel
 54:             {
 55:                 UserProfile = userprofile,
 56:                 UserTypes = userTypes
 57:             };
 58:  
 59:             return View(userprofile);
 60:         }

This method creates has two parameters, the model UserProfile, and the imageLoad2 is the file posted. Have a look at the previous post about building the HTML.

NB: the parameter name imageLoad2 needs to be the name of the input file from the view so that is is bound (using the MVC Model Binding). If you used a different name the parameter would be null.

The method creates a Entity Framework model Medium, which is my class to describe the SQL Table which holds the Images. The images are saved within SQL as (MAX). Quite easy really, create a   to convert the image stream to binary,  then using the EF to the entity set, then save it to the table.

There we have it. Join me next time for downloading the image, using another custom HTML Helper.

 

Enhanced by Zemanta