I am stuck with some CSS.
I need this:
But I have this (applying float:left to the image):
The HTML is generated by Drupal so I can't change its structure:
<div class="content clearfix">
<div class="field field-name-field-gallery-work-order field-type-image field-label-hidden">
<div class="field-items">
<div class="field-item even"><img typeof="foaf:Image" src="http://www.gcca.eu/sites/default/files/styles/stories-field-thumb/public/ACP/workorders/rwanda_photo_2_land_registration_programme_gcca_eud.jpg" width="200" height="150" alt=""></div>
</div>
</div>
<div class="field field-name-field-country-media field-type-taxonomy-term-reference field-label-inline clearfix"><div class="field-label">Country:</div>
<div class="field-items">
<div class="field-item even">Madagascar</div>
</div>
</div>
<div class="field field-name-field-region field-type-list-text field-label-inline clearfix">
<div class="field-label">Region: </div>
<div class="field-items">
<div class="field-item even">Africa</div>
</div>
</div>
...
And I have the folloing styles set to the image:
.node-work-order .field-type-image img {
float: left;
margin: 0 15px 5px 0;
}
.field-type-image img {
background: #F3F0E8;
border: 1px solid #DAC5B4;
padding: 10px;
margin: 0 0 10px 0;
}
How can I align the region and other attributes under Country and to the right of the image?
put a float:left on the image container, not on the image:
.field-type-image{
float:left;
}
.field-label-inline{
margin-left: 280px; /* width of the image */
}
Or if the width of the image varies, you can keep the content aligned with a hidden overflow:
.field-type-image{
float:left;
}
.field-label-inline{
overflow:hidden;
}
The second div is clearing the float, that's why it stays down. You could nullify the clearfix like so:
.field-name-field-region.field-type-list-text.field-label-inline{
clear:none
}
Related
Is it possible to create a CSS rule that applies to the every element except for the first 8 elements? Ie, the 8th plus elements should have a margin top of 65px.
My below less code applies margins to every odd and even button within a menu. Now I want to add a specific margin to the 8th plus buttons. And then ideally apply a specific margin to the 16th plus buttons and so on.
.foo-menu {
.foo-menu-btn {
float: left;
margin: 1px;
}
// Apply specific margin to every second(even) button
.foo-menu-btn:nth-child(even) {
margin-left: -23px;
margin-top: 46px;
}
// Apply specific margin to every odd button
.foo-menu-btn:nth-child(odd) {
margin-left: -23px;
}
// For every button after the 8th one; apply a specific margin
.foo-menu-btn:nth-child( ??? ) {
margin-top: 65px;
}
}
<div class="foo-menu">
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<!-- Now every foo-menu-btn should have a top margin of 65px -->
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
</div>
Try below code, i think help full to you.
hr {
display: block; float: left;
width: 50px; height: 50px;
border: solid 2px #aaa; margin: 10px;
}
hr:nth-child(n+9):not(:nth-last-child(-n)) {
background-color: #ddd;
}
<div id=t>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
</div>
You can use the native CSS :nth-child pseudo-class to specify a range. According to the case you specified it might look like this:
div.foo-menu div.foo-menu-btn:nth-child(n+8):nth-child(-n+15) {
margin-left: 50px
}
The downside is that you still have to manually define each range.
To select everything other than the first 8 divs you can use .foo-menu-btn:nth-child(n+9). See it applied to your HTML below (I took out the negative margins so that the divs would be visible for this example):
.foo-menu-btn {
float: left;
margin: 1px;
background-color: #ccc;
height: 1rem;
}
.foo-menu-btn:nth-child(even) {
margin-top: 46px;
}
.foo-menu-btn:nth-child(n+9) {
margin-top: 65px;
}
<div class="foo-menu">
<div class="foo-menu-btn">1</div>
<div class="foo-menu-btn">2</div>
<div class="foo-menu-btn">3</div>
<div class="foo-menu-btn">4</div>
<div class="foo-menu-btn">5</div>
<div class="foo-menu-btn">6</div>
<div class="foo-menu-btn">7</div>
<div class="foo-menu-btn">8</div>
<!-- Now every foo-menu-btn should have a top margin of 65px -->
<div class="foo-menu-btn">9</div>
<div class="foo-menu-btn">10</div>
<div class="foo-menu-btn">11</div>
<div class="foo-menu-btn">12</div>
<div class="foo-menu-btn">13</div>
<div class="foo-menu-btn">14</div>
<div class="foo-menu-btn">15</div>
<div class="foo-menu-btn">16</div>
</div>
Use :
.foo-menu .foo-menu-btn:nth-child(n+9){
color: blue;
}
.foo-menu .foo-menu-btn:nth-child(odd){
color: red;
}
.foo-menu .foo-menu-btn:nth-child(even){
color: green;
}
.foo-menu .foo-menu-btn:nth-child(n+9){
color: blue;
}
<div class="foo-menu">
<div class="foo-menu-btn">1</div>
<div class="foo-menu-btn">2</div>
<div class="foo-menu-btn">3</div>
<div class="foo-menu-btn">4</div>
<div class="foo-menu-btn">5</div>
<div class="foo-menu-btn">6</div>
<div class="foo-menu-btn">7</div>
<div class="foo-menu-btn">8</div>
<!-- Now every foo-menu-btn should have a top margin of 65px -->
<div class="foo-menu-btn">9</div>
<div class="foo-menu-btn">10</div>
<div class="foo-menu-btn">11</div>
<div class="foo-menu-btn">12</div>
<div class="foo-menu-btn">13</div>
<div class="foo-menu-btn">14</div>
<div class="foo-menu-btn">15</div>
<div class="foo-menu-btn">16</div>
</div>
Im using Bootstrap in my application. I am trying to make it so my whole left side is #fff, while rest is #f9f9f9.
This is what I have so far.
HTML:
<div class="container">
<section class="content">
<div class="col-xs-8">
// Left side
</div>
<div class="col-xs-4">
// Right side side-bar
</div>
</section>
</div>
CSS:
. container {
width: 1200px !important;
}
PS: I don't want/need responsive design.
Image below is a example for what I want to achieve.
Here is a link that hast the same design.
Please try the following code:
HTML
<div class="container">
<section class="content">
<div class="col-xs-8 left-side">
// Left side
</div>
<div class="col-xs-4 side-bar">
// Right side side-bar
</div>
</section>
</div>
CSS
.container{
margin: 0;
padding: 0;
width: 100%
}
.content{
height: 100%;
width: 100%;
}
.left-side{
background-color: #fff;
min-height: 100%;
}
.side-bar{
background-color: #f9f9f9;
min-height: 100%;
}
.no-margin{
margin: 0;
padding: 0
}
This would be a way to achieve what you want to do.
.leftside {
background: #fff;
}
.rightside {
background: #f9f9f9;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-8 leftside">
// Left side
</div>
<div class="col-xs-4 rightside">
// Right side side-bar
</div>
</div>
</div>
I'm having a small HTML/CSS Bootstrap problem here. Basically I have a span4 with a picture on the left side then a span8 with a paragraph describing the picture on the right side.
<div class="container">
<div class="cent text-center">
<div class="row box" style="border:1px solid #CCC; padding:15px 0px 15px 0px;">
<div class="span4" style="height:200px;"><div class="profile pro"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" /></div><!----profile END---></div><!---span4--->
<div class="span8 section">
<h3 align="center">Title</h3>
<div class="team">
<p class="team">this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
</div><!---team END--->
</div><!---span8--->
</div><!---Row END--->
</div><!----cent END--->
</div><!--container END-->
.cent{
text-align:center;
margin:auto;
width:auto;
}
.section {
padding-top:20px;
margin:auto;
}
.team {
text-align:center;
margin:auto;
max-width:600px;!important
padding-left:20px;!important
padding-right:20px;!important
}
.profile {
max-width:200px;
text-align:center;
margin:auto;
padding-top:10px;
}
.pro {
padding-left:100px;!important
}
.box {
background:#FFF;
border:1px solid #CCC;
box-shadow: 0px 1px 1px #CCC;
padding: 0px 20px 20px 0px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
min-height:220px;
}
Now the only thing I want to do is invert the code so that the picture is now on the left and the description on the right but it seems when I do that the span4 does not go on the side of the span8 but instead under it.
<div class="container">
<div class="cent text-center">
<div class="row box" style="border:1px solid #CCC; padding:15px 0px 15px 0px;">
<div class="span8 section">
<h3 align="center">Title</h3>
<div class="team">
<p class="team">this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
<div class="span4" style="height:200px;"><div class="profile pro"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" /></div><!----profile END---></div><!---span4--->
</div><!---team END--->
</div><!---span8--->
</div><!---Row END--->
</div><!----cent END--->
</div><!--container END-->
You have a lot of unnecessary code in there. Maybe this is not exactly what you are looking for but instead of trying to figure out the code you provided, I just started fresh and provided a much cleaner way of doing what you want to accomplish.
You should modify your question as you ask for what already is. At the top you say: "basically I have a span4 with a picture on the left side then a span8 with a paragraph describing the picture on the right side." but then down below you say "now the only thing I want to do is invert the code so that the picture is now on the left and the description on the rite but it seems when I do that the span4 does not go on the side of the span8 but instead under it."
the key is to use the "float" property.
here is the html:
<div class="container">
<div class="span4">
<img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png" />
</div>
<div class="span8">
<div class="span8-text">
<h3>Title</h3>
<p>this is the description about the picture this is the description about the picture this is the description about the picture this is the description about the picture.</p>
</div>
</div>
</div>
and the css:
.container {
position: relative;
clear: both;
text-align: center;
}
.span4 {
float: right;
width: 200px;
}
.span8 {
position: relative;
float: left;
width: 350px;
}
here is the jsfiddle: http://jsfiddle.net/h69Bh/
Use CSS float property span8 float:left and span4 float:right
Take a look DEMO
This is it:
add this in head section below all links to bootstrap cdn :
<style>
img{
width: 100%;
height: 100%;
}
</style>
and this in body tag:
<div class="container img-responsive">
<div class="row">
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
description goes here
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
<img src="1.jpg">
</div>
</div>
<div>
check responsiveness:https://jsfiddle.net/sugandhnikhil/c0zoq8e1/1/
I have a responsive page that has this section:
<div id="team">
<div class="person">
<div class="photo"></div>
<div class="title"></div>
</div>
<div class="person">
<div class="photo"></div>
<div class="title"></div>
</div>
<div class="person">
<div class="photo"></div>
<div class="title"></div>
</div>
<div class="person">
<div class="photo"></div>
<div class="title"></div>
</div>
<div class="person">
<div class="photo"></div>
<div class="title"></div>
</div>
</div>
#team {
width: 100%;
margin: 0 auto;
}
#team .person {
display: inline-block;
text-align: left;
cursor: default;
margin: 0 3em;
}
team has 100% width. I need to align team to center of the page depend on page width. But children person should be align to left inside the team.
So when we have some person that not fill a row, it should be align to the left.
Can you please help?
margin: 0 auto; really only works on fixed width elements. You cannot expect a div set at 100% width to be centered with it.
If you're wanting to center the contents of #team, you can simply apply text-align: center;. This will apply to your .person divs since you set them as display: inline-block;
Check out the results of text-align: center; here to see if it's what you're looking for: http://jsfiddle.net/Chs9X/
Currently having issues trying to get these bordered text boxed to stay aligned with the above images in a way that when I re-size the page they stick with their prospective images. Currently I have them forced to stick under the images with margin css but once I re-size the boxes, the boxes all flee under the images.
EDIT: Updated code - still having similar issues but this looks more promising - attaching photo of current state.
<body>
<div id="container">
<div id="header">
<img class="leaf" src="images/freshleaf.png" height="150px" alt="freshtext"/>
<!--<button class="navbutton"> <strong> TEST </strong> </button>-->
</div>
<div id="body">
<div id="main" class="">
<div class="column">
<img class="smart" src="images/phone1.png" height="500px" alt="phone1"/>
<div class="box1"> <h3>Pie is tasty Mmmmm...</h3> </div>
</div>
<div class="column">
<img class="smart" src="images/phone2.png" height="500px" alt="phone2"/>
<div class="box2"> <h3>Pie is tasty Mmmmm...</h3> </div>
</div>
<div class="column">
<img class="smart" src="images/phone3.png" height="500px" alt="phone3"/>
<div class="box3"> <h3>Pie is tasty Mmmmm...</h3> </div>
</div>
</div>
</div>
</div>
#body{
text-align: center;
}
#header {
padding-bottom: 50px;
text-align: center;
}
#main{
margin: 0 auto;
text-align:left;
width: 770px;
}
.column{
float:left;
padding-left: 10px;
}
.column:first-child {
padding-left: 0px;
}
.box1{
border: dotted;
border-color: gray;
padding: 2px 5px 2px 5px;
max-width: 250px;
text-align: center;
}
img.smart{
margin-left: auto;
margin-right: auto;
}
wrap each image and the coresponding text in one container and set float:left in the css. get rid of the #textboxes div. then center your #main div by setting it to the width of all the images (plus padding - if desired).
see example fiddle with all the code:
http://jsfiddle.net/QLvt7/4/