Maybe this is an easy stuff for all web designers out there. So here goes. I just want to add a padding-left property to my div which is inside an div element.
This is the structure of my html
<div id="content-sub">
<form action="/en/contact" method="post" id="contact-mail-page">
<div> <!-- *This part is where I want to add the property padding-left*-->
You can leave a message using the contact form below.
...........
</div>
</form>
</div>
Points to consider:
If you're suggesting of adding a class name or id name. No can't do cause I can't find/don't know the location of the contact form file so I can only add this property in the style.css.
Here is some CSS to add:
#contact-mail-page > div { padding-left: 10px; }
This will only apply to the first level of children in the form element, so any divs inside that div tag will not get the padding applied to it.
#content-sub div { padding-left : 10px;}
Here is you can do
#content-sub div {
//add stuff
}
Related
In my code I use the service and retrieve data from the backend. I have code like this to retrieve the content.
<div class="body" *ngFor='let topic of topics | async'>
<div [innerHTML]="topic.content"></div>
</div>
This topic.content have some text and image. What I want is keep margin between this text and image. But I have no idea to do that. Can someone help me on this.
Based on your comments, if you change that inner div to:
<div class="splitter" [innerHTML]="topic.content"></div>
then you can put in styles.css (global styles, not component's css file) something like:
.splitter > img {
padding-left: 10px;
}
But I don't know how you styled the 'body' class of the parent div and if there's styling in the .content value itself, so you will need to play a bit with that .splitter class.
I want to change the padding of 2/6 pages in my website, but the content divs of the website are using the same CSS, the only solution I can think of is changing the id's of all the content divs and make separate CSS for all of them. Is there an easier way to do this?
You could create a new class and apply it to only the places you want changed.
.pad-class{
padding:5px;
}
<div class="other-class pad-class"></div>
Placing the class last will allow for your new class to overwrite the first one.
You should just apply a specific class to the <body> tag of the pages you want to modify. Then you can write a CSS rule for that class.
HTML (normal page)
<body>
...
</body>
HTML (different padding page)
<body class="different-padding">
...
</body>
CSS
<style>
body { padding: 10px; }
body.different-padding { padding: 20px; }
</style>
<div class="first second"></div>
Insert second where you want to change padding else keep only single class
further reference: Using two CSS classes on one element
you can also use inline styling if no. of divs are less
<div class="button share" style="display: none; float: left" id="share_btn_cont">
Share on Facebook
</div>
Here's my code for a Facebook share button. I've added some styling to the <a> element. I'd like to know how to write the CSS code for it in the parent file. How do I call out the <a> element?
The <a> has a class. Just target the class?
.share_btn {
//styling goes here
}
If you just want to write styles in an external css file for all buttons inside the div,
.button.share a.share_btn {
// Add styles here;
}
You could add just a.share_btn, but this will apply to all <a> tags with the class.
If you want styles to be added to just this button, inside this only this div,
#share_btn_cont #share_btn {
// Add styles here;
}
You can use #share_btn_cont > a#share_btn, but this will only look for elements which are one level down.
<div id="share_btn_cont"><a id="share_btn">Some Stuff</a></div>
It will work for the above case, and not for the one below.
<div id="share_btn_cont"><p><a id="share_btn">Some Stuff</a></p></div>
Also, use classes for a general use case, use id for targeting only a particular element.
.parent:first-child {
//code
}
I am trying to get the white border on this page to disappear:
http://www.donaldrussell.com/blog/carving
password:testpage
I only want it to disappear on pages with this specific template.
Here's the CSS I'm trying to use:
.fullwidth #wrapper{
background-color:#000;}
Can anyone point out what's wrong please?
Thanks
It's the white border, I would like to get rid of, so it looks like this:
Im not sure where the .fullwidth class is actually being used on the page.
The white background is being called from the main style.css stylesheet on line 224.
If you have access to that file, then just change the value there.
If not, try adding this to the page.
#wrapper.black_bg{
background-color:#000 !important;
}
and change your wrapper div to this:
<div id="wrapper" class="hfeed black_bg">
There is no parent container with the class .fullwidth (as far as I can see). The only option for classes in your body (which is the parent container in this case) are:
<body class="page page-id-7703 page-template page-template-onecolumn-sliderpage-php custom-background">
Try instead adding a class to the wrapper and styling this:
.page-template-onecolumn-sliderpage-php .SOME-CLASS{
background-color:#000;
}
You shouldn't use the class then ID like that. best to stick to classes when styling.
Since you want it to disappear only on on the pages with that particular template, here's what you do.
Open the page's template and add an ID called "login-page" to the body tag so that you can target it separately.
Then create the block of CSS code below being specific with the ID you added to the template's body tag.
#login-page #wrapper {
background-color: #000; /* or Inherit */
}
Note You can change or add to the above block of code and it'll affect just the the template that you applied the the given ID to.
I have css
div{margin-left:15px;}
div:hover{color:red;}
and I have multiple divs
<div>
<div>123</div>
<div>456</div>
<div>
<div>789</div>
<div>
<div>10 11 12</div>
</div>
</div>
</div>
I need that only one div became hilighted when it's under mouse pointer.
Now, when mouse is over any of these, they all become red.
Is it possible with pure CSS code?
I'm not sure why you have so many divs, if you want them indented like a list you should use ul and li but to solve your issue you could wrap all of them in a container and target the div hover within that container:
.all div:hover{color:red;}
JSFIDDLE
EDIT
Just add class names to them and target the class then
JS
Given the details the OP provided in the comments of the question I would suggest following solution:
I would add a span wrapper around every text. So the abstract function that generates the HTML would become this:
function(){
$a.="<div><span>$inc</span>"; // span tag added
if(1){
$a.=function();
}
$a.='</div>';
return $a;
}
Now the HTML output should look somewhat like this:
<div>
<div><span>123</span></div>
<div><span>456</span></div>
<div>
<div><span>789</span></div>
<div>
<div><span>10 11 12</span></div>
</div>
</div>
</div>
Which gives the possibility to style it with this CSS:
div span:hover {
color:red;
}