Below is what my design looks like
however with a long title, it looks like
How might I avoid the overlap? I created a fiddle to allow you to work on this (if you prefer)
http://jsfiddle.net/xhp7Q/
You can put the comment link first and float it to the right. That way the header will flow around it:
http://jsfiddle.net/xhp7Q/1/
.comments {
float: right;
height: 30px;
font-size: 26px;
font-weight: bold;
border: 5px solid #eee;
color: #000;
color: red;
}
Just change position:absolute; to position:relative; in .comments and add float:right;
Then move this:
10
To the top of the p and h1 elements:
Demo
Related
I'm trying to achieve this in CSS:
I would like the green line to always be the width of the text (no fixed width). I have a constraint, the tex is contained in an H3 tag with no ability to add a span tag inside it.
you could maybe try this aproach also:
<div class="container">
<div class="line"></div>
<h3>RECENT EPISODES</h3>
</div>
.container {
width:100%;
position:relative;
}
h3 {
display:inline-block;
border-bottom:1px solid green;
padding-bottom:10px;
margin:0;
position:relative;
}
.line {
height:1px;
background-color:#ededed;
width:100%;
position:absolute;
bottom:0;
}
http://jsfiddle.net/az6pr1mz/
The grey line needs to go on a block level tag while the green needs to go on an inline tag. This means that you need two nested tags for it to work and that you must either add a span inside the h3 or a div surrounding it. An h3 can always be made inline if needed.
A slightly different approach would be to add the secondary element outside the h3 without surrounding it and position that so it lies directly under the h3.
In any case, you will need a minimum of two elements for the borders to cling to.
Update:
I missed that you don't need span inside the h3. I added a workaround. I am not sure whether this is the only solution. But I think it can be improved though. In the below code, I am using css content property to hide the border of the container.
NOTE: Use as many dots . as you can use to make it work on all resolutions.
CSS
.container {
border-bottom: 1px solid red;
padding-bottom: 10px;
position: relative;
max-width: 100%;
word-break: break-all;
}
.container:after {
content:"....................................................................................................................";
color: transparent;
border-bottom: 1px solid green;
padding-bottom: 10px;
position: absolute;
bottom: -1px;
}
Working Fiddle
For example this code: (is clearly and not uses absolute positions)
HTML:
<h3><span>Recent episodes</span></h3>
CSS:
h3{
text-transform:uppercase;
border-bottom:1px solid #ccc;
}
h3 span{
display:inline-block;
border-bottom:1px solid #080;
margin:0 0 -1px 0;
}
http://jsfiddle.net/tp0nnapu
I used to have no problem with the css code i have been using. But, after I have changed from using "Lightbox2" to "fancybox", the spacing between the thumbnails and the thumbnail border (when mouse hovering above) disappeared. What has gone wrong?
Compare the problem page after switching to using fancybox (www.lixiao-art.com/test.html ) with the page using Lightbox2 ( www.lixiao-art.com/latest.html )
This is the code I use:
body { font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
margin: 0px;
background-color: RGB(181,170,128);}
*{
font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:normal
}
#nav {float: left;
position: fixed;
background-color: RGB(233,231,197);
text-align: left;
font-size: 11px;
color: #645630;
width: 90px;
font-weight: bold;
padding: 100px 20px 100px 30px;
border: none;
min-height: 100%;
}
#content {float: left;
margin-left: 150px;
padding: 15px 20px 10px 80px;
width: 900px;
margin-top: 0px;
border: none;
font: black;
font-size: 11px;
}
#content a {text-decoration:underline}
h2 {height: 2em;}
.footer {
text-align:center;
padding-top: 50px;
padding-bottom: 1em;
font-size: 11px;
}
a{text-decoration: none;
color: #645630;}
a:hover {color: red;}
* {margin: 0;}
html, body, wrapper {height: 100%;}
.ImgBorder img { border:2px solid transparent;
height:100px;
}
.ImgBorder:hover img{ border-color: white}
.ImgBorder {display: block;
float: left;
margin: 30px 20px; }
h5{
clear:both
}
img { border: none; }
Thank you!
In your previous Lightbox2, each image is wrapped in an anchor
<a class="ImgBorder">
and the class ImgBorder has the value margin: 30px 20px
In your current Fancybox, you can just add this missing margin margin: 30px 20px to the class fancybox as each image is now wrapped in an anchor
<a class="fancybox"/>
As I just noticed that there doesn't seem to be any class fancybox already defined, you just have to add
.fancybox
{
margin: 30px 20px;
}
e.g. in your global.css
Update: In case you also want to display the border for the fancybox-images, there are two ways of achieving this: Currently you have both lightbox versions on your test page. For the first image the border is still displayed for hover. Following CSS is taking care about that:
.ImgBorder img {
border: 2px solid transparent;
height: 100px;
}
.ImgBorder:hover img {
border-color:white;
}
for an image markup as follows for your first image:
<a class="ImgBorder" rel="lightbox[gaze]"
href="http://www.lixiao-art.com/work/2014/52.jpg">
<img src="work/2014/52_t.jpg">
</a>
Your current fancybox-markup is like this for your second image:
<a href="work/2014/52.jpg" rel="group" class="fancybox">
<img src="work/2014/52_t.jpg">
</a>
So all you have to add is the border and hover for the fancybox-class:
.fancybox img {
border: 2px solid transparent;
height: 100px;
}
.fancybox:hover img {
border-color:white;
}
It's possible that there are some additional adjustments because of the CSS that fancybox uses, but it's easier if you just check this on your site as I just noticed that you're currently working on it.
At the moment your fancybox images "jump" because you added the CSS
.fancybox:hover
{
border-color:white;
margin:30px 20px;
}
which results in setting this margin on hover (therefore jumping then). I suggest you just try the CSS I posted above, that should work.
Update 2 for the comments follow-up questions:
The attributes class and rel stands for the following:
rel (='related') is an attribute containing information for you previous lightbox. The lightbox script will just fetch the information for e.g. a big image or a link from there.
class: as you noticed, almost all in your css-file starts with a dot (.) followed by a name. This name is the name of the class to which the style information will apply. So .test {color:red;} results in displaying a text red in case it's wrapped in an element with the class test, e.g. a <div>: <div class="test">This is red text</div>.
Update for the margins:
To keep the margins to your images when you remove it for the :hover - the correct way to have the margins is just like that:
.fancybox img
{
margin:30px 20px;
}
As you already have one .fancybox img in your CSS, just add this margin to it, though you can also have these selectors multiple times in a CSS file, it's better to keep the styles applying to an element together.
Thank you very much! You've pointed out the problem with my multiple classes, and I've fixed it accordingly like this:
<a class="fancybox ImgBorder" rel="group" href="work/2014/52.jpg"">
<img src="work/2014/52_t.jpg">
</a>
(instead of making new definitions in my global.css)
But, a small problem shows up: this line shows in red colour in the editor at the backoffice. Is there a problem with this line? but I guess I will open a new thread for this.
Thanks again!
I have an issue with my page centering. Everything centers correctly except the left and right border.I believe the issue is with the border-right-width:300px; border-left-width:300px; lines but I am not sure of another way to set that up. Is there another solutuion to having a left and right border that also centers with the page. Any ideas?
Here is my CSS:
body {
margin:auto;
padding: 0;
background: #FFFFFF;
font: 12px/1.4 Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
border-right-style:solid;
border-left-style:solid;
border-right-width:300px;
border-left-width:300px;
border-color:#E8E8E8;
}
When you use margin:auto you must also specify a width. I think you are trying to center the contents of the body with a background #E8E8E8. Do this instead
body {
margin:auto;
padding: 0;
font: 12px/1.4 Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
width: 1020px; //or anything else you want
background:#E8E8E8;
}
You cant center anything that has no width, or is the parent-div with 100% because it cant relate to anything.
If you are going to use your body you need something like this:
body{
width:980px;
height:100%:
}
what most people do is using a container or wrapper. That gives you bit more control.
.container{
width:980px;
height:100%;
position:relative;
}
as you can see I gave the container as classs and a position:relative. This allows you to use it multiple times on the same page.
You need to center div itself, something like this:
div.page {
margin: 0 auto;
}
I have an <h2> title into a fixed with <div> (238px). When this page is rendered, the browser manage line breaks into the title to make the text fit the width (238px).
But the width property of the h2 element is still 238px, no matters where the line breaks are.
I want to set a border-bottom only under the text, and not under the full width of the h2 element, and I don't know how to achieve this using CSS.
You can see what I mean here : http://jsfiddle.net/np3rJ/2/
Thanks
I think this is what you need:
<h2><span>Horizon 2020, nouvelles opportunités</span></h2>
h2 span {
position: relative;
padding-bottom: 5px;
}
h2 span::after{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid #000;
content: ""
}
Working demo in jsFiddle
I used the technique described in this answer: Advanced CSS challenge: underline only the final line of text with CSS
I introduced a span into the H2 in order not to change the display attribute of it, but you could just as easily use the same technique with a display: inline on your H2. This method would allow the control of the actual line though rather than setting display: inline if needed
This works on Chrome.
h2 {
width: fit-content;
}
If you are willing to use display: table-cell, and pseudo-elements, you can have a pretty good solution (with some minor limitations).
The HTML does not change:
<div class="dossier_titre">
<h2>Horizon 2020, nouvelles opportunités</h2>
</div>
and you can apply the following CSS:
.zone_33 {
width: 238px;
padding: 0px;
margin: 0px;
}
.zone_33 .dossier_titre {
margin: 0px 0px 20px 0px;
}
.zone_33 h2 {
color: #616263;
font-size: 150%;
font-weight: lighter;
padding: 0px 0px 12px 0px;
background: none;
border-bottom: 1px solid grey;
display: table-cell;
text-transform: uppercase;
}
.zone_33 .dossier_titre:after {
content: "";
display: table-cell;
width: 100%;
}
For the <h2> element, set display: table-cell, and add a pseudo-element after .dossier_titre (the containing block for the header/title element). The pseudo-element is also a table-cell and has a width of 100% (this is the key).
Also, since h2 is no longer a block element, add your margins to .dossier_titre to maintain the visual spacing in our layout.
How This Works
I am creating a two-cell table with the second cell (the pseudo-element) having a width of 100%. This triggers the browser to calculate the shrink-to-fit width for the first cell (h2) that contains the title text. The first cell's width is thus the minimal needed to display the text. The bottom border is as long as the longest text line in the text block within the table-cell.
Limitations
table-cell is not supported in IE7 without a hack, but the work-around is fairly well known and can be found if needed.
If the title had many short words, you might get the line breaking in unexpected places. You would need to insert   to keep specific words together as needed.
Fiddle: http://jsfiddle.net/audetwebdesign/h34pL/
Maybe display: inline-block; Or display: inline; is what you need?
Why not try:
text-decoration:underline
?
EDIT
Just make a span around "OPPORTUNITÉS" with the underline.
<h2>Horizon 2020, nouvelles <span class="underline">opportunités</span> </h2>
.underline {
text-decoration:underline
}
Can try "text-underline-position" property instead of table-cell and border. Make it simple!
text-decoration: underline;
text-underline-position: under;
All you can do is put your h2 element text into span like this:
<h2><span>Horizon 2020, nouvelles opportunités</span></h2>
and in css remove border-bottom from .zone_33 h2 {} and put it like this:
.zone_33 h2 span{ border-bottom: 1px solid grey;}
by this border-bottom will come under full text.
Try this, (I think it will help you)
.heading {
position: relative;
color: $gray-light;
font-weight: 700;
bottom: 5px;
padding-bottom: 5px;
display:inline-block;
}
.heading::after {
position: absolute;
display:inline-block;
border: 1px solid $brand-primary !important;
bottom: -1px;
content: "";
height: 2px;
left: 0;
width: 100%;
}
You could put a border-bottom and change the width of your h2 so that the border length matches your h2 length. Adjust the width to the width of your h2, taking into consideration it's font-size. Then add a padding-bottom to your h2 and set it to your liking.
<h2>Cats</h2>
h2{
border-bottom: 5px solid black;
font-size: 16px;
padding-bottom: 5px;
width: 64px;
}
I'm styling a list of recent posts and images from a plugin from wordpress. I know there is a wordpress section but my question is to just get some advice as how to style this list.
The website is here
This is what it looks like now.
This is my CSS
.advanced-recent-posts {
list-style-type: none;
}
.advanced-recent-posts li {
font-size: .7em;
font-weight: bold;
line-height: 20px;
color: #761616;
margin-bottom: 10px;
text-transform: uppercase;
width: 250px;
position: relative;
top: -35px;
border: 1px solid #000;
}
.advanced-recent-posts li a {
margin-left: 10px;
}
.advanced-recent-posts li img {
position: relative;
top: 0px;
left: -10px;
padding: 5px;
border: 1px solid #999;
}
and so far so good. But because both the image and the title & date are in the some They move together which is not what I want, but because it is a plugin I dont know how to change that. So I was hoping with the provided website and CSS that someone could help me just make that second line of each recent post follow directly under the first. Like in my design here.
#Bonjour: This is what I got doing the
.advanced-recent-posts li { display:table-row; vertical-align:top;}
(and of course with all the other styling I had on it)
The post titles are at least flowing right.
Some weird positioning going on there. Anyway, there are two ways to make this happen:
Float the image left, add a bit of right/bottom padding. This way text naturally flows under the image
Take advantage of the relative positioning on the li and set position:absolute on the image, while giving the li enough padding to move the text from under it. This way text will never flow under the image
Examples: http://jsfiddle.net/Ucrsk/
Try modifying the style of the anchor ie.
.advanced-recent-posts li a {
display: block;
margin-left: 10px;
}
Just to reiterate from my comment in your question, try using:
li {
display:table-cell;
vertical-align:top;
}
OR
li {
display:table-row;
vertical-align:top;
}