|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
May 2nd, 2008, 04:05 PM
|
|||
|
|||
|
Gamebox: image with valign middle but floating? anchored div?
i want to have organized game boxes. the way i want it organized is for the image to be on the left, and the text to the right of the image.
however, i want the image to be in the vertical middle of the div and the text to also be in the vertical middle. the problem with what i have now is that the image is always at the top of the game box div and so is the text. ALSO, i want the WHOLE GAMEBOX to act as an <a>, and not just the image and the game title. is that possible? Code:
if ($a == 2) {
echo "
<div class='gamebox clearboth floatleft halfwidth'>";
$a = 0;
} else {
echo "
<div class='gamebox floatleft halfwidth'>";
}
$a++;
$game['desc'] = str_replace("'", "'", $game['desc']);
$game['desc'] = "<span class='gdesc'>".$game['desc']."</span>";
$link = get_game_link("id="._sp($game['id']));
echo "<a href='".$link."' class='gamelink'>";
// display game
echo "
<div class='floatleft'>
<img src='[imgdir]".$game['nameid'].".png' alt='Play ".$game['name'].
"' title='Play ".$game['name']."' class='gamethumb' />
</div>
<div class='floatleft wordwrap' style='width:75%'>
<h3 class='nomargins'><a href='".$link."' class='gamelink'>".$game['name']."</a></h3>";
$rating = round($game['rating']/2);
echo "
<img class='nomargins' style='border: 0px' src='[themedir]/ratings/".$rating."stars.gif' alt='".$game['name']." Rating' />";
echo "
<p class='nomargins'>".html_entity_decode($game['desc'], ENT_QUOTES);
if (theme_is_admin()) {
echo "<small>";
echo theme_admin_link("Manage Games", "darklink", "games", "manage");
echo " - ";
echo theme_admin_link("Edit This Game", "darklink", "games", "editgame-form", "id=".$game['id']);
echo "</small>";
}
echo "
</p>
</div>
</a>
</div>";
__________________
|
|
#2
May 2nd, 2008, 04:14 PM
|
||||
|
||||
|
__________________
Spreading knowledge, one newbie at a time. Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions IE7: the generation 7 browser new in a world of generation 8 browsers. Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.
|
|
#3
May 3rd, 2008, 02:33 AM
|
|||
|
|||
|
still doesnt work. can you be more specific, because the links there recommended i use 3 nested divs. is that not a bit much???
Code:
if ($a == 2) {
echo "
<div class='gamebox clearboth floatleft halfwidth'>";
$a = 0;
} else {
echo "
<div class='gamebox floatleft halfwidth'>";
}
$a++;
$game['desc'] = str_replace("'", "'", $game['desc']);
$link = get_game_link("id="._sp($game['id']));
echo "<a href='".$link."' class='gamelink'>";
// display game
echo "
<div class='floatleft'>
<img src='[imgdir]".$game['nameid'].".png' alt='Play ".$game['name'].
"' title='Play ".$game['name']."' class='gamethumb' />
</div>
<div class='floatleft wordwrap' style='width:75%'>
<h3 class='nomargins'><a href='".$link."' class='gamelink'>".$game['name']."</a></h3>";
$rating = round($game['rating']/2);
echo "
<img class='nomargins' style='border: 0px' src='[themedir]/ratings/".$rating."stars.gif' alt='".$game['name']." Rating' />";
echo "
<p class='nomargins'>".html_entity_decode($game['desc'], ENT_QUOTES);
if (theme_is_admin()) {
echo "<small>";
echo theme_admin_link("Manage Games", "darklink", "games", "manage");
echo " - ";
echo theme_admin_link("Edit This Game", "darklink", "games", "editgame-form", "id=".$game['id']);
echo "</small>";
}
echo "
</p>
</div>
</a>
</div>";
CSS: Code:
div.gamebox {
padding-top:4px;
padding-bottom:4px;
overflow: hidden;
position: relative;
}
div.gamebox[id] {
display: table;
position: static;
}
div.gamebox a {
color:black;
}
div.gamebox a:hover {
color:#495B20;
}
and for my second question, about the whole div being an anchor? i tried putting href in div and i've tried the anchor surrounding the div, but nope.
|
|
#4
May 3rd, 2008, 06:38 AM
|
|||
|
|||
|
Quote:
Yes. Yes it is. But CSS is is often still one of those things where you have to work with what your given. Go through it again it should work. As for your second question. You can't nest a <div> inside an <a> or more specifically a block level element inside an inline element. What you need to do is forget the div and use an appropriate tag. In this case the anchor tag <a>. Make it display:block and use that as your container. Something like this- Code:
<a href="blah" class="blah"><img src="blahblah" class="blahblah" />Some text here that will display on the right of the img</a>
|
|
#5
May 4th, 2008, 06:27 PM
|
|||
|
|||
|
sum1 please help, this just isnt working. no example is what i want, and trying to fit it is like watching Hannibul.
css: Code:
.outer {height:100;overflow: hidden; position: relative; width:50%;}
.outer[id] {display: table; position: static;}
.middle {position: absolute; top: 50%;}
.middle[id] {display: table-cell; vertical-align: middle; position: static;}
.inner {display: block; position: relative; top: -50%; overflow: hidden;}
html Code:
// display game boxes
foreach ($games as $game) {
if ($a == 2) {
echo "
<div class='outer floatleft clearboth halfwidth'>";
$a = 0;
} else {
echo "
<div class='outer floatleft halfwidth'>";
}
echo "<div class='middle'>";
$a++;
$game['desc'] = str_replace("'", "'", $game['desc']);
$link = get_game_link("id="._sp($game['id']));
echo "<a href='".$link."' class='inner'>";
// display game
echo "
<div class='floatleft'>
<img src='[imgdir]".$game['nameid'].".png' alt='Play ".$game['name'].
"' title='Play ".$game['name']."' class='gamethumb' />
</div>
<div class='wordwrap floatleft' style='width:75%'>
<h3 class='nomargins'><a href='".$link."' class='gamelink'>".$game['name']."</a></h3>";
$rating = round($game['rating']/2);
echo "
<img class='nomargins' style='border: 0px' src='[themedir]/ratings/".$rating."stars.gif' alt='".$game['name']." Rating' />";
echo "
<p class='nomargins'>".html_entity_decode($game['desc'], ENT_QUOTES);
if (theme_is_admin()) {
echo "<small>";
echo theme_admin_link("Manage Games", "darklink", "games", "manage");
echo " - ";
echo theme_admin_link("Edit This Game", "darklink", "games", "editgame-form", "id=".$game['id']);
echo "</small>";
}
echo "
</p>
</div>
</a></div></div>";
i use the inner as an anchor because it is allowed to be a block. why is there so much room above every gamebox? http://www.viportals.com/category/all/1/
|
|
#6
May 6th, 2008, 03:12 PM
|
|||
|
|||
|
btw,
Code:
.outer {height:100;overflow: hidden; position: relative; width:50%;}
.outer[id] {display: table; position: static;}
.middle {position: absolute; top: 50%;}
.middle[id] {display: table-cell; vertical-align: middle; position: static;}
.inner {display: block; position: relative; top: -50%; overflow: hidden;}
what is "[id]"
|
|
#7
May 6th, 2008, 03:17 PM
|
||||
|
||||
|
I'm not sure why it isn't working.
The "[id]" is an attribute selector. In this case it means that the rule should be applied if the element belonging to the "middle" class has an ID. It's one way to hide a style rule from IE5-6.
|
|
#8
May 6th, 2008, 05:17 PM
|
|||
|
|||
|
i'll try starting with the basics that ffx understands, the table-cell method:
Code:
.outer {display: table;}
.middle {display: table-cell; vertical-align: middle;}
and i'll just make it a div for now. brb =)
|
|
#9
May 6th, 2008, 06:54 PM
|
|||
|
|||
|
im having one last problem. i outlined it and found the problem from before; i needed different inner divs.
now my problems are: 1) the image is not centered 2) the heights of the outer divs are not the same, even though i clearly say 65px HTML: Code:
<div class='gamebox_outer floatleft clearboth halfwidth'>";
$a = 0;
} else {
echo "
<div class='gamebox_outer floatleft halfwidth'>";
}
$a++;
$game['desc'] = str_replace("'", "'", $game['desc']);
$link = get_game_link("id="._sp($game['id']));
// display game
echo "
<div class='gamebox_inner gamethumbbox'>
<img src='[imgdir]".$game['nameid'].".png' alt='Play ".$game['name'].
"' title='Play ".$game['name']."' class='gamethumb' />
</div>
<div class='gamebox_inner gamedescbox'>
<div class='gamedesc'>
<h3 class='nomargins'><a href='".$link."' class='gamelink'>".$game['name']."</a></h3>";
$rating = round($game['rating']/2);
echo "
<img class='nomargins' style='border: 0px' src='[themedir]/ratings/".$rating."stars.gif' alt='".$game['name']." Rating' />";
echo "
<p class='nomargins'>".html_entity_decode($game['desc'], ENT_QUOTES);
if (theme_is_admin()) {
echo "<small>";
echo theme_admin_link("Manage Games", "darklink", "games", "manage");
echo " - ";
echo theme_admin_link("Edit This Game", "darklink", "games", "editgame-form", "id=".$game['id']);
echo "</small>";
}
echo "
</p>
</div>
</div>
</div>";
CSS: Code:
.gamebox_outer {border: 1px solid blue; overflow: hidden; display: table; position: static;}
.gamebox_outer .gamebox_inner {border: 1px solid red; overflow: hidden; display: table-cell; vertical-align: middle; position: static; height:65px}
.gamebox_outer .gamethumbbox{
width:80px;
height:65px;
}
.gamebox_outer .gamedescbox{
overflow: hidden;
height:65px;
}
EDIT: thanks to Kravvitz's teachings, i remembered about margins and paddings, so i answered my first question. to make the image centered, i added Code:
margin:0; padding:0; text-align:center; my first question still stands  Last edited by gsquare567 : May 6th, 2008 at 07:18 PM.
|
|
#10
May 6th, 2008, 11:34 PM
|
||||
|
||||
|
Don't you mean your second question?
Anyway, the height of ".gamebox .outer" is less than its parent's. The simplest fix would be to set them to the same thing. Thought about just giving ".gamebox" display:table? Do you intend to use ".outer" for anything else?
|
|
#11
May 7th, 2008, 10:04 AM
|
|||
|
|||
Quote:
well remember how i was trying to set it up so the whole gamebox div can be an <a> that gets a background on hover. and it did not work if i did not surround it with the gamebox class, it goes gamebox-> outer-> inner, and i want the whole gamebox to be an <a>nchor with href to the game. i tried chaning it to a.gamebox last night but it ****ed up the whole thing any ideas on converting it (this will be my new 1st question)? Last edited by gsquare567 : May 7th, 2008 at 10:07 AM.
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
