I'm not sure if it's possible to modify a wild card element which also has a pseudo element style. I'm trying to remove an annoying bit of padding but I'm not having much luck. Any help would be appreciated.
Here is the rendered HTML.
<div class="row">
<div class="span6">
<div id="parent-1">
::before
<div id="child-1">
<a class="link">
<img src="/picture.jpg" alt="">
<div class="hint">
<span class="hint-message">Hint Text</span>
</div>
</a>
</div>
::after
</div>
</div>
<div class="row">
<div class="span6">
<div id="parent-2">
::before
<div id="child-2">
<a class="link">
<img src="/picture.jpg" alt="">
<div class="hint">
<span class="hint-message">Hint Text</span>
</div>
</a>
</div>
::after
</div>
</div>
I want to modify the ":after" css pseudo element which is proving to be a little challenging.. not even sure if it's technically possible since it's not a real element?
Here is what I have tried so far
div[id^="child-"]:after{ padding:0px !important;}
also tried this
#child-*:after{ padding:0px !important;}
and this
:after { padding:0px !important;}
div[id^="child-"]:after{ padding:0px !important;}
This works for me. I created a demo here.
I think the "annoying padding" is caused by other reasons. Could you provide the css?
Related
I have a center div and a simple problem...
I don't know how to place a image right to it relative(!) like this:
<div class="text_middle">
<span class="volat_text">App</span>
<div id="sport_dropdown">
<span id="sport">Test</span>
</div>
</div>
<img id="arrow_down" src="img/arrow_down.png">
Here is the code: http://codepen.io/lalaluki/pen/pNNYpZ
Does somebody knows a trick?
You can place something like <span>▾</span> inside your .text_middle element. I used the html symbol code for a downside triangle because you did not provide the image in your pen example. But you can try it with an image or glyphicon instead.
<div class="text_middle">
<span class="volat_text">App</span>
<div id="sport_dropdown">
<span id="sport">Test</span>
</div>
<span>▾</span>
</div>
See the pen here
.vertical_align{
vertical-align:middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="top_bar">
<div class="text_middle">
<span class="volat_text">App</span>
<div id="sport_dropdown">
<span id="sport">Test</span>
<span class="glyphicon glyphicon-chevron-down vertical_align" ></span>
</div>
</div>
Try this.
Hope this helps.
I would apply float:right to the image:
#arrow_down {
float:right;
}
Need to change your HTML Structure to achieve this quickly. Add image inside '.text-middle' div
<div class="text_middle">
<span class="volat_text">App</span>
<div id="sport_dropdown">
<span id="sport">Test</span>
</div>
<img id="arrow_down" src="img/arrow_down.png">
</div>
Add vertical align middle to your image
#arrow_down {
vertical-align: middle;}
Hope this will help you
I am working on my portfolio. I have this page here:
The first picture there is a date on. I would like a text in the bottom, like this:
But I cannot get that text placed. Everytime I add a div tag and set in a text, it is going outside of the picture. I guess it is a div tag there has to be somewhere?
<div class="portfolio logo" data-cat="logo">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="date">
<span class="day">10</span>
<span class="month">aug</span>
<span class="month">2016</span>
</div>
</a>
<div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="image-caption">
<div class="col-md-4 col-sm-6 col-xs-12">
<h2>link</h2>
</div>
</div>
<img src="img/portfolios/logo/5.jpg" alt="" />
</div>
</div>
</div>
If we are talking about the h2 element, that html tag sits inside a element that is hidden by default and only appears on hover.
I will move it outside the .image-caption div
<div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="col-md-4 example col-sm-6 col-xs-12">
<h2>link</h2>
</div>
<div class="image-caption">
</div>
<img src="img/portfolios/logo/5.jpg" alt="" />
</div>
</div>
and give it those styles
.example {
position: absolute;
bottom: 0;
z-index: 1;
text-align: center;
left: 0;
}
Adjust than bottom and left values to match the positioning for your design
You'll have to create a css for your image-caption class, that will be in absolute position, meaning it can clash with other things. This should help you with that: Position absolute but relative to parent . Then just make sure you have your z-index right so it's not behind the image
I am designing a website for software created by my self. For this, I need a layout in which three boxes are on the same horizontal position. But as I put text in those they start shifting.
What might be the possible cause?
<body class="metro">
<nav class="navigation-bar">
<nav class="navigation-bar-content">
<div class="element">My Software Name</div>
<span class="element-divider"></span>
<a class="element place-right" href="#">Download</a>
</nav>
</nav>
<div class="slideImage"></div>
<div class="about">
<div class="infoBar">
<h2>What is ?</h2>
<span class="paragraph">
this is example text to illustrate the real problem regardig the info bar alingment
</span>
</div>
<div class="infoBar"><h2>Why this ?</h2>
<span class="paragraph">
</span>
</div>
<div class="infoBar"><h2>About</h2></div>
</div>
</body>
Here is full Scree Example
You could do it by set the vertical-align:top; to .infoBar to remove the vertical whitespace between inline-block elements.
JSFiddle - DEMO
CSS:
.infoBar {
vertical-align:top;
}
I am having some issues with my CSS four-column table.
When one of the pictures is shorter, it goes out of whack. (see screenshot)
This is the CSS :
#results{background:#fff;padding:0 0 26px}
.result{float:left;width:25%}
.result-cover{border:1px solid #ccc;margin:0 4px 8px;padding:0 0 6px}
.result-img{border:1px solid #ccc;height:auto;margin:9px;overflow:hidden}
.result-img img{display:block;margin:0;width:100%}
.result .row{background:#fff;font:400 16px/20px 'MdCn',Arial,sans-serif;height:18px;overflow:hidden;padding:0 10px;text-transform:uppercase}
.result .row.stripe{background:#f6f9fb}
.result .row:last-child{font-family:'BdCn',Arial,sans-serif}
.prop{color:#373736;float:left;width:40%}
.value{color:#0f92cb;float:right;width:60%}
This is my HTML snippet :
<div id="results" class="clr">
<div id="results-inside" class="clr block">
<div class="result">
<div class="result-cover">
<div class="result-img"><img src="images/res.jpg" alt="" /></div>
<a class="result-title" href="#">31698-1</a>
<div class="result-props">
<div class="row clr">
<div class="prop">Code1:</div>
<div class="value">29A</div>
</div>
<div class="row clr">
<div class="prop">Code2:</div>
<div class="value">24A0</div>
</div>
<div class="row clr">
<div class="prop">Code3:</div>
<div class="value">0</div>
</div>
<div class="row clr">
<div class="prop">Code4:</div>
<div class="value">627A</div>
</div>
</div>
</div>
But when one of the pictures is shorter the alignment goes wonky.
What you could do is add a div around your 4 blocks and float it left and give it a width of 100% that would clear each row.
Solved my issue using :nth-child()
Thank you CBroe.
I realize :nth-child() may not work with older browser.
But that is not an issue for my case.
Thank you
I've got the following...
<div id="nav-above" class="navigation">
<div class="nav-previous"><span class="meta-nav">«</span> title</div>
<div class="nav-next">title <span class="meta-nav">»</span></div>
</div><!– #nav-above –>
using external CSS alone is it possible to force all of that to remain on just one line?
Try this: http://jsfiddle.net/dT49F/
HTML:
<div class="container">
<div id="nav-above" class="navigation">
<div class="nav-previous">
<a href="link" rel="prev">
<span class="meta-nav">«</span>
much much longer link title here and here and here
</a>
</div>
<div class="nav-next">
<a href="link" rel="next">
much much longer link title here and here and here
<span class="meta-nav">»</span>
</a>
</div>
</div>
</div>
CSS:
.container div {
display: inline;
white-space: nowrap;
}
Any reason for the inner DIVs? I'd just drop them - and if you need the classes, assign them directly to the links:
<div id="nav-above" class="navigation">
<span class="meta-nav">«</span> title
title <span class="meta-nav">»</span>
</div><!– #nav-above –>
div[class^=nav-] {
float: left;
}
That should work. Please note my snippet is using CSS3 selectors, so it might not work in less-advanced browsers. Provide the same class to both divs, and then you can use normal selectors.
UPDATE:
This won't work in IE6, unless you do something like this:
<div id="nav-above" class="navigation">
<div class="nav-previous navigation-links"><span class="meta-nav">«</span> title</div>
<div class="nav-next navigation-links">title <span class="meta-nav">»</span></div>
</div><!– #nav-above –>
(Notice the new class .navigation-links)
And then just change the css selector:
div.navigation-links {
float: left;
}