Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

CSS Help With DIVs


  • Please log in to reply
No replies to this topic

#1 thejestre

thejestre

  • Members
  • 25 posts
  • OFFLINE
  •  
  • Local time:10:34 PM

Posted 24 September 2011 - 04:49 PM

Hello,

I'm having a hell of a time doing what I can only think must be incredibly simple for someone with basic CSS skills. I'm more of a PHP guy but know enough about CSS to be dangerous.

What I'm trying to do is create a wep page based on a paper form for this non-profit organization. They need the page to display and print the way I describe, no changing the specs to fit an easier method plz.

This web page must look almost identical to the paper form it is replacing. The paper form has several boxes outlined, with data inside boxes. Each box outline must be completely flush on all sides with the squares above, below, and to each side. There can be no gutter or margin between boxes.
Here is an example of what the final page should look like:
Posted Image
https://ssl-proxy-updated.herokuapp.com/d8c83d2fb3815de0977ffd5c429505d50adbe493/687474703a2f2f696d6734302e696d616765736861636b2e75732f696d6734302f333031352f666f726d75762e6a7067/
The top half is the hard part, the bottom half is already done and uses a table, since it is tabular data. The top half should _not_ be done using a table with rowspans or colspans. It needs to be done with some kind of block element I think.

SO, I was having such a hard time with it I decided to start from the very basics, just trying to get some colored boxes flush against each other. That has proved to be incredibly difficult, maybe because of my poor knowledge of CSS. Here are my example HTML and CSS:
body {
	margin: 0px 0px 0px 0px;
}

p{
	margin: 0px 0px 0px 0px;
}


#title {
display: inline-block;
	width: 400px; 
	height: 50px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-color: red;
	position: relative;
left: 0px;
right: 0px;
}


#copres {
display: inline-block;
	margin: 0px;
	padding: 0px;
	width: 200px;
	height: 50px;
background-color: black;
position: relative;
left: 0px;
right: 0px;
}

#box2 {
width: 180px;
	display: inline-block;
	height: 50px;
background-color: green;
}

#box3 {
width: 180px;
	display: inline-block;
	height: 50px;
background-color: yellow;
}

#box4 {
width: 600px;
	display: inline-block;
	height: 50px;
background-color: blue;
}


<!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>Blocks</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link href="list.css" rel="stylesheet" type="text/css" />
</head>
<body>

	
		<span id='title' >
&nbsp;
		</span> <!-- title -->
		
		<span id='copres' >
&nbsp;
		</span>

		<span id='box2' >
&nbsp;
		</span>
<div style='clear: both'></div>
		<span id='box3' >
&nbsp;
		</span>

		<span id='box4' >
&nbsp;
		</span>

</body>
</html>
Or, here is a pastebin with both CSS and HTML:
http://pastebin.com/W1RKf1yT

There is a margin to the left and right of the boxes I can't seem to get rid of. It is driving me mad.

I've never been a fan of absolute positioning because if it needs small edits, it is just as cumbersome as the outdated table method so what's the point. I do not really understand relative positioning, maybe that's the problem.

All help and insight is greatly appreciated.

Thank you,

_theJestre

BC AdBot (Login to Remove)

 





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users