Actually i have designed the template for one of my games site. In the when i play the game iam getting some problem in IE9 but no issues with other browsers. For clear understanding the issue please see this
play page Code:
<div style="float:left">
<div class="gameContentsurround">
<div class="gameContentbg">
<div class="gameDiv">
<div align='center'>
<!--game content here-->
</div>
</div>
</div>
<div class="gameboxbelowheight"></div>
</div>
<div style='height:5px'></div>
<div style="clear:both"></div>
<div class="gameDesc">
<!--game description here-->
</div>
<div class="moregamesbg">
<div class="moregameswhitebg">
<!--more games section here-->
</div>
</div>
</div>
<div style="float:right; width:390px">
<!--right column where actual issue comes here in IE9-->
</div>
right_column code:
<div class="playAdsWhiteBg">
<div class='playAdsDiv'>
<center>
google ads
</center>
</div>
</div>
<div style="clear:both"></div>
<div style='height:2px'></div>
<!-- Ads END -->
<!-- Ads -->
<!--<div><?php echo SPONSORS_TITLE;?></div> -->
<div class="playAdsWhiteBg">
<div class='playAdsDiv'>
<center>
google ads
</center>
</div>
</div>
<div style="clear:both"></div>
<div style='height:2px'></div>
<!-- Ads END -->
<!-- Comments Section -->
<div class="playAdsWhiteBg">
<div class='playAdsDiv'>
<div style="overflow:scroll">
fb comments
</div>
</div>
</div>
<div style="clear:both"></div>
<div style='height:2px'></div>
<!-- Rating Section -->
<div class="ratethisgameWhiteBg">
<div class='ratethisgameDiv'>
rating system
</div>
</div>
Add width: 390px to content's first child.
When you use floating elements you should always set their width
Related
I am trying to learn Bulma and I want to show a simple page with this layout:
<header>
<hero>
<section>
<footer>
I don't understand why they overlap with each other instead of being clearly one below the other.
There is a dummy container that is obviously misplaced and hidden by the header.
The overlapping is also obvious by the search bar that is both over part of the footer and the hero.
https://codepen.io/anon/pen/bLgOWb
<nav class="navbar is-primary is-fixed-top has-text-white">
<div class="container">
<div class="navbar-brand">
<img id="logo" alt="DUB Logo" src="http://code.dlang.org/images/dub-header.png"/>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<div id="navItem" class="navbar-item">Primo</div>
</div>
</div>
</div>
</nav>
<section class="section">
<div class="container dummy">
</div>
</section>
<div class="hero ">
<div class="container has-text-centered is-size-1">
<h1 class="title"> Explore and use libraries and software</h1>
</div>
</div>
<div id="search" class="container">
<div class="columns searchBlock ">
<div class="column is-paddingless">
<form>
<input class="input searchInput" type="text" placeholder="Search">
</form>
</div>
<div class='column is-3 is-paddingless'>
</div>
<div class='column is-2 is-paddingless'>
<a class='button is-primary searchButton'>Search</a>
</div>
</div>
</div>
<footer class="footer">
<div class="container is-text-centered">
<p> Footer </p>
</div>
</footer>
<script src="old.js"></script>
.hero-body is missing
<div class="hero">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title"> Explore and use libraries and software </h1>
</div>
</div>
</div>
Bulma - Hero
I think problem with column . change column margin follow this
.columns {
marign:0;
}
I am trying to make a row of having 5 divs in a column width of 4 in bootstrep.
So the code be -
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<!-- Main Content -->
<!-- Weather -->
<div class="element">
<div class="header_text">
Weather
</div>
<div class="element_body description_text">
<div class="row">
<div class="col-md-2">sss</div>
<div class="col-md-2">sss</div>
<div class="col-md-2">sss</div>
<div class="col-md-2">sss</div>
<div class="col-md-2">sss</div>
</div>
</div>
</div>
<!-- End Weather -->
<!-- End Main Content -->
</div>
</div>
</div>
So I get a output like-
But problem is done when I change the width of the page. It becomes vertical ins ted of remaining horizontal, like it-
But I don't want it to be changed orientation in any time. So, I want it to be horizontal every time what if the width of the page is changed or not.
Can anyone please help me?
Thanks in advance for helping.
JSFIddle.
Problem:
You are not giving the sm and xs size for it take the default behavior of div i.e. display: block;.
Solution:
So change md to xs.
<!-- Content -->
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<!-- Main Content -->
<!-- Weather -->
<div class="element">
<div class="header_text">
Weather
</div>
<div class="element_body description_text">
<div class="row">
<div class="col-xs-2">sss</div>
<div class="col-xs-2">sss</div>
<div class="col-xs-2">sss</div>
<div class="col-xs-2">sss</div>
<div class="col-xs-2">sss</div>
</div>
</div>
</div>
<!-- End Weather -->
<!-- End Main Content -->
</div>
</div>
</div>
<!-- End Content -->
I'm trying to layout a page element using bootstrap 3 as it's base. I've been ok with most of the layout but I'm having trouble with a particular layout I'm trying to create.
Using the standard container > row > column approach the first row only contains an image, the second row a nav type panel which is meant to sit beneath the image. Instead it's appearing at the top.
Looking at it with chrome the first row appears to have no height, despite the image.
There's something I'm missing or don't understand here.
Update
The image in the main container is absolutely positioned with -50% top to handle an oversized image. The main container is set to relative.
Here's an image of what I'm trying to create (90% there)
I've created a jsfiddle here: http://jsfiddle.net/longestdrive/vt24K/
the html is below:
<div id="hole-stats-modal">
<div class="container" >
<div class="row">
<div class="col-sm-12">
<!-- image -->
<img src="http://downssiteassets.s3.amazonaws.com/content/articles/th_downs%20golf%20503.JPG" class="img-responsive course-image" />
</div>
</div>
<!-- hole stat panel -->
<div id="hole-stats-panel" class="transparent-back">
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- side stats -->
<h3>Hole Detail</h3>
<p>Content for this panel</p>
</div>
</div>
</div>
</div>
<!-- hole text info -->
<div id="course-guide" class="transparent-back">
<div class="container">
<div class="row">
<div class="col-sm-1">
<h3 id="hole-n-2" >3</h3>
</div>
<div id="hole-description" class="col-sm-8 ">
<p>Some text here</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="hole-navigation">
<div class="container">
<div class="row">
<ul class="unstyled list-inline">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The hole stat panel and hole info panel correctly appear where I expect them to but the nav panel does not
Any help appreciated
I think you had way more containers and rows than are needed. I recreated what you are looking for using a lot less elements.
you really only need two rows, one for the image and one for the bottom nav.
jsFiddle Demo
<div id="hole-stats-modal">
<div class="container">
<div class="row">
<div class="col-sm-12"> <!--optional-->
<div class="image"> <!-- Relative Pos with image as background -->
<div class="right-overlap transparent-back">...</div><!-- Absolute Pos to right-->
<div class="bottom-overlap transparent-back">...</div><!-- Absolute Pos ro bottom-->
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12"><!--optional-->
<div class="hole-navigation">
</ul></ul> <!--Nav-->
</div>
</div>
</div>
</div>
</div>
I am having trouble getting web-kit to cooperate! You can see from the images that the left column does as intended in FF yet Web-kit browsers (Safari and Chrome) produces the second image. I am lost as how to fix the issue!
Firefox Version
Webkit Version
Code for area on question
<div class="container" style="margin-top: 30px; position: relative;">
<section class="row" ><!--id="content" -->
<div class="content_bckgrnd span9">
<div class="item-page">
<p style="text-align: center;"><img src="http://avanti.websitewelcome.com/~ingles/images/demo/store-locations.png" width="531" height="368" alt="store-locations" /></p>
</div>
</div>
<div class="content_bckgrnd span3 ">
<div class="mod-padding">
<div class="mod_content ">
<div class="custom" >
<p style="text-align: center;"><strong><img src="http://avanti.websitewelcome.com/~ingles/images/demo/Bldg-Background.jpg" width="150" height="47" alt="Bldg-Background" /><br data-mce-bogus="1" />
</strong></p>
<p><strong>Store Search</strong><br />
To search for an Ingles store near you, type in your zip code or enter your city and state. Click 'Find Stores' to see your results</p>
<p>Narrow your search by clicking on the options to the right. Search for stores with Pharmacies, Bakeries, or ones that are open 24 hours.</p>
<p><strong>Your Results Page</strong><br />
'More Information'- click this to see store locations and to get directions to the store.</p>
<p>'Weekly Ads' click this to view your stores weekly ads.</p>
<p><strong>Sort Your Results</strong><br />
Sort your results by clicking Store, Address, City, State or Zip at the top of the results.</p>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</section>
</div>
<div class="wrapper background" id="module-positions">
<div class="container" style=" min-height:65px;">
<!-- module-positions -->
<section class="row"> </section>
<div class="row">
<div class="span6"> </div>
<div class="span6"> </div>
</div>
</div>
</div>
JsFiddle
Link to development site for raw code view
You will define a div #HomeTopBckgrnd with:
height: 1240px;
margin-top: -360px;
fixed heights will ask for troubles.
Why not something like:
<header></header>
<div id="HomeTopBckgrnd"> Your centent here</div>
<footer></footer>
or
<div id="HomeTopBckgrnd">
<header></header>
<div> Your centent here</div>
<footer></footer>
</div>
I'm trying to make my footer run the whole width of the web page like the navigation, however I want to centre the content of the footer inline with the content above.
<footer>
<div class="container narrow">
<div class="row-fluid footer">
<div class="span4">
</div>
<div class="span3">
</div>
<div class="span5">
</div>
</div>
</div>
</footer>
I thought that adding the classes <div class="container narrow"> inside the footer would centre the content but this has not worked. Any ideas?
The site is available here - http://www.openreachmarketing.co.uk/
You have the footer background defined in the .footer class. So you need .footer to wrap around .container.narrow.
This works when I try:
<footer>
<div class="footer">
<div class="container narrow row-fluid">
<div class="span4">
</div>
<div class="span3">
</div>
<div class="span5">
</div>
</div>
</div>
</footer>