http://paulsfiles.vacau.com/
I'm trying to add a background-color to #maintext but it isn't showing up. The body image seems to be over-riding the #maintext, even though #maintext is more specific.
Here's how I'm trying to lay it out.
The logical order I'm going for is the nav within the header, and the main text before the images. It's a fixed width site as well.
jsFiddle
Didn't you use the same color code #6E6E6E for #maintext and #wrapper?
Works fine for me if I change the color for #maintext. Hope that helps? Otherwise please come back to me :)
In styles.css line:115 you have this:
#maintext {
float: right;
width: 570px;
background-color: #6E6E6E;
padding: 20px;
}
That background-color happens to be the same one as the #wrapper. #maintext is not being overridden, at least not in the link you posted
Related
Question 1: css doesn't style div id
In my html file I've created a div id for a top bar (with text + social links). In the related css file I've created the corresponding style
#topbar {
height: 40px;
width: 100%;
background-color: #383433;
margin: auto;
overflow: hidden;
}
#topbar p {
color: white;
}
<div id="topbar">
<p>Text text text</p>
</div>
The text becomes white, but the height, background color etc. isn't coming through. Am I overlooking something?
Question 2: can I style an image as part of a div id?
Html:
<div id="scroller">
<img src="images/scroller-1.jpg">
</div>
When I add:
#scroller {
max-width: 100%;
height: auto;
}
The image doesn't get responsive / resized.
If I add:
#scroller img {
max-width: 100%;
height: auto;
}
It works.
So elements part of a div-id don't inherit the parent-style?
First of all: If you have two questions, its better to post them seperated. It is cleaner this way.
To question 1: It is working actually. You can run your pasted code snippet. Likely, some other style is overwriting it. Since we cant know which one it is, the only advice i can give you is to write !important behind your css code like this:
height: 40px !important;
This way, nothing can overwrite it except styles that also have an !important tag.
To question 2:
So elements part of a div-id don't inherit the parent-style?
Well, it depends. You can set the font-color of a div then the headlines and p tags in this div will have the same color unless you specify it otherwise like
#scroller{
color:blue;
}
#scroller p{
color:red;
}
Images dont inherit from divs. They are by default always the full image size so you have to specifiy their size seperately if it should be the full width at all times.
If it was helpful to you, pls mark the answer as accepted :)
Mousing over a link in the sidebar works; therefore the sidebar is on top.
Issue description
Commends ending under the sidebar cannot be deleted.
What I've tried
Workaround: using Stylebot to set a user-side CSS rule:
td.comment-text {
width: 500px;
}
Question
My attempts to target have failed. Would someone help me find the right target and rule?
!Additional info
This is not necessarily a stackexchange bug. I use font scaling because it prevents horizontal scrolling, which is very inconvenient for low-vision users.
UPDATE/Resolution
tr td textarea{
width: 475px;
}
Well, the default styles have a rule like this:
.comments {
width: 660px;
}
Maybe try overriding that?
.comments {
width: 500px;
}
Update
The comments textarea specifies a cols attribute that makes it too wide, as well. This should shrink it down.
.comment-form textarea{
width: 475px;
}
Im trying to accomplish the next situation;
If got a h1 tag, and right of it i want a small line (separator.png)
But my image keeps crossing the h1 text..
http://i57.tinypic.com/2m30l51.png
I've got a example of how i need it to be;
http://themes.webcreations907.com/ninezeroseven/option-two/#prettyPhoto
Those titles: "Take a Look, Recent Works"
HTML is like this;
<div class="titleBar">
<h1 class="left"><span>DIENSTEN</span></h1>
</div>
CSS;
#diensten .titleBar{
background:url('images/sep.png') repeat-x;
background-position:center;
}
#diensten .titleBar h1{
display: inline-block;
}
If tried a lot of things, even copied the code from the original site, but actually i have nog idea what to do.. Can someone help me with it?
Thanks
UPDATE
So i've tried all the things you guys answered.
So far none of them are working for me..
First;
The background tag, smart idea but my page background is transparant.. So transparant on transparant won't work. And even if i make the background transparent, the line will shine trough it. Are there any solutions to this problem? Because its a easy way to do it with a background tag.
Second;
Paulie_D's solution, i actually don't understand it.. Not advanced enough is guess, tried copying the exact code and change the parameters so it fits in my coding, but didn't work.. Can you help me making it fit my coding?
Simply give your h1 element a background of its own which matches the background of the page.
#diensten .titleBar h1 {
background: #f00;
display: inline-block;
}
You can then space the line apart from the h1 element by introducing some right padding (which will extend the background past the end of the text):
#diensten .titleBar h1 {
...
padding-right: 10px;
}
Your div titleBar is around the h1 title, I don't think using inline-block will solve this.
You should just wrap all around a div :
<div class="titleWraper">
<h1>DIENSTEN</h1>
<div class="titleBar">
</div>
</div>
and your css like this :
#diensten .titleBar{
background:url('images/sep.png') repeat-x;
background-position:center;
display: inline-block;
}
#diensten .titleWraper h1{
display: inline-block;
}
You can get the same kind of style. But the thing, they used some background color around h1 tag to avoid to show the stripped line(used as a background for titlebar). If you are ok with the effect do the following. Add your css like below and check the jsfiddle below.
.titleBar{
background:url('http://themes.webcreations907.com/ninezeroseven/option-two/wp- content/themes/ninezeroseven/assets/img/theme/sep.png') repeat-x 0 55%;
background-position:center;
padding-top:0;
}
.titleBar h1{
display: inline-block;
background-color:#f2f2f2;
}
Jsfiddle link below..
http://jsfiddle.net/vapnF/
A pseudo element will work although it does require an additional span but you can dispense with the image if required.
Codepen.io Demo
HTML
<h1 class="left"><span>Some Text</span></h1>
CSS
h1 {
overflow:hidden; /* hides all extra pixels */
font-size:2em;
}
h1 > span {
diaplay:inline-block;
position:relative;
}
h1.left > span:after {
content: "";
position: absolute;
left:100%;
top: 50%;
height: 1px;
width:2000px; /* some really large number*/
background:red;
margin-left:0.5em; /* or remove and add padding-right to span */
}
I'm very inexperience with html and only know the basics for my Tumblr blog. My question is probably very simple but I'm very pissed off at it and I'm losing sleep because I will not sleep without fixing it. So waaay in the beginning of my code, I have:
.post img { width: 100%; }
and then waaay later in the code, I have:
div class="asker-info"><img src="{AskerPortraitURL-24}" alt="" class="asker-avatar" /> {Asker}></div>
My problem here is that whenever someone asks me a question, their avatar appears 20x literally the size it should be. I've checked it out on Google Chrome's "inspect element" and found that the .post img part of my code cancels out with the width part in this section:
.asker-avatar {
float: left;
width: 24px;
margin: 5px 10px 5px 10px;
}
I'm so goddamn pissed off and nothing makes sense
Could you try this and tell what happens ?
Here you create a css class with the image size you want. You set the width what you want, and the height auto, it must pick a good value depending on height
.asker-avatar
{
width: 24px;
height: auto;
margin: 5px 10px 5px 10px;
}
Another question, can you put here the asker-info class you use in the div ? Could be that class the problem with your img ? And maybe you could try to remove the .post img {width:100%} because can make the img to resize to the 100% width of the div
And here you can practise with images sizes and resizes, and you can read some explanation about the img attributes, it's an useful page:
HTML_IMAGES W3SCHOOL
I fixed it!! Oh my god, am I relieved! I noticed that my own avatar was not affected by the .post img so I looked over the class and found out that by simply adding an id="_", you can change it!!
It's not working because the CSS selector .post img is "more specific" than the selector .asker-avatar.
Since .asker-avatar appears lower in the style-sheet that .post img, it will be enough to make that selector as specific as the one you want to override.
I'm not an expert on CSS specificity (this guy is), but try changing the .asker-avatar selector to img.asker-avatar (note - no space between img and .).
I've got a puzzling problem in that a certain bit of HTML displays fine in all modern browsers and IE7, but completely fails in IE8. I've racked my mind as to which CSS could remedy this problem but I've come up short every time.
If you look at this link in chrome, near the bottom you'll notice FB/Twitter share buttons, but if you look at the corresponding space in IE8, there's nothing. Could someone please check it out and let me know, I'm stumped...
The CSS code is:
body div.mr_social_sharing_wrapper {
clear: both !important;
overflow: hidden !important;
height: 40px !important;
width: 960px !important;
z-index: 2000 !important;
line-height: 30px !important;
float: left;
}
span.mr_social_sharing,
span.mr_social_sharing_top {
float: left;
}
And yes, I know using !important is poor form; it was inherited and not by choice :)
Seems to be solved by removing the display styles (you had both display: inline-block and display:block) and float: left from span.mr_social_sharing_top.
If there was a good reason for needing the display styles (trouble in other browsers?) you could also add fixed widths to these spans to solve the problem.