Learn VBA & Macros in 1 Week!

CSS - Need Css Help Asap

Full Excel VBA Course - Beginner to Expert

Need Css Help Asap	View Content

ok im very very new to css so i need to ask a few questions and get a few answers. i use css for link effects, table properties and various little tid bits and such, but ive never done a layout in pure css code. if anyone could help me it would be great, i looked on http://www.w3schools.com/css/css_examples.asp and couldnt find anything related.

ok what i need to know is how the make a shadow effect on <div> tags and i need to know how (if its possible) to make the corners round. another basic thing i dont know is how to display data in div tags like i would in tables with <td> tags. like 2 div tags side by side.

Thanks very much in advance!

Full Excel VBA Course - Beginner to Expert

I Need Help Asap! Template Isn't Coming Together!

Similar Tutorials

View Content

I am trying to design a template and have spent hours trying to figure out where I'm going wrong. I am fairly experienced, but am used to designing with tables and read that it's better to design with DIV tags and assign CSS to position the elements (http://www.csszengarden.com ). The URL to the site I am designing is: http://www.electracustomhomes.com/new.php

Here is the XHTML code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
</head>
<body>
<div id="page">
	<div id="template_header_top">
		<div id="template_header_01"> </div>
		<div id="template_header_02"> </div>
		<div id="template_header_03"> </div>
	</div>
	<div id="template_header_bottom">
		<div id="template_header_04"> </div>
		<div id="template_header_05"> </div>
		<div id="template_header_06"><div id="search">{search}</div></div>
	</div>		
   <div id="template_left"></div>
   <div id="content">
      <div id="sidebar">
	      <div id="menu">
	         {menu template='simple_navigation.tpl' collapse='1'}
	      </div>	
	      <div id="news">
	         <h2>News</h2>
	          {news number='3' detailpage='news'}
	      </div>
      </div>
      <div id="main">
         <h2>{title}</h2><div id="print">{print showbutton=true script=true}</div>
         {content} <br />
         <div class="left49">
            <p>{cms_selflink dir="previous" label=""}</p>
         </div>
		 <div class="right49">
		 	<p>{cms_selflink dir="next" label=""}</p>
		 </div>
      </div>      
   </div>
  <div id="template_right"></div>
  <div id="template_footer">
	  <div id="template_bottom_left"></div>
	  <div id="template_bottom"></div>
	  <div id="template_bottom_right"></div>
   </div>
</div>
</body>
</html>

And the CSS to accompany it:

Code:

* {
margin:0;
padding:0;
}

body {
   text-align: left;
   font-family: Arial, Helvetica, sans-serif;
   background-color: #620E0C;
   color: #000;
}

img {
   border: 0;
}

a,
a:link 
a:active {
   text-decoration: underline;
   background-color: inherit; 
   color: #620E0C; 
}
a:visited {
   text-decoration: underline;
   background-color: inherit;
  color: #620E0C; 
}

a:hover {
   text-decoration: none;
   background-color: inherit;
   color: #0000FF;
}

div#page {
   border: none;
   margin: 0 auto;
   width: 800px;
   color: #000;
}

div#content {
   clear: both;
   width: 775px;
   height: 100% !important;
   background-color: #ccc;
   color: #000;
   margin: 0px;
   padding: 0px;
}

div#template_left {
   height: 100%;
   width: 12px;
   background: url(uploads/images/template_left.jpg) repeat-y left top;
   float: left;
}

div#template_right {
   height: 100%;
   width: 12px;
   background: url(uploads/images/template_right.jpg) repeat-y right top;
   float: right;
}

div#main {
   width: 200px;
   height: 100%;
   float: right;
}


div#sidebar {
   width: 200px;
   height: 100%;
}

div#menu {
	width: 180px;
	height: 100%;
}

div#menu dfn {
	display: none;
}

div#menu li {
	list-style: none;
}

div#news {
   width: 180px;
   height: 100%;
}

div#template_footer {
   clear: both;
   height: 40px;
   color: #fff;
   background-color: #620E0C;
   margin: 0px;
   padding: 0px;
}

div#template_bottom_left {
   width: 12px;
   height: 40px;
   background: url(uploads/images/template_bottom_left.jpg) no-repeat left bottom;  
}

div#template_bottom {
   width: 775px;
   height: 40px;
   background: url(uploads/images/template_bottom.jpg) no-repeat center bottom;
}


div#template_bottom_right {
   width: 12px;
   height: 40px;
   background: url(uploads/images/template_bottom_right.jpg) no-repeat right bottom;
}

I hope I've given all the information you might require... like I said, I really don't know why it's not working.

Thanks in advance,
Marcus

Desperately Need Css Help Asap (hover - Image Question)

