I Have A Headache - Topic

MajinVegeta

Member

Posts: 4,082

Joined: Jan 17 2014

Gold: Locked

Jun 21 2014 08:58am

i'm trying to recreate this

that one square at the very bottom wont move.

body {
background-color:Gray;
height:1020;
width:1010;
}

div {
display:block;
float:left;
margin:10px
}

.div1 {
background-color:white;
height:340px;
width:480px;
}

.div2 {
background-color:white;
height:290px;
width:230px;
}

.div3 {
background-color:white;
height:370px;
width:230px;
}

.div4 {
background-color:white;
height:252px;
width:231px;
}

.div5 {
background-color:white;
height:330px;
width:231px;
}

.div6 {
background-color:white;
height:290px;
width:230px;
}

.div7 {
background-color:white;
height:297px;
width:230px;
}

.div8 {
background-color:white;
height:327px;
width:230px;
}

.div9 {
background-color:white;
height:251px;
width:230px;
}

.div10 {
background-color:white;
height:337px;
width:230px;
}

.div11 {
background-color:white;
height:251px;
width:230px;
}

carteblanche

Member

Posts: 32,925

Joined: Jul 23 2006

Gold: 3,804.50

Jun 21 2014 09:13am

which div is it and whats your html?

MajinVegeta

Member

Posts: 4,082

Joined: Jan 17 2014

Gold: Locked

Jun 21 2014 09:54am

Quote (carteblanche @ Jun 21 2014 07:13am)

which div is it and whats your html?

div 11 and my html is juat a bunch of div's so far. i'm trying to get it in place before.

<!DOOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles3.css">
<title>Recration Site</title>
</head>
<body>

<div class="div1">

</div>

<div class="div2">

</div>

<div class="div3">

</div>

<div class="div4">

</div>

<div class="div5">

</div>

<div class="div6">

</div>

<div class="div7">

</div>

<div class="div8">

</div>

<div class="div9">

</div>

<div class="div10">

</div>

<div class="div11">

</div>

<div class="div12">

</div>

<div class="div13">

</div>

<div class="div14">

</div>

<div class="div15">

</div>

<div class="div16">

</div>

<div class="div17">

</div>

<div class="div18">

</div>

<div class="div19">

</div>

<div class="div20">

</div>

<div class="div21">

</div>

<div class="div22">

</div>

<div class="div23">

</div>

<div class="div24">

</div>

</body>

</html>

ignore anything past 11. was trying to make the sidebar and couldnt figure it out

also keep in mind, i've only been doing this for a few days just got done with codeacademy and this is a project my cousin wants me to do to implement what i've learned and i could ask for help but he's not awake so.

This post was edited by MajinVegeta on Jun 21 2014 09:59am

carteblanche

Member

Posts: 32,925

Joined: Jul 23 2006

Gold: 3,804.50

Jun 21 2014 10:19am

i suspect your low width is causing it to wrap. if you add up all your widths, it exceeds your limit. each div goes side by side. i'm not a css expert, but imo you should be specifying the location if you want it to look like that.

This post was edited by carteblanche on Jun 21 2014 10:21am

MajinVegeta

Member

Posts: 4,082

Joined: Jan 17 2014

Gold: Locked

Jun 21 2014 10:32am

Quote (carteblanche @ Jun 21 2014 08:19am)

mm, ill ask my cousin when he wakes up

AkuuZ

Member

Posts: 29,723

Joined: Jun 11 2007

Gold: 279.52

Jun 21 2014 05:11pm

do 2 main divs..
put the left 5 blocks in one
and the right 6 in another

float those 2

then float the rest.

AkuuZ

Member

Posts: 29,723

Joined: Jun 11 2007

Gold: 279.52

Jun 21 2014 06:38pm

Quote (AkuuZ @ Jun 21 2014 11:11pm)

do 2 main divs..
put the left 5 blocks in one
and the right 6 in another

float those 2

then float the rest.

Im not going to code the whole thing, but heres an example

