I'm trying to make my first site but I can't seem to create what I visualize in my head.
I can't get my #invokeryolo div to show up. I see completely no sense and for the life of me I can't figure out whats wrong. Here's my code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="dotoker1.css" />
<title>Comprehensive guide to Invoker</title>
</head>
<body>
<div id"invokeryolo"></div>
<div id='contenttable'>
<ol>
<li>Guide overview and hero introduction</li>
<li>Pros and Cons</li>
<li>Spells</li>
<li>Early, mid and late game</li>
<li>Build order and situational items</li>
<li>Countering your counters</li>
</ol>
</div>
<div class="content" id="overview"></div>
<div class="content" id="proscons"></div>
<div class="content" id="spells"></div>
<div class="content" id="earlymidlate"></div>
<div class="content" id="buildorder"></div>
<div class="content" id="counter"></div>
</body>
</html>
CSS
html, body {
background: url(http://dota2walls.com/wp-content/uploads/2014/11/invoker-arsenal-magus-wallpaper.png) no-repeat fixed;
height: 100%;
}
#invokeryolo {
background: url(http://image.blingee.com/images19/content/output/000/000/000/7df/820025845_2071037.gif);
width: 60%;
height: 200px;
position:absolute;
display: inline-block;
border: 1px solid black;
}
#contenttable {
width: 22%;
height: 300px;
display: inline-block;
}
ol {
display:block;
font-style: italic;
color: #CCCC88;
font-size: 130%;
margin-right: 20px;
background: rgba(0, 0, 0, 0.2);
}
li {
margin-bottom: 5px;
background: rgba(0, 0, 0, 0.2);
}
a {
color: #CCCC88;
}
a:visited {
color: #CCCC88;
}
.content {
background: rgba(0, 0, 0, 0.2);
width: 60%;
height: 20%;
margin-left: 23%;
display: inline-block;
}
All suggestions are appreciated. Thanks in advance!
Change this:
<div id"invokeryolo"></div>
to this:
<div id = "invokeryolo"></div>
You missed the = sign.
Related
I am creating a profile page and on that page there is a div which spans 100 percent of the page. After I set the height and margins and refresh page there is a colored div, the height that I want with no white space. When I try to do the same for my end of page and set overflow hidden, instead of the page ending there,I am able to scroll and see the page continuing. My goal is to have all my content in between the whitespace of top and bottom divs. This is not homework, it is my personal project.
Thank You in advance for your help and time.
Attached is my html code:
*{
margin:0px;
padding:0px;
}
.blue{
width: 100%;
height:70px;
text-decoration: none;
overflow-x: hidden;
background-color: rgb(208, 210, 255);
color: rgb(190,91,93);
position:absolute;
}
.vanilla{
position: absolute;
background-color: rgb(250,0,0);
color:black;
width:100%;
height:100px;
text-decoration:none;
overflow:hidden;
top:600px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Practice</title>
</head>
<body>
<div class="blue">
</div>
<div class="vanilla">
</div>
</body>
</html>
The following is what I originally attempted:
#body2{
background-color: rgb(255,253,208);
overflow-x: hidden;
}
#me{
position: absolute;
top: 150px;
left: 435px;
}
.section1{
width: 100%;
height:70px;
text-decoration: none;
overflow: hidden;
background-color: rgb(208, 210, 255);
color: rgb(190,91,93);
position:absolute;
}
:hover{
color: white;
}
#about{
position: relative;
left: 535px;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 5px;
}
#age{
position: relative;
top: 70px;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 5px;
}
#education{
position: relative;
top: 440px;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 5px;
padding-bottom: 0px;
}
#languages{
position: relative;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 10px;
bottom: 40px;
line-height: 36px;
}
#languages ul li {
list-style-type:none;
}
#comp_lang{
position: relative;
bottom: 380px;
left: 815px;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 5px;
line-height: 36px;
}
#comp_lang ul li {
list-style-type:none;
}
#comp_lang2{
position: relative;
top: -245px;
left: 870px;
border: solid 3px rgb(190,91,93);
display: table;
background-color: rgb(208,210,255);
color: rgb(75,0,130);
padding: 5px;
}
#comp_lang2 ul li{
list-style-type: none;
}
.remarks{
margin: 0px;
width: 165px;
height: 200 px;
}
#endgame{
width: 100%;
height:70px;
text-decoration: none;
overflow: hidden;
background-color: rgb(208, 210, 255);
color: rgb(190,91,93);
position:absolute;
z-index: -2;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>About Me</title>
<link rel="stylesheet" href="profile.css">
</head>
<body id="body2">
<div id="me">
<img src="profile2.jpg"alt="Hello" height=500px;>
</div>
<div class="section1">
<h1 id="about"><b>Who is Intisar?</b></h1>
</div>
<div id="age">
<h2> Age : </h2>
<h3> I am 23 years old!</h3>
</div>
<div id="education">
<h2> Education : </h2>
<h3>
I am a high-school graduate.<br>
I am in my third year<br>
at something College.<br>
I am studying<br>
Software Development and Design.<br>
Interest in Web Development and Design<br>
</h3>
</div>
<div id="languages">
<h2> Trilingual in :</h2>
<ul>
<li>English</li>
<li>Bengali</li>
<li>Spanish</li>
</ul>
</div>
<div id="comp_lang">
<h2> Computer Lanuguages I am competent in : <br> </h2>
<ul>
<li>Python</li>
<li>C++</li>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>SQL</li>
<li>PHP</li>
</ul>
</div>
<div id="comp_lang2">
<h2> Lanuguages and software in Progress : </h2>
<ul>
<li>Wordpress</li>
<li>Ruby</li>
</ul>
</div>
<div class="endgame">
<h3>Something</h3>
</div>
</body>
</html>
You can achieve this by css grid, the current approach is not very good.
I wrote a little bit of code for you. If you don't understand it, let me know.
https://www.w3schools.com/cssref/pr_grid-template-rows.asp
It might be tricky for you if you are not fimiliar with grid, so let me know if you need help.
Preview here
<div class="parent">
<header><h1>Header</h1></header>
<main>
<img src="https://images.unsplash.com/photo-1605032659978-a5bd04094a16?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max">
<img src="https://images.unsplash.com/photo-1603943817715-f50e0a2c413a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max">
<img src="https://images.unsplash.com/photo-1605910470315-abac78c52d73?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max">
</main>
<footer><h1>Footer Content</h1></footer>
</div>
<style>
*{
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
overflow: hidden;
}
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
width: 100vw;
}
main{
overflow:auto;
}
// css below this is just for styling
footer, header, main{
padding: 1rem;
text-align: center;
}
footer{
background-color:red;
}
header{
background-color:yellow
}
</style>
Use the Below Code to keep everything within the view-port and work on whitespace area .
*{
margin:0px;
padding:0px;
box-sizing:border-box;
}
body{
height:100vh;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.blue{
width: 100%;
height:70px;
text-decoration: none;
overflow-x: hidden;
background-color: rgb(208, 210, 255);
color: rgb(190,91,93);
}
.vanilla{
background-color: rgb(250,0,0);
color:black;
width:100%;
height:100px;
text-decoration:none;
overflow:hidden;
top:600px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Practice</title>
</head>
<body>
<div class="blue">
</div>
<div class="vanilla">
</div>
</body>
</html>
G'day.
I am working on a responsive website. This is what I am trying to make the header section look like on desktop and mobile respectively:
The contents of id="header" are supposed to take up as much space as they need to but no more than a 100% of the page's width. I am having trouble coming up with a structure that could be turned responsive and creating the grid in general. Is there a similar grid somewhere I could take a look at? or should I simply go with a table instead of trying to come up with a "CSS-only" solution?
I would be very grateful for a solution that'd work with my current structure. Please let me know if there is anything I need to mention to make this question understandable (if it isn't) and thank you in advance for any help you provide.
I have looked through a number of tutorials and stackoverflow questions where similar layouts have been pursued and I have tried a number of approaches using position and CSS tables, but so far I have not been successful.
Here's my HTML:
<!DOCTYPE html>
<html>
<head lang="en-au">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="container" class="dtable">
<div id="header" class="dtrow">
<div class="dtable">
<div class="dtrow">
<div class="dtcell" id="logo"></div>
<div class="dtcell">
<div class="dtable">
<div class="dtcptn">
<span class="cblock" id="menu">
Link #0
Link #1
Link #2
Link #3
Link #4
Link #5
Link #6
Link #7
</span>
</div>
<div class="dtrow">
<div class="dtcell">
<span class="cblock">Phone</span>
</div>
<div class="dtcell">
<span class="cblock">Social</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="content" class="dtrow">
</div>
<div id="footer" class="dtrow">
<span class="cblock">© The three musketeers, 2017. Say hello to the UFO.</span>
</div>
</div>
</body>
</html>
Here's my CSS:
#charset "utf-8";
* { box-sizing: border-box; }
a { display: inline-block; text-decoration: none; }
a:hover { text-decoration: underline; }
body, html { font-family: Helvetica, Arial, sans-serif; font-size: 16px; height: 100%; margin: 0; padding: 0; background-color: #ffffff; }
img { border: 0; }
textarea { resize: none; }
input[type="button"], input[type="submit"] { cursor: pointer; }
.dtable { display: table; }
.dtcell { display: table-cell; }
.dtcptn { display: table-caption; }
.dtrow { display: table-row; }
span.cblock { display: inline-block; padding: 18px; border: 2px solid transparent; -webkit-box-shadow: inset 0px 0px 2px 2px rgba(200, 200, 200, 0.5); -moz-box-shadow: inset 0px 0px 2px 2px rgba(200, 200, 200, 0.5); box-shadow: inset 0px 0px 2px 2px rgba(200, 200, 200, 0.5); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
#container { width: 100%; height: 100%; }
#content { height: 100%; }
#footer { text-align: center; }
#footer span { width: 100%; }
#header > div { margin: 0 auto; }
#logo { width: 100px; background-image: url('../images/logo.gif'); background-size: contain; background-repeat: no-repeat; background-clip: padding-box; }
Here is a simple sample showing how you could do, switching between display: table-cell and display: block;
Note the comment <!-- --> in the markup, that get rid of the inline block element white space (here is more ways to do that: how-to-remove-the-space-between-inline-block-elements)
Fiddle demo
Stack snippet
.dtable { display: table; width: 100%; }
.dtcell { display: table-cell; padding: 10px; }
.dtcptn { display: table-caption; }
.dtrow { display: table-row; }
.dtcell:first-child {
width: 1px;
}
.dtcell:first-child span {
display: inline-block;
border: 1px solid;
box-sizing: border-box;
}
.dtcell:first-child span:last-child {
display: none;
}
.dtcell:last-child div {
border: 1px solid;
box-sizing: border-box;
}
.dtcell:last-child span {
display: inline-block;
width: 50%;
border: 1px solid;
box-sizing: border-box;
}
#media screen and (max-width: 600px) {
.dtcell:first-child {
width: 100%;
}
.dtcell:first-child span:last-child {
display: inline-block;
}
.dtcell,
.dtcell:last-child span {
display: block;
width: auto;
}
.dtcell:last-child div {
display: none;
}
}
<div id="container" class="dtable">
<div id="header" class="dtrow">
<div class="dtcell" id="logo">
<span>logo</span>
<span>hamburgermenu</span>
</div>
<div class="dtcell">
<div>links</div>
<span>phone</span><!--
--><span>social</span>
</div>
</div>
</div>
Well, here is my answer using positioning and pseudo-elements.
#charset "utf-8";
* { box-sizing: border-box; }
a { display: inline-block; text-decoration: none; }
a:hover { text-decoration: underline; }
body, html { font-family: Helvetica, Arial, sans-serif; font-size: 16px; height: 100%; margin: 0; padding: 0; background-color: #ffffff; }
img { border: 0; }
textarea { resize: none; }
input[type="button"], input[type="submit"] { cursor: pointer; }
.dtable { display: table; }
.dtrow { display: table-row; }
span.cblock { display: inline-block; padding: 18px; border: 2px solid transparent; -webkit-box-shadow: inset 0px 0px 2px 2px rgba(200, 200, 200, 0.5); -moz-box-shadow: inset 0px 0px 2px 2px rgba(200, 200, 200, 0.5); box-shadow: inset 0px 0px 2px 2px rgba(200, 200, 200, 0.5); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
#container { width: 100%; height: 100%; }
#contact, #social { width: 50%; }
#content { height: 100%; }
#footer { text-align: center; }
#footer span { width: 100%; }
#header { position: relative; text-align: center; }
#header > div { margin: 0 auto; }
#header > div div { display: inline-block; }
#header > div div:last-child { margin-left: 100px; }
#logo { width: 100px; position: absolute; top: 0; bottom: 0; background-image: url('logo.png'); background-size: contain; background-repeat: no-repeat; background-clip: padding-box; }
#menu { width: 100%; }
#menu::after { content: '\000A'; white-space: pre; }
#social { text-align: right; }
#media screen and (max-width: 768px) {
#contact, #social { width: 100%; }
/* added these 2 rules */
#social { text-align: center; }
#header > div div:last-child { margin-left: 0; }
}
<!DOCTYPE html>
<html>
<head lang="en-au">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="container" class="dtable">
<div id="header" class="dtrow">
<div>
<div id="logo"> </div><!--
--><div>
<span class="cblock" id="menu">
Link #0
Link #1
Link #2
Link #3
Link #4
Link #5
Link #6
Link #7
</span><!--
--><span class="cblock" id="contact">Phone</span><!--
--><span class="cblock" id="social">Social</span>
</div>
</div>
</div>
<div id="content" class="dtrow">
</div>
<div id="footer" class="dtrow">
<span class="cblock">© The three musketeers, 2017. Say hello to the UFO.</span>
</div>
</div>
</body>
</html>
It's not as good as LGSon's, because on smaller screen sizes it leaves a margin between the left side of the screen and id="contact" and id="social", which I am not sure how to fix. It could be useful in certain scenarios, however.
I'm working on a photo blog, and I'm working on a slightly different idea but and I've got this neat spotlight to work, however trying to duplicate it to make more than one neat little spotlight won't seem to work.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/skeleton/1.2/base.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main">
<ul>
<li><div class="tjena"><img class="bild" src="http://i.imgur.com/GocRzkn.jpg" alt="" /></div></li>
<li><img class="bild" src="http://i.imgur.com/GocRzkn.jpg" alt="" /></li>
</ul>
</div>
<div id="overlag 1">
<div id="spotlight" class="spotlight"></div>
</div>
<div id="overlag 2">
<div id="spotlight" class="spotlight"></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://raw.githubusercontent.com/okfocus/okshadow/master/src/okshadow.js'></script>
<script src="js/index.js"></script>
</body>
</html>
CSS:
html, body {
width: 100%;
height: 100%;
}
body {
position: relative;
display: table;
background-image: url("http://www.wildtextures.com/wp-content/uploads/wildtextures_white-brick-wall.jpg");
background-repeat: repeat;
background-size: 30%;
}
.main {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.main .title {
font-size: 5rem;
margin-bottom: 50px;
}
.main .sub-title {
font-size: 2rem;
}
.main ul {
display: flex;
}
.main ul li {
margin: 0 120px;
}
.spotlight {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
background-image: -webkit-radial-gradient(center, circle cover, transparent -7%, rgba(0, 0, 0, 0.6) 13%);
}
.bild {
height: 300px;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}
I have 4 DIVs and I need them all to be sticked together. I have a white space between and only between first 2 DIVs and I don't know why. Any advices and a possible explanation? I don't have any padding of so, making this quite annoying.
#font-face {
font-family: FONT;
src: url(Montserrat-Regular.ttf);
}
p.title1 {
font-size: 2.5em;
}
p.title2 {
font-size: 3em;
}
div.surf1 {
display: block;
/*background-image: url("surf1.jpg");*/
background: #41c3ac;
background-position: center;
background-size: cover;
height: 600px;
}
div.surf2 {
display: block;
background: #41c3ac;
height: 600px;
}
div.surf3 {
display: block;
background: #ff6b57;
height: 600px;
}
div.surf4 {
display: block;
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 to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="button">
Go to site
</div>
</div>
<div class="surf2">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>
</ul>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>
The default margin-top on the nested p element is collapsing vertically, which essentially creates an equal margin-top on the parent .surf2 element (that is why you are seeing a space).
According to the spec, this doesn't occur if you establish a new block formatting context, which means that one option would be to set the overflow of the .surf2 element to something other than the default value visible. Changing it to auto or hidden would resolve the issue.
.surf2 {
background: #41c3ac;
height: 600px;
overflow: auto;
}
#font-face {
font-family: FONT;
src: url(Montserrat-Regular.ttf);
}
p.title1 {
font-size: 2.5em;
}
p.title2 {
font-size: 3em;
}
div.surf1 {
display: block;
/*background-image: url("surf1.jpg");*/
background: #41c3ac;
background-position: center;
background-size: cover;
height: 600px;
}
div.surf2 {
display: block;
background: #41c3ac;
height: 600px;
overflow: auto;
}
div.surf3 {
display: block;
background: #ff6b57;
height: 600px;
}
div.surf4 {
display: block;
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 to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="button">
Go to site
</div>
</div>
<div class="surf2">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>
</ul>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>
That's just one work around. See the spec for the specific rules relating to collapsing margins. You could also simply remove the margin from the p element.
For all your surf# classed elements, set their overflow to auto.
It appears that the margin on the children on the 2nd div is pushing the first div up.
I recommend either adding a unifying class to those elements or use this rule:
[class^="surf"] {
overflow: auto;
}
You need to set the class="title1" margin to 0px. -> margin: 0;
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background: #00BFFF;
font-family: "Candara";
src: url(data/candara.ttf);
}
#wrapper {
margin: 0 auto;
width: 800px;
padding: 15px;
}
#wrapper:after {
content: ".";
display: block;
clear: both;
height: 0;
overflow: hidden;
}
#header {
display: block;
background-color: blue;
}
#header .left {
display: inline-block;
padding: 15px 25px;
float: left;
}
#header .left h1{
display: inline-block;
font-weight: bold;
}
#header .right {
float: right;
display: inline-block;
}
#header .right span{
display: block;
}
#page {
display: block;
float: left;
}
#page .box{
display: inline-block;
background: black;
float: left;
}
#header, .box {
background: blue;
opacity: 0.7;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="left">
<h1>Title</h1>
</div>
<div class="right">
<span><b>needle:</b> <?php //echo $haystack; ?></span>
<span><b>needle:</b> <?php //echo $haystack; ?></span>
<span><b>Last update:</b> <?php //echo $lastupdate; ?></span>
</div>
</div>
<div id="page">
<div class="left box">
Heey mannn
</div>
</div>
</div>
</body>
</html>
This is the design im aiming for, but its not working at all, instead, i get this.
And i don't know what im doing wrong, i realy don't. Can you guys help me? All the things i want are in the image. And the red areas are just to mark that i want those boxes there. I also made a jsfiddle with the code. If anything is unclear, leave a comment please, instead of just thumbing it down, because its realy hard to explain...
If you want a transparent background, use rgba or hsla colors.
Example:
background-color: rgba(0, 0, 255, 0.7); /* Blue, opacity 0.7*/
Here's code, which renders what you have in your design image. Tested only in Chrome. This is not optimal nor an optimized solution but should let you continue with your design.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
background: #00BFFF;
font-family: "Candara";
src: url(data/candara.ttf);
}
#wrapper {
margin: 0 auto;
width: 800px;
}
#header {
width: 720px;
height: 100px;
margin-top: 20px;
padding: 10px 40px;
background: rgba(0, 0, 255, 0.7);
-webkit-border-radius: 13px;
border-radius: 13px;
}
.title_area {
float: left;
width: 300px;
margin-top: 12px;
padding: 25px 25px;
background: #f00;
-webkit-border-radius: 13px;
border-radius: 13px;
}
#header .info_area {
float: right;
width: 200px;
height: 60px;
margin-top: 30px;
padding: 5px;
background: #f00;
-webkit-border-radius: 13px;
border-radius: 13px;
}
#page {
clear: both;
margin: 20px 0px;
}
.content {
float: left;
width: 380px;
height: 500px;
padding: 20px;
background: rgba(0, 0, 255, 0.7);
-webkit-border-radius: 13px;
border-radius: 13px;
}
.up_right {
float: left;
width: 320px;
height: 240px;
margin-left: 20px;
margin-bottom: 20px;
padding: 20px;
background: rgba(0, 0, 255, 0.7);
-webkit-border-radius: 11px;
border-radius: 11px;
}
.down_right {
float: left;
width: 320px;
height: 200px;
margin-left: 20px;
padding: 20px;
background: rgba(0, 0, 255, 0.7);
-webkit-border-radius: 11px;
border-radius: 11px;
}
.close {
clear: both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="title_area">
<h1>Title</h1>
</div>
<div class="info_area">
<div><b>needle:</b> <?php //echo $haystack; ?></div>
<div><b>needle:</b> <?php //echo $haystack; ?></div>
<div><b>Last update:</b> <?php //echo $lastupdate; ?></div>
</div>
</div>
<div id="page">
<div class="content">
Heey mannn
</div>
<div class="up_right">
Hou hou
</div>
<div class="down_right">
Yeah
</div>
<div class="close"></div>
</div>
</div>
</body>
</html>
rgba is a good solution, but
It might be cross browser issue as well
try this, instead of just opacity:0.7
opacity: 0.7;
-moz-opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0.7);