Does anyone know anything about HTML/CSS?

CyBer · 03-01-2012, 01:00 PM

I have an assignment to do for one of my classes and the professors suck at teaching. Literally no one in the class knows how to code and it's due next tuesday. Does anyone know anything about coding?

**isulive2train** · 03-01-2012, 01:09 PM

Originally Posted by CyBer

I have an assignment to do for one of my classes and the professors suck at teaching. Literally no one in the class knows how to code and it's due next tuesday. Does anyone know anything about coding?

The ComSci intro class? What are you making?

**JUKEBOX** · 03-01-2012, 01:11 PM

Originally Posted by CyBer

I have an assignment to do for one of my classes and the professors suck at teaching. Literally no one in the class knows how to code and it's due next tuesday. Does anyone know anything about coding?

Programming professors are usually given to be terrible. If your book is good, look at that. Otherwise maybe look at some Youtube tutorials.

**tejasclone** · 03-01-2012, 01:12 PM

What do you need to know how to do?

W3 Schools is an excellent online reference:

W3Schools Online Web Tutorials

CyBer · 03-01-2012, 01:17 PM

Originally Posted by isulive2train

The ComSci intro class? What are you making?

I'm making a website, but I'm in Design class.

This is what I made in Photoshop:

This is what I have (and it looks nothing like what I have in photoshop)

I have no idea how to align the three smaller pictures vertically to the right of the larger one.

Also the website is huge
Also the gradient doesn't go to the bottom of the page

and so on.

**isulive2train** · 03-01-2012, 01:23 PM

werbach.com/barebones/barebones.html

CyBer · 03-01-2012, 01:26 PM

Originally Posted by isulive2train

werbach.com/barebones/barebones.html

This is more what I'm looking for, thanks.

**IHavNoCyCash** · 03-01-2012, 01:31 PM

Originally Posted by CyBer

This is more what I'm looking for, thanks.

do you have to do your thing on a garden?

That's a fire-able offense.

CyBer · 03-01-2012, 01:35 PM

Originally Posted by IHavNoCyCash

do you have to do your thing on a garden?

That's a fire-able offense.

It's for a magazine that was assigned to me last semester. So yes, I had to do mine on a garden magazine.

**marothisu** · 03-01-2012, 01:56 PM

CSS can be a ***** big time. Looks like you're having positioning problems? Are you using DIVs for your content areas (I assume yes, just want to check)?

**Lateralus** · 03-01-2012, 01:56 PM

You can try to google the assignment sometimes people put up the code online. Sometimes just the webpage is up but no code and then you can just use your browser to look at the webpages code to get an idea. I hate barebones web design because it can take hours to figure out a small problem.

CyBer · 03-01-2012, 01:59 PM

Originally Posted by marothisu

CSS can be a ***** big time. Looks like you're having positioning problems? Are you using DIVs for your content areas (I assume yes, just want to check)?

HTML:

<body>
<div class="wrapOverall">

<div class="header">
<img class="logo" src="Images/logo.png" width="242" height="82" alt="garden grove" />
</div>

<div class="bar">
<img class="blackbar" src="Images/magazine_bar.png" width="898" height="16" alt="bar" /></div>

<div class="navmain">
<ul>

<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">DIY</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">How-To</a></li>

</ul>

</div><!!!END NAVMAIN!!!>

<div class="content">
<p><img src="Images/mainpicture.png" width="489" height="345" alt="mainpicture" />

<img src="Images/button_flower_top.png" alt="buttontop" align="top" width="106" height="109" class="topbutton" />

<img src="Images/button_flower_middle.png" align="" width="106" height="112" alt="buttonmiddle"/>

<img src="Images/button_flower_bottom.png" width="110" height="114" alt="buttonbottom"/>

</p>
<p></p>
</div><!!!END CONTENT!!!>

<div class="wrapbucket">

<div class="bucket"></div>
</div>

