Is there a way to have a responsive container, so all items inside of that container are in the middle of the page, no matter what screen dimension?
Thanks :)
Images are obviously missing, but here's the code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sharpturn Network</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:500' rel='stylesheet' type='text/css'>
<meta content="width=device-width; initial-scale=1; maximum-scale=1" name="viewport">
<link href="stylesheet.css" rel="stylesheet"><!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<img id="logo" src="img/upload.png">
<nav>
<ul>
<li><a class="active" href="index.html">HOME</a></li>
<li><a class="nav" href="#">UPLOAD</a></li>
<li><a class="nav" href="support.html">SUPPORT</a></li>
<li><a class="nav" href="#">FAQS</a> </li>
</ul>
</nav>
</header><img class="banner" src="img/banner.jpg">
<h1 class="title">SIMPLE AS 1, 2, 3!</h1>
<div class="steps">
<img src="img/form.png">
<h2 class="subtitle">Complete our form</h2>
<p>A form diversly designed to take you upto no more than 5 minutes to complete and submit.</p>
</div>
<div class="steps">
<img src="img/wait.png">
<h2 class="subtitle">Patience is a virtue</h2>
<p>Allow upto 72 hours for an submission review and response from our team.</p>
</div>
<div class="steps">
<img src="img/uploaded.png">
<h2 class="subtitle">Viola! All done.</h2>
<p>Your talent is now being promoted and showcased world wide.</p>
</div>
<img class="banner" src="img/grande.jpg">
</body>
</html>
CSS
/*MAIN*/
body {
line-height: 1.25em;
font-family: 'Roboto',sans-serif;
background: url(img/banner.png);
background-size: cover;
/* For flexibility */
color: #505050;
margin: 0;
padding: 0;
}
header {
background: #505050;
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
border-bottom: 1px solid #fff;
z-index: 100;
padding-bottom: 10px;
margin-bottom: 5px;
}
#logo {
margin-top: 20px;
margin-left: 60px;
float: left;
width: 80px;
height: 60px;
display: block;
padding-bottom: 25px;
}
nav {
float: right;
padding: 20px;
color: #fff;
}
nav .active {
font-size: 20px;
color: #cc293f;
}
nav a {
margin-right: 20px;
font-size: 20px;
color: #fff;
text-decoration: none;
}
#menu-icon {
width: 40px;
height: 40px;
background: #fff url(img/menu-icon.png) center;
}
a:hover {
color: #cc293f;
}
a:hover#menu-icon {
background-color: #fff;
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
li {
color: #fff;
display: inline-block;
float: left;
}
.banner {
width: 100%;
height: 300px;
border-bottom: 1px solid #000;
}
.supportbox1 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
border: 3px solid #505050;
float: left;
margin: 50px 70px 25px 10px;
max-height: 500px;
max-width: 300px;
min-height: 500px;
min-width: 300px;
}
.supportbox1 p {
padding-left: 8px;
padding-right: 8px;
}
.supportbox1 img {
padding-left: 41%;
padding-top: 50px;
}
.supportbox2 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
border: 3px solid #505050;
float: left;
margin: 50px 70px 25px 10px;
max-height: 500px;
max-width: 300px;
min-height: 500px;
min-width: 300px;
}
.supportbox2 p {
padding-left: 8px;
padding-right: 8px;
}
.supportbox2 img {
padding-left: 41%;
padding-top: 40px;
}
.supportbox3 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
border: 3px solid #505050;
float: left;
margin: 50px 70px 25px 10px;
max-height: 500px;
max-width: 300px;
min-height: 500px;
min-width: 300px;
}
.supportbox3 p {
padding-left: 5px;
padding-right: 5px;
}
.supportbox3 img {
padding-left: 41%;
padding-top: 50px;
}
.supportbox3 a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #505050;
border: 3px solid #505050;
color: #cc293f;
font-size: 20px;
margin: 90px 0 55px;
padding: 5px 10px;
position: absolute;
text-decoration: none;
}
.imgicon {
margin-left: -117px;
max-height: 80px;
max-width: 80px;
min-height: 80px;
min-width: 80px;
}
h1.title {
text-align: center;
font-size: 30px;
color: #cc293f;
margin-top: 25px;
margin-bottom: 45px;
}
h1.sub {
font-size: 24px;
color: #cc293f;
text-align: center;
padding-bottom: 50px;
}
h2.subtitle {
color: #cc293f;
text-align: center;
padding-top: -5px;
}
p {
font-family: 'Roboto',sans-serif;
margin-bottom: 20px;
}
.steps {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
float: left;
margin: 0 100px 10px -5px;
max-height: 3500px;
max-width: 300px;
min-height: 350px;
min-width: 300px;
}
.steps p {
font-size: 19px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
}
.steps img {
display: block;
margin-left: auto;
margin-right: auto;
}
/****Responsive ****/
#media only screen and (max-width:640px) {
header {
position: absolute;
}
.banner {
width: 100% !important;
height: 300px;
border-bottom: 1px solid #000;
}
#menu-icon {
display: inline-block;
}
nav ul,nav:active ul {
display: none;
position: absolute;
padding: 10px;
background: #505050;
border: 5px solid #fff;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
font-color: #fff;
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
background-color: #505050;
display: block;
}
nav ul {
background: #505050;
}
Set the container property
text-align:center;
and in the element inside the container ( like a paragraph or img) specify
display:inline-block
Related
Here is the HTML, the thing is the nav bar on my first main page works fine but all the other pages have a gap in between the top and the nav bar, its really annoying.
* {box-sizing: border-box;}
body {
margin: 0px;
}
.purchback {
background-image: url(../IMAGES/egg.png);
background-size: auto;
background-repeat: no-repeat;
}
.aboutback {
background-image: url(../IMAGES/farm.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.indexback {
background-image: url(../IMAGES/potato.jpg), url(../IMAGES/chipsf.jpg);
background-size: contain, contain;
background-repeat: no-repeat, repeat;
}
.hap {
height: 280px;
width: 300px;
}
html {
margin-top: 0;
padding: 0;
}
head{
}
h2 {
color: white;
background-color: rgba(0,0,0, 0.9);
border: solid white 3px;
display: inline-block;
padding: 5px 50px 300px 5px;
font-family: cursive;
font-weight: lighter;
margin: 0;
text-align: left;
}
p {
color: black;
vertical-align: top;
}
.logo {
height: 30px;
width: 30px;
padding:-10px -10px -10px -10px;
float: right;
}
.heading {
text-align: center;
font-family: impact;
color: white;
font-weight: lighter;
padding-right: 10px;
padding-top: 200px;
border-bottom: solid white 4px;
padding-bottom: 17px;
}
.information {
text-align: center;
color: white;
font-family: impact;
font-weight: lighter;
font-size: 20px;
padding-right: 10px;
padding-bottom: 20px;
}
.chips {
width: 400px;
height: 550px;
padding-top: 40px;
padding-left: 20px;
}
.carbless {
padding-bottom: 20px;
height: 300px;
width: 230px;
padding-top: 60px;
margin-left: -15px;
position: sticky;
}
.carbless:hover {
border: solid white 3px;
background-color: rgba(100, 0, 100, 0.5);
}
.bigg:hover {
border: solid white 3px;
background-color: rgba(100, 0, 100, 0.5);
}
.bigg {
padding-bottom: 20px;
height: 330px;
width: 250px;
padding-top: 60px;
margin-left: -9px;
position: sticky;
}
background-image {
width: 800px;
height: 500px;
background-repeat: no-repeat;
}
nav {
background-color: rgb(200,180,90);
padding: 10px;
width: 100%;
margin: 0 auto;
position: fixed;
display: block;
}
.purchase {
text-align: center;
font-family: impact;
color: white;
font-weight: lighter;
padding-right: 10px;
padding-top: 80px;
border-bottom: solid white 4px;
padding-bottom: 10px;
}
nav > ul > li {
display: inline-block;
margin-left: 11px;
color: white;
font-family: impact;
font-size: 30px;
padding: 5px 40px 5px 40px;
font-weight: lighter;
}
ul {
list-style-type: none;
}
nav > ul > li > a {
text-decoration: none;
color: white;
}
nav > ul {
margin: 0px;
padding: 0px;
}
nav > ul > li > a:hover {
color: grey;
border: -5px white solid;
}
section {
margin-left: 500px;
margin-top: -330px;
color: white;
font-family: impact;
font-weight: 600;
font-size: 55px;
}
nav > ul > li > ul {
background-color: rgb(200,180,90);
list-style: none;
padding: 0;
display: none;
position: absolute;
}
nav > ul > li:hover > ul {
display: block;
border: -5px white solid;
}
.abouttext {
margin: 10px 10px 10px 10px;
padding: 100px 0px 100px 40px;
font-family:consolas;
background-color: rgba(0, 0, 0, 0.4);
color: white;
}
nav > ul > li:hover {
border: -5px solid white;
}
footer {
color: white;
padding-top: 30px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS/master.css">
</head>
<body class="purchback">
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PURCHASE</li>
<li>VIDEOS</li>
<li>CONTACT</li>
<li><img class="logo"src="IMAGES/logo.png" alt="logo"></li>
</ul>
</nav>
<h1 class="purchase" style="padding-top: -30">purchase our products</h1>
</body>
</html>
And here is the CSS, sorry if it is messy/bad this is my first time making a website.
Remove margin for .purchase
.purchase {
text-align: center;
font-family: impact;
color: white;
font-weight: lighter;
padding-right: 10px;
padding-top: 80px;
border-bottom: solid white 4px;
padding-bottom: 10px;
margin:0; /*Add this*/
}
* {box-sizing: border-box;}
body {
margin: 0px;
}
.purchback {
background-image: url(../IMAGES/egg.png);
background-size: auto;
background-repeat: no-repeat;
}
.aboutback {
background-image: url(../IMAGES/farm.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.indexback {
background-image: url(../IMAGES/potato.jpg), url(../IMAGES/chipsf.jpg);
background-size: contain, contain;
background-repeat: no-repeat, repeat;
}
.hap {
height: 280px;
width: 300px;
}
html {
margin-top: 0;
padding: 0;
}
head{
}
h2 {
color: white;
background-color: rgba(0,0,0, 0.9);
border: solid white 3px;
display: inline-block;
padding: 5px 50px 300px 5px;
font-family: cursive;
font-weight: lighter;
margin: 0;
text-align: left;
}
p {
color: black;
vertical-align: top;
}
.logo {
height: 30px;
width: 30px;
padding:-10px -10px -10px -10px;
float: right;
}
.heading {
text-align: center;
font-family: impact;
color: white;
font-weight: lighter;
padding-right: 10px;
padding-top: 200px;
border-bottom: solid white 4px;
padding-bottom: 17px;
}
.information {
text-align: center;
color: white;
font-family: impact;
font-weight: lighter;
font-size: 20px;
padding-right: 10px;
padding-bottom: 20px;
}
.chips {
width: 400px;
height: 550px;
padding-top: 40px;
padding-left: 20px;
}
.carbless {
padding-bottom: 20px;
height: 300px;
width: 230px;
padding-top: 60px;
margin-left: -15px;
position: sticky;
}
.carbless:hover {
border: solid white 3px;
background-color: rgba(100, 0, 100, 0.5);
}
.bigg:hover {
border: solid white 3px;
background-color: rgba(100, 0, 100, 0.5);
}
.bigg {
padding-bottom: 20px;
height: 330px;
width: 250px;
padding-top: 60px;
margin-left: -9px;
position: sticky;
}
background-image {
width: 800px;
height: 500px;
background-repeat: no-repeat;
}
nav {
background-color: rgb(200,180,90);
padding: 10px;
width: 100%;
margin: 0 auto;
position: fixed;
display: block;
}
.purchase {
text-align: center;
font-family: impact;
color: #000;
font-weight: lighter;
padding-right: 10px;
padding-top: 80px;
border-bottom: solid white 4px;
padding-bottom: 10px;
margin:0;
}
nav > ul > li {
display: inline-block;
margin-left: 11px;
color: white;
font-family: impact;
font-size: 30px;
padding: 5px 40px 5px 40px;
font-weight: lighter;
}
ul {
list-style-type: none;
}
nav > ul > li > a {
text-decoration: none;
color: white;
}
nav > ul {
margin: 0px;
padding: 0px;
}
nav > ul > li > a:hover {
color: grey;
border: -5px white solid;
}
section {
margin-left: 500px;
margin-top: -330px;
color: white;
font-family: impact;
font-weight: 600;
font-size: 55px;
}
nav > ul > li > ul {
background-color: rgb(200,180,90);
list-style: none;
padding: 0;
display: none;
position: absolute;
}
nav > ul > li:hover > ul {
display: block;
border: -5px white solid;
}
.abouttext {
margin: 10px 10px 10px 10px;
padding: 100px 0px 100px 40px;
font-family:consolas;
background-color: rgba(0, 0, 0, 0.4);
color: white;
}
nav > ul > li:hover {
border: -5px solid white;
}
footer {
color: white;
padding-top: 30px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS/master.css">
</head>
<body class="purchback">
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PURCHASE</li>
<li>VIDEOS</li>
<li>CONTACT</li>
<li><img class="logo"src="IMAGES/logo.png" alt="logo"></li>
</ul>
</nav>
<h1 class="purchase" style="padding-top: -30">purchase our products</h1>
</body>
</html>
I want to move to the text area to align with other fields and then move all these fields to the down of the text "Feel free...." I was trying to use marigin-left, marigin-top, but nothing works. All the time these fields stay in one place. Do not know why.
It has to work on ip 6/7/8 plus resolution.
Could you tell me how can I achieve it?
* {
margin: 0;
padding: 0;
}
header {
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
height: 1080px;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img {
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav {
float: right;
color: #000000;
margin-top: 40px;
margin-right: 0px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo {
margin-top: 10px;
float: left;
}
#tekst {
position: absolute;
}
#sign a {
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#profilesign {
margin-top: 400px;
margin-left: 250px;
font: Bold 40px/40px Georgia;
letter-spacing: 0;
color: black;
}
.left {
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 150px 150px;
}
img.left {
padding: 0px 40px 20px 40px;
width: 250px;
height: 250px;
margin-left: 400px;
margin-top: 500px;
}
article input {
width: 300px;
height: 40px;
background: white;
border-radius: 4px;
text-decoration: none;
text-align: center;
font: Bold 25px/12px Arial;
border-radius: 120;
border-style: none;
padding: 6px;
margin-left: 1000px;
margin-top: 500px;
}
article #textSign {
font-size: 50px;
color: black;
text-align: center;
}
#centerText {
text-align: center;
}
#something {
width: 700px;
height: 300px;
text-align: justify;
margin-left: 1000px;
font-size: 30px;
font-weight: bold;
}
#media only screen and (max-device-width: 500px) {
#profilesign {
width: 1000px;
margin-top: 750px;
margin-left: 400px;
font: Bold 60px/40px Georgia;
letter-spacing: 0;
color: black;
}
img.left {
padding: 0px 40px 20px 40px;
width: 550px;
height: 550px;
margin-left: 550px;
margin-top: 450px;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
background-color: black;
color: white;
text-align: center;
}
footer img {
margin-top: 5px;
height: 50px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
#sign a {
background-color: #DCDFDE;
padding: 20px 15px 17px 1px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#logo img {
margin-left: 550px;
text-align: center;
width: 650px;
}
body {
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
background-size: 100% 3000px;
width: auto;
}
.row {
width: 2500px;
display: grid;
grid-template-columns: 0% 80%;
}
.main-nav {
margin-left: 100px;
margin-top: 250px;
float: left;
display: inline-flex;
list-style: none;
}
.main-nav li a {
border-right: 3px solid black;
color: #000000;
text-decoration: none;
font: Bold 58px/45px Arial;
}
#something {
width: 700px;
height: 300px;
text-align: justify;
margin-top: 200px;
font-size: 30px;
font-weight: bold;
}
article input {
width: 400px;
height: 70px;
background: white;
border-radius: 4px;
text-decoration: none;
text-align: center;
font: Bold 45px/12px Arial;
border-radius: 120;
border-style: none;
padding: 6px;
margin-left: 700px;
}
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="css-images/style-contact.css">
</head>
<body>
<header>
<div class="row">
<ul id="logo"> <img src="css-images/dingdog-logo.png"> </ul>
<ul class="main-nav">
<li style="padding-left:10px">PROFILE</li>
<li style="padding-left:10px">MAP</li>
<li style="padding-left:10px">YOUR FRIENDS</li>
<li style="padding-left:10px">MAILBOX</li>
<li style="padding-left:10px" id="sign">LOG OUT</li>
</ul>
</div>
<section>
<article>
<p id="profilesign">Feel free to send us a question.</p>
<img class="left" src="css-images/mial.jpg" style='position:absolute;left:0px; top:0px;' />
<div id="lala">
<p id="centerText">
<label><input type="email" name="email" placeholder="Email" style='margin-top:250px;position:absolute;left:0px; top:0px;' ></label><br/>
<label><input type="name" name="name" placeholder="Name" style="margin-top: 350px; position:absolute;left:0px; top:0px;"></label><br>
<label><input type="subject" name="subject" placeholder='Subject:' style="margin-top: 450px; position:absolute;left:0px; top:0px;"></label><br></p>
<textarea placeholder='Type something' id="something" style="margin-top: 550px; position:absolute;left:0px; top:0px;"></textarea>
</div>
<label id="submit"><input type="submit" name="send" value="Send" style="margin-top: 900px;position:absolute;left:0px; top:0px; background: #2699FB 0% 0% no-repeat padding-box;"></label>
</article>
</section>
</header>
<footer>
<img src="social/instagram.png" />
<img src="social/twitter-white-logo.png" />
<img src="social/facebook.png" />
</footer>
</body>
</html>
I can't get rid of the top and bottom white border of the video. Video is set on width: 100%; so there's no border on the left and right. When I set * (universal sizing) using margin: 0; everything bumps together, even two cards (kartica and kartica2), but I want them separated a bit.
Then if I set margin: 0; all the other pages bump together. Is there any way I can edit this with one selector(video selector is kartica2)?
This CSS sheet is universal, but for that specific page, content is at the top.
/*Naloga 1*/
* {
box-sizing: border-box;
/*universal box-sizing*/
}
body,
html {
margin-left: 0px;
/*zunanji odmik*/
margin-right: 0px;
background-color: #b3b3ff;
/*hex value*/
font-family: "Comic Sans MS", cursive, sans-serif;
margin: 0px;
/*drugace nastavi auto browser*/
}
.sticky {
position: sticky;
/*glava na vrhu strani ko se premikamo navzdol*/
top: 0;
}
#h1 {
padding: 10px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
margin: 0px;
/*drugace nastavi auto browser*/
}
#h2 {
margin-left: 0px;
margin-right: 0px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
padding: 5px;
}
#ul {
background-color: #6600ff;
}
ul {
list-style-type: none;
/*oznake v seznamu*/
margin: 0;
/*to remove browser default settings*/
padding: 0;
/*to remove browser default settings*/
overflow: hidden;
/* ce bi b boxsu bilo prevec vsebine*/
background-color: #1a1aff;
/*barva navigacije*/
}
li {
float: left;
}
li a {
display: block;
/*kot block elements naredi celotno areo clickable-ne samo tekst*/
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
/*skrijes podcrtano besedilo*/
}
li a:hover {
background-color: #000033;
/*barva ozadja ko se postavimo z misko*/
}
.vsebina {
max-width: 1000px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.kartica {
background-color: white;
margin-left: 1%;
margin-right: 1%;
}
.kartica2 {
background-color: white;
/*kartica za video*/
margin-left: 1%;
margin-right: 1%;
}
/*naloga 2*/
.n2 {
width: 100%;
}
/*video*/
#n21 {
margin-left: 10px;
margin-right: 10px;
}
/*zunanji odmik clankov*/
.n22 {
width: 100%;
height: auto;
}
.n23 {
text-align: center;
}
/*pripis pod sliko*/
/*naloga 3*/
#h3 {
padding: 10px;
margin: 0px;
display: block;
height: 40px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
}
.column {
float: left;
width: 33%;
/*ker so 3, ce bi bile 4 - 25%*/
padding: 5px;
/* razmaki med karticami*/
margin-top: 10px;
/*navigation bar to the content*/
}
/* Clear floats after the columns, postavi 3x2 */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
#media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
.slika3 {
max-width: 100%;
max-height: 100%;
padding: 0px;
margin: 0px;
}
.opis {
margin: 0px;
padding: 5px;
height: 160px;
overflow: scroll;
/*Drsni trak*/
}
/*Naloga 4*/
input[type=text],
select {
width: 100%;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 20px;
margin-top: 8px;
margin-bottom: 8px;
display: inline-block;
box-sizing: border-box;
border: 2px solid red;
border-radius: 4px;
}
input[type=text]:focus,
select:focus {
border: 2px solid #555;
}
textarea {
width: 100%;
height: 150px;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 20px;
box-sizing: border-box;
border: 2px solid red;
border-radius: 4px;
resize: none;
/* prepreci spreminjanje polja*/
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
padding-top: 16px;
padding-bottom: 16px;
padding-left: 16px;
padding-right: 16px;
margin-top: 10px;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="si">
<head>
<meta charset="UTF-8">
<title>Tilenova spletna stran</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="sticky">
<h1 id="h1">Tilenova spletna stran </h1>
<ul id="ul">
<li>Domov</li>
<li>Ponudba</li>
<li>Anketa</li>
<li>Vaje</li>
</ul>
</div>
<div class="vsebina">
<div class="kartica">
<h2 id="h2">O meni</h2>
<p id="n21">Sem Tilen Sočič in študiram na <b>Fakulteti za elektrotehniko, računalništvo in informatiko</b>.</p>
<p id="n21">To je moja spletna stran, ki je nastala pri predmetu <u>Osnove svetovnega spleta</u>.</p>
<p id="n21">V prostem času se ukvarjam s športom in modifikacijo računalniskih delov.</p><br />
<!-- odstrani figure in odmiki se odstranijo -->
<img class="n22" src="images/galaksija.jpg" alt="galaksija">
<figcaption class="n23">Slika nočnega neba</figcaption>
</div>
<div class="kartica2">
<h2 id="h2">Video: Spreminjanje mehurčka v led</h2>
<video class="n2" controls>
<source src="Videos/Mehurcek.mp4">
</video>
<p id="n21">Video iz strani PEXELS VIDEOS</p>
</div>
</div>
</body>
</html>
The problem is the #h2 ID, you need to add a margin-bottom: 0;
#h2 {
margin-left: 0px;
margin-right: 0px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
padding: 5px;
margin-bottom: 0; /*Added*/
}
and also #n21, here add a margin-top: 0;
#n21 {
margin-left: 10px;
margin-right: 10px;
margin-top: 0; /*Added*/
}
Let me know if that helps! Here you have a codepen if you want to test it!
I have a problem converting html page into wordpress theme. When loading theme i just see white screen but other previously installed theme looks normal. I read earlier similar subject on stackoverflow but it seems that it doesnt help me. Can somebody help me solve this problem?
These are my theme files:
Theme Name: Vesti
Theme URI: www.komunalacbecej.com
Author: Aljosa Boskovic
Author URI: www.komunalacbecej.com
Description: Twenty Seventeen brings your site to life with immersive featured images and subtle animations. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
*/
* {
margin: 0;
padding: 0;
}
body{
width: 960px;
margin: 0 auto;
background-color: #faf6d0;
padding: 0;
//background-image: url('images/green.png');
background-size: cover;
}
header{
display: block;
width: 100%;
margin: 0 auto;
}
#uppermenu{
float: right;
margin-top: 4px;
}
#uppermenu ul{
margin-right: 15px;
}
#uppermenu ul li{
display: inline;
padding: 5px;
font-size: 15px;
color: grey;
font-weight: 540;
font-family: 'Oswald', sans-serif;
cursor: pointer;
}
#uppermenu ul li:hover{
color:#156038;
}
#flags{
float:right;
margin-top: 4px;
}
#flags img{
width: 20px;
height: 20px;
margin-right: 7px;
cursor: pointer;
}
#logo{
vertical-align: middle;
float: left;
height: 70px;
}
#naziv{
float: left;
color: #1a7645;
height: 70px;
width: 300px;
box-sizing: border-box;
padding: 5px;
font-family: sans-serif;
}
nav{
width: 100%;
background: #3d874d;
text-align: center;
position: relative;
z-index: 11;
border: 2px solid #a4a41b;
margin: 0 auto 10px auto;
clear: both;
border-radius: 2px;
}
nav ul{
list-style: none;
}
nav ul li{
display: inline-block;
padding: 15px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
}
nav ul li a{
text-decoration: none;
color: #fff;
display: block;
font-size: 1.1em;
}
nav ul li:hover{
background: #150;
}
nav ul li a:hover{
color: #fdf742;
}
nav ul ul {
position: absolute;
width: 150px;
background: #2a562c;
opacity: 0.8;
margin-top: 15px;
margin-left: -15px;
text-align: left;
display: none;
}
nav ul ul li{
display: block;
text-align: left;
border-bottom: 1px solid #5b7e5d;
}
nav ul li:hover > ul{
display: block;
}
#slide{
width: 100%;
height: 500px;
position: relative;
z-index: 2;
margin: 0 auto;
}
#slidephoto{
width: 100%;
height: 500px;
position: relative;
z-index: 2;
border-radius: 5px;
}
#leftbutton{
width: 5%;
height:500px;
position: absolute;
left: 0;
top: 0;
background: #b3b0b0;
opacity: .5;
line-height: 500px;
z-index: 4;
border-radius: 5px;
}
#rightbutton{
width: 5%;
height:500px;
position: absolute;
right: 0;
top: 0;
background: #b3b0b0;
opacity: .5;
line-height: 500px;
z-index: 4;
border-radius: 5px;
}
#leftarrow {
vertical-align: middle;
cursor: pointer;
}
#rightarrow {
vertical-align: middle;
cursor: pointer;
}
#leftarrow:hover{
background: grey;
}
#rightarrow:hover{
background: grey;
}
#naslov{
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
letter-spacing: 1px;
text-indent: 30px;
font-size: 20px;
color: #1a7645;
font-family: Georgia;
border-top: 1px solid #1a7645;
background: #639665;
color: #e6f3d1;
padding: 10px 0;
}
#firsttext{
width: 100%;
margin: 30px auto 0 auto;
font-family: 'Times New Roman';
line-height: 1.4em;
font-size: 19px;
text-align: justify;
padding-top: 10px;
box-sizing: border-box;
padding: 40px 90px;
color: white;
background: #6eae49;;
border-radius: 4px;
}
#firsttext span{
font-size: 28px;
font-weight: bold;
color: #1a7645;
}
#delatnosti {
width: 100%;
position: relative;
text-align: center;
background-color: #e6f3d1;
margin: 0px auto;
box-sizing: border-box;
border: 1px solid #6d9e6f;
padding: 20px ;
}
.boxes div {
display: inline-block;
border: 1px solid #a2b6c0;
width: 200px;
height: 210px;
vertical-align: top;
text-align: center;
background-color: white;
color: #46545b;
margin: 20px 10px;
cursor: pointer;
border-radius: 4px;
}
.boxes div:hover{
border: 1px solid green;
background-color: #dfdede;
}
.boxes a img{
width: 200px;
height: 110px;
}
.boxes a p, h3{
//margin: 5px;
text-decoration: none;
}
.boxes div a{
text-decoration: none;
color: black;
}
#obavestenja{
width: 100%;
height: 40px;
//border: 1px solid black;
font-size: 2em;
line-height: 40px;
text-indent: 210px;
}
#mainnews-banner{
width: 100%;
margin: 0 auto;
}
#mainnews-banner h1{
text-indent: 210px;
font-family: serif;
letter-spacing: 3px;
}
#sadrzaj{
width: 75%;
background-color: white;
display: inline-block;
box-sizing: border-box;
text-align: justify;
border: 1px solid black;
}
#vestikolone{
width: 80%;
}
#glavnavestslika{
width: 100%;
height: 430px;
background: url("images/slika4.jpg");
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
#glavnavesttekst{
width: 100%;
height: 180px;
background: black;
position: absolute;
bottom: 0;
opacity: .6;
}
#glavnavesttekst p{
color: #ded8d8;
opacity: 1;
padding: 10px;
font-size: 18px;
font-family: Georgia;
line-height: 23px;
}
#glavnavesttekst h2{
color: white;
font-weight: bold;
opacity: 1;
font-family: Georgia;
text-indent: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
#glavnavest {
font-size: 1.2em;
font-family: 'Oswald', sans-serif;
}
#datum{
width: 100%;
padding: 10px;
box-sizing: border-box;
color: white;
background: black;
}
#banner{
width: 25%;
float: right;
text-align: center;
//border: 3px solid green;
//background: #f1f1f1;
}
#banner img{
width: 120px;
height: 100px;
background: #9ac0f6;
border: 1px solid #9ac0f6;
cursor: pointer;
}
#banner p{
font-size: 1em;
font-family: Arial;
background: #fecd61;
width: 60%;
margin: 0 auto;
margin-bottom: 8px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
}
#pastnewspara{
text-transform: uppercase;
background-color: black;
color: white;
width: 75%;
box-sizing: border-box;
padding-left: 10px;
margin-bottom: 1px;
opacity: .9;
}
#pastnews{
border-top: none;
position: relative;
text-align: center;
width:75%;
height: 140px;
float: left;
border: 1px dashed black;
border-top: none;
}
.column{
width: 25%;
height: 140px;
display: inline-block;
margin-left: -4px;
background-color: white;
box-sizing: border-box;
vertical-align: top;
box-sizing: border-box;
}
.column img{
width: 100%;
height:140px;
}
.column h3,p{
text-align: left;
padding: 5px;
}
#prognoza{
clear: both;
width: 75%;
background: brown;
color: #a2b6c0;
border-bottom: 2px solid white;
}
.weatherwidget-io{
width: 100%;
display: block;
height: 20px;
text-align: left;
}
#footer{
width: 100%;
height: 130px;
background: white;
background: #a2b6c0;
text-align: center;
position: relative;
border-top: 3px solid white;
}
#icons{
line-height: 130px;
}
#footer i{
color: #554f4f;
font-size: 36px;
padding: 26px;
vertical-align: middle;
}
#footer span {
position: absolute;
right: 50px;
color: grey;
font-family: sans-serif;
}
#footer span i{
padding: 6px;
color: grey;
font-size: 0.6em;
}
/* stranica zelenilo.html */
#submenu ul li{
list-style: none;
font-size: 1.1em;
padding-bottom: 5px;
border-bottom: 2px solid green;
margin-bottom: 13px;
background: rgba(96,96,96,0.4);
}
#submenu {
margin-top: 30px;
width: 22%;
background: url('images/leaf3.jpg');
background-size: cover;
opacity: .9;
font-family: 'Oswald', sans-serif;
text-align: center;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
padding: 10px 0;
color: #cfcf05;
border: 2px solid green;
float: left;
}
#submenu ul {
opacity: 1;
padding: 40px 20px;
font-size: 16px;
}
#zelenilobody{
background: url('images/goranski.jpg');
background-size: cover;
height: 1000px;
}
#submenu ul li:hover{
background-color: grey;
background: rgba(96,96,96,0.7);
color: white;
cursor: pointer;
}
#navigation nav{
background-color: #61a239;
}
#zelenilo-naziv #naziv{
color: #60a23a;
background-color: rgba(96,96,96,0.7);
}
#zelenilo-uppermenu #uppermenu li{
color: #60a23a;
background-color: rgba(96,96,96,0.8);
}
#zelenilo-tekst{
width: 75%;
float: right;
margin-top: 30px;
border: 1px solid white;
background: rgb(246, 241, 241, 0.8);
box-sizing: border-box;
padding: 20px;
}
#zelenilo-tekst p{
line-height: 20px;
margin-top: 10px;
font-size: 17px;
}
#zelenilo-tekst ol{
padding-left: 20px;
line-height: 24px;
margin-top: 15px;
font-size: 17px;
}
/* stranica vesti.php */
#blognews {
background-color: white;
margin-top: 20px;
padding: 10px;
border: 1px solid black;
}
#article {
border: 1px solid black;
margin-top: 20px 0;
}
#article h2 {
margin-left: 15px;
margin-top: 10px;
}
#datumclanka{
display: block;
margin-left: 15px;
}
#article img{
height: 120px;
display: inline-block;
width: 180px;
vertical-align: middle;
margin-top: 10px;
margin-left: 10px;
padding-bottom: 10px;
}
#article p{
display: inline-block;
width: 650px;
vertical-align: middle;
font-size: 1.1em;
margin-left: 10px;
}
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php bloginfo('title'); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<?php wp_head(); ?>
</head>
<body>
<header>
<img src="images/logofirme.jpg" id="logo">
<div id="naziv">
<h1><?php bloginfo('name'); ?></h1>
<p>Javno preduzeće za komunalne usluge</p>
</div>
<div id="flags">
<img src="images/serbia.png">
<img src="images/hungary.png">
</div>
<div id="uppermenu">
<ul>
<li>Najčešća pitanja</li>
<li>Korisni linkovi</li>
</ul>
</div>
<?php wp_nav_menu(); ?>
</header>
footer.php
<div id="footer">
<div id="icons">
<i class="fa fa-phone"></i>
<i class="fa fa-envelope-o"></i>
<i class="fa fa-facebook-official"></i>
<span><i class="fa fa-copyright"></i>Design by Aleksey</span>
</div>
</div>
</body>
</html>
index.php
<?php get_header(); ?>
test
<?php get_footer(); ?>
Can you try following solutions?
In first line of style.css add "/*" before "Theme Name: Vesti". So it will be like
/*
Theme Name: Vesti
Disable/deactivate all plugins to check if confliction happens between your active theme and plugins. And then enable it one by one if issue happens because of it.
Add following line in wp-config.php file for increasing PHP memory limit.
define(‘WP_MEMORY_LIMIT’, ’64M’);
I'm trying to control the "show more" link and cannot, I've used link controls before, but this one is puzzling me. The link I've tried to control so far is #r_a_show_more_link ("show more" link on right under recent activity) it's code is at the bottom of the CSS, but I can't get it to work. Maybe I'm doing something wrong with the CSS selectors? Please look at the code and run the snippet!
Thanks a lot!
/* Main Nav */
#home_icon {
height: 40px;
float: left;
padding: 10px;
position: relative;
top: 95px;
}
li {
display: inline-block;
}
ul {
float: right;
position: relative;
top: 50px;
margin: 0px;
padding: 0px;
}
li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
margin: 3px;
margin-top: 0px;
border: 2px solid #000;
border-radius: 5px;
}
nav li a:visited {
color: black;
}
nav li a:hover {
color: gray;
border-color: gray;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 150px;
background-color: rgba(255,255,255,0.9);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
float: right;
margin: 15px;
display: inline-block;
background: #2b303b;
border: none;
color: #63717f;
border-radius: 5px;
}
#logo {
float: left;
height: 150px;
display: inline-block;
}
body {
background-image: url("../pictures/test.jpg");
background-color: blue;
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.9);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
color: white;
font-size: 130px;
margin-top: 20px;
margin-bottom: 10px;
text-align: center;
padding: 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link :visited {
color: black;
}
#r_a_show_more_link :hover {
color: gray;
border-color: gray;
}
#r_a_show_more_link :active {
color: black;
border-color: black;
}
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<a href="">
<img id="logo" src="pictures/jeff_logo.png" alt="Logo">
</a>
<img src="pictures/home_icon.png" id="home_icon"/>
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
<ul>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h1 id="welcome">Welcome to </br> my website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
You need to remove the space before :visited in the CSS:
#r_a_show_more_link:visited {
color: black;
}
you have an extra space before your :hover,:visited and:active, so remove it, like this:
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
border-color: gray;
}
#r_a_show_more_link:active {
color: black;
border-color: black;
}