Code

<html>
<head>
<style type="text/css">
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

body {
background-color:#bbb;
}

#main1 {
width:440px;
}

#get_more {
width:430px;
background-color:#fff;
height:250px;
margin-left:10px;
}

#blogger, #chrome, #android, #music {
width:210px;
background-color:#666;
margin-left:10px;
margin-top:10px;
position:relative;

}

#blogger {
height:200px;
}

#chrome {
height: 300px;
}

#android {
height:300px;
}

#music {
height:200px;
}

.desc {
height:80px;
background: rgba(0, 0, 0, .1);
position:absolute;
bottom:0px;
width:100%;
padding-top:20px;

}

.desc b {
font-weight:bold;
color:#fff;
margin-left:20px;

}

.desc p {
color:#fff;
margin-left:20px;
margin-top:15px;
}

.clear {
clear:both;
}

.div_holder {
float:left;
}

</style>
</head>
<body>

<div id="main1">

<div id="get_more">
<h3> Get More out of goold by using Google+ </h3>
</div>

<div class="div_holder">

<div id="blogger">
IMAGE
<div class="desc">
<b>Blogger >></b>
<p>lalala</p>
</div>
</div>

<div id="android">
IMAGE
<div class="desc">
<b>android >></b>
<p>lalala</p>
</div>
</div>

</div>

<div class="div_holder">

<div id="chrome">
IMAGE
<div class="desc">
<b>Chrome >></b>
<p>lalala</p>
</div>
</div>

<div id="music">
IMAGE
<div class="desc">
<b>Music >></b>
<p>lalala</p>
</div>
</div>

</div>

<div class="clear"></div>

</div> 

<div id="main2">

</div>

</body>
<script>
</script>
</html>

MajinVegeta

Member

Posts: 4,082

Joined: Jan 17 2014

Gold: Locked

Jun 21 2014 07:47pm

I ended up getting it

<!DOOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles3.css">
<title>Recration Site</title>
</head>
<body>
<div class="wrapper">
<div class="cols">
<div class="ContentBox RedBg Height1">
<div class="image"><img src="http://oi60.tinypic.com/riai2w.jpg"></div>
<div class="box_footer SC1"><p class="bloggerp"><strong>Blogger</strong></learn> »<br> Easily share your posts on Google+ so that you can expand the audience for your blog.</p></div>
</div>
<div class="ContentBox BlueBg">
<div class="image"><img src="http://oi58.tinypic.com/11sf86r.jpg"></div>
<div class="box_footer SC2"><p class="gmailb"><strong>Gmail</strong> »<br> Video chat with up to nine people at once, find emails from the people you care about, share photos effortlessly and more.</p></div>
</div>
<div class="ContentBox GreenBg Height2">
<div class="image"><img src="http://oi61.tinypic.com/nx98ix.jpg"></div>
<div class="box_footer SC3"><p class="androidb"><strong>Android</strong> »<br>Get photos that upload as you take them, group chats instead of multiple texts, and video chats with friends.</p></div>
</div>
</div> 

<div class="cols">
<div class="ContentBox YellowBg">
<div class="image"><img src="http://oi60.tinypic.com/2ivk2ef.jpg"></div>
<div class="box_footer SC4"><p class="musicb"><strong>Music</strong> »<br> Give the people in your Google+ circles a free listen to the songs you buy through Google Music.</p></div>
</div>
<div class="ContentBox BlackBg Height3">
<div class="image"><img src="http://oi62.tinypic.com/23h3ngx.jpg"></div>
<div class="box_footer SC5"><p class="youtubeb"><strong>Youtube</strong> »<br>See which videos your friends are sharing and watch any video with up to nine friends at once.</p></div>
</div>
<div class="ContentBox GrayBg">
<div class="image"><img src="http://oi57.tinypic.com/hvzdy8.jpg"></div>
<div class="box_footer SC6"><p class="searchb"><strong>Search</strong> »<br>Search everything on the web, plus your photos, posts from your circles, and the things your friends have shared with you.</p></div>
</div>
</div> 

