0

So i am trying to make website for a floorball team in our town. I would like to have an image of a floorball goal and on it the links and stuff(I'll provide an image later on). But i struggle with responsive desing.

I would like the ORKA header to be positioned like this: The header should be fixed in place even if i resize the browser window.

Here is the code:

/* CSS Document */
body {
  margin: 0px;
  background-color: #D0D5D6;
}

#main {
  margin: 0px;
  background-image: url(http://ploca.9e.cz/branka.png);
  background-repeat: no-repeat;
  background-size: contain;
  height: 100vh;
  display: flex;
  background-position: center;
  min-height: 280px;
  background-position: top;
}

h1 {
  font-family: Montserrat;
  width:100vw;
  height: 100vh;
  margin: 0 auto;
}

#Nadpis {
  margin: 0px;
  height: 100vh;
  display: flex;
  background-position: center;
  min-height: 280px;
  text-align: center;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
 <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="UTF-8">
  <meta name="Orka Cool" content="Orka Cool">
  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
  <meta name="author" content="Orka Cool">
  <meta name="description" content="Orka Cool - Florbal Čelákovice">
  <meta name="keywords" content="florbal, orka, cool, čelákovice">
  <title>Orka Cool</title>
</head>
<body>
 <div id="main">
 <div id="Nadpis"><h1>ORKA</h1></div>
 </div>
</body>
</html>

I hope i was clear and that you get the point. Sorry for my bad english its not my native language. Thank you in advance.

Vojta Plocica
  • 1
  • 2
  • I'd strongly suggest checking Bootstrap, it's very easy to get started and it will save you a lot of headache – Marwan Alani Apr 07 '16 at 17:30
  • so you want your `orka` on left-top – sanoj lawrence Apr 07 '16 at 17:43
  • @Marwan Alani this is a slight tangent, but does Bootstrap automatically handle web design on mobile, or is there something extra you have to do? I've used bootstrap on websites but have never tested it on mobile. – Script Kitty Apr 07 '16 at 18:24
  • @sanojlawrence I want orka on left-top of the goal. – Vojta Plocica Apr 08 '16 at 13:25
  • 1
    @ScriptKitty Yes it does. The whole idea of Bootstrap is responsive design, so as long as you're keeping that in mind when designing your website (and using the grid concept properly), you'll have a good looking website on all screen sizes. – Marwan Alani Apr 08 '16 at 14:58
  • @ScriptKitty Ok thank you i'll check out Boostrap and try something out. – Vojta Plocica Apr 08 '16 at 18:24

2 Answers2

0

I think this is what you want if anything else feel free to ask

body {
  margin: 0px;
  background-color: #D0D5D6;
}

#main {
  margin: 0px;
  background-image: url(http://ploca.9e.cz/branka.png);
  background-repeat: no-repeat;
  background-size: contain;
  height: 100vh;
  display: flex;
  background-position: center;
  min-height: 280px;
  background-position: top;
}

h1 {
  font-family: Montserrat;
  width:100vw;
  height: 100vh;
  margin: 0 auto;
}

#Nadpis h1 {
  margin: 0px;
  height: 100vh;
  display: flex;
  background-position: center;
  min-height: 280px;
  text-align: center;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
 <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="UTF-8">
  <meta name="Orka Cool" content="Orka Cool">
  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
  <meta name="author" content="Orka Cool">
  <meta name="description" content="Orka Cool - Florbal Čelákovice">
  <meta name="keywords" content="florbal, orka, cool, čelákovice">
  <title>Orka Cool</title>
</head>
<body>
 <div id="main">
 <div id="Nadpis"><h1>ORKA</h1></div>
 </div>
</body>
</html>
sanoj lawrence
  • 951
  • 5
  • 29
  • 69
0

By Adding Position:relative; + top:; and right:; to make it center. This way whenever you resize the browser, all you need to do is add media queries in order to fix at certain break points. Other than that this should solve your problem. (i added the css properties to #Nadpis)

/* CSS Document */
body {
  margin: 0px;
  background-color: #D0D5D6;
}

#main {
  margin: 0px;
  background-image: url(http://ploca.9e.cz/branka.png);
  background-repeat: no-repeat;
  background-size: contain;
  height: 100vh;
  display: flex;
  background-position: center;
  min-height: 280px;
  background-position: top;
}

h1 {
  font-family: Montserrat;
  width:100vw;
  height: 100vh;
  margin: 0 auto;
}

#Nadpis {
  margin: 0px;
  height: 100vh;
  display: flex;
  background-position: center;
  min-height: 280px;
  text-align: center;
  position:relative;
  top:18px;
right:5px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
 <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="UTF-8">
  <meta name="Orka Cool" content="Orka Cool">
  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
  <meta name="author" content="Orka Cool">
  <meta name="description" content="Orka Cool - Florbal Čelákovice">
  <meta name="keywords" content="florbal, orka, cool, čelákovice">
  <title>Orka Cool</title>
</head>
<body>
 <div id="main">
 <div id="Nadpis"><h1>ORKA</h1></div>
 </div>
</body>
</html>
Gianni
  • 136
  • 1
  • 14