html - Arrange DIVs in the right position -

-

i'm having huge problems trying arrage divs, found thing not simple seems, put div , inside div 2 , you're done. image bellow shows how want page structured: sur1. surf2: surfleft, surfright. surf3. surf4 . means line , , means divs should 1 next another. , can't center image vertical , horizontall middle on surfright surf 2 parent. 

@font-face   {      font-family: font;      src: url(montserrat-regular.ttf);  }    p.title1  {  	font-size: 2.5em;  	margin: 0;  }    p.title2  {  	font-size: 3em;  }    .i1  {  	height: 400px;      float: right;      display: block;      margin-top: 150px;  	  }    div.surf1  {    	display: block;  	background-image: url("surf1.jpg");  	background-position: center;  	background-size: cover;  	height: 600px;  }    div.surf2 {      width: fit-content;      position:absolute;      background: #41c3ac;      height: 600px;  }      div.surfleft {      float:left;      display: block;      width: 45%;      padding-top: 80px;      height: 600px;  	background: #8c78b1;   }    div.surfright {  	float: right;  	background: #ff6b57;   }    div.surf3  {  	background: #ff6b57;  	height: 600px;  }    div.surf4  {  	background: #8c78b1;  	height: 600px;  }    div.text1  {  	padding-top: 100px;  	color: white;  	text-align:center;  	font-size: 2.5em;  }    div.button  {  	text-align: center;  	font-size: 1.5em;  	margin: 0 auto;  	width: 15%;  	padding: 8px;  	border: 2px solid;  	border-color: #e7dd84;  	background-color: rgba(236,229,167,0.2);  	color: #e7dd84;  	transition: 0.35s;    }  div.button:hover  {  	background-color: white;  	color: black;  	border-color: white;  	transition: 0.35s;  }    body  {  	margin: 0;  	font-family: font;  	color: white;  }
<!doctype html>  <html>  <head>  <title>welcome</title>  <link rel="stylesheet" type="text/css" href="style.css">  </head>  <div class="surf1">  	<div class="text1">  		<b>welcome smartlearning.com, <br>the place can <br>learn , practice english</b>  	</div>      <br><br><br><br><br>  	<div class="button">  		go site  	</div>  </div>  <div class="surf2">  	<div class="surfleft">      	<p class="title1">interractive games</p>         	 <ul style="font-size: 1.5em">          	<li>we have different types of games can play, testing abilities recognise objects, multiple choise exercices , putting test of spotting mistakes.</li>              <li>those games designed learn , practice english combining fun hard-working.</li>               </ul>       </div>       <div class="surfright">       	<img  src="console.png" alt="404 image not found" height="400px">       </div>  </div>  <div class="surf3"></div>  <div class="surf4"></div>  <body>  </body>  </html>

enter image description here

please note may use correct width values have fine edges in design.

div.surf1  {  	display: block;  	background-color: #cdcdcd;  	height: 100px;  }    div.surf2 {      background: #41c3ac;      height: 100px;  }    div.surfleft {      float:left;      display: block;      width: 50%;      height: 100px;  	background: #8c78b1;   }    div.surfright {  	float: right;      width: 50%  	background: #ff6b57;   }    div.surf3  {  	background: #ff6b57;  	height: 100px;  }    div.surf4  {  	background: #8c78b1;  	height: 100px;  }    body  {  	margin: 0;  	font-family: font;  	color: white;  }
<div class="surf1">  	<div class="text1">surf 1</div>  </div>  <div class="surf2">  	<div class="surfleft">surf left</div>       <div class="surfright">surf right</div>  </div>  <div class="surf3">surf 3</div>  <div class="surf4">surf 4</div>


Comments

Post a Comment

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

-
i have method method discussed , successful data entered 1 when more 1 can not database this programs my php form : <form class="form-horizontal" id="form-produk"> <div class="control-group" > <label class="control-label" for="kelas">kategori</label> <div class="controls"> <select class='form-control' name='id_kategori'> <?php $tampil=mysql_query("select * kategori order nama_kategori"); if ($id_kat==0){ echo "<option value=0 selected>- pilih kategori -</option>"; } while($w=mysql_fetch_array($tampil)){ if ($id_kat==$w[id_kategori]){ echo "<option value=$w[id_kategori] selected>$w[nama_kategori]</option>"; } else{ echo "<option value=$w[id_kategori]>$...
Read more

multithreading - Exception in Application constructor -

-
i wanna write snake game javafx , there exception don't know , want know how fix it. ( know it's not complete yet ) and want know , class extends application ( start override ) main in other programs? see , here not static void main bc didn't need, if want add main shoud do? it's exeption... exception in application constructor exception in thread "main" java.lang.nosuchmethodexception: main_snake.main([ljava.lang.string;) @ java.lang.class.getmethod(class.java:1819) @ com.intellij.rt.execution.application.appmain.main(appmain.java:125) and code : import javafx.animation.animationtimer; import javafx.application.application; import javafx.event.eventhandler; import javafx.scene.scene; import javafx.scene.canvas.canvas; import javafx.scene.canvas.graphicscontext; import javafx.scene.input.keyevent; import javafx.scene.layout.borderpane; import javafx.scene.paint.color; import javafx.stage.stage; import java.util.arraylist; /** * creat...
Read more

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -

-
i realize similar post others (e.g. this one ), there details missing posts might significant case. to start with, here's simplified program: #include "stdafx.h" #include <windows.h> #include <wincrypt.h> int _tmain(int argc, _tchar* argv[]) { // usage: certextract certpath char keyfile[] = "c:\\certificates\\public.crt"; byte lp[65536]; security_attributes sa; handle hkeyfile; dword bytes; pccert_context certcontext; sa.nlength = sizeof(sa); sa.lpsecuritydescriptor = null; sa.binherithandle = false; hkeyfile = createfile(keyfile, generic_read, file_share_read, &sa, open_existing, file_attribute_normal, null); if (hkeyfile) { if (readfile(hkeyfile, lp, getfilesize(hkeyfile, null), &bytes, null) && bytes > 0) { certcontext = certcreatecertificatecontext(x509_asn_encoding, lp, bytes); if (certcontext) { printf("yay...
Read more