Help With HTML/CSS Design

Associate
OP
Joined
20 Sep 2003
Posts
2,360
Location
Scotland
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/
 
Associate
OP
Joined
20 Sep 2003
Posts
2,360
Location
Scotland
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?
 
Associate
OP
Joined
20 Sep 2003
Posts
2,360
Location
Scotland
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
 
Associate
OP
Joined
20 Sep 2003
Posts
2,360
Location
Scotland
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.
 
Soldato
Joined
23 Mar 2007
Posts
2,553
Location
Essex
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 :).
 
Associate
OP
Joined
20 Sep 2003
Posts
2,360
Location
Scotland
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:
Associate
OP
Joined
20 Sep 2003
Posts
2,360
Location
Scotland
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
 
Soldato
Joined
24 Sep 2007
Posts
4,566
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.
 
Associate
OP
Joined
20 Sep 2003
Posts
2,360
Location
Scotland
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 :)
 
Soldato
Joined
24 Sep 2007
Posts
4,566
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.
 
Associate
Joined
14 May 2006
Posts
1,281
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 :)

Are you using the 'stacking' functionality of the font awesome icons or just positioning yourself directly? http://fontawesome.io/examples/#stacked
 
Last edited:
Associate
OP
Joined
20 Sep 2003
Posts
2,360
Location
Scotland
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
 
Back
Top Bottom