Help With HTML/CSS Design

[DezUk]

Hi Folks,

I have been out of web dev/design for a good few years and the last site I put together was in WordPress using a custom theme. The site was not maintained and became broken so I have not had it online for a while now but i can be found here.

I am a bit of a n00b when it comes to CSS but I don't think it will take me long to pick up and I wanted to use this design as a template to start and learn again. So without using WordPress and just using a text editor I want to try and re-create the above via HTML/CSS and I am looking for help on how to go about it as looking at the code for this it seems very bloated for what it is.

I realise it uses a js slider for the animated images, just looking to replicate the layout and menu system for now.

Cheers

 

[DezUk]

Yeah I've read about bootstrap but I feel I should learn from the roots with CC before I dive into using a framework. Or is that over doing it?

 

[DezUk]

Thanks guys, I do like the idea of learning to code it in HTML/CSS from scratch, just the desktop site, not mobile. As you say this will allow me to understand whats actually going on behind the scenes and get a grasp of CSS. Once I have that I can use bootstrap to then get the site working cross platform.

 

[DezUk]

I will help you a bit if you post in this thread.

The first thing you need to do is create a mobile design. You should design to mobile first, then you add CSS media queries to adjust layout as the screen size increases.

So, first thing to do is create a graphic mockup for mobile.

You need to create the various divs for header, body content and footer. Use divs with 100%.

Decide on your navigation solution for mobile.

Really appreciate this offer man. I want to first try and design it on desktop first just to get my head around CSS as its been ages since I last touched it. Let me try and come up with something over the next week or so and see how we get on from there.

 

[DezUk]

So I made a very basic start to trying to re-create the website in my op. Its basic HTML/CSS as I want to learn from the ground up and then go rom there. Not had much time as just became a Dad so time is limited as you can imagine

http://rdoyle.info/temp/

1. So how can I get the columns more spaced out, currently using % widths?
2. How can I style the menu the same as the original site?

I used this video to help me get this design up and running
https://www.youtube.com/watch?v=9tzyJEwO9Os

 

[DezUk]

Thanks for the advice. The look and feel is starting to mimic that of the original though it still doesn't look quite right. I have added the slider using nivo slider but I don't have the arrows or the dots to move through the slides. I assume these are missing images?

I also tried to get the menu items looking the same style with the hover effect. Again it doesn't look right but I assume this is down to not using the same Google font?

http://rdoyle.info/temp/

 

[DezUk]

I know I am just messing around just now, are there other sliders that I should consider, ones with a but more control and ability to customise?

 

[DezUk]

Can anyone help me get the slider looking right?

I just want to try and re-create the exact design as a first stage to learn how its put together.

Cheers

 

[DezUk]

The slider doesn't look right, looks blurry and its not showing the arrows and dots for navigating between them.

The other part I wanted to replicate was the circles at the top corners of the columns.

 

[DezUk]

A CSS only slider would be good as its a very simple slider I am looking for, what one did you use or can recommend?

As for becoming a Dad and trying to learn, yeah its difficult, I tend to do it when I have a free minute at work as at home its impossible!

Edit: I just tried using this page to create a slider http://www.sliderui.com/ but that doesnt seem to want to play properly either (as you can now see in my design)

 

[DezUk]

I've been messing a little more with my layout trying to mimic the original which can be fund here. I have a few questions I was hoping you guys could help with.

1. I want the heading text on the 4 columns to be in line with the circles?
2. I am using font awesome to display the circles but I want to show a font awesome icon on top of the circles. Can this be done?
3. How can I show the 'Learn More' link at the bottom right of the columns?

I am still working on the slider but open to suggestions for simple solutions.

Updated version here.

Cheers

 

[DezUk]

Sorry for the bump but is anyone able to help with my questions above?

Cheers!

 

[DezUk]

Thanks for the advice. I am getting there though I am struggling to get the second font awesome icon to sit on top of the existing font awesome circle. I am using relative position but not sure how to get it sitting exactly on top of the circle?

Apologies for all the questions but I am learning with this so I really appreciate it

 

[DezUk]

Are you using the 'stacking' functionality of the font awesome icons or just positioning yourself directly? http://fontawesome.io/examples/#stacked

I just tried the stacking method on the first icon and it doesn't seem to be working with the code I have, must be something I am doing wrong.

 

[DezUk]

I am not getting that much time to work on this but I sorted the font awesome icons using the stacked technique so thanks for that Poolybit, much appreciated. I am now back to trying to get the image slider working using bxslider. I have it implemented but the styling is all over the place. I want the images centered with a drop shadow and to get rid of the white background. Any ideas?

Latest version here

Cheers

 

[DezUk]

No worries, glad you got it sorted. As Spunkey said, the '.bx-wrapper' can be adjusted to get rid of the border and background colour. You might need to make your css selector for this in your main.css more specific than the existing .bx-wrapper to get it picked up because of the file ordering in your page. ".container .bx-wrapper" should be sufficient. To centre the images, you can target the ".bx-wrapper img" and, as they are block elements due to the existing .bx-wrapper img style, use "margin: 0 auto" to centre them within the container element. You could also chuck the box-shadow style into that same img selector if you wanted.

As a quick note, you've got a couple of failed image references on your page, one being the reason why the left / right controls on the bxslider aren't showing on hover:

GET http://rdoyle.info/temp/css/images/bx_loader.gif 404 (Not Found)
GET http://rdoyle.info/temp/css/images/controls.png 404 (Not Found)

Sorry for the delay in replying to this, been pretty hectic and not had a mionute to get back to this.

I had a look at the code inside jquery.bxslider.css and tried to change the background color in there, as mentioned at around line 30 but it didn't have ant effect. You mention I should override the styles in my main.css, could you give me some example CSS of how this would be done as Im not sure what you mean by ".container .bx-wrapper".

Cheers

 

[DezUk]

I have not been looking at my project for a while but I have recently replaced bxslider with slick slider and now have it working, in Chrome at least. But when I look at the site in IE the nav bar is not displayed properly and the images are overlapping in the image slider. Can anyone suggest what might be wrong?

These are the answers I got on Stack Overflow, have used the last piece of CSS mentioned which did center the images but its broken in IE.

.slick-slider img {
  min-width: calc(100% - 100px);
  margin: 0 50px;
}

Site here

 

[DezUk]

Sorry to drag up an old thread but I am only just getting back to looking at my design again, had a hectic couple of months. So I ditched the slider idea and am just going witha . static image. though I have a few others questions that I am having issues with.

1. How can I reduce the gap between the bottom of the banner image and the top of the columns. There is some funky row:after code in my CSS that controls this, I got this from a YouTube tutorial so not quite understanding how to control the height of my row div?
2. How can expand the height of the footer div, make it responsive so it always stretching to the bottom of the page?
3. Dumb question but my mailto link has no styling even though I have a:link, a:hover etc stles set in my CSS?

Site can be found here.

 

[DezUk]

Thanks for your help man its looking a lot better now, see here.

There is one part of the CSS I do not understand and it was taken from a YouTube tutorial I watched, was hoping someone could explain.

.row:after    {
     clear: both;
     content: " ";
     display: table;
}

When removed it messes up my row height, there must be a cleaner way to achieve this?