First look at the picture:
Like you see my center of page i mean this content with form on small resolution get over the navbar. This content is centered verticaly and horizontal by flex.
here is code and what i try:
html`
<nav>
<div class='row header-inner'>
<div class='col-md-10 col-lg-10 col-lg-offset-2 col-md-offset-2 col-sm-offset-1 col-sm-11 col-xs-12'>
<div class='row logo-inner'>
<img src="assets\static\Logo.png">
</div>
<div class='row menu-inner'>
<a class='menu-item' routerLink="/aboutUs" routerLinkActive="active">about us</a>
<a class='menu-item' routerLink="/skiCams" routerLinkActive="active">skicams</a>
<a class='menu-item' routerLink="/contactUs" routerLinkActive="active">contact</a>
</div>
</div>
</div>
</nav>
<div class='row content-inner'>
<div class='col-md-8 col-lg-8 col-lg-offset-2 col-md-offset-2 col-sm-offset-1 col-sm-10 col-xs-12'>
<router-outlet></router-outlet>
</div>
</div>
<footer>
<div class='row center-block'>
<div class='col-md-offset-5 col-lg-offset-5 col-md-2 col-lg-2 col-sm-offset-5 col-sm-2 col-xs-offset-3 col-xs-6 footer-content'>
Powered by PGS
</div>
</div>
</footer>`
and css
footer {
border-top: 1px solid #40637e;
background-color: #282828;
position: fixed;
left: 0;
bottom: 0;
height: 110px;
width: 100%;
overflow:hidden;
}
.footer-content{
color :#959595;
border-top :1px solid #959595;
text-align: center;
margin-top:30px;
padding: 20px;
font-size: 10px;
}
.logo-inner{
margin: 35px 0px 35px 0px;
}
.header-inner{
border-bottom:1px solid #dbdbdb;
padding-bottom: 13px;
margin: 0;
}
.menu-inner{
margin:0px;
}
.menu-item{
margin-right: 40px;
padding-bottom: 15px;
font-size: 14px;
text-transform: uppercase;
font-weight: bold;
color:#545454;
}
.active{
border-bottom:1px solid #ef6716;
color: #ef6716;
}
a:hover, a:focus {
color: #ef6716;
text-decoration: none;
}
.content-inner{
background-color:#f8f8f8;
margin: 0;
/*margin-bottom:200px;*/
}
#media(max-width : 768px){
.menu-item{
margin-right:30px;
padding-bottom: 14px;
font-size: 14px;
text-transform: uppercase;
}
.menu-inner{
margin:0px;
text-align: center;
}
.logo-inner{
margin: 35px 0px 35px 0px;
text-align: center;
}
}
could you help my do something like this when the height is smaller the page start scrolling ?
It looks like you're missing your flexbox code in your question. Without seeing it all, I'd suggest trying to remove flexbox in the smaller breakpoints and just using display: block; and making sure your <div class='row content-inner'> element is statically positioned (position: static;).
Related
I am trying to achieve borders on each print page, on chrome it works fine but in safari border is getting chopped.
I have created a div which is fixed. That div has borders so when window print is triggered, borders comes on all the pages on chrome, but not on safari.
Anyone has solution for this??
my code:
<div class="loading-mask" data-role="loader" style="display: none !important">
<div class="loader">
</div>
</div>
<div class="cutom-container"></div>
<div class="content-div">
<div>
<div class="logo-content">
<div class="logo-div">
<img class="print-logo" src="<?= $this->getViewFileUrl('images/cart-page-print-logo.png'); ?>" alt="<?= __('Print Header Logo'); ?>"/>
<p>
----- </h3>
</p>
<div class="input-container">
<label>Company Name : </label><span id="pcname"> </span>
</div>
<div class="input-container">
<label>Contact : </label><span id="pcontact"> </span>
</div>
<div class="input-container">
<label>Phone : </label><span id="pphone"> </span>
</div>
</div>
</div>
<div class="img-content">
<img class="promotional-img" src="<?= $this->getViewFileUrl('images/PRT-offer graphic.png'); ?>" alt="<?= __('Print Offer'); ?>"/>
</div>
</div>
<div>
<div class="input-container">
<label>Email : </label><span id="pemail"> </span>
</div>
<div class="input-container">
<label>Delivery Address : </label><span id="daddress"> </span>
</div>
<div class="input-container">
<label>Mailing Address : </label><span id="maddress"> </span>
</div>
</div>
<div>
<table id="product-list-print">
</table>
</div>
<div id="sub-total-print">
</div>
<div>
<div class="logo-content">
<p>
Shipping (Shipping rates are appox and apply to US Mainland ONLY)</br> - Please see Sales Specialist for exact quote. Shipping rates for Aff ordable Advantage Trailers do not apply. Park Model Units will require additional shipping fee. <strong>Estimate is valid for 7 days.</strong>
</p>
</div>
<div class="img-content">
<div>
To order this unit sign here
</div>
<div>
<canvas id="myCanvas" style="width: 100%">Your browser does not support the HTML5 canvas tag.</canvas>
</div>
</div>
</div>
</div>
css :
/* Print page css */
.cutom-container{
border : solid #670827 5px;
border-radius: 10px;
position:fixed;
overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
/*border: 5px solid red;*/
}
.content-div{
padding: 10px 5px 5px 5px;
display: none;
}
.logo-content{
display: inline-block;
width: 64%
}
.img-content{
display: inline-block;
width: 35%
}
.print-logo{
width: 50%;
}
.logo-div{
text-align: center;
}
.promotional-img{
width: 100%;
}
.img-content{
text-align: center;
}
.input-container{
padding: 8px;
text-align: left;
border:solid #670827 1px;
font-size: 15px;
margin: 10px;
}
/* end */
.warranty-container{
padding: 10px;
font-size: 16px;
border: solid;
border-width: 1px;
}
.cart-product-warrenty{
display: none;
}
.center-align{
text-align: center;
}
#signArea{
margin-bottom:20px ;
}
#media print {
#page {
border : solid #670827 5px;
border-radius: 10px; }
.cart-container{
display: none;
}
.cutom-container{
display: block !important;
padding: 15px;
}
.content-div{
display: block !important;
padding: 15px;
}
.cart-product-warrenty{
display: contents;
}
.summary.title{
display: none;
}
#sub-total-print>.fieldset{
display: none;
}
#block-shipping{
display: none;
}
input.qty{
width: 50px !important;
padding: 0 !important;
text-align: center;
}
.product-item-name{
text-decoration: unset;
font-size: 1.8rem;
line-height: 1;
font-weight: 700;
padding-top: 0px;
}
.messages{
display: none;
}
a{
text-decoration: none !important;
}
}
#media only screen and (max-width: 600px) {
.modal-content{
width: 80%;
}
.current{
width: 250px !important;
}
.sign-pad{
width: 247px !important;
}
.modal-content{
margin-bottom: 55px;
}
.cart-product-warrenty{
display: none;
}
}
Need tabs to shrink while the main container doesn't fit all items by width.
Here is expected behavior:
http://adamschwartz.co/chrome-tabs/
But could it be done on pure css, flexbox may be?
Solution was pretty simple. Just display: flex; for container, and overflow: hidden; for tab items.
Don't know why my question was downvoted. :(
html {
font-family: sans-serif;
}
.container {
display: flex;
border: 1px solid silver;
padding: 10px 10px 0;
width: 400px;
margin: 0 auto 10px;
}
.tab {
overflow: hidden;
text-overflow: ellipsis;
height: 20px;
border: 1px solid silver;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
padding: 10px;
margin-right: 8px;
border-bottom: none;
}
.tab:last-child {
margin-right: 0;
}
<div class="container">
<div class="tab">Google</div>
<div class="tab">Apple</div>
<div class="tab">Facebook</div>
</div>
<div class="container">
<div class="tab">Google</div>
<div class="tab">Apple</div>
<div class="tab">Facebook</div>
<div class="tab">Chrome</div>
<div class="tab">Flexbox</div>
</div>
<div class="container">
<div class="tab">Google</div>
<div class="tab">Apple</div>
<div class="tab">Facebook</div>
<div class="tab">Chrome</div>
<div class="tab">Flexbox</div>
<div class="tab">Stackoverflow</div>
</div>
I know this is probably totally against the whole idea of the grid system and the responsiveness but let's just assume I want to do the following anyway:
I have the layout that you can see in the picture below.
The problem is initially the whole image+text part takes col-md-9 and the twitter feed takes col-md-2 span on a 1920x 1080 screen. However when displayed on a screen of smaller resolution like 1280x800, I can keep the SAME LAYOUT by changing the image+text part to take up col-md-5 span. So my question is, is it possible to change the element's col-md class using media queries ? I know CSS cannot touch an elements classes but I thought maybe bootstrap came along with a solution. Otherwise I know I can use JavaScript to get the window size and swap the classes.
Here is some code should you need. I didnt want to post any code that is not relevant but if you guys need the whole thing, I can set up a jsfiddle prob.
Thanks ! 1
HTML:
<div class="newsfeed">
<div class="container">
<div class="row">
<div class="col-md-11 mainfeed">
<div class="row top-buffer">
<div class="col-md-3">
<img src="images/chris.jpg" width="190px" />
</div>
<div class="col-md-9">
<h2 class="pullup">Some text here</h2>
<p id="bodypart">Some more text here </p>
</div>
</div>
<div class="row top-buffer topborder">
<div class="col-md-3">
<img src="images/city.jpg" width="190px" height="280px" />
</div>
<div class="col-md-9">
<h2 class="pullup">Text text text</h2>
<p id="bodypart">Text....</p>
</div>
</div>
<div class="row top-buffer topborder">
<div class="col-md-3">
<img src="images/alex.jpg" width="190px" height="280px" />
</div>
<div class="col-md-9">
<h2 class="pullup">Some news text </h2>
<p id="bodypart">xxxxxxxxxxx
</p>
</div>
</div>
</div>
<div class="col-md-1 pull-right">
<!-- Tweet RRS-->
<div class="tweets pull-right">
<a class="twitter-timeline" href="https://twitter.com/sinanspd" data-widget-id="540693554432323584"
width="380px" data-chrome="transparent noscrollbar">Tweets by #sinanspd</a>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],
p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}
}(document,"script","twitter-wjs");
</script>
</div>
</div>
</div>
</div>
</div>
Relevant CSS:
/* ----------COMMON STYLING ------ */
body{
background-color: black !important;
}
.container{
width: 100%;
}
.jumbotron{
height: 340px;
background-size: cover;
background-image: url("images/banner.jpg");
background-repeat: no-repeat;
background-position: center;
}
.nav li{
display: inline;
margin-right: 130px;
}
#nomarginleft{
margin-right: 0px;
}
.nav a{
font-family: "Crimson Text";
font-size: 28px;
font-weight: bold;
z-index: 2;
text-decoration: none !important;
}
.pull-left{
margin-left: -350px;
margin-top: -30px;
}
.pull-right{
margin-right: -300px;
margin-top: -30px;
}
.nav{
background-color: black;
width: 100%;
}
.fixed {
position: fixed;
top: 0px;
height: 50px;
z-index: 1;
background-color: black;
}
/*--------------------- HOME PAGE ---------------- */
#display{
width: 960px;
height: 420px;
overflow: hidden;
margin: 30px auto 0px auto;
border-radius: 4px;
background-color: white;
}
#display ul{
position: relative;
margin: 0;
padding: 0;
height: 960px;
width: 420px;
list-style: none;
}
#display ul li{
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 960px;
height: 420px;
}
#head > p{
font-family: "Crimson Text";
font-size: 30px;
font-weight: bold;
}
#head{
margin-top: 30px;
margin-left: 220px;
}
.newsfeed{
width: 86%;
height: 800px;
margin-left: -160px;
}
.mainfeed{
margin-left: 130px;
}
.pullup{
margin-top: 0px;
}
.top-buffer{
margin-top: 20px;
}
.topborder{
border-top: 1px solid white;
}
.tweets{
background-color: rgba(247,12,12,0.3);
border: 1px solid white;
margin-left: 50px;
border-color: white;
}
#media (min-width: 1000px) and (max-width: 1300px){
.jumbotron{
height: 250px;
}
.nav li{
margin-right: 50px;
}
.nav a{
font-size: 25px;
}
.pull-left{
margin-left: -60px;
}
.pull-right{
margin-right: -40px;
}
#display{
width: 700px;
height: 350px;
}
#head > p{
font-size: 25px;
}
#head{
margin-top: 30px;
margin-left: 80px;
display: block;
}
.newsfeed{
width: 86%;
}
.newsfeed h2{
font-size: 20px;
}
.mainfeed{
margin-left: 230px;
}
.newsfeed h2, .newsfeed p{
margin-left: 0px;
}
.top-buffer{
width: 800px;
}
.newsfeed .pull-right{
margin-right: -120px;
}
.tweets{
margin-right: -500px;
}
}
Why don't you change your code like below
<div>
<div class="col-lg-9 col-md-5">
<h2 class="pullup">Text text text</h2>
<p id="bodypart">Text....</p>
</div>
<div class="col-lg-3 col-md-5">
<img src="images/alex.jpg" width="190px" height="280px" />
</div>
</div>
So now, on bigger screens the screen will we divided 9 cols and 3 cols, on smaller screen sizes it will be 5 cols each.
If you want to change the layout for smaller screen i.e. tablets and screen just user col-sm-xx and col-xm-xx respectively.
What I'm trying to do is to change the background color on the whole "row" div on mouse over and open the href link clicking on any part of the div. I have tried all the solutions I found on SO (both with jquery and pure css) but I can't get it working
Here is my code:
HTML
<div id="row">
<div class="document-date"><?php the_time('d-m-Y') ?></div>
<div class="document-category"><img src="/images/icon.png" /></div>
<div class="document-title">My link
<p>some description</p>
</div>
And the CSS
#row {
position: relative;
width: 700px;
padding: 5px 0 5px 10px;
display: block;
float: left;
}
#row:hover {
background: #fbf5d8;
}
.document-date{
float: left;
color: #1b6392;
font-size: 12px;
margin-right: 10px;
line-height: 35px;
}
.document-category{
float: left;
margin-right: 10px;
line-height: 35px;
}
.document-title {
width: 350px;
float: left;
color: #020100;
font-size: 12px;
font-weight: normal;
margin-top: 1px;
text-decoration: none;
}
.document-title a{
width: 350px;
float: left;
color: #020100;
font-size: 14px;
font-weight: bold;
margin-top: 1px;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
.document-title a:hover{
color: #fff;
}
Any suggestion?
Assuming when you say li, you mean div#row
CSS:
#row:hover {
cursor: pointer
}
JavaScript (using jQuery):
$('#row').click(function() {
// do something
// example:
$(this).find('a:first').click();
});
<div id="row" onclick="alert(1)">
<div class="document-date" >12-08-2014</div>
<div class="document-category" ><img src="/images/icon.png" /></div>
<div class="document-title" ><a href="myurl..." target="_blank" >My link</a><br/><p>some description</p>
</div>
This would do the trick.
Or if you want the divs separately
<div id="row">
<div class="document-date" onclick="alert(1)">12-08-2014</div>
<div class="document-category" onclick="alert(1)" ><img src="/images/icon.png" /></div>
<div class="document-title" onclick="alert(1)"><a href="myurl..." target="_blank" >My link</a><br/><p>some description</p>
</div>
The situation: I have several lists; in each of these lists, the text inside the first li is positioned slightly to the right of center, instead of exactly in the center like the following li elements. In the following example, the second row text ("Site Map") is not centered. Any ideas?
The html:
<body>
<!-- <div class="header">Module Settings</div> -->
<div class="left_content">
<div id="header_nav" class="moduleTypeContent" style="top:-50px" name="header_nav">
<div class="moduleTypeHeader">
<div class="text-center">header_nav</div>
</div>
<ol class="connectedSortable sortable used nonest">
<li id="list_39">
<div class="listItemContents">
<div class="moduleTypeItem left">
<img src="common/images/icons/shadowed/cross-circle.png" alt="Delete Site Map" width="16" height="16" border="0" class="icon rightspace" />
</div>
<div class="moduleTypeItem center text-center">
Site Map
</div>
<div class="moduleTypeItem right text-center">
all
</div>
</div>
</li>
<li id="list_38">
<div class="listItemContents">
<div class="moduleTypeItem left">
<img src="common/images/icons/shadowed/cross-circle.png" alt="Delete Contact Us" width="16" height="16" border="0" class="icon rightspace" />
</div>
<div class="moduleTypeItem center text-center">
Contact Us
</div>
<div class="moduleTypeItem right text-center">
all
</div>
</div>
</li>
<li id="list_6">
<div class="listItemContents">
<div class="moduleTypeItem left">
<img src="common/images/icons/shadowed/cross-circle.png" alt="Delete Help" width="16" height="16" border="0" class="icon rightspace" />
</div>
<div class="moduleTypeItem center text-center">
Help
</div>
<div class="moduleTypeItem right text-center">
all
</div>
</div>
</li>
</ol>
</div>
</div>
and the relevant css:
html, body {
height:100%
}
body {
margin: 0px;
font-size: 12px;
font-family: Arial;
font-family: Arial, Verdana, Univers;
background-color: #f0eff0;
}
ol {
border: 0 solid #aeaeae;
border-width: 0;
margin: 0;
padding: 0;
padding-left: 30px;
}
ol.sortable, ol.sortable ol {
margin: 0 0 0 25px;
padding: 0;
list-style-type: none;
}
ol.sortable {
margin: 4em 0;
}
.sortable li {
margin: 0 0 0 0;
padding: 0;
}
.sortable li div {
border: 0 solid #aeaeae;
border-width: 1px;
padding: 0px;
margin: 0;
cursor: move;
}
div.moduleTypeDiv {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
width:100%;
}
div.moduleTypeHeader {
border:1px solid #6d6d6d;
padding: 6px;
}
div.moduleTypeHeader {
background: #336699 url(../images/table_header_highlight.png) repeat-x bottom;
font-weight:bold;
color: #ffffff;
}
div.moduleTypeHeader a {
color: #ffffff;
}
.left_content{
width:48%;
float: left;
}
.moduleTypeContent{
position:relative;
top: -50px;
}
.moduleTypeHeader{
position: relative;
bottom: -48px;
}
.legendItem.left, .moduleTypeItem.left{
float: left;
width: 18px;
padding: 5px;
border:0px ;
border-right: 1px solid #aeaeae;
}
.legendItem.center, .moduleTypeItem.center {
padding:6px;
border:0px ;
}
.legendItem.right, .moduleTypeItem.right {
position: relative;
top: -25px;
float: right;
width: 100px;
padding:6px;
width:50px;
border:0px ;
border-left: 1px solid #aeaeae;
}
.listItemContents {
position:relative;
}
.text-center { text-align:center; }
Thanks!
p.s. I created a fiddle: http://jsfiddle.net/earachefl/c2bcc/
You are doing some really weird positioning on the right "column" elements by floating the right, but not actually leaving them any space for them on the line they belong, so they are pushed down a row and then using relative positioning is "hack" them back where you want them. And thus there is no item in the first line that would push the text left so that it would appear centered.
Simple solution: Use a table. Your code is a prime example of bad "CSS hacking" because of misunderstanding the rule "Don't use tables for layout". Please, use a table. Please.
EDIT:
Since you can't use a table, here's what you have to do:
Move the "right" column to the first position in the list item
Give the center column a right margin wide enough for the right column to fit it. (63px = 50px width + 2 * 6px padding + 1px left-border)
http://jsfiddle.net/Se87U/1/