HTML reaktionsfähige Website

So versuche ich, Website für ein Unihockey-Team in unserer Stadt zu machen. Ich hätte gerne ein Bild von einem Floorball-Tor und darauf die Links und Zeug (ich werde später ein Bild zur Verfügung stellen). Aber ich habe Probleme mit Responsive Desing.HTML reaktionsfähige Website

Ich möchte die ORKA-Header wie folgt positioniert werden: The header should be fixed in place even if i resize the browser window.

Hier ist der 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>

Ich hoffe, ich war klar, und dass Sie das bekommen Punkt. Sorry für mein schlechtes Englisch ist nicht meine Muttersprache. Vielen Dank im Voraus.

Quelle

2016-04-07 Vojta Plocica

ich stark Bootstrap schlage vor, Check würde, ist es sehr einfach, um loszulegen und es wird Ihnen eine Menge Kopfschmerzen sparen –

so wollen Sie Ihre 'orka' auf der linken oberen Seite –

@Marwan Alani das ist eine leichte Tangente, aber funktioniert Bootstrap automatisch Web-Design auf dem Handy, oder gibt es etwas extra, was Sie tun müssen? Ich habe Bootstrap auf Websites verwendet, aber noch nie auf Mobilgeräten getestet. –

Ich denke, das ist das, was Sie wollen, wenn nichts anderes frei fühlen

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>

Quelle

2016-04-07 17:45:14

nach Reihenfolge Hinzufügen zu fragen: relative; + oben :; und rechts:; um es zu zentrieren. Auf diese Weise müssen Sie bei der Größenanpassung des Browsers nur Medienabfragen hinzufügen, um bestimmte Breakpoints zu beheben. Ansonsten sollte dies Ihr Problem lösen. (I hinzugefügt, um die CSS-Eigenschaften zu #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>

Quelle

2016-04-07 17:49:25 Gianni

Antwort

Verwandte Themen