Help With HTML/CSS Design

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/
 
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?
 
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
 
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.
 
I tend to use bx slider as and when required. It's really straight forward to use although does require a couple of lines of jquery to get it running which might not be what your looking for. I actually just made a basic slider using just css which seems to do the job pretty well to.

Your doing a good job mate, keep going with it. I only started learning a year ago and like yourself am now a dad for the second time so I know what you mean when you say you don't have much time :-).
 
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)
 
Last edited:
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
 
3. <p style="text-align: right">Learn More</p>

Would do it. It is better though to set a style in your stylesheet and apply the style, so:

<p class="MyStyleName">Learn More</p>

Then in the stylesheet:

.MyStyleName {
text-align: right
}

See this explanation.
 
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 :)
 
I've never used fontawesome, so I don't know whether you can position one icon on top of another. Maybe you can, but it seems an unusual thing to be attempting. In normal web design you don't often try to position images on top of each other, because you are usually using relative positioning.
 
DezUk said:
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 :)
Click to expand...

Are you using the 'stacking' functionality of the font awesome icons or just positioning yourself directly? http://fontawesome.io/examples/#stacked
 
Last edited:
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
 
You must log in or register to reply here.
Back
Top Bottom