How can I make this textarea (the one with class="proxi-output" responsive?
When I try to resize the page it overlaps div (class="resi-gen") and it breaks the whole web.
*{
font-family: 'Montserrat', sans-serif;
}
body,
html{
margin: 0px;
padding: 0px;
background-image: url(../img/agreya-bg.png);
background-repeat: no-repeat;
background-size: cover;
background-color: #0E0E0E;
}
.side-panel{
background-color: #050707;
height: 100vh;
width: 250px;
margin: 0px;
z-index: 10;
position: absolute;
}
.logo{
margin: 0px;
color: #FFFFFF;
padding: 35px 20%;
letter-spacing: 2px;
}
.sub-pages{
text-align: center;
justify-content: center;
margin: 150px auto;
}
.sub-pages a{
display: block;
font-size: 20px;
text-decoration: none;
color: #FFFFFF;
margin: 45px 0px;
}
.sub-pages a:hover{
color: #E1E777;
}
#current{
color: #E1E777;
}
.heading{
color: #FFFFFF;
text-align: center;
font-weight: 500;
letter-spacing: 2px;
}
.wrapper{
float: right;
width: 100vw;
height: 100vh;
margin: 0px;
}
.resi-gen{
position: relative;
background-color: #050707;
margin-top: 20%;
width: 70%;
height: 45%;
border: 2px solid transparent;
border-radius: 50px;
/* width: 1100px;
height: 400px; */
margin-left: 290px;
}
.resi-gen h2{
display: inline-block;
color: #FFFFFF;
margin-top: 20px;
margin-left: 30px;
font-weight: 500;
letter-spacing: 1.5px;
}
#proxi-output{
position: absolute;
margin-top: 2%;
margin-left: 5%;
height: 85%;
width: 70%;
resize: none;
background-color: #818181;
cursor: pointer;
outline: none;
border: 2px solid transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/residental.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/29441bec37.js" crossorigin="anonymous"></script>
<title>Agreya - Register</title>
</head>
<body>
<div class="wrapper">
<div class="side-panel">
<h1 class="logo">AGREYA</h1>
<div class="sub-pages">
<a id="current" href="residental.html">Residental</a>
Datacenter
Purchase
Settings
</div>
</div>
<h1 class="heading">Residental proxies</h1>
<div class="resi-gen">
<h2>Generate Proxies</h2>
<textarea id="proxi-output" name="output"></textarea>
</div>
</div>
</body>
</html>
Related
i'm making a website and i have encountered several errors in the code. any help would be appreciated, thanks in advance.
the errors are:
i want the body of the website to be in the centre of the screen, not at the top
i want to add two columns in the main box, but the columns aren't showing. i did add code to fix this table problem but i don't think it's working
here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LAINWEB</title>
<meta name="keywords" content="Neocities, HTML, aesthetic, web 1.0, old web, 90's, 80's, early 2000's,personal website,">
<style>
#font-face {
font-family: hearts;
src: url('https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf') format('truetype');
}
#font-face {
src: url(https://dl.dropbox.com/s/7bidj4o8lc71b8u/Hantam.ttf);
font-family: hantam;
}
html {
font-size: 17px;
line-height: 14px;
font-family: "hearts";
padding: 5px;
cursor: url("/images/cursors/torocursor.png"), auto;
scrollbar-color: #f48ee6 #fad1e8;
}
body {
margin-left: auto;
margin-right: auto;
background-image: url("https://lifted.crd.co/assets/images/gallery01/a307cfec.png?v=a0ae4590");
}
a {
text-decoration: none;
color: #ef8a85;
}
a:hover {
cursor: url("/images/cursors/torocursorpoint.png"), auto;
color: #00b2c5;
}
hr {
border-top: solid 1px;
border-color: #b6a898;
}
p {
margin: 10px;
}
h1 {
font-family: hantam;
font-size: 30px;
color: #F9A1CC;
line-height: 18px;
margin: 0px;
font-weight: normal;
text-align: center;
}
.table1 {
margin-left: auto;
margin-right: auto;
display: block;
border-spacing: 0px;
border-collapse: collapse;
width: 812px;
}
.table1 td {
vertical-align: top;
border: none;
padding: 0px;
position: relative;
}
.table1 tr {
vertical-align: top;
border: none;
padding: 0px;
position: relative;
}
.headbox {
margin-left: auto;
margin-right: auto;
margin-top: 0px;
border-radius: 4px;
height: 80px;
width: 800px;
position: relative;
padding: 10px;
}
.footbox {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
width: 900px;
padding: 0px;
height: 100px;
text-align: center;
}
.titleimg {
margin-left: auto;
margin-right: auto;
display: block;
position: absolute;
bottom: -20px;
left: -15px;
z-index: 10;
}
.bar1 {
background-color: #FFFFFF;
border: 3px double #B1B1B1;
border-radius: 4px;
padding: 5px;
padding-bottom:50px;
width: 170px;
min-height: 100px;
margin-top: 7px;
position: relative;
}
.mainbox {
background-color: #FFFFFF;
border: 3px double #B1B1B1;
border-radius: 4px;
padding: 20px;
width: 570px;
height: 400px;
margin-left: 4px;
margin-top: 7px;
position: relative;
.column {
float: left;
width: 37%;
padding: 10px;
.row:after {
content: "";
display: table;
clear: both;
}
}
li {
list-style: none;
margin-bottom: 5px;
}
.hder {
margin-left: -5px;
border-top: 1px solid #b6a898;
padding: 2px;
list-style: none;
width: 176px;
font-family: "MS UI Gothic", Tahoma;
font-weight: bold;
margin-bottom: 5px;
color: white;
}
</style>
</head>
<body>
<table class="table1">
<tr>
<td>
<div class="bar1">
<li>about
</li>
<li>reading diary
</li>
<li>music
</li>
</li>
</ul>
</div>
</td>
<td>
<div class="mainbox">
<div class="row">
<div class="column">
</div>
<img src="https://barbara.crd.co/assets/images/gallery34/c3f48eed_original.gif?v=078d66a6">
<div class="column">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
</div>
</td>
</tr>
</table>
<div class="footbox">
</div>
</body>
</html>
Try this for 1:
Add this to your body style:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Remove margin (optional)
I've trying to make a website just for a home project but having some trouble with the css for mobile.
There seems to be a lot of whitespace surrounding the elements to the right and bottom of the site. I'm newer to the world of CSS so any help would be appreciated.
Screenshot of what chrome shows in developer mode.
#media screen and (max-width:450px) {
body {
margin: 0 0 0 0;
padding: 0 0 0 0;
max-width: 100vw;
overflow-x: hidden;
}
html{scroll-behavior:smooth}
.navbar {
background-color: #008B8B;
position: fixed;
top: 0;
z-index: 100;
width: 100vw;
}
.navbar a {
text-decoration: none;
display: inline-block;
float: center;
padding-bottom: 20px;
}
.logo{
display: none;
}
.loginLogo{
width = 1px;
height = 1px;
visibility: hidden;
}
.navbar-name{
color: #f2f2f2;
font-size:25px;
padding-left: 25%;
font-family: 'Lobster', cursive;
}
.navbar-home{
font-size: 17px;
padding-top: 5px;
padding-right: 10px;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
}
.navbar-products{
font-size: 17px;
padding-top: 5px;
padding-right: 10px;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
}
.navbar-about{
font-size: 17px;
padding-top: 5px;
padding-right: 10px;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
}
.navbar-contact{
font-size: 17px;
padding-top: 5px;
padding-right: 17.5%;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
}
.navbar-login{
font-size: 1px;
padding-top: 1px;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
visibility: hidden;
}
/* Change the color of links on hover */
.navbar-home:hover {
color: black;
}
.navbar-products:hover {
color: black;
}
.navbar-about:hover {
color: black;
}
.navbar-contact:hover {
color: black;
}
.navbar-login:hover {
color: black;
}
/* Add a color to the active/current link */
.navbar a.active {
background-color: #4CAF50;
color: white;
}
/*--------HOME PAGE------------*/
.homePage{
margin: 0 0 0 0;
padding: 0;
width: 100vw;
height: 820px;
background-image: url(multiGrain.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.homePageH1{
position: absolute;
text-align: center;
overflow: hidden;
white-space: nowrap;
top: 26%;
left:50%;
transform: translateX(-50%) translateY(-50%);
font-size: 40px;
color: white;
}
.homePageH2{
position: absolute;
text-align: center;
display: inline;
top: 28%;
left: 50%;
text-align: center;
transform: translateX(-50%) translateY(-50%);
font-size: 20px;
color: white;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
display: inline-block;
}
.aboutUsButton{
position: absolute ;
text-align: center;
top: 31%;
left:30%;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
transform: translateX(-50%) translateY(-50%);
background-color: rgb(0, 159, 159);
border-radius: 25px;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
text-decoration: none;
}
.ourProductsButton{
position: absolute ;
text-align: center;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
display: inline-block;
top: 31%;
left:70%;
padding: 10px;
padding-right: 18px;
padding-left: 18px;
transform: translateX(-50%) translateY(-50%);
background-color: rgb(0, 159, 159);
border-radius: 25px;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
text-decoration: none;
}
/*-------ABOUT US PAGE----------*/
.aboutUsPage{
margin: 0 0 0 0;
padding: 0px;
background-color: white;
height: auto;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.aboutUsH1{
position: relative;
padding-top: 20px;
padding-left: 20px;
margin: 0px;
text-align: left;
display: block;
width: 90%;
top: 20%;
font-size: 20px;
font-family: 'Lobster', cursive;
color: black;
background-color: rgb(255,255,255);
}
.aboutUsP{
position: relative;
padding-top: 20px;
padding-left: 20px;
padding-bottom: 30px;
margin: 0px;
text-align: left;
float: bottom;
display: block;
width: 90%;
top: 5%;
font-size: 15px;
font-family: 'Lobster', cursive;
color: black;
background-color: rgb(255,255,255);
}
.mixerImage{
position: relative;
object-fit: cover;
width: 100%;
height: 150px;
}
/*--------PRODUCTS PAGE------------*/
.productsPage{
position: relative;
margin: 0px;
padding: 0px;
background-color: white;
height: 300px;
width: auto;
}
.productsH1{
position: relative;
text-align: left;
top: 5%;
left: 4%;
font-size: 25px;
font-family: 'Titillium Web', sans-serif;
color: black;
}
.productsP{
position: relative;
padding: 10px;
padding-top: 15px;
text-align: left;
float: inherit;
width: 45%;
left: 2%;
font-size: 15px;
font-family: 'Titillium Web', sans-serif;
color: black;
background-color: white;
}
.productListButton{
position: absolute ;
text-align: center;
left: 2%;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
background-color: black;
border-radius: 25px;
font-family: 'Titillium Web', sans-serif;
letter-spacing: 5px;
color: white;
text-decoration: none;
}
.slideshowImage1{
position: absolute;
width: auto;
left: 55%;
top: 15%;
height: 100px;
float: right;
margin: 10px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.slideshowImage2{
width = 0px;
height = 0px;
visibility: hidden;
}
/*-------CONTACT US PAGE---------*/
.contactPage{
margin: 0 0 0 0;
padding: 0px;
background-image: url(rollingPin2.JPG);
height: 700px;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-size: 200% 100%;
}
.contactH1{
position: relative;
text-align: center;
overflow: hidden;
white-space: nowrap;
top: 10%;
left:0%;
font-size: 70px;
letter-spacing: 3px;
color: white;
font-family: 'Dancing Script', cursive;
}
.contactP1{
position: relative;
text-align: center;
top: 10%;
left:0%;
font-size: 18px;
color: white;
font-family: 'Slabo 27px', serif;
}
.contactP2{
position: relative;
text-align: center;
top: 10%;
left:0%;
font-size: 18px;
color: white;
font-family: 'Slabo 27px', serif;
}
.contact-form{
position: relative;
top: 15%;
width: 80%;
left: 47.5%;
transform: translateX(-50%);
}
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
font-family: 'Titillium Web', sans-serif;
border-radius: 4px; /* Rounded borders */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: none; /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
width: 105%;
background-color: #008B8B;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: black;
}
.nameInput{
position: relative;
top: 0px;
color: white;
}
.emailInput{
position: relative;
top: 5px;
color: white;
}
.messageInput{
position: relative;
top: 5px;
color: white;
}
.submitButton{
position: relative;
top: 5px;
}
/*--------FOOTER---------*/
.facebookLogo{
width: 0%;
height: 0%;
visibility: hidden;
}
.footer {
width: 0px;
height: 0px;
visibility: hidden;
}
.footerp1{
width: 0px;
height: 0px;
visibility: hidden;
}
.footerp2{
width: 0px;
height: 0px;
visibility: hidden;
}
.footerp3{
width: 0px;
height: 0px;
visibility: hidden;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Slabo+27px&display=swap" rel="stylesheet">
<title>Doughboys Bakery</title>
<link href="StyleSheet.css" rel="stylesheet">
</head>
<body>
<header class="site-header">
<nav class="navbar">
<img class = "logo" src="Doughboys Logo - Website Version.png" alt="Logo" width="80"height="45.109">
<a class="navbar-name" href="">Doughboy's Bakery.</a>
<a class="navbar-login" href="">Log In</a>
<img class = "loginLogo" src="loginLogo2.png" onmouseover="this.src='loginLogo2Black.png';" onmouseout="this.src='loginLogo2.png';" width="50"height="28.889"/>
<a class="navbar-contact" href="#contactPage">Contact</a>
<a class="navbar-products" href="#productsPage">Products</a>
<a class="navbar-about" href="#aboutUsPage">About</a>
<a class="navbar-home" href="#homePage">Home</a>
</nav>
</header>
<div class = "homePage" id="homePage">
<h1 class="homePageH1">Quality or Quantity</h1>
<h2 class="homePageH2">We're here to give you both</h2>
<div class = "homePageButtons">
<a class="aboutUsButton" href="#aboutUsPage">About Us</a>
<a class="ourProductsButton" href="#productsPage">Our Products</a>
</div>
</div>
<div class = "aboutUsPage" id="aboutUsPage">
<div class = "aboutUsText">
<h1 class="aboutUsH1">Who we are.</h1>
<p class="aboutUsP">Doughboys Bakery is a locally owned and operated wholesale bakery located near the city centre of Palmerston North. We produce traditional bakery goods like the classic Mince and Cheese Pies and Custard Squares. <br/><br/>We deliver actively in the Manawatu-Whanganui, Horowhenua & Wairarapa regions. (T's & C's Apply)<br/><br/>Use the contact section below to see how we can help suit your baking needs.</p>
</div>
</div>
<div class = "productsPage" id="productsPage">
<h1 class="productsH1">What we make.</h1>
<p class="productsP">At Doughboys' we supply traditionally sold bakery goods all the way from the classic Mince and Cheese Pie to the humble Scone.</p>
<button class="productListButton" type="submit" onclick="window.open('ProductList.doc')">Full Product List</button>
<div id="slideshow">
<div>
<img class="slideshowImage1" src="fruitPies.jpeg">
</div>
<div>
<img class="slideshowImage2" src="pies.jpg">
</div>
</div>
</div>
<div class="contactPage" id="contactPage">
<h1 class="contactH1">Contact Us.</h1>
<p class="contactP1">ADDRESS: 15 Johnston St </p>
<p class="contactP2">TEL: (06) 123 1234 | doughboys#gmail.net.nz</p>
<div class = "contact-form">
<form id = "contact-form" method="post" action="contactForm.php">
<input class= "nameInput" type="text" id="name" name="name" placeholder="Your name...">
<input class= "emailInput" type="text" id="email" name="email" placeholder="Your email...">
<textarea class= "messageInput" id="message" name="message" placeholder="Write something..." style="height:100px"></textarea>
<input class= "submitButton" type="submit" value="Submit">
</form>
</div>
</div>
<div class="footer">
<a href="https://www.facebook.com/Doughboys-Bakery-Ltd-216199385212667">
<img class = "facebookLogo" src="facebookLogo.png" >
</a>
<p class="footerp1">(06) 123 1234</p>
<p class="footerp2">doughboys#gmail.net.nz</p>
<p class="footerp3">15 Johnston St</p>
</div>
</body>
</html>
Problem: I have to arrange these LI in a very specific way. Here is the image:
but I can't seem to break the boxes up. I have tried Flexbox, ClearFix, etc... no luck.
Please look at the picture so you can see how I am suppose to make this look.
* {
box-sizing: border-box;
}
a {
color: #777777;
}
html, body {
height: 100%;
}
#wrap {
margin: 0 auto;
text-align: center;
width: 960px;
}
.contentBox {
margin: 0 auto;
width: 960px;
height: 80%;
background-color: #ffffff;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
#firstName {
color: white;
margin: 0 auto;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: #ffffff;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
display: flex;
justify-content: space-between;
align-items: center;
}
hr {
clear: both;
border-width: .03em;
border-bottom-style: solid;
margin: 0 auto;
width: 100%;
align-self: center;
border-color: #777777;
}
#backgroundTest {
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/swirl_pattern.png);
background-repeat: repeat;
padding: 70px;
height: calc(100% - 87px);
}
#portfolioWrap {
margin: 0 auto;
width: 960px;
background-color: #ffffff;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
.contentHeading {
clear: both;
color: #4aaaa5;
margin: 15px 0 15px 15px;
}
.grayLine {
margin: 15px auto;
color: #777777;
width: 930px;
border-width: 1px;
align-self: center;
}
#footerBox {
margin-top: 50px;
width: 100%;
background-color: #666666;
height: 4rem;
border-top-style: solid;
border-top-color: #4aaaa5;
border-top-width: 10px;
align-self: center;
bottom: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#copyright {
text-align: center;
color: white;
overflow: hidden;
}
body {
margin: 0 auto;
}
#robImage {
width: 200px;
height: 200px;
float: left;
margin: 0px 15px 0px 15px;
}
p {
color: #777777;
text-align: left;
margin-left: 15px;
margin-right: 15px;
word-spacing: 3px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
}
#footerLine {
color: #4aaaa5;
}
#cr1 {
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
/* contact us page CSS */
#contentPadding {
background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
background-repeat: repeat;
padding: 70px;
height: 100%;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text],
select,
textarea {
width: 100%;
/* Full width */
padding: 12px;
/* Some padding */
border: 1px solid #cccccc;
/* Gray border */
border-radius: 4px;
/* Rounded borders */
box-sizing: border-box;
/* Make sure that padding and width stays in place */
margin-top: 6px;
/* Add a top margin */
margin-bottom: 16px;
/* Bottom margin */
resize: vertical
/* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #4aaaa5;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #4aaaa5;
font-family: Arial, Helvetica, sans-serif;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
border-color: #cccccc;
background-color: #ffffff;
padding: 20px;
align-self: center;
font-family: Arial, Helvetica, sans-serif;
color: #777777;
}
/* start of portfolio css */
/*
#boxClass {
display: flex;
width: 540px;
height: 800px;
align-items: flex-start;
justify-content: space-between;
text-align: center; */
#boxTitleHangman {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/hangman.jpg);
}
#hangmanText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleTrivia {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/trivia.jpg);
}
#triviaText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRock {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rps.jpg);
}
#rockText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRpg {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rpg.jpg);
}
#rpgText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRutgers {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rutgers.jpg);
}
#rutgersText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
.portfolioTitle {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 100px;
right: 15px;
line-height: 40px;
}
#hangmanBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#triviaBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rockBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rpgBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rutgersBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<!-- this div contains the header-->
<div id="wrap">
<header>
<!-- name in header-->
<h1 id="firstName">
Rob Connolly
</h1>
</header>
<!-- Header-->
<div id="menu">
<span>
About
</span>
<span>
Portfolio
</span>
<span>
Contact
</span>
</div>
</div>
<!-- clear fix cleard float-->
<hr id="clearfix">
<!-- background image-->
<div id="backgroundTest">
<!-- Wrap2 wraps portfolio content section-->
<div class="contentBox">
<!-- Portfolio Heading-->
<h2 class="contentHeading">
Portfolio
</h2>
<!-- gray line in about me section-->
<hr class="grayLine">
<!-- Portfolio Form-->
<ul id="boxList">
<li id="boxTitleHangman">
<p id="hangmanText">
Hangman
</p>
</li>
<li id="boxTitleTrivia">
<p id="triviaText">
Trivia
</p>
</li>
<li id="boxTitleRock">
<p id="rockText">
Rock
</p>
</li>
<li id="boxTitleRpg">
<p id="rpgText">
Rpg
</p>
</li>
<li id="boxTitleRutgers">
<p id="rutgersText">
Rutgers
</p>
</li>
</ul>
<!--
<div id="hangman">
<div id="hangmanBackground" style="background-image: url('assets/images/hangman.jpg');">
<p class="portfolioTitle">Hangman</p>
</div>
<div id="trivia">
<div id="triviaBackground" style="background-image: url('assets/images/trivia.jpg');">
<p class="portfolioTitle">Trivia Game</p>
</div>
<div id="rock">
<div id="rockBackground" style="background-image: url('assets/images/rps.jpg');">
<p class="portfolioTitle">Rock Paper Scissors</p>
</div>
</div>
<div id="row2">
<div id="rpg">
<div id="rpgBackground" style="background-image: url('assets/images/rpg.jpg');">
<p class="portfolioTitle">RPG Game</p>
</div>
<div id="rutgers">
<div id="rutgersBackground" style="background-image: url('assets/images/rutgers.jpg');">
<p class="portfolioTitle">Rutgers Info Widget</p>
</div>
</div>
</div>
</div>
</div>
</div> -->
<!-- Start of footer-->
<div id="footerBox">
<!-- Text for footer-->
<p id="cr1"> © Copyright</p>
</div>
</div>
</div>
</div>
</body>
</html>
Welcome to SO, Its simple use column-count: property on ul
Here is updated snippet.
* {
box-sizing: border-box;
}
a {
color: #777777;
}
html, body {
height: 100%;
}
#wrap {
margin: 0 auto;
text-align: center;
width: 960px;
}
.contentBox {
margin: 0 auto;
width: 960px;
height: 100vh;
background-color: #ffffff;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
#firstName {
color: white;
margin: 0 auto;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: #ffffff;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
display: flex;
justify-content: space-between;
align-items: center;
}
hr {
clear: both;
border-width: .03em;
border-bottom-style: solid;
margin: 0 auto;
width: 100%;
align-self: center;
border-color: #777777;
}
#backgroundTest {
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/swirl_pattern.png);
background-repeat: repeat;
padding: 70px;
height: 100vh;
}
#portfolioWrap {
margin: 0 auto;
width: 960px;
background-color: #ffffff;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
.contentHeading {
clear: both;
color: #4aaaa5;
margin: 15px 0 15px 15px;
}
#boxList{
column-count: 2;
}
.grayLine {
margin: 15px auto;
color: #777777;
width: 930px;
border-width: 1px;
align-self: center;
}
#footerBox {
margin-top: 50px;
width: 100%;
background-color: #666666;
height: 4rem;
border-top-style: solid;
border-top-color: #4aaaa5;
border-top-width: 10px;
align-self: center;
bottom: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#copyright {
text-align: center;
color: white;
overflow: hidden;
}
body {
margin: 0 auto;
}
#robImage {
width: 200px;
height: 200px;
float: left;
margin: 0px 15px 0px 15px;
}
p {
color: #777777;
text-align: left;
margin-left: 15px;
margin-right: 15px;
word-spacing: 3px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
}
#footerLine {
color: #4aaaa5;
}
#cr1 {
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
/* contact us page CSS */
#contentPadding {
background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
background-repeat: repeat;
padding: 70px;
height: 100%;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text],
select,
textarea {
width: 100%;
/* Full width */
padding: 12px;
/* Some padding */
border: 1px solid #cccccc;
/* Gray border */
border-radius: 4px;
/* Rounded borders */
box-sizing: border-box;
/* Make sure that padding and width stays in place */
margin-top: 6px;
/* Add a top margin */
margin-bottom: 16px;
/* Bottom margin */
resize: vertical
/* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #4aaaa5;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #4aaaa5;
font-family: Arial, Helvetica, sans-serif;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
border-color: #cccccc;
background-color: #ffffff;
padding: 20px;
align-self: center;
font-family: Arial, Helvetica, sans-serif;
color: #777777;
}
/* start of portfolio css */
/*
#boxClass {
display: flex;
width: 540px;
height: 800px;
align-items: flex-start;
justify-content: space-between;
text-align: center; */
#boxTitleHangman {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/hangman.jpg);
}
#hangmanText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleTrivia {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/trivia.jpg);
}
#triviaText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRock {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rps.jpg);
}
#rockText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRpg {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rpg.jpg);
}
#rpgText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRutgers {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rutgers.jpg);
}
#rutgersText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
.portfolioTitle {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 100px;
right: 15px;
line-height: 40px;
}
#hangmanBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#triviaBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rockBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rpgBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rutgersBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<!-- this div contains the header-->
<div id="wrap">
<header>
<!-- name in header-->
<h1 id="firstName">
Rob Connolly
</h1>
</header>
<!-- Header-->
<div id="menu">
<span>
About
</span>
<span>
Portfolio
</span>
<span>
Contact
</span>
</div>
</div>
<!-- clear fix cleard float-->
<hr id="clearfix">
<!-- background image-->
<div id="backgroundTest">
<!-- Wrap2 wraps portfolio content section-->
<div class="contentBox">
<!-- Portfolio Heading-->
<h2 class="contentHeading">
Portfolio
</h2>
<!-- gray line in about me section-->
<hr class="grayLine">
<!-- Portfolio Form-->
<ul id="boxList">
<li id="boxTitleHangman">
<p id="hangmanText">
Hangman
</p>
</li>
<li id="boxTitleTrivia">
<p id="triviaText">
Trivia
</p>
</li>
<li id="boxTitleRock">
<p id="rockText">
Rock
</p>
</li>
<li id="boxTitleRpg">
<p id="rpgText">
Rpg
</p>
</li>
<li id="boxTitleRutgers">
<p id="rutgersText">
Rutgers
</p>
</li>
</ul>
<!--
<div id="hangman">
<div id="hangmanBackground" style="background-image: url('assets/images/hangman.jpg');">
<p class="portfolioTitle">Hangman</p>
</div>
<div id="trivia">
<div id="triviaBackground" style="background-image: url('assets/images/trivia.jpg');">
<p class="portfolioTitle">Trivia Game</p>
</div>
<div id="rock">
<div id="rockBackground" style="background-image: url('assets/images/rps.jpg');">
<p class="portfolioTitle">Rock Paper Scissors</p>
</div>
</div>
<div id="row2">
<div id="rpg">
<div id="rpgBackground" style="background-image: url('assets/images/rpg.jpg');">
<p class="portfolioTitle">RPG Game</p>
</div>
<div id="rutgers">
<div id="rutgersBackground" style="background-image: url('assets/images/rutgers.jpg');">
<p class="portfolioTitle">Rutgers Info Widget</p>
</div>
</div>
</div>
</div>
</div>
</div> -->
<!-- Start of footer-->
<div id="footerBox">
<!-- Text for footer-->
<p id="cr1"> © Copyright</p>
</div>
</div>
</div>
</div>
</body>
</html>
I would suggest you use the id you have given the <ul> tag i.e boxlist and then apply the display as flex this way all your li elements will be in a flex box.Then work with the <li> elements as flex box elements here is a link that could help you out:-
https://www.w3schools.com/css/css3_flexbox.asp
I would highly recommend you to use grid as it can be more usefull and I like it better than flex box,here is the link you can use to refer how a grid box is used:-
https://www.w3schools.com/css/css_grid.asp
Gridview
<ul class="gridview grid-3">
<li><p>Hello<br>Hello</p></li>
<li><p>Hello<br>Hello<br>Hello<br>Hello</p></li>
<li><p>Hello</p></li>
<li><p>Hello<br>Hello<br>Hello</p></li>
<li><p>Hello</p></li>
<li><p>Hello<br>Hello</p></li>
<li><p>Hello</p></li>
<li><p>Hello<br>Hello<br>Hello</p></li>
<li><p>Hello</p></li>
<li><p>Hello<br>Hello</p></li>
</ul>
ul.gridview > li {
display: block;
float: left;
padding: 0;
margin: 0;
}
ul.gridview > li p {
background: #ddd;
padding: 5px;
margin: 0;
}
/* Grid-3 */
ul.grid-3 > li {
width: calc(100% / 3 - 2 * 10px / 3);
}
ul.grid-3 > li:nth-child(n + 4) {
margin-top: 10px;
}
ul.grid-3 > li:nth-child(3n + 1) {
clear: left;
}
ul.grid-3 > li:not(:nth-child(3n + 1)) {
margin-left: 10px;
}
/* Grid-4 */
ul.grid-4 > li {
width: calc(100% / 4 - 3 * 10px / 4);
}
ul.grid-4 > li:nth-child(n + 5) {
margin-top: 10px;
}
ul.grid-4 > li:nth-child(4n + 1) {
clear: left;
}
ul.grid-4 > li:not(:nth-child(4n + 1)) {
margin-left: 10px;
}
Codepen
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’);
Does someone know how to fix
this issue?
There's green around, I'd like to known how to remove/let the other color go over it.
Here is the CSS file, I do have 2 css files, not sure if thats a problem.
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: auto;
overflow: hidden;
background-color: #c4a1a2;
}
.content-wrapper{
width: 80%;
margin: 4% 10% 5% 10%;
}
.content-wrapper img{
width: 100%;
}
.text-wrapper{
width: 100%;
position: relative;
margin-top: -40%;
}
.text-wrapper h1{
text-align: center;
color: #ffffff;
font-size: 10vw;
font-family: 'lobster', cursive;
<!-- New CSS post -->
html {
height: 100%;
}
body {
margin: 0px;
height: 100%;
}
h1 { text-align: center; }
.hoofdtabel {
width: 100%;
height: 100%;
margin: 0px;
border-collapse: collapse;
} /* Vervangt cellspacing="0" */
.kop {
width: 100%;
height: 10%;
background-color: #5570aa;
text-align: center;
font-size: 72px;
}
.menu {
width: 12%;
height: 70%;
padding: 5px; /* Vervangt cellpadding="5" */
background-color: #9e6171;
vertical-align: top;
}
.inhoud {
width: 96%;
height: 85%;
padding: 5px;
text-align: left;
background-color: #b8c6c4;
vertical-align: top;
}
.onder {
width: 100%;
height: 5%;
padding: 5px;
background-color: black;
vertical-align: middle;
text-align: right;
color: white;
}
.button {
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
background-color: #e9ece5;
color: black;
border: 2px solid #b3c2bf;
width: 100px;
}
.button:hover {
background-color: #008CBA;
}
.frame {
height: 100%;
width: 100%;
border: none;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text Over Image</title>
<link rel="stylesheet" href="text_over_image.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<div class="content-wrapper">
<img src="https://i.stack.imgur.com/YE31e.png">
<div class="text-wrapper">
<h1>Welkom!</h1>
</div>
</div>
</body>
</html>
Sorry if I'm making mistakes, I'm new here and new to programming in general.
Missing Picture: enter image description here
*Second CSS file starts after