Maining Child Div Positioning - css

I'm having trouble finding a solution to my issue.
I'm working in the footer of a page. From left to right in a single row, there's a disclaimer div, then a parent div containing a FaceBook and a Twitter button.
(Blue ~ disclaimer div, pink ~ parent div, red ~ the twitter button's color; the facebook button does not have a separate color).
The goal is for the Twitter button to always be on the right of the FaceBook button.
The disclaimer div is set up be a minimum size (the page is using Twitter Bootstrap), so when it is resized small enough the parent div of the buttons is moved to the next line below the disclaimer div.
The issue I'm running into is that when this button-parent div moves down, the Twitter button pops out of the parent div and is laid out below the FaceBook button in a column.
The code for the footer itself:
<div class="container">
<div id="footer" class="row">
<div class="span9 footer-leftspan">
<xsl:copy-of select="data/footer-content/entry/content" />
</div>
<div class="row">
<div class="span3 social-media-footer">
<div id='face' class="span1">
<!-- FaceBook Button -->
<a class="button-link" href="http://www.facebook.com/pages/...." target="_blank">
<img id="fb-btn" class="social-img" src="/f.svg" alt="...." />
</a>
</div>
<!-- Twitter Button -->
<div id='twitt' class="span1">
<a class="button-link" href="https://twitter.com/...." target="_blank">
<img id="twitt-btn" class="social-img" src="/t.svg" alt="...." />
</a>
</div>
</div>
</div>
</div>
</div>
Aside from the arbitrary coloring, there are no specific CSS rules on the buttons or their parent div.
I really have no idea on this one, and the only seemingly viable solutions I can find involve position the buttons with absolute or fixed, neither of which keep them in their parent in the footer how I'd like.
My primary goal that I'd like help accomplishing is just getting the Twitter button to stay in the parent div on resize.
Any ideas? And thanks ahead of time!

See if this will work for you:
http://jsfiddle.net/panchroma/yX4ZV/
I have edited your HTML a little so that the twitter and facebook icons are in the same span instead of seperate spans in a nested grid. Doing this solved the question for desktop and smartphone window sizes, but not for tablets.
To solve for tablets I wrapped the two icons in a class which I force to have a min-width:
HTML
<div class="container">
<div id="footer" class="row">
<div class="span9 footer-leftspan">
<xsl:copy-of select="data/footer-content/entry/content" />
</div> <!-- close span9 -->
<div class="span3 social-media-footer">
<div class="social-wrapper">
<!-- FaceBook Button -->
<a class="button-link" href="http://www.facebook.com/pages/...." target="_blank">
<img id="fb-btn" class="social-img" src="https://dl.dropbox.com/u/2665617/bootstrap/images/facebook.jpg" alt="...." />
</a>
<!-- Twitter Button -->
<a class="button-link" href="https://twitter.com/...." target="_blank">
<img id="twitt-btn" class="social-img" src="https://dl.dropbox.com/u/2665617/bootstrap/images/twitter.jpg" alt="...." />
</a>
</div><!-- close social-wrapper -->
</div> <!-- close span3 -->
</div> <!-- close row -->
</div><!-- close container -->
CSS
.social-wrapper{
min-width:185px !important; /* adjust as necessary depending on icon sizes */
}
Good luck!

Related

Styling lost when placing a <div> inside a <a> tag

Currently, I have a box which has some text inside it. Currently, the link is only applied to some text as below:
<div class="row text-banner-blocks">
<div class="col-sm-4 header-text-banner text-center">
<!-- gray-border -->
<div class="box">
<h3>Free delivery worldwide*</h3>
<a href="#">
*More info here
</a>
</div>
</div>
This is how it appears on the site:
https://snag.gy/sbC421.jpg
However, I want the whole link placed in the whole box and as with HTML I just place the tag inside the tag but I seem to lose all the styling and the padding goes I think? Code:
<div class="row text-banner-blocks">
<div class="col-sm-4 header-text-banner text-center">
<!-- gray-border -->
<a href="#">
<div class="box">
<h3>Free delivery worldwide*</h3>
<br/>
*More info here
</div>
</a>
</div>
This is how it looks after:
https://snag.gy/KZzSUv.jpg
Any help is greatly appreciated!
I think you are referencing the .box div using a css selector that requires the parent element to be a div
so you might have to change the css for the box element to something like
a > .box {
/* styles */
}
check this image for more info
Decided to do it with JavaScript inside using the below for the parameters of the div tag:
onclick="document.location='#'"
This solution is neater for what I am after and as I am using several style sheets it was difficult to spot the culprit.

Sidebar menu messes up the responsiveness of semantic cards

I'm using semantic-ui as my site ui framework, alongside angular 1.5.8.
What happens when the sidebar is visible is that the browser must hide nearly 50% of the card, within a ui cards dive, before the card responsively moves to a new row.
<body ng-controller="MainCtrl">
<div class="pushable">
<div class="ui left vertical inverted visible thin sidebar menu">
<a class="item">
Overview
</a>
<a class="item">
Upcoming
</a>
</div>
<div class="pusher">
<div style="margin: 20px;" class="ui cards">
<div class="card" ng-repeat="bill in bills">
<div class="content">
<div class="header">
{{bill.name}}
</div>
<div class="meta">
{{bill.biller}}
</div>
</div>
<div class="extra content">
<div class="ui two buttons">
<div class="ui basic green button">Edit</div>
<div class="ui basic red button">Delete</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
If I remove the visible class from the sidebar div, then it works as expected. As soon as the browser window chrome gets close to the border of the card, the card wraps to a new row. What am I doing wrong? Do I have to manually account for the size of the sidebar myself? It doesn't seem like I would have to, considering the cards and sidebar are both semantic-ui components.
I've got a working plunker demonstrating this issue as well.
From http://semantic-ui.com/collections/menu.html
A container can be used alongside a grid to provide a responsive, fixed width container for wrapping the contents of a page.
Add the container class to your to your cards div to make it responsive.

Full Height Scrolling with CSS 3

I am trying to layout a web page. My web page will have a search box in the upper left corner. Below the search box are my navigation items. The main content will go in the right area. I am using Zurb Foundation 5 in an effort to create this. Currently, my HTML looks like the following:
<div class="full-width full-height" style='width: 100%; max-width: 100%; height:100%;'>
<div class="large-3 columns" style="overflow-y:scroll; background-color:cornsilk;">
<div class="row collapse">
<div class="small-12 columns">
<input id='search' type="text" />
</div>
</div>
<div class="row">
<div class="small-12 columns">
<!-- My vertical list of navigation items will go here in a <ul> -->
</div>
</div>
</div>
<div class="large-9 columns">
<!-- The main content will go here -->
</div>
</div>
I need the left portion to have a background color of 'cornsilk'. It should always take up the full height of the screen. This works. If there are more navigation items than space available, a scroll bar needs to be used only for the navigation items. In other words, I need the search box to always be visible. At this time, this is not working. The scroll bar I've created extends below the visible page area. I also have the following related CSS
*{ padding:0; margin:0}
html, body { height:100% }
How do I
a) Get the scroll bar to work within the bounds of the navigation area?
b) ensure that it is right aligned flush against the border of the navigation area?
What your looking for is overflow: auto
this should be placed on the navigation container .. you could add a .navigation class on that container
<div class="large-3 columns" style="overflow-y:scroll; background-color:cornsilk;">
<div class="row collapse">
<div class="small-12 columns">
<input id='search' type="text" />
</div>
</div>
<div class="row NAVIGATION"> <!-- Add class to target nav -->
<div class="small-12 columns">
<!-- My vertical list of navigation items will go here in a <ul> -->
</div>
</div>
</div>
then the CSS would be:
.navigation {
overflow: auto;
height: whatever you want it to be;
}
EDIT:
basesd on your Fiddle . i made the navigation with oveflow auto http://jsfiddle.net/yxMn3/1/