</div>
</body>
</html>

CSS:

@charset "UTF-8";
/* CSS Document */

/* ###################### */
/* General HTML Tag Rules */
/* ###################### */

body { background-image:url(Images/bg_full.jpg);
background-repeat:repeat-x;
background-color:#ffffff;
background-attachment:fixed;
background-position:top;

}

h1, h2, h3, h4, h5 h6 {

}

p {

}

a {

}

a:hover {

}

hr {

}

/* ############################ */
/* General Template Class Rules */
/* ############################ */

.wrapOverall {

width:1420px;
height:750px;

}
.wrapbucket {

}
.header {
background-image:url(Images/bg_header.jpg);
background-repeat :no-repeat;
background-position:top center;
height:108px
}
.bar img.blackbar {
width:1420px;

}
.header img.logo{
margin-top:1px;
margin-bottom:;
margin-left:;
margin-right:;
}

.navmain {
float:center;
padding-left:400px
}
.content {
padding-left:40px;
padding-top:53px;
}
.content img.topbutton {
padding-left:5px

}
.content img.middlebutton {
}

.bucket {
background-color:#000000;

}

/* ######################## */
/* General Navagation Rules */
/* ######################## */

.navmain ul {
margin:0px;
padding:0px;
}
.navmain ul li {
margin:0px;
padding:40px;
list-style:none;
display:inline;

}
.navmain ul li a {
margin:0px;
padding:0px;
color:black;
text-decoration:none;
font:Arial, Helvetica, sans-serif;
font-size:10pt;
font-weight:100

}
.navmain ul a:hover {

}

/* ############ */
/* Bucket Rules */
/* ############ */

.bucket ul {

}
.bucket ul li {

}

**marothisu** · 03-01-2012, 02:06 PM

Okay. You need to add some more DIVs. Find this code:

------------
<div class="content">
<p><img src="Images/mainpicture.png" width="489" height="345" alt="mainpicture" />

<img src="Images/button_flower_top.png" alt="buttontop" align="top" width="106" height="109" class="topbutton" />

<img src="Images/button_flower_middle.png" align="" width="106" height="112" alt="buttonmiddle"/>

<img src="Images/button_flower_bottom.png" width="110" height="114" alt="buttonbottom"/>
---------

You want to have something like this, at least try it right now:

<div class="content">

<div id=left style="width: 489; float: left;">
<p><img src="Images/mainpicture.png" width="489" height="345" alt="mainpicture" />
</div>

<div id=right style="float: left; width: 106;">
<img src="Images/button_flower_top.png" alt="buttontop" align="top" width="106" height="109" class="topbutton" /><br/>

<img src="Images/button_flower_middle.png" align="" width="106" height="112" alt="buttonmiddle"/><br/>

<img src="Images/button_flower_bottom.png" width="110" height="114" alt="buttonbottom"/><br/>
</div>

I put some new DIVs in, and I was lazy and put the style inline, so you can assign them each a class if you want and put it in your CSS file. See if that gets you closer to what you want at least for the middle.

CyBer · 03-01-2012, 02:08 PM

Dude you are a life saver. Now if only I know what you did....haha.

**marothisu** · 03-01-2012, 02:09 PM

Actually I just noticed the bottom right image is width of 110 while the others are 106. Here is updated:

<div class="content">

<div id=left style="width: 489; float: left;">
<p><img src="Images/mainpicture.png" width="489" height="345" alt="mainpicture" />
</div>

<div id=right style="float: left; width: 110;">
<img src="Images/button_flower_top.png" alt="buttontop" align="top" width="106" height="109" class="topbutton" /><br/>

<img src="Images/button_flower_middle.png" align="" width="106" height="112" alt="buttonmiddle"/><br/>

<img src="Images/button_flower_bottom.png" width="110" height="114" alt="buttonbottom"/><br/>
</div>

Now, if that doesn't work, put