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

Div Boxes and centering


  • This topic is locked This topic is locked
8 replies to this topic

#1 crumbs744

crumbs744

  • Members
  • 19 posts
  • OFFLINE
  •  
  • Local time:11:37 PM

Posted 27 April 2009 - 01:25 AM

Still doing a website for a big client, its been jumping ahead in leaps and bounds which is really great and i have having a good time learning php and css, recently hit a few speed bumps in unlikely places, such as vertically positioning text in div boxes (i didn't think it would be so complicated) now im having trouble getting divs to center and float and the same time.
here is the url.

http://www.humanresources.com.au/jit/OHR%2...;page=flowchart

this 'flowchart' is just a bunch of small div boxes that are hyperlinked that take you to an appropriate page.

i need to have them centered and spaced out nicely, the row on the top is pretty much how it should look, only at the moment if it had three buttons they would all float to the right, of left, im not sure which.

the 2nd row in the other hand centers buttons how i need them, but without the float property it wont line up horizontally.

Hope you guys know what im talking about.

First row.
div.rowone	{
	text-align: center;
	float: right; 
	position:relative; 
	margin:auto; 
	border: thin solid #000; 
	height:52px; 
	width:auto;
	}


div.rowtwo	{
	position:relative; 
	top:100px;
	border: thin solid #000; 
	height:52px; 
	}

(you'll be pleased to know i have indented like you told me i should last time)


Thanks heaps!!

BC AdBot (Login to Remove)

 


#2 Samsbc12

Samsbc12

  • Members
  • 89 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:08:37 AM

Posted 27 April 2009 - 08:35 PM

http://www.jakpsatweb.cz/css/css-vertical-...r-solution.html is a good tutorial for centering vertically.

#3 KamakaZ

KamakaZ

  • Members
  • 739 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Victoria
  • Local time:11:37 PM

Posted 27 April 2009 - 10:29 PM

Why not try something like this?

I know this is for tables, but you might be able to mod it for a div...

<table align="center" height="100%" width="100%">
<tr>
<td valign="middle" align="center">&nbsp;</td>
</tr>
</table>

Good luck!

There's no place like 127.0.0.1
There are 10 types of people in the world, those that can read binary, and those who can't.


#4 crumbs744

crumbs744
  • Topic Starter

  • Members
  • 19 posts
  • OFFLINE
  •  
  • Local time:11:37 PM

Posted 28 April 2009 - 08:16 PM

I have tried to align it in the HTML, (even though it isn't valid), but for some reason it still wont happen for me, i haven't resorted to tables yet, my boss likes to make things difficult. i need a css soloution.

Thanks though kamaka7.

and samsbc12 i need to have them horizontally centered, vertically i have got it working fine.

#5 webrat

webrat

  • Members
  • 138 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:UK
  • Local time:01:37 PM

Posted 01 May 2009 - 08:42 AM

Have you tried using the CSS Margin property other than on auto? You should be able to move the divs around virtually at will as long as you obey a few simple rules - watch out for total widths of content, padding and margins combined as this could 'break' the page. If they are floated they need to be put in your HTML in the correct order otherwise you weill get unexpected results - it usually works right-left-right-left and so on, as many as you like. Make small changes you can keep track of. Validate the changes to avoid unexpected errors cascading into sleepless nights lol.

Edited by webrat, 01 May 2009 - 12:25 PM.


#6 Wolfy87

Wolfy87

  • Members
  • 414 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:England
  • Local time:12:37 PM

Posted 01 May 2009 - 01:26 PM

Take a look at this:

body {
margin-left:10%;
margin-right:10%;
}

#header {
width:30%;
background:black;
height:280px;
float:left;
}


#header-right {
width:50%;
background:black;
height:280px;
float:left;
}

#content {
width:80%;
background:black;
float:left;
}

#footer {
width:80%;
background:black;
float:left;
}

p {
color:white;
font-family:Arial;
margin:8px;
}

a {
color:white;
font-family:Arial;
margin:8px;
border:0px;
}

I recently had the same problem, try using margin for the left and right, not the most orthodox method but hey it works...

Hope this helps, Wolfy87.

#7 Wolfy87

Wolfy87

  • Members
  • 414 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:England
  • Local time:12:37 PM

Posted 08 May 2009 - 09:08 AM

I was just speaking to someone on the topic, i think this will solve your problem:

<style type="text/css">
<!--
div.maincontainingdivetc {
width:800px;
height:200px;
margin:0 auto;
}
-->
</style>

Set the width to whatever you like and change the div name, i just used that dumb name for an example but that will center a 800 x 200 div...

Hope this helps, Wolfy87.

#8 crumbs744

crumbs744
  • Topic Starter

  • Members
  • 19 posts
  • OFFLINE
  •  
  • Local time:11:37 PM

Posted 12 May 2009 - 11:31 PM

Hey good news, my boss finally relented and let me use table.
which i think is the easiest way around this and the customer then doesn't get charged for me googling and bleeping for the answers.

Again, thanks for the help. this has been a pretty big project for me in my spare time and i appreciate the help.

#9 KamakaZ

KamakaZ

  • Members
  • 739 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Victoria
  • Local time:11:37 PM

Posted 13 May 2009 - 01:09 AM

haha, good old bosses... good luck with it all

There's no place like 127.0.0.1
There are 10 types of people in the world, those that can read binary, and those who can't.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users