I am working on a non-profit site that has a press information page. I am using thumbnail photos as links to the larger images for download.
For the thumbnail images I set the border to 4px white in the off state and then 4px gray in the hover state. I works nicely in Safari but is slightly offset in Firefox in the hover state.
Here is the html:
<div id="press-photos">
<a class="pic" href="_downloads/nativity-1-full.jpg"><img src="_images/nativity-1-thumb.jpg" alt="nativity-1-thumb"/></a>
<a class="pic" href="_downloads/nativity-2-full.jpg"><img src="_images/nativity-2-thumb.jpg" alt="nativity-2-thumb"/></a>
<a class="pic" href="_downloads/nativity-3-full.jpg"><img src="_images/nativity-3-thumb.jpg" alt="nativity-3-thumb"/></a>
<a class="pic" href="_downloads/nativity-4-full.jpg"><img src="_images/nativity-4-thumb.jpg" alt="nativity-4-thumb"/></a>
</div>
Here is the CSS:
#press-photos { clear: left; border: 1px solid #7c0924; background-color: #fff; }
#press-photos a.pic:link,
#press-photos a.pic:visited {
width: 216px;
height: 145px;
margin: 20px;
display: block;
border: 4px solid #fff;
text-decoration: none;
color: transparent;
}
#press-photos a.pic:hover,
#press-photos a.pic:active {
width: 216px;
height: 145px;
margin: 20px;
border: 4px solid #cbcbcb;
color: transparent;
}
Question is: how do I get the border to line up properly in FF?
Thanks.
img { border:0px; }
All of the thumbnails have a border, and that is what is displacing them.
This happens because the a tag has a width and height lower than img size.
Related
I am using ngFor for displaying a list of items which are separated by a horizontal dashed line as follows:
<div *ngFor="let comment of comments;let lastItem = last;">
<div class="comment-box">
<div class="comment-author">{{comment.createdBy}}</div>
<div class="creation-date">{{comment.createdOn}}</div>
<div class="comment-text">{{comment.text}}</div>
</div>
<div class="dashed-line-box" *ngIf="!lastItem">
<hr class="new1">
</div>
</div>
.dashed-line-box {
position: relative;
background-color: #ffffff;
width: 320px;
height: 16px;
border-style: solid;// to outline the container box
border-width: thin;
}
hr.new1 {
position: absolute;
margin-top: 8px;
border-top: 1px dashed;
}
I can see rectangles for each dashed-line-box entry, but they dont contain horizontal like I am expecting.
What am I missing here?
I think you want a dashed border style in <hr>
hr.new1 {
position: absolute;
margin-top: 8px;
border-top: 1px dashed blue;
width: 100%;
}
or if you want a dashed border on outer div try below code
.dashed-line-box {
position: relative;
background-color: #ffffff;
width: 320px;
height: 16px;
border-bottom: 1px dashed green;
}
css property border-style: solid; from class .dashed-line-box is putting the box in the last line;To get a horizontal bar, you need to remove position:absolute from the class hr.new1;
relevant css:
p {
font-family: Lato;
}
.dashed-line-box {
position: relative;
background-color: #ffffff;
width: 320px;
height: 16px;
/* border-style: solid;*/
border-width: thin;
}
hr.new1 {
margin-top: 8px;
border-top: 1px dashed;
}
working stackblitz here
Why you need hr when you can achieve this using border bottom property. Just add one class to parent div and use border bottom.
.box {
border-bottom: 1px dashed;
}
<div class="box" *ngFor="let comment of comments;let lastItem = last;">
<div class="comment-box">
<div class="comment-author">{{comment.createdBy}}</div>
<div class="creation-date">{{comment.createdOn}}</div>
<div class="comment-text">{{comment.text}}</div>
</div>
</div>
My client has provided me with a design for their site and it includes a standard menu with a downward triangle on the active item (see image). I don't know where to start...what's the best way of going about getting this effect?
Here's a tutorial on generating arrows, triangles and other shapes using CSS: http://www.howtocreate.co.uk/tutorials/css/slopes
Also have a look at how CSS Arrow Please! generates its arrows: http://cssarrowplease.com/
Here's a little example I just knocked up:
HTML:
<div class="active">
<div>Active Menu Item</div>
</div>
CSS:
.active > div {
width: 150px;
padding: 10px;
background-color: #f00;
color: #fff;
text-align: center;
}
.active::after {
display:block;
content: "";
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid #f00;
border-left: 85px solid #fff;
border-right: 85px solid #fff;
}
JS Fiddle: http://jsfiddle.net/dmf3s97m/
I have button and text on the same line. They have different font size. Button has padding. In browser it seems that text is on the same line, but the padding goes below the big text. I want the bottom button padding be on the same line as the big text. In other words, shift text a bit down or button a bit up.
Here's my CSS
.bigtext {
font-size: 200%;
border-bottom: 1px solid #999;
}
.button-container {
display: inline-block;
}
.button-container button {
font-size: 40%;
padding: 5px;
border-radius: 5px;
border: 1px solid #d3d3d3;
}
Fiddle: http://jsfiddle.net/7ydtgb7x/
If you want a really simple way to do this you can just add "position: relative;" and "bottom: 5px;" to your button.
If you need any help let me know by adding a comment. There are three kind of positions:
Relative which follows the flow.
Absolute that almost follows the flow.
And Fixed which gets completely out of any flow.
.bigtext {
font-size: 200%;
border-bottom: 1px solid #999;
}
.button-container {
display: inline-block;
}
.button-container button {
font-size: 40%;
padding: 5px;
border-radius: 5px;
border: 1px solid #d3d3d3;
position: relative;
bottom: 5px;
}
<div class="bigtext">
Test
<div class="button-container">
<button>Button</button>
</div>
</div>
for a quick fix:
transform:translateY(-5px);
fiddle
Here is a possible solution for you:
wrap your Test with a div, then both child's of .bigtext are (already) displayed inline-block, just make sure they are vertical-align:top.
Align vertical as well the button like this:
.button-container button { vertical-align:top}
Finally "reset" the line-height for your container .bigtext with: line-height:1
Here is a snippet with full code:
.bigtext {
font-size: 200%;
border-bottom: 1px solid #999;
line-height: 1
}
.bigtext > div {
display: inline-block;
vertical-align: top;
}
.button-container button {
font-size: 40%;
padding: 5px;
border-radius: 5px;
border: 1px solid #d3d3d3;
vertical-align: top
}
<div class="bigtext">
<div class="text-container">Test</div>
<div class="button-container">
<button>Button</button>
</div>
</div>
Use either transform: translateY(-10px); or margin-bottom: 10px;
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Formatting an <li> element within a <div>
The facebook and twitter elements are not aligned. I want them to be positioned perfectly, one above the other. Please can you help?
Here's my code:
#floating-box {
width: 65px;
height:auto;
background-color: #484848;
margin: 54px 10px 0px 623px;
position:absolute;
z-index:1;
text-align: justify;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
border-right: 1px solid #484848;
}
.social {
position : relative;
list-style-type : none;
margin-left: 2px;
}
.social li a {
float: left;
padding: 1px 5px 5px 0px;
margin: 0px 0px 3px 0px;
display: inline;
}
The HTML that uses this CSS is:-
<div id="floating-box">
<img src="likeusnow.jpg" />
<ul class="social"><!-- Facebook Like/Share Button -->
<li><a name="fb_share" type="box_count" rel="nofollow" share_url="http://www.mysite.com"></a>
</li>
<li>
Tweet
</li>
</ul>
try display: inline-block; instead
Ok I am making a lot of assumptions on this one.
Assumptions
You are using the vertical Facebook share (which has been deprecated, so I'm demonstrating with the Facebook Like Button)
Your are using the similarly styled Twitter share, also with the vertical count.
This is supposed to be a modal dialog that pops up in the middle of the screen.
The image "likeusnow.jpg" is just the text "Like Us Now"
I'd float the <li> elements rather than the <a>'s. Styling the <a>'s will not matter since their content is an <iframe>. It's the fixed width of the div that is getting you into trouble. While the buttons are supposed to be floated left, there is not enough room and the Twitter button is being bumped below the Facebook one.
CSS:
#floating-box {
position:absolute;
background-color: #484848;
margin: 54px 10px 0px 623px;
z-index:1;
text-align: justify;
border: 1px solid #000;
border-right: 1px solid #484848;
padding: 15px;
}
.social {
position: relative;
list-style: none;
margin-left: 2px;
padding: 0;
}
.social li {
float:left;
margin-left: 10px;
}
I made a demo using jsFiddle and inserted placeholder Facebook Like and Twitter Share plugins here.
this is small code for side menu of my page
<div style="display: block;" id="overlay" class="overlay">
<div id="sideMenuGroups">
<div id="sideMenuGroupHeader" class="mSideMenuSeparator">GROUPS</div>
<div id="sideMenuGroupContent" class="mSideMenuContent">
<div id="teacherGroup">As Teacher
<a onclick="groupFeeds();" href="#">Data Mining</a>
<a onclick="groupFeeds();" href="#">Data Structures</a>
<a onclick="groupFeeds();" href="#">C Language</a>
//**display anchor tag to full width of overlay**
<a onclick="groupFeeds();" href="#">Introduction to IT</a>
</div>
</div>
</div>
</div><!--overlay ends here-->
the css for the styles used is
*mSideMenuConten*t has no style defined
mSideMenuContent a- tells how each anchor tag would be visible, i have tried display:table-cell property, but it is not effective for me
overlay tells how the side menu would be
.mSideMenuContent
{
}
.mSideMenuContent a
{
display: table-cell;
height: 37px;
color: #c4ccda;
padding: 3px 0 3px 8px;
font-size: small;
}
.mSideMenuContent a:hover
{
background:#262c3a;
color: #c4ccda;
}
.mSideMenuSeparator
{
background: #434b5c;
border-top: 1px solid #242a37;
border-bottom: 1px solid #242a37;
font-family:Helvetica, sans-serif;
font-size:x-small;
color: #7a8292;
height:17px;
padding-top:4px;
padding-left: 10px;
text-shadow: 0 1px 0 rgba(0, 0, 0, .6)
}
.overlay {
z-index: 1000;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 50%;
height: 100%;
background:#31394a;;
color: #c4ccda;
display: none;
}
i want to display the anchor tag to full width of the side menu, how do i do that??
Use this:
display:inline-block;
width: 100%;
By saying inline block, you allow yourself to define a width for the element. Inline elements can't do this be default.
I found display block more convenient. I applied some margin and padding and i got cool/desired output.
display:block;
padding: some padding;
margin: some margin;