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/
Related
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;).
I'm trying to use angular to create list of elements. The page will be an app on mobile phone.
The list itself can have many elements so what I expect is that the ul element should be scrollable ("swipable"?). I tried to follow some example like http://jsfiddle.net/sirrocco/9z48t/ and http://jsfiddle.net/qcv5Q/1/..
This is the html code:
<div class="container">
<div id="spinner-icon" style="display:none">
<span class = "icon-spinner"></span>
</div>
<div class="col-xs-12 indentation push-down bg-white" ng-repeat="cei in completeElementInfo">
<div class="clearfix">
<div class="pull-left">
<h4>{{cei.description}}</h4>
<p>{{cei.name}}</p>
</div>
</div>
<div class="log-widget-list">
<ul class="list scroller clearfix" id="elements-list">
<li class="pull-left" ng-repeat="tinfo in cei.techInfo | orderBy: 'tinfo.sentTime'">
<h4 class="align-center">{{tinfo.elementShortCode}}</h4>
<div class="clearfix">
<span class="icon-clock pull-left"></span>
<span class="pull-right"> {{tinfo.sentTime}}min</span>
</div>
</li>
</ul>
</div>
</div>
</div>
and this is the css code:
.list {
margin: 0;
padding: 0;
}
.log-widget-list {
height:100px;
width: 720px;
overflow: hidden;
}
.log-widget-list .scroller{
overflow-x: scroll;
list-style-type: none;
width: 1500px; /* combined width of all LI's */
}
#elements-list li {
width: 100px;
list-style: none;
box-sizing: border-box;
border-top: none!important;
background-color: #0accf8;
padding: 4px;
}
#elements-list li:not(:last-of-type) {
border-right: 3px solid #ffffff;
}
#elements-list [class^="icon-"], #elements-list [class*=" icon-"] {
margin-top: 4px;
font-size: 12px;
}
Now the problem is that i don't want that the horizontal scrollbar appears, but it appears and i don't understand why... Any idea?
add overflow:hidden in #wrapper css.
CSS:
#wrapper {
background: transparent;
width: 550px;
color: white;
height:100%;
overflow:hidden;
}
Demo: http://jsfiddle.net/lotusgodkk/9z48t/5/
DEMO
http://jsfiddle.net/FTUrF/6/
Changed some CSS here:
.log-widget-list {
width: 200px;
height: 300px;
border: 1px solid #000;
overflow: hidden;
}
.log-widget-list .scroller {
width: 215px;
height: 300px;
overflow: scroll;
padding-bottom: 15px;
list-style-type: none;
}
Added height and padding-bottom in .scroller and border in .log-widget-list
and added some more of these:
<span class="pull-right"> {{tinfo.sentTime}}min</span>
I have to inline-block elements. I want to display side by side the two elements. When the text of the link in the second block element displays on two lines because of a long text (word wrap), the link parent element displays on the second line.
In the fiddle bellow the second div.job_content block should display like the first one (side by side).
Any Idea?
Here is the fiddle:
.content {
width: 300px;
}
.job-content {
border: 1px solid red;
margin: 20px 0;
}
.job-thumbnail {
display: inline-block;
}
.job-thumbnail img {
margin: 10px 10px 5px;
max-width: none;
border: none;
}
.job-title {
display: inline-block;
vertical-align: top;
}
<div class="content">
<div class="job-content">
<div class="job-thumbnail">
<img width="80" height="80" src="http://www.rockstargames.com/midnightclubLA/downloads/content/avatar/MCLA_avatar_256x256_black_rlogo.jpg">
</div>
<div class="job-title">
Small text
<dl class="">
<dt class="study_level">Niveau requis:</dt>
<dd>
bac ou équivalent
</dd>
</dl>
</div>
</div>
<div class="job-content">
<div class="job-thumbnail">
<img width="80" height="80" src="http://www.rockstargames.com/midnightclubLA/downloads/content/avatar/MCLA_avatar_256x256_black_rlogo.jpg">
</div>
<div class="job-title">
<a href="" title="Permalien vers Inspecteur(trice) du permis de conduire et de la sécurité routière" rel="bookmark">Large text du permis de conduire et de la
sécurité routière</a>
<dl class="">
<dt class="study_level">Niveau requis:</dt>
<dd>
bac ou équivalent
</dd>
</dl>
</div>
</div>
</div>
Here is a much more simple example:
.wrapper {
border: 1px solid red;
}
.thumbnail {
display: inline-block;
margin-right: -80px;
width: 80px;
}
.text {
display: inline-block;
vertical-align: top;
width: auto;
padding-left: 80px;
}
<div class="wrapper">
<img width="80" height="80" class="thumbnail" src="http://www.rockstargames.com/midnightclubLA/downloads/content/avatar/MCLA_avatar_256x256_black_rlogo.jpg">
<a href="#" class="text">
This text shouldn't be pushed downwards when the "result" frame is resized
</a>
</div>
Simply resize the result frame to see the text being pushed downwards... I have this done this before, I don't get what is wrong...
Check out this jsfiddle
.content {
width: 700px;
}
.job-content {
display:inline-block;
border: 1px solid red;
margin: 20px 0;
}
.job-thumbnail {
display: inline-block;
}
.job-thumbnail img {
margin: 10px 10px 5px;
max-width: none;
border: none;
}
.job-title {
display: inline-block;
vertical-align: top;
width:190px;
}
Is there any reason why you're running with inline-block?
If you float the elements it is much easier to do - http://jsbin.com/ojoloq/1/edit
UPDATE
Remove the inline-block and use floats will do the trick (http://jsfiddle.net/DxTg2/12/)
.wrapper {
border: 1px solid red;
float:left;
}
.thumbnail {
float:left;
margin-right: -80px;
width: 80px;
}
.text {
float:left;
vertical-align: top;
width: auto;
padding-left: 80px;
}
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>
My goal (and the question of how-to) is to have an opaque / white background with black fields over the opaque area to serve as content holders. Here is what I have now:
/* translucent background*/
.background
{
width:950px;
height:1024px;
margin: 9px auto 10px;
background-color:#ffffff;
opacity:0.35;
filter:alpha(opacity=35); /* For IE8 and earlier */
border-radius: 15px;
-moz-border-radius: 15px;
z-index:0;
}
/*content wrapper*/
.content
{
font-family: Arial;
font-size: 11px;
width:950px;
height:1024px;
margin: 9px auto 10px;
border-radius: 15px;
-moz-border-radius: 15px;
z-index:1;
}
/*one of three content fields*/
.anounce_bar
{
font-family: Arial;
font-size: 16px;
width:940px;
height:225px;
float: left;
border: 5px 5px 5px 5px;
background-color: black;
border-radius: 15px;
-moz-border-radius: 15px;
z-index:2;
}
<div class="background"></div>
<div class="content">
<!--Top announcement bar-->
<div class="anounce_bar">
</div>
<!--Left side nav bar-->
<div class="nav" style="height: 1024px; ">
</div>
<!--Right side content window-->
<div class="content_window">
</div>
</div>
Right now its showing the anounce_bar below the translucent background.. how do I get the bar (and subsequent nav & content_window) to go on top of .background?
Note: I have other content, including a top 'masthead' image and a background JPG that might be screwing with this.
Any help would be GREATLY appreciated.
Update:
This was an issue with opacity inheritance - the work around I used is described very well here
'background' class became #background without any opacity, and a new item was added:#background .transparency with absolute positioning and opacity.
<div id="background">
<div class='transparency'></div>
/*OTHER STUFF*/
</div>
Change the order
<div class="anounce_bar"></div>
<div class="background"></div>
That should work.
<div class="background">
<div class="content">
<!--Top announcement bar-->
<div class="anounce_bar" style="color: white">Anounce Bar</div>
<!--Left side nav bar-->
<div class="nav" style="height: 24px; width: 940px; background-color: green; float:left;">Nav</div>
<!--Right side content window-->
<div class="content_window" style="height: 24px; width: 940px; background-color: yellow; float:left;">Content Window</div>
</div>
</div>
Sample Code