Help With HTML/CSS Design

The styles for the white border and background are set on `.bx-wrapper` in line 30 of jquery.bxslider.css. If you want to change them you can override those styles in your own stylesheet.
 
DezUk said:
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
Click to expand...

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)
 
You need to get rid of the text in the images. If your slider can't do a text overlay, find one that does.
It looks crap when it scales down to smaller screen sizes and your also missing out on all your main headlines being read by google search bots.
 
Poolybit said:
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)
Click to expand...

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 said:
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
Click to expand...

Changing it directly in jquery.bxslider.css should have done it, assuming there weren't other styles affecting it. If you are changing these on the site directly, you might need to press ctrl+F5 to refresh all of the cached files on the page. It could have just been that your changes weren't taking affect because of this.

Generally, the easiest way to check out the styles are applying to a certain element is to use the tools in whatever browser you are using (press F12 with the browser open assuming a webkit based browser or IE). These tools should allow you to select an element in your page and see the styles that are being applied to a specific element. This will give you an idea of what you need to change or override.

With regards to the overriding in your main.css, CSS works on a principle of hierarchy to decide what styles take precedent (hence the cascading in cascading style sheet!). If you make a more specific selector than what is also affecting the styling of an element, it should override any duplicate individual styles. In this case, the background colour of that element is coming from jquery.bxslider.css under the ".bx-wrapper" selector. If you were to target this element using a more specific selector such as "#container .bx-wrapper" (which states an element with a class of .bx-wrapper within an element with the ID of #container), a background-color style would override the one stated in .bx-wrapper due to it being more specific.
 
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.

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

Site here
 
Last edited:
Replace it with

.slick-slider img {
width:100%;
}

then put a margin around the whole slider if you dont want it against the edges of the page.
 
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 said:
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?
Click to expand...

It's not the height of the row you need to change, it's the margins and padding which are creating the gap.
Code: 
.banner{
margin:5% 2% 0 2%;
}
.col{
margin:0 2% 5% 2%;
}
DezUk said:
How can expand the height of the footer div, make it responsive so it always stretching to the bottom of the page?
Click to expand...
Code: 
footer{ height:300px;}
There's lots of guides online for sticking the footer to the bottom of the page as it's a common problem.

DezUk said:
Dumb question but my mailto link has no styling even though I have a:link, a:hover etc stles set in my CSS?
Click to expand...
It's not working because you've got a.hover rather than a:hover, etc.
 
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.

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

When removed it messes up my row height, there must be a cleaner way to achieve this?
 
It's there as a fix for your floating columns.
Each .col has float:left; applied to it. It's kind of like 'floating' it over the top of the parent container rather than inside it and they dont count towards the height of the parent container. If you put a non-floating column in the .row container, it will automatically adjust it's height to accommodate that col. When you've floated all of the cols inside that row, there's nothing left inside which counts towards the height and the row will have 0px height.
It's the "clear:both;" line in your code which fixes this.

The "after" part means you're not applying these styles to the .row element itself, but creating a pseudo-element after it which the sytles apply to. If you look in developer tools you'll see the after element is separate and has it's own styles.
 
You must log in or register to reply here.
Back
Top Bottom