First Website ist falling apart


#1

Hi everyone,

I hope its allright, because this is not regarding any special topic or exercise on this page.

I just finishend the "make a website" course where you recreate the air bnb website and now i got myself Microsoft expression and just tried to create a simple website, without all the trainingweels, codecademy always offers.

After hours I had a very simple website using a header and a jumbotron, just like in the "make a website" course. Below it i just wanted to add a little supporting content. Nothing crazy, just two pictures, one floating right, the other floating left and respectively right or left of the pictures i added divs, with a heading, some text and a background color.

I did nothing fancy with it, my css mainly is used for text coloring or size and also to do some padding.

As I said, basicly its just like the air bnb website you recreate in the "make a website" exercise. It also looks as it should when i hit preview in Microsoft Expression WEB. But when i save it and open it up in chrome, the divs containing the text are not in line with the pictures any more. Also when i scale the browser window bigger or smaller, the text just flows out of the div-boxes and basicly my overall layout goes crazy anyway.

I never had that problem during my html/css course and also never had any of those issues in the "create a website" exercise.

So my question basicly is: how do I enshure that my layout is displayed propperly, no matter which browser I use? And more importantly, how do i prevent my layout ging crazy when scaling the browser window? And I guess "scalable" websites are another step down the line for more experienced web developers, but for me, just for the beginning it would be helpfull if the website i create would not be scaling at all and everything would just stay there as it is...


#2

@mrtony,
If want a scalable Display
you will have to work with percentage's rather then =fixed=-px sizes....

There are some so-called case-tools on the market
one of them being Bootstrap
http://v4-alpha.getbootstrap.com/getting-started/introduction/
http://getbootstrap.com/css/
google search HTML scalability across browser site:getbootstrap.com

If you want to only use CSS you might want to find your way around
using the site stackoverflow.com which is used by millions of programmers
google search HTML scalability across browser site:stackoverflow.com
for instance somebody having 3 column's
and within the 2nd column a button
which should keep its position when the Screen-Display-Size changes
= http://stackoverflow.com/questions/29494869/document-height-and-window-height-both-return-the-same-value-proper-doct


#3

I moved your topic to the Corner Bar, as, like you said, it was not to do with a specific course.


#4

Thank you, i will definitely have a look at stackexchange.

But for now - since I am realy just starting out, I would just like to find out, how to create a website, which does not scale at all, so I can just finish my first website and then improve there.


#5

@mrtony Can you paste your code into a Pen & give us the link to your pen so we can see the code?


#6

For this problem we really need to see your code, if you copied the code from the exercise, this overflow shouldn't happen.


#7

Here you go:


#8

You tried to embed it? For everyone, link to pen


#9

If i didn't know this was the code from the exercises, i doubt if i would recognize it. I am just going to say it: Your understand isn't of the code isn't good enough. I recommend to do the html + css course, to gain a better understanding html + css, then i recommend to read on bootstrap what classes like col-md-4, thumbnail and container do.


#10

Well I dont think so. The problem is, during the HTML/CSS Lessons and even during the build a website ariBNB Project I never had those problems, since I always had them in the same window and format. There was no topic about how to handle different screen sizes as far as i can remember.

But, if you say, that Bootstrap is the way to make your layout stay where it belongs, I will go search a tutorial on this topic :smile:


#11

Well, partial there was. col-md-4 is huged to make a grid on a screen wider then 992px.

The problem is, your code no longer looks like the code from the exercise, how did you build what you have now?