HTML5 with CSS for mobile/desktop

Toggle sidebar Toggle sidebar
AViking

AViking

Platinum Member
Sep 12, 2013
2,264
1
0
I haven't made a website since HTML4 but want to get something together where I can have a vimeo video as the background (or an image if the bandwidth is low) and where it will automatically scale for mobile, tablet, and desktop.

Where to start? Any decent spot where I can pick up a template to start tinkering with?
 
Ken g6

Ken g6

Programming Moderator, Elite Member
Moderator
Dec 11, 1999
16,610
4,530
75
What do you mean have a video as the background? You mean you want the background of the page to be a video, playing, while people do other stuff in the foreground on top of it? That sounds awful. D:

If you must have such a thing, probably your best bet for compatibility is an animated gif in the background.
 
purbeast0

purbeast0

No Lifer
Sep 13, 2001
53,537
6,365
126
i just went to paypal for the first time in months and see they have a fullsize video as their background and i thought about how awful it is. then i come to this forum and saw this thread heh.
 
Rinaun

Rinaun

Golden Member
Dec 30, 2005
1,196
1
81
I'm actually interested in this topic as well. I've found foundations and bootstraps/etc to be incredibly over-complex for 90% of my designs. I'm looking into either Pure or using Twitter Bootstrap 3 to do similar things, which it seems like everyone tells me to not use. I'm also looking to use Foundation Framework but again, most of these set up way too many things for my needs. I used 320 for a while but not being able to center things by default was massively annoying.
 
purbeast0

purbeast0

No Lifer
Sep 13, 2001
53,537
6,365
126
i'm curious as to why people are telling you not to use bootstrap? bootstrap is awesome and it's so easy to do pretty complex things with it. it looks great too. and the dom is so lightweight.
 
Rinaun

Rinaun

Golden Member
Dec 30, 2005
1,196
1
81
purbeast0 said:
i'm curious as to why people are telling you not to use bootstrap? bootstrap is awesome and it's so easy to do pretty complex things with it. it looks great too. and the dom is so lightweight.
Click to expand...

I just heard multiple people pull a "don't use twitter bootstrap everybody does". I'm not sure if they are just being hipsters or something but yeah, more than one place told me to avoid using twitter bootstrap specifically because "everybody uses it". I personally like it compared to the other more complicated builds, but purecss is pretty nice too.
 
AViking

AViking

Platinum Member
Sep 12, 2013
2,264
1
0
Phew...ok I've been reading up and tinkering for a day now. My oh my how the internet has changed.

Bootstrap is probably the way to go. However it's a pain in the ass. If I go to bootstrap's site they give a custom navbar css so I use that along with the min css file. Great. It won't work without a js file so I include that. No problem. Navbar works. Next up I have to create a new container class or else the navbar bleeds in with whatever I do next and it looks awful. Figured that out. Next up I can't for the life of me get the grid system to work correctly with any of the included CSS files. I am literally having to use someone else's css file and I have no idea why.

Very odd system. I figure that at this rate I'll be linking to 27 different css files to get things working.

Once I figure this out though it seems like a very easy and modular way to create a website that works for me.

As far as vimeo I was really more looking for a more dynamic background but for now I have a carousel that I'm playing with.
 
purbeast0

purbeast0

No Lifer
Sep 13, 2001
53,537
6,365
126
i'm not sure how you can be having so many issues with bootstrap. the documentation is very blunt and straight forward. they have examples you can literally copy and paste into your code and it will work just like their samples on the website.

the grid system is pretty straight forward as well so i'm not sure what is causing so many issues. it sounds like you just have the installation all screwed up though if their css files aren't working with yours. i'd probably start over from scratch and follow the installation instructions again.

you aren't being very elaborate on your problems either so it won't be easy for any of us to help you. things just "not working" can literally mean a million different things.

i also would not recomment working with a minified file while you are developing. you won't be able to trace through any of the errors with the minified files.

also, linking to different css files isn't a big deal and it's actually preferable imo so you don't have 1 big ass css file that you have to maintain. ideally though you would be using something like sass or less and then that compiles to 1 big ass css file that is included, but you don't maintain the css file you maintain the smaller sass or less files.
 
AViking

AViking

Platinum Member
Sep 12, 2013
2,264
1
0
Well changing the class to row-fluid helps.

Let me give you a really solid example though. Bear in mind that I'm on a laptop so my 15 inches of goodness is all I can see things on.

http://getbootstrap.com/examples/navbar-fixed-top/
This fixed navbar does not work with the bootstrip download. I need to have
Code: 
<link href="http://getbootstrap.com/examples/navbar-fixed-top/navbar-fixed-top.css" rel="stylesheet" type="text/css">

http://getbootstrap.com/examples/justified-nav/
If you look at this all I want is for those 3 boxes to be next to each other. Unless I change it to row-fluid they are just "listed"
All of this is just me looking at their page.

http://getbootstrap.com/examples/offcanvas/
This one only shows two colomns and then the links on the side. I can't imagine that 3 don't fit. It should be able to do 12/3 for a span4 right? Should I not use span to define the divisions on my page but rather the more explicit coding mentioned somehwere? Is span old? I'm looking at something as simple as http://getbootstrap.com/2.3.2/scaffolding.html

If I want to change the color of the navbar and footer I should be able to compile the distribution and just drop the new css files into my project but it will not work. Those parameters are stored in the css files aren't they?
 
purbeast0

purbeast0

No Lifer
Sep 13, 2001
53,537
6,365
126
you are looking in the wrong areas. look here for how to do a navbar.

http://getbootstrap.com/components/#navbar

that is what i'm talking about as the examples you can copy/paste, not the ones you are talking about.

