I have a Squarespace site that has a div that has align-center-vert and I was trying to override it to align-top-vert but can't figure out how to do it.
I have been trying to inject code on Squarespace to override the class like so:
<style>
.align-center-vert {
position: top!important;
}
</style>
But this doesn't seem to work.
The full div doesnt have an ID either which makes it hard.
<div class="sqs-slice-group group-copy align-center-vert full-width">
<div class="sqs-slice" data-slice-type="heading" data-slice-id="5b018c461ae6cf341dcc163e" data-content-empty="true"></div>
<div class="sqs-slice" data-slice-type="body" data-slice-id="5b018c461ae6cf341dcc163f" data-content-empty="true"></div>
<div class="responsive-wrapper actions" style="display: inline-block;">
<div class="sqs-slice" data-slice-type="custom-form" data-content-empty="true"></div><div class="sqs-slice yui3-widget sqs-slice-navigation sqs-slice-navigation-content sqs-slice-navigation-focused" data-slice-type="navigation" data-compound-type="action" data-slice-id="5b018c461ae6cf341dcc1642" id="yui_3_17_2_1_1526841597381_309"><ul id="yui_3_17_2_1_1526841597381_382"><li id="yui_3_17_2_1_1526841597381_381">Archive</li><li>Shop</li></ul></div>
</div>
</div>
There is no position: top setting in CSS. If you want to override a vertical-align setting, use vertical-align: top
Related
In my HTML page, I have a well, in which there is another well. The outer well should be in the center of the page, and the inner well in the center of the outer well. My code is given below:
<div id="container">
<div class="col-md-10"></div>
<div class="well col-md-10">
<p> Office name <span class="right-float">Your desk: <span id="desk-id">not set</span> </span></p>
<hr>
<div class="well col-md-6" align="center">
<p> <span class="glyphicon glyphicon-info-sign"></span>
Start your work by setting a name for your Desk</p>
</div>
</div>
<div class="col-md-10"></div>
</div>
It doesn't work; each well appears on the left-side of its respective parent. Does anyone know how I could position them centrally? Thanks in advance!!
Here's my CSS:
hr {
border-color : #474343;
}
.header-dimensions {
width: 110px;
height: 50px;
}
.logoname-dimensions {
display: inline;
width: 115px;
height: 40px;
}
.navbar-pad:{
padding: 0;
}
.right-float{
float: right;
}
What you are trying to do is kind of working against itself.
First off you apply the well class to the same element as the col-md-* element. This results in the whole element floating to the left (from the col-md-* class). You have to make sure that float is overridden in your own code.
Second, you can't use align="center" to center box elements. It works on text, but I think most people would recommend you to keep the centering in the CSS instead of the HTML.
So when you overridden the float and removed the align attribute I suggest you set a new class on both elements that should be centered and add margin: 0 auto; to that class.
Here is a pen that show how it could be done. The align="center" is removed and I've added the class well__centered to the elements. Check the CSS for the styling.
I am a CSS newbie and I have to change some code where it looks like they are inheriting styles from bootstap..
<style>
.thumbnail{display:table !important}
</style>
<div class="thumbnail">
So thumbnail is a cell inside a table and I need to change the height and weight of this cell, any suggestions on how I can do that? I am not seeing any height or width attributes for that style?
Thanks.
Do not modify bootstrap classes just add new class like this
CSS
.thumbnail-custom{
background-color:red !important;
}
I think even !important is not needed
HTML
<div class="thumbnail thumbnail-custom">
...
</div>
If you are using LESS
.thumbnail-custom{
.thumbnail;
background-color:red !important;
}
And HTML
<div class="thumbnail-custom">
...
</div>
I want to know if possible, how to aling on a same line the containing 'Quality Analyst', 'Celestica Sdn Bhd' and 'MYR 2xxx' without changing HTML
html :
<div class="colMiddle resume-detail-item-middle">
<div class="pageRow resume-detail-position long-text-word">Quality Analyst</div>
<div class="pageRow resume-company-location long-text-word">Celestica (AMS) Sdn. Bhd.</div>
<div class="pageRow resume-detail-item-inner resume-margin">
<div class="resume-detail-item-inner-left resume-summary-heading resume-label">Monthly Salary</div>
<div class="resume-detail-item-inner-middle resume-summary-heading">MYR 2,515</div>
... missing html
In a more clearer way :
<div class="outter-containement">
<div class="inner-content-1">inner-content-1</div>
<div class="inner-content-2">inner-content-2</div>
<div class="inner-content-3">
<div class="sub-inner-content-3-1">sub-inner-content-3-1</div>
<div class="sub-inner-content-3-2">sub-inner-content-3-2</div>
</div>
</div>
How can i align on a single line inner-content-1, inner-content-2 and sub-inner-content-3-2
http://jsfiddle.net/K58S2/14/
I would recommend changing the HTML like so: http://jsfiddle.net/K58S2/11/
However you said without changing the HTML, so here is a CSS answer: http://jsfiddle.net/K58S2/7/
.resume-detail-position, .resume-company-location{
float:left;
width:auto;
clear:none;
margin-right:7px;
}
.resume-company-location{
margin-top:1px;
}
You can use display:inline; to each div that's needs to be in line.
A better bet would be throw them in spans, like so:
<span> CONTENT </span>
<span> CONTENT </span>
<span> CONTENT </span>
However, if you insist on aligning divs, something like this would suffice:
<style type="text/css">
.example { float:left; }
</style>
<div class="example"> CONTENT </div>
<div class="example"> CONTENT </div>
<div class="example"> CONTENT </div>
The way i undersood your question, you will have to add a margin-right: to the outter container, the same width reserved of the container for 'MYR 2xxx'. Then, position:absolute; right:0; your container for 'MYR 2xxx', it will fit in.
For making your dividers aligned on a row, you will have to study your css and re-design it, because actually, your dividers take 100% width and clear:both; so you will have to manage all this because even if you attempt to float:left the containers, it won't work.
So, a short answer, yes you can do it with only .css. But be prepared for tricky css re-writing/overwriting.
An other aproach would be javascript, by removing your 'MYR 2xxx' container and replacing it in the normal flow, after 'Celestica Sdn Bhd'. For that approach, study jquery .detatch(), .append(), .appendTo() and insertAfter().
It would look like jsFiddled here :
$('.resume-detail-item-inner-middle.resume-summary-heading').insertAfter($('.pageRow.resume-company-location.long-text-word') );
But still you will have to rework your css.
Try adding the style property display:inline-block; to all three classes
For example:
.colMiddle {
display: inline-block;
}
I'm currently practicing some HTML 5 Web App development, but I can't even get my header to align properly.
visit http://www.sithhappens.net to see what I mean, (view page source to see my html)
and http://www.sithhappens.net/iphone.css
to see the CSS
I want the "Route.me" to align middle, and button (which is just a place holder till I implement a button there) to stay to the left. Thanks.
(Visit the webpage on your mobile device)
Here is the correct HTML, I have injected the styling into the HTML so you can see how it is done. The trick is to make the button position: absolute so it does not affect the spacing of the text "Route.Me".
<article>
<header><button style="
position: absolute;
">Button</button> <div align="center" style="display: block; text-align: center;">Route.Me </div>
</header>
</article>
use only
<div align="center" style="margin-top:-20px;">Route Me</div>
You will have to place button text in a <p> element. Set styles like this:
<div class="btn">Button</div>
<div align="center" class="txt" >Route.Me </div>
CSS
.btn {
float:left;
}
.txt {
display:block;
}
I am using Joomla to create a website at the moment and I am having problems with a certain module getting padding applied to it. The problem is with Joomla you have classes for the modules that I cant seem to override. The layout is as follows :
<div id="rt-page-surround">
<div class="rt-container">
<div class="rt-container-bg">
<div id="rt-drawer">
<div id="rt-header">
<div class="rt-grid-6 rt-alpha">
<div class="rt-grid-6 rt-omega">
<div class="thumbnail_scroller">
<div class="rt-block">
<div class="module-content">
<div id="jdv_iscroll122_wrap" class="jdv_iscroll_wrap " style="width: 620px; height: 110px; ">
<div id="jdv_iscroll122_inner" class="jdv_iscroll_inner horizontally" style="width: 32766px; height: 110px; left: 0px; ">
</div>
The module I am trying to modify is thumbnail_scroller, the problem is it is getting 15px of padding from rt-block. If I set rt-block to padding:0px this gives the desired affect to thumbnail_scroller but it also applies the zero padding to everything else on the page as the rt-block class is shared with numerous other elements on the page (this is the way the template is coded by the author). What I want to do is apply zero padding to rt-block but only for the thumbnail_scroller module.
I have tried
.thumbnail_scroller {padding:0px !important}
but this seems to do nothing, anyone any ideas on this one ? :-)
div.thumbnail_scroller div.rt-block {
padding:0;
}
This specifically targets divs with the rt-block class that are inside a div with the thumbnail_scroller class.
You can be hyper-specific by trying something within your CSS like:
div.thumbnail_scroller div.rt-block {
padding: 0px;
}
That directive will then apply only to a div of class thumbnail_scroller IF it sits within a div container of class rt-block.
(Edited for div order - re-read your question.) {:¬)