DIV halpppp
- Started
- Last post
- 22 Responses
- CygnusZero4
I need to have a bunch of divs lined up next to each other horizontally, which then all need to be horizontally centered on a page. I have them next to each other using float:left, but tried putting them centered in a table which isnt working.
#apDiv1 {
position:relative;
width:150px;
height:75px;
z-index:1;
background-color:#b0e0e6;
top:0px;
float:left;
}#apDiv2 {
position:relative;
width:150px;
height:75px;
z-index:1;
background-color:#000;
top:0px;
float:left;
}
</style>
</head><body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<a href="#"><div id="apDiv1">mnbmbnmb</div>
</a>
<div id="apDiv2">mnbmbnmb</div>
- prophetone0
sorry didn't really look at above but try display: inline-block;
- CygnusZero40
^ On the div css? Just tried that, doesnt do anything.
- prophetone0
get rid of floats
- GeorgesIV0
try putting the href inside the div,
<div id="apDiv1">
<a href="#">mnbmbnmb</a></div>
- dmay0
if you add "display: inline-block", you have to remove the "float-left", and the "top:0px".
- fadein110
table?
- estetic0
- < Nice, works great,CygnusZero4
- < Cleaner
Based on your original code:
http://jsfiddle.net/…ORAZAL
- CygnusZero40
Need clickable blocks, cant use images in them. Ive had issues trying to get an entire table cell clickable in the past, idk why and Ive had no problems with it with divs.
- is it tabular data? or are you just using the table for layout?estetic
- CygnusZero40
estetic, in the code that you sent, how do you vertically center the text in the divs? Trying to ad a vertical-align:middle in different places in your code, nothing working.
- yea... thats a PITA with css still, will edit an repostestetic
- estetic0
updated - http://codepen.io/anon/pen/tpxms…
Not a perfect solution, lacking some context but its a start.
- CygnusZero40
^ I was talking about the text within the blocks. I need those to be vertically centered within the block. Is that possible?
- refresh? should look like this - http://d.pr/i/wO3pestetic
- yes thats it! thanks manCygnusZero4
- estetic0
>
- CygnusZero40
Ugh, one last thing. I need to have one DIV above this other row of DIVs, just horizontally centered above them. Trying it out myself and the new DIV just insists on left aligning even though the others below it are centering.
- estetic0
no worries - updated. http://codepen.io/anon/pen/tpxms…
- nice oneprophetone
- thanks! almost responsive to boot hahaestetic
- CygnusZero40
youre the man! clearly i suck at this.
- ha np - years of trial and error masquerading as experience...estetic
- CygnusZero40
Is the code on that that site not updating? I see you added something called id="single", yet I dont see it in the css.
- estetic0
its not used - none of the ID's are, you had them in your example and I kept them.
I changed the behavior of the 'link' class and added a second class to the items that need to be displayed 'inline'.
- CygnusZero40
Sorry man getting confused here. You added a class called .inline, but in the body code its referencing class=link inline. Whats the deal with that?
- estetic0
'link' applies the global styling to the item (makes it a white block, with red hover, controls the positions and span ect) adding inline makes the 4 on the second row display inline. Classes can be stacked and the element will take on the styling following the rules of css specificity
- CygnusZero40
Im very close to being done with this. Only problem im having now is I need each block to be a different color. Running into some issues trying to do that with classes.