<div class="cols">
<div class="ContentBox PinkBg Height4">
<div class="image"><img src="http://oi59.tinypic.com/2dtt8gn.jpg"></div>
<div class="box_footer SC7"><p class="newsb"><strong>News</strong> »<br>Get the latest from your favorite authors, and see the articles your friends are sharing right in Google News.</p></div>
</div>
<div class="ContentBox YelloBg">
<div class="image"><img src="http://oi62.tinypic.com/35lx2rc.jpg"></div>
<div class="box_footer SC8"><p class="earthb"><strong>Earth</strong> »<br>Share images of the places you visit in Google Earth to just the right people using Google+.</p></div>
</div>
<div class="ContentBox BlacBg">
<div class="image"><img src="http://oi62.tinypic.com/sqtabm.jpg"></div>
<div class="box_footer SC9"><p class="mapsb"><strong>Maps</strong> »<br>Send directions and share the places you love with just the right people, right from Google Maps.</p></div>
</div>
</div> 
</div>

</body>

</html>

MajinVegeta

Member

Posts: 4,082

Joined: Jan 17 2014

Gold: Locked

Jun 21 2014 07:48pm

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

strong {
font-weight:bold;
}

body {
background-color: #EEE;
}

.wrapper {
width:1000px;
margin:0px auto;
}

.cols {
float:left;
width:300px;
}

.ContentBox {
float:left;
display:block;
margin:10px auto;
width:280px;
border-radius:10px;
}

.RedBg {
background:#79302A;
height:200px;
}

.BlueBg {
background:#ABCBD6;
height:200px;
}

.GreenBg {
background:#7BC1A1;
height:200px;
}

.YellowBg {
background:#FFD006;
height:200px;
}

.BlackBg {
background:#2B2423;
height:200px;
}

.GrayBg {
background:#2A70E8;
height:200px;
}

.PinkBg {
background:#7BC1A1;
height:200px;
}

.YelloBg {
background:#ABCBD6;
height:200px;
}

.BlacBg {
background:#FFD006;
height:200px;
color:white;
font-family:Arial;
}

.Height1 {
height:300px;
}

.Height2 {
height:260px;
}

.Height3 {
height:330px;
}

.Height4 {
height:230px;
}

.SC1 {
background:#662621;
height:70px;
padding-top:2px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}

.SC2 {
background:#8CBECF;
height:70px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;

}

.SC3 {
background:#7E9D1C;
height:70px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}

.SC4 {
background:#EBC009;
height:60px;
padding-top:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}

.SC5 {
background:#151111;
height:80px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}

.SC6 {
background:#0957DB;
height:70px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}

.SC7 {
background:#5EB990;
height:70px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}

.SC8 {
background:#0B163F;
height:70px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}

.SC9 {
background:#F2B51C;
height:70px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}

.bloggerp {
color:white;
font-family:serif;
font-size:15px;
padding-left:4px;
margin:5px;
}

.musicb {
color:white;
font-family:arial;
font-size:14px;
margin-left:5px;
}

.gmailb {
color:white;
font-family:arial;
font-size:14px;
margin-left:5px;
padding-top:5px;
}

.androidb {
color:white;
font-family:arial;
font-size:14px;
margin-left:5px;
padding-top:5px;
}

.youtubeb {
color:white;
font-family:arial;
font-size:14px;
margin-left:5px;
padding-top:5px;
}

.searchb {
color:white;
font-family:arial;
font-size:14px;
margin-left:5px;
padding-top:5px;

}

.newsb {
color:white;
font-family:arial;
font-size:14px;
margin-left:5px;
padding-top:5px;
}

.earthb {
color:white;
font-family:arial;
font-size:14px;
margin-left:5px;
padding-top:5px;
}

.mapsb {
color:white;
font-family:arial;
font-size:14px;
margin-left:5px;
padding-top:5px;
}

Go Back To Programming & Development Topic List