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>
Related
I am making a page that uses Twitter Bootstrap. I just want a line to be written in a container that is responsive.
What I have tried is:
<div class="container-fluid">
<div class="row-fluid">
<div class="span10" style="background-color:red;
border-radius:30px;color:powderBlue">
<p style="font-size: 22px">My sample text here.</p>
</div>
</div>
</div>
But this is not working correctly because some of my text is going out of bounds of the red background.
Any help?
Thanks
Leaving some padding from the left might work.
Try this
<div class="container-fluid">
<div class="row-fluid" >
<div class="span10" style="background-color:red;padding-left:10px;border-radius:30px;color:powderBlue">
<p style="font-size: 22px">My sample text here.</p>
</div>
</div>
</div>
Just put padding on the span10 class
<div class="container-fluid">
<div class="row-fluid">
<div class="span10" style="background-color:red;
border-radius:30px;color:powderBlue; padding: 8px 30px;">
<p style="font-size: 22px">My sample text here.</p>
</div>
</div>
</div>
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>
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
I'm trying to create a home page screen where the buttons in the body take up the full screen after the header and footer. Ideally the buttons 2x2 will stretch out to the remaining space on the screen.
I tried using ui-grid-a to stretch the buttons to the width of the screen but was unable to alter the height to the screensize.
<section id="Home" data-role="page">
<header data-role="header">
Home
<h1>testapp</h1>
Setup
</header>
<div data-role="content">
<fieldset class="ui-grid-a">
<div class="ui-block-a">button1</div>
<div class="ui-block-b">button2</div>
<div class="ui-block-a">button3</div>
<div class="ui-block-b">button4</div>
</fieldset>
</div>
<footer data-role="footer" data-role="footer" data-position="fixed">
<fieldset class="ui-grid-a">
<div class="ui-block-a"style="text-align:left">button1</div>
<div class="ui-block-b"style="text-align:right">button2</div>
</fieldset>
</footer>
I'm a noobie at coding so any help would be appreciated. Thanks in advanced.
I believe this is what your looking for. http://jsfiddle.net/codaniel/JAjJp/1/embedded/result/
CSS
<style>
.button{padding:25% 0;}
</style>
HTML
<section id="Home" data-role="page">
<header data-role="header">
Home
<h1>testapp</h1>
Setup
</header>
<div data-role="content">
<fieldset class="ui-grid-a">
<div class="ui-block-a">button1</div>
<div class="ui-block-b">button2</div>
<div class="ui-block-a">button3</div>
<div class="ui-block-b">button4</div>
</fieldset>
</div>
<footer data-role="footer" data-role="footer" data-position="fixed">
<fieldset class="ui-grid-a">
<div class="ui-block-a"style="text-align:left">button1</div>
<div class="ui-block-b"style="text-align:right">button2</div>
</fieldset>
</footer>
</section>
Does this work:
http://jsfiddle.net/Pq9YP/
Using a navbar with one list item
I have following aspx page called search.aspx:
<div id="wrap">
<div id="menu">
<div id="t_menus" runat="server">
<div id="left">
<div class="Menu_Top">
</div>
<div id="a">
</div>
<div class="MenuBtm">
</div>
</div>
<div id="bottom_menu">
<div class="MenuTop">
</div>
<div id="bottommenu">
</div>
<div class="MenuBtm">
</div>
</div>
</div>
</div>
<div id="column_two">
<div id="right_top" class="right_top">
<asp:Panel ID="SrchPanel" runat="server" EnableViewState="False" Wrap="False">
<div id="logo">
<asp:ImageButton ID="logo" runat="server" ImageUrl="/images/l.gif" />
</div>
<div id="SrchDivMid">
<asp:textbox id="txtS" runat="server" MaxLength="50" value="Search"></asp:textbox>
<asp:button id="btnFind" runat="server" Text="Find" />
</div>
<div id="returnInfocenter">
<asp:HyperLink ID="return" runat="server" Text="Return"></asp:HyperLink>
</div>
</asp:Panel>
</div>
</div>
<div class="contentCont">
<div id="content">
<iframe id="iFrame" name="iframe" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" src=""></iframe>
</div>
</div>
</div>
What it does is create simple google type layout like this image using css:
I want this to show like this... when user clicks on menu it loads up iframe with data. I want the css logo searchbox and return button come up and dotted line removed like this image:
I am trying few different things but its not working out. Can anyone please just guide me what approch should i take to achieve the result?
It will be tricky when user click on menu item, page layout change from style 1 to style 2 mentioned in photos.
Initially You need three main div elements
<div style="float:right;width:70%">Search Section</div>
<div style="float:left;width:28%">menu section</div>
<div style="clear:both"></div>
When menu item clicked all you need to transform div structure like this
<div style="width:100%">Search Section</div><!-- goes to top !>
<div style="float:left; width:28%">menu section</div>
<div style="float:right; width:70%;>iframe result section</div>
<div style="clear:both"></div>
Similar Shifting Require In Between Search Section e.g in start div structure look like
<div style="width:100%; padding:10px 0px; text-align:center;">Logo</div>
<div style="width:100%; padding:2px 0px; text-align:center;">Search Box</div>
<div style="width:100%; padding:2px 0px; text-align:center;">Search Links</div>
When menu clicked, shift style of these divs like
<div style="float:left;padding-left:10px; width:25%;">Logo</div>
<div style="float:left;padding-left:10px; width:50%;">Search Box</div>
<div style="float:left; width:20%;>Links</div>
<div style="clear:both;"></div>
You can create classes and when menu item clicked, replace one class with another to shift style of page layout.
Its general concept, rest require step by step tuning.