Bootstrap well add buttons to edge

Currently i have this setup on a page, there are three buttons in a button group acting as tab toggle buttons and below them is a bootsrap well having tab pages. Is there a way to have the button group become part of the well, so it sits in the center of the top edge of the well?
I have tried code from here: Bootstrap - Adding legend to well but didnt work.
Here is img of current setup
Code is simple
<div style="text-align:center">
<div id="tab" class="btn-group" data-toggle="buttons-radio">
<a style="padding:9px;font-size:16px" href="#tdel" class="btn active" data-toggle="tab">Delegations</a>
<a style="padding:9px;font-size:16px" href="#tind" class="btn " data-toggle="tab">Individuals</a>
<a style="padding:9px;font-size:16px" href="#tobs" class="btn " data-toggle="tab">Observers</a>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane" id="tind">
</div>
<div class="tab-pane" id="tobs">
</div>
<div class="tab-pane" id="tdel">
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/mikeyfreake/CbNfa/2/
Place the buttonset div inside the well div.
Fiddle for reference.
You can also margin-top: -15px; in your CSS sheet to further move it up to sit in the center top part of the well. Hope this helps!

Fixing an image to top right but setting a min page width

I am trying to affix a callout image to the top right of a page, but I do not want it moving once the screen is below a certain width or else it will begin to overlap other page elements. Does anyone know what the best way of going about this is? Thanks!
Standard CSS practises tell us that each element on the page should be encapsulated as a block:
<div style="float:left;">
<div style="float:left;">
<img src="picture.png" />
</div>
</div>
This kind of style allows elelments to stack on top of one another, preventing overlap.
In your case, it sounds like you have a header, and you need a picture fixed in the top right:
<div id="header" style="width:100%;float:left;">
<div style="float:right;">
<img src="picture.png" />
</div>
</div>
<!-- continue stacking elements to build your page -->
<div id="content" style="width:100%;float:left;">
Hey, this stuff works!
</div>
But you also mentioned your page should have a min width, so that when a user tries to contract the width, elements do not overlap horizontally:
<body style="min-width:800px;">
<div id="header" style="width:100%;float:left;">
<div style="float:right;">
<img src="picture.png" />
</div>
</div>
<!-- continue stacking elements to build your page -->
<div id="content" style="width:100%;float:left;">
Hey, this stuff works!
</div>
</body>

Resources