How to remove the left and right padding from <body>?

asked 2011-05-17 13:36:57 +0800

937 ● 2 ● 12

Hi *,

I want to use 100% of the screen widht's. And I saw that the body tag as padding: 0 5px;

I tried to override this with padding: 0; but them the content just move to the left, and leaving 10px column on the right.

How I fix this?

Thanks,
Madruga

delete flag offensive retag edit

8 Replies

Sort by » oldest newest

answered 2011-05-17 16:27:31 +0800

terrytornado

9393 ● 3 ● 7 ● 16
http://www.oxitec.de/


	<style>
		body { padding: 0 0;  /* 0 padding	on top and bottom and 0 padding on right and left */ }
	</style>

best
Stephan

link publish delete flag offensive edit

answered 2011-05-19 15:02:44 +0800

madruga0315

937 ● 2 ● 12

Hi Stephan,

Thanks for helping. I tested and the result is the same.

the root component (borderlayout) shift's itself 10px to left, leaving a 10px blank column at the right...

link publish delete flag offensive edit

answered 2011-05-20 02:26:55 +0800

tawa
162 ● 1

I tested tornados style with ZK Jet (http://books.zkoss.org/wiki/ZK_Jet) and for me it works:

<zk>
<style>
  body { padding: 0 0;  /* 0 padding	on top and bottom and 0 padding on right and left */ 
</style>
<borderlayout height="450px">
	<north title="North" maxsize="300" size="50%" splittable="true" collapsible="true">
		<borderlayout>
			<west title="West" size="25%" flex="true" maxsize="250" splittable="true" collapsible="true">
				<div style="background:#B8D335">
					<label value="25%"
						style="color:white;font-size:50px" />
				</div>
			</west>
			<center border="none" flex="true">
				<div style="background:#E6D92C">
					<label value="25%"
						style="color:white;font-size:50px" />
				</div>
			</center>
			<east size="50%" border="none" flex="true">
				<label value="Here is a non-border"
					style="color:gray;font-size:30px" />
			</east>
		</borderlayout>
	</north>
	<center border="0">
		<borderlayout>
			<west maxsize="600" size="30%" flex="true" border="0" splittable="true">
				<div style="background:#E6D92C">
					<label value="30%"
						style="color:white;font-size:50px" />
				</div>
			</west>
			<center>
				<label value="Here is a border"
					style="color:gray;font-size:30px" />
			</center>
			<east title="East" size="30%" flex="true" collapsible="true">
				<div style="background:#B8D335">
					<label value="30%"
						style="color:white;font-size:50px" />
				</div>
			</east>
		</borderlayout>
	</center>
</borderlayout>
</zk>

link publish delete flag offensive edit

answered 2011-05-20 08:18:50 +0800

madruga0315

937 ● 2 ● 12

Hi Tawa,

Thanks for helping.

You're right, it works. It must be something specific to my app, in amore complex way. I'll see if I can figure this out.

Thank you both.

Kind regards,
Madruga

link publish delete flag offensive edit

answered 2011-05-23 03:46:21 +0800

Steva77

1014 ● 3
http://www.research.softe...

Take care of all the css classe you use... you can use some great Firefox plugin to debug your UI, checking styles...
I just solved a similar issue, I had a 10 px margin forgotten in the mid of code... not in css file btw, but in .zul...