Similar Tutorials

View Content

I'm taking a condensed class at the community college here and my final is due tomorrow night. My teacher has a very thick Russian accent and is very difficult to understand, and does not make himself particularly available away from class hours...so...I'm sort of stuck. I understand that this is an embarrassingly basic CSS I've got rigged up here, so I need no critiquing on it, though if you feel you must, go ahead. Anyway, I was finishing the thing up tonight and realized that I missed one of the requirements for this final project (sloppy handwriting =( ). My main question is this: On each page I have a series of thumbnails, and one larger image at left. I would like to (either with addition to the CSS, or with not too much extra addition to each of the thirty some pages) create a hover effect wherein ONLY the larger image at left will load a larger version of the image on mouseover. I found a few examples on CSS tutorial websites but have been unable to correctly apply it. I am really in a jam and would appreciate any help anyone could give me on this. Additionally, (I know this one is really pushing it) I was not able to resize images, as I am on a new machine and a tight budget, so couldn't afford a copy of photoshop. Most of the images are already resized to 600 x 800 (downloaded from my photobucket account onto the new machine after the old died) but a few of them are larger sizes...so on the mouseover, is there a way to constrain all images to their correct proportions, regardless of filesize? I think this might be an impossibility but I thought it was worth the time to ask anyway (e.g. 600 x 800 images that are constrained to a smaller size, will pop over on mouseover to full 600 x 800, while images that may exceed those dimensions would still on mouseover pop over at a maximum of 600 or 800, whichever side is the largest, and the smaller size whatever it should be proportionally)?

I know this is really convoluted and probably sounds incredibly dumb, but most of us in the class have essentially self-taught ourselves, given how difficult our instructor is to follow in the classroom, so I've done everything on this project by trying to find examples in a pretty terrible text book.

Any help would be hugely appreciated.

I am pasting in the CSS sheet, as well as the code for an example page, so that someone might possibly be able to help me correct/add this.

If you are able to help, please be as explicit and obvious as possible, because I am having a hard time working this out on my own.

CSS:

html, body {
font: 11px "Arial", Lucida Grande, Verdana, Sans-Serif;
margin: 0;
padding: 0;
}

#container {
width:800px;
margin-left:auto;
margin-right:auto;
}

#header {
width:800px;
text-align:center;
margin-top:5px;
margin-bottom:5px;
}

#header h1 {
margin:0;
font-size:18px;
}

#breadcrumb {
list-style-type: none;
margin:0;
padding:0;
margin-left:auto;
margin-right:auto;
}

#breadcrumb li{
float:left;
color:black;
padding-right:3px;
}

#breadcrumb li a{
text-decoration:none;
font-style:italic;
color:black;
}

#nav {
list-style-type: none;
margin:0;
padding:0;
}

#nav li{
float:left;
text-align:center;
width:25px;
}

#nav li#pages{
width:700px;
font-size:14px;
}

#nav li a img{
border:0;
}

#content {
width:800px;
}

#large-image-frame {
width:400px;
float:left;
}

#large-image-box {
margin-top:5px;
padding-top:10px;
width:320px;
margin-right:auto;
margin-left:auto;
background-color:black;
padding-bottom:10px;
}

#large-image-box img{
display:block;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
}

#large-image-box span{
font-size: 12pt; display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
height:60px;
width:300px;
background-color:white;
}

#thumbnail-box {
width:400px;
float:left;
}

#thumbnails {
list-style-type: none;
margin:0;
padding:0;
float:left;
}

#thumbnails li {
margin:0;
padding:0;
float:left;
}

div.small-image-box {
background-color:black;
width:110px;
margin-bottom:10px;
margin-left:15px;
text-align:center;
padding-bottom:5px;
padding-top:5px;
}

div.small-image-box img {
margin-bottom:5px;
display:block;
margin-left:auto;
margin-right:auto;
}

div.small-image-box span {
height:10px;
width:100px;
background-color:white;
display:block;
font-size:9px;
margin-left:auto;
margin-right:auto;
text-align:center;
}

#instructions {
width:800px;
}

a:link, a:visited, a:active { text-decoration: none }

a:hover { color: black;
background-color: white;
text-decoration: none;
border: 2px solid black; }

and the section of code which I would like the mouseover to be effective on:

<div id="content">

<div id="large-image-frame">

<div id="large-image-box">

<img src="images/OP06.jpg" width="94%" height="94%" alt="OP06" />

The section in red is where the image is that I would like to be able to mouseover for a larger (approximately 600 x 800 or 600 x _______/ or _____________ x 800, depending on proportions). Again, I'm desperate, and would be super super grateful for any help/pity any of you might toss my way. Thanks.