it sounds like you are trying to just use this without understanding it. that's a horrible way to do development. start with the "getting started" link and it explains to you what you need for what components and stuff. then start to read the documents and how to use them.

just copy/pasting an example and just expecting it to work, then wondering why it doesn't work, isn't really a good way to develop.
 
AViking

AViking

Platinum Member
Sep 12, 2013
2,264
1
0
Yeah I realized that really quick. I stopped doing that, went back and started reading, and am building from scratch. You're absolutely right that any other way is like banging nails into my head.

However I'm still a bit surprised that what should show up on my screen as 3 "boxes" next to each other shows them as 3 rows of boxes or at best 2 boxes on one row and 1 on the next. Despite it looking like it should fit nicely.
 
4

46andtool

Member
Aug 16, 2013
181
0
71
AViking said:
I haven't made a website since HTML4 but want to get something together where I can have a vimeo video as the background (or an image if the bandwidth is low) and where it will automatically scale for mobile, tablet, and desktop.

Where to start? Any decent spot where I can pick up a template to start tinkering with?
Click to expand...

You should just embed the video into an iframe, then nest the iframe in a div that has relative dimensions so that it scales for different resolutions.

Heres an article I found which may help: http://demosthenes.info/blog/649/Responsive-Design-Create-Fluid-YouTube-and-Vimeo-Content

Unless I'm misunderstanding you and you actually literally want the video to be the background of your webpage, if thats the case then I don't know what the heck to do :D

Edit: Actually that might be doable if you floated every other element on the page, or used the z-index css property. http://www.w3schools.com/cssref/pr_pos_z-index.asp

What it does is it changes the position of elements on the Z axis, heres a good visual of what that is http://media.smashingmagazine.com/wp-content/uploads/2009/09/graphical-z-index.gif
 
Last edited:
AViking

AViking

Platinum Member
Sep 12, 2013
2,264
1
0
I've taken a step back from that approach and been learning how bootstrap works. I can make an attractive design around a carousel/slider so that's fine.

I still haven't figured out why at it's most basic level the downloaded css files do not produce the results that the example pages say. I'm still having to use someone else's css file and that's bothersome.

I have a feeling that my reading has resulted in some pre 3.0 code so I'm going to jump in and tackle it some more.
 
purbeast0

purbeast0

No Lifer
Sep 13, 2001
53,537
6,365
126
AViking said:
I've taken a step back from that approach and been learning how bootstrap works. I can make an attractive design around a carousel/slider so that's fine.

I still haven't figured out why at it's most basic level the downloaded css files do not produce the results that the example pages say. I'm still having to use someone else's css file and that's bothersome.

I have a feeling that my reading has resulted in some pre 3.0 code so I'm going to jump in and tackle it some more.
Click to expand...

i don't understand what you mean by "someone elses css".

go to the bootstrap page and look in the dev tools with chrome and inspect all of the .css files that are downloaded on the page load.

then go to your page (without using "someone elses css" code and see what .css files your page is not loading. then when you see what you are missing and include them correctly. if you can't get their css files to work, the you aren't including them correctly or are missing some.
 
AViking

AViking

Platinum Member
Sep 12, 2013
2,264
1
0
I figured out what the problem was. If I use a span3 class vs a col-md-3 class it does not work. I have to assume this is some kind of change from previous versions of bootstrap.

It's all pretty now...almost.

Have these grey bars on each side of my carousel that I can't get rid of.
 
AViking

AViking

Platinum Member
Sep 12, 2013
2,264
1
0
purbeast0 said:
i don't understand what you mean by "someone elses css".

go to the bootstrap page and look in the dev tools with chrome and inspect all of the .css files that are downloaded on the page load.

then go to your page (without using "someone elses css" code and see what .css files your page is not loading. then when you see what you are missing and include them correctly. if you can't get their css files to work, the you aren't including them correctly or are missing some.
Click to expand...

Basically when I started I went to their example page (which must have been a pre 3.0 example) and just took the code and tried to disect it.

I quickly realized this was a big mistake.

So I started from scratch and tried to pull in components. However something as simple as 4 columns of content next to each other would not show up correctly UNLESS I used a css file that was linked in the example. The new bootstrap ver 3 css would not render that as 4 columns.

The solution was to stop using span3.

I have a nice working page now. The only problem I have is the carousel. They have a carousel on their example page but not in the component section explained. I'm not sure if I'm getting grey bars because it doesn't like the image size or for another reason. I've tried to put the whole carousel in a fluid and regular container but the carousel just looks awful. It will not scale correctly and has these grey bars.
 
AViking

AViking

Platinum Member
Sep 12, 2013
2,264
1
0
I have a static-top navbar and my carousel below it. I do not have the navbar in a container (and it doesn't seem to make a difference) and the carousel works fine in a container but not if it's fluid since the image is probably too small at 968px wide. As a stop gap I can just leave it as a regular container but what I really want to do is have the carousel go from edge to edge and not be constrained by a container. I don't have a big enough monitor to test this here.
 
AViking

AViking

Platinum Member
Sep 12, 2013
2,264
1
0
I'm guessing here but I would not put the carousel in a container and I would use giant images. 1920 would be great but people have larger resolutions now. So to go from edge to edge you have to pick the maximum conceivable size or else just leave it in a container and deal with it?
 
AViking

AViking

Platinum Member
Sep 12, 2013
2,264
1
0
Thanks for all the help. I have a functional site now. The problems I was having was due to old code pre 3.0. I was also a little bit rusty.

For now I think I'm good. I'll probably revisit this when I'm on a large monitor and experimenting with making the site floating but for now I'm happy with what I have and am impressed by bootstrap.
 
You must log in or register to reply here.

TRENDING THREADS

COMPANY
RESOURCES
FOLLOW
Top Bottom