I used an [hr] tag but instead of just a single line it shows what seems to be the border of something. It has a teeny tiny little edge just on the left of it. The following link should explain what I mean.
Image is here
My code is as follows:
<hr align="center">
Any thoughts?
That is the default browser style. If you don't use any CSS that's what appears as the horizontal rule (<hr />) tag. For example this can be your markup:
<hr class="footer-hr" />
To style it you can use the following CSS code:
.footer-hr {
/* These are browser hacks so the horizontal line looks the same in all browsers
(cross-browser) */
border-color: #000000;
background-color: #000000;
color: #000000;
border: 1px solid #000000;
/* So keep them as they are - you can change the values of course */
}
Also why would you align it to the center, the browser does it by default as I know. Also if you add something like margin: 0px; in CSS you can have the <hr /> wrap the whole line of the page, from the farest left to the farest right corner.
EDIT:
To make the line not to look fat you could use this:
Add to the above CSS code the following rule:
height: 1px; /* Or change the value to whatever other number */
EDIT 2:
As you asked for a bordered div, I don't know what did you want a top-border or a bottom-border or both? Anyway here's the code you need:
MARKUP:
<div class="bordered-div"><!-- Some content here --></div>
CSS:
.bordered-div {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
Related
I'm working on a Foundation 5 site and need to customize the .top-bar navigation menu. I am using the SASS version of Foundation.
I'm having difficulty modifying the active and hover styles for the menu links using SASS. I've changed their colors, however I want to add a border-bottom to the links to indicate active/hover state.
By default, Foundation uses background color for indicating active/hover, and I'm not sure exactly where I need to edit to add border-bottom. As I currently have it, the border is far too low, I need it to be underneath the text.
Currently Looks like this:
Need it to look like this with border-bottom on :
current styles in _settings.scss:
$topbar-bg-color: $white;
$topbar-bg: $topbar-bg-color;
// Height and margin
$topbar-height: rem-calc(65);
// Set the link colors and styles for top-level nav
$topbar-link-color: $asc-darkgray;
$topbar-link-color-hover: $lesson-orange;
$topbar-link-color-active: $lesson-orange;
$topbar-link-color-active-hover: $white;
$topbar-link-bg: $white;
$topbar-link-bg-color-hover: $white;
$topbar-link-bg-hover: $white;
$topbar-link-bg-active: $white;
$topbar-link-text-transform: uppercase;
// Divider Styles
$topbar-divider-border-bottom: solid 1px scale-color($asc-lightgray, $lightness: 13%);
$topbar-divider-border-top: solid 1px scale-color($asc-lightgray, $lightness: -50%);
By default the <a> tags in the top-bar are set with a line-height equal to the height of the top-bar to ensure they are aligned to the middle.
If you want to use border bottom on a menu link and still have it vertically aligned to the middle of the top-bar you just need to span the link text:
<li>
<a href="#">
<span class="link-border-bottom">border bottom link</span>
</a>
</li>
and give your <span> an class with border-bottom (on :hover if you want):
.link-border-bottom {
&:hover {
border-bottom: 1px solid orange;
}
}
or if you want the active link to be underlined:
.active {
.link-border-bottom {
border-bottom: 1px solid orange;
}
}
Here's a Plunker using vanilla CSS.
I created a button using Zurb Foundation styles and Sass mixins. I used #include dropdown-button($base-style:false); to get rid of the default arrow style. Now I want to insert my own arrow in its place (right side)
Here is the default button:
Here is my button now:
I want mine to look something like this:
Here is my html:
<a class="login width-limit" href="#" data-dropdown="drop">Client_Test_1 </a><br>
<ul id="drop" data-dropdown-content class="f-dropdown">
<li>Logout</li>
<li>Account Settings</li>
<li>Change SMTP Settings</li>
</ul>
Here is my scss:
.login {
#include grid-column(2);
#include button();
#include dropdown-button($base-style:false);
font-family: $font-stack;
font-size: .9em;
color: #fff;
background-color: $secondary-color;
height: 27px;
border-radius: 7px;
margin: 6px 0 5px 0;
padding: 5px 4px 5px 4px;
}
.width-limit {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 2em; //shrink text
}
.login:hover {
background-color: $primary-color;
}
Here is a fiddle: http://jsfiddle.net/Yq5uU/
How can I add my own custom arrow to make it look like the third example?
Thanks in advance.
You can't make it infinitely long and not break page layout. So simple solution will be deciding how long it can get and setting button container to fill maximum amount of columns before it starts to look wired. Then you can align your button inside the container as you wish and if it gets too long you can replace part of the name with "..." css:overflow:hidden; text-overflow:ellipsis; or show the short form with js.
example: http://jsfiddle.net/z8aWL/2/
The grid column 2 mixin gives you this:
width: grid-calc($columns, $total-columns);
If you're using the default 12 grid, your inputs look like this:
width: grid-calc(2, 12);
The calc function returns the percentage of 2 divided by 12
width: 16.67%;
You are then overwriting that width value with 150px. If you're using default grid values for large rows, that should be closer to 167px wide.
You should avoid setting hard px values if you want to keep this responsive.
Now as for long names, you have two basic options. Either truncate names, by hiding overflow (as JAre suggested) or let crazy long names break your grid, but be contained in the button. Then you would need to not set a width. All the grid col mixin does is give you a width percentage. The row sets the value of the width (of which the col is a percentage). Your button is still contained in a row, so you should be good to go.
I think your best option, if you have access to your username database is to find the "worst case scenario" and design for that. Or better yet, have a shortened name value returned to your design in the first place.
My website is http://picofdel.org/services/educators-professionals/professional-development.html
I have added a custom HTML module at position content-top-b for skip navigation link.
The code is
<div id="main" style="width: 0px; height: 0px; border: none;"> </div>
But, a thin border is appearing on the page around the module. Please tell me how to remove the border.
Add these stylesheet to your head or body. Otherwise you can add this simple line to your css-file (without script tag).
<style type="text/css">
.module-outline-2 { border: none !important; }
</style>
the border will be defined on following file:
http://picofdel.org/templates/ca_cloudbase2_j25/css/template.css on Line 316:
#rt-top .module-outline-2,
#rt-content-top .module-outline-2,
#rt-content-bottom .module-outline-2,
#rt-bottom .module-outline-2{
border: 1px solid #e6e6e6;
}
Please see this fiddle
My main concern in this fiddle is the div#text and img.frame. I'm trying to create a responsive website, but this has been my problem for so long, I can't figure out how 'to make the img behave beside the text and be responsive at the same time when I try to reduce the size of the browser window. What it does is, it goes under the text before it acts responsively. Is there a workaround for this?
<div id="text">This is some text this is some text this is some text</div>
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/5/5f/TomandJerryTitleCardc.jpg/250px-TomandJerryTitleCardc.jpg" width="294" height="225" class="frame" />
For your goal you should use em or % and use inline-block.
jsfiddle.net/geNuR/ Look at this jsfiddle
Don't know why i can't put code propely, maybe forum blocked our country))
The key to responsive images with flowed text does rely on float. However, the key is in floating the img element, not the text.
First, place the img tag before the text, giving a markup as so:
<img src="image.jpg" width="294" height="225" class="frame" />
<div id="text">This is some text this is some text this is some text</div>
The importance of this order is that the img will be floated to the right, removing its cleared blocked region height, and the text will flow up and around it.
Next, remove the float from the text, allowing it to flow, and apply a float right to the image. I will also note, that to give a margin between the text and the img, the margin is applied to the img, giving you this styling:
img { max-width: 100%; height: auto; }
#text{ width:100px;}
.frame {
float:right;
background: #fff;
padding: 6px;
margin-left:10px;
box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
-moz-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
-webkit-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
}
Here is a jfiddle demonstration
I'm assuming that you're looking to have text and an image side-by-side here, so apologies if I'm wrong.
Like M. Berro, I would first put the two elements inside a containing div, as below:
<div id="container">
<p class="text">Here's some text. This will be aligned to the left, and next to the image. It's width will change as the viewport expands or contracts.</p>
<img src="/image.png" title="An image, aligned right" />
</div>
To sit the image and text side-by side, I would use the following CSS as a starting point:
#container {}
#container p.text { float: left; min-width: 320px; }
#container img { float: right; margin-left: 20px; }
In my example, I've applied a float to each of the two elements (You will of course have to clear the floats to make sure the rest of the page's structure remains intact - I suggest looking at Clearfix, as it avoids any extra empty divs). I've also given the text a min-width: this ensures that the text doesn't contract to a point where it is unreadable!
As I understand you need an image beside a text, so when you reduce the window size the image and text behavior isn't affected.
You need the following:
Make a container div id=img_container give style width (let's say 400px)
Put your image inside the container and give a style #img_container img{float: left}
Put your text inside a p tag and give style #img_container (p or div) and give style (margin-left: same of your img width) + 10
This is the full example:
<style>
#img_container {
width: 400px;
}
#img_container.text {
margin-left: 306px;
}
#img_container img.frame {
float: left;
}
</style>
<div id="img_container">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/5/5f/TomandJerryTitleCardc.jpg/250px-TomandJerryTitleCardc.jpg" width="294" height="225" class="frame" />
<div id="text">This is some text this is some text this is some text</div>
</div>
You could start by adding the css max-width: 60%; in .frame. It's not perfect but is this similar to what you are trying to achieve? Better results can be realized with javascript/jQuery.
How do i add a text caption to the image border example mention at http://notions.okuda.ca/2007/02/06/cool-css-image-border-style/
I would like to use the code in the same place that the image path is specified(not in the style sheet), so somewhere in
<img src="SOMETHING.jpg" style="display: block; margin-left: auto; margin-right: auto; padding:8px; border:solid; border-color: #dddddd #aaaaaa #aaaaaa #dddddd; border-width: 1px 2px 2px 1px;" />
You do know that a lot has changed since 2007? CSS3 introduced the box-shadow property that does just this, but more realistically.
Without HTML or JavaScript, you can't do the caption, though. CSS can't read properties from HTML.
Here's a demo: http://jsfiddle.net/2DuyU/3/
I don't see how you can do this without making a p tag like so at the very least:
<p><img src="location/of/my_image" alt=""/><br/>Caption</p>
adding the styling to the p tag instead.
Example: http://jsbin.com/ewazir
I think you should write following
<img>your caption</img>