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;
}
Related
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;
}
I have a strange situation with an image and a section. You can download html, css and img1 from my github
The situation: I have a section tag which has padding:15px from all sides. In the section I have an img, floated left, then a p and a span with two buttons. The section has also a border and margin:35px
My problem: The image doesn't respect the section's bottom padding and goes through the sections bottom border.
I tried to put the img in a div inside the section, and also tried to give a height value for the section and 100% for the image's height but it didn't change anything
What is the best solution for this problem, so that the picture takes all the height of the section respecting the section's top, left and bottom paddings?
In the github, one step back, is a ppt-file TASKS.ppt. The third slide is what I try to achieve.
EDIT: Since code is requested, here it is:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Music categories</title>
<link href="Ex03MusicCategories.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>Music Categories</h1>
</header>
<section>
<img src="img1.png" />
<div>
<p>Even more websites all about website templates on <span>Just Web Templates</span> .</p>
<span>
<input type="button" value="Listen" />
<input type="button" value="Add" />
</span>
</div>
</section>
</body>
</html>
CSS:
body {
background-color: #EEE;
padding-top: 14px;
padding-left: 12px;
padding-right: 8px;
padding-bottom: 25px;
}
body header h1 {
font-weight: lighter;
font-size: 1.5em;
font-family: Arial;
letter-spacing: -2px;
}
section {
border-style: solid;
border-color: #989898;
border-width: 2px;
padding: 15px;
margin: 35px 0px;
}
section img {
float: left;
}
section img:after {
clear: both;
}
image img1.png
This is a classic, search for clearfix. One possible solution is
section {
overflow: hidden;
}
See JSFiddle
Update:
There's an article about CSS float and clear at CSS-Tricks - All About Floats.
Essentially, you need clear, when
an element should stay below a floated element
and some clearfix, when
the parent of a floated element collapses and you want the parent wrap around/include the floated children
You can also look at Stackoverflow css-float tag wiki (an alias of css-clear) or clearfix
I have just implemented VS 2010's basic horizontal menu that comes when you start a new website. Pages look fine in my root.
When I instituted a /blog/ application (blogengine.net), I made some changes ... put my own logo there, favicon, etc., and attempted to put my menu in there. It doesn't appear to be conflicting with any other menu classes in any other stylesheet. I even renamed the class to topmenu in the code and in the stylesheet to make sure. And strangely, it looks fine in VS in design mode.
So I triple checked to see that no .css conflicts, so the code still look like this:
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="http://rtn.org/Default.aspx" Text="Home" />
<asp:MenuItem NavigateUrl="http://rtn.org/About.aspx" Text="About RTN" />
<asp:MenuItem NavigateUrl="http://rtn.org/resources.aspx" Text="RTN Resources" />
<asp:MenuItem NavigateUrl="http://rtn.org/advertise.aspx" Text="Advertise with RTN" />
<asp:MenuItem NavigateUrl="http://rtn.org/donate.aspx" Text="Donate to RTN" />
</Items>
</asp:Menu>
</div>
And the CSS looks like this:
div.hideSkiplink
{
background-color: #3a4f63;
width: 100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
But as you'll see by this picture, for some reason, the display:block just isn't working for whatever reason in my /blog/ subdirectory master page as it is in my root master page:
Does anybody have an idea why this is the case? Again, it looks good in VS in design mode. It's just when I upload it, display:block doesn't work properly. I've fiddled with it for hours, but can't reproduce the menu, as it should be, in my /blog/ subdirectory. Any suggestions would be truly appreciated!
Almost always this happens because you have relative links to your CSS that aren't linking to the correct places. On your other pages, the stylesheets are displaying correctly because the relative link is to your correct site root. However, on your subdomain, the root is most likely to that subdomain and not to the actual root of your site.
So for instance, if your link is normally:
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
the link is pointing to http://yoursite.com/foo/css/style.css.
However, when you're linking from your blog, even though the relative link is the same, it is now linking to http://yoursite.com/blog/foo/css/style.css.
To fix it, try putting in absolute links to make sure that this is the problem:
<link rel="stylesheet" type="text/css" href="http://yoursite.com/blog/foo/css/style.css">
If it works after trying that, go back and make sure those relative links go to the right place and that you're being specific enough.
I have a html document structured with a header, content, and footer divs. I am trying to center an image (a logo) inside my header div to display at the top of my webpage in the middle. I can absolute position it into the middle, but when I change the browser size, the img doesn't move along with it. I want it to be place automatically in the center of the window. I am stumped..?
I have tried , margin-right:auto; margin-left:auto. I have also tried the trick where you make margin-left negative half the width and top 50%, but nothing has worked so far.
html:
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
css:
#header {
background-color:transparent;
height:260px;
width:100%
}
#logo-img{
display: block;
margin-left: auto;
margin-right: auto;
}
Also, Do I even need a container? Not sure if I need javascript for this, or if it can be accomplished with just html/css? Hope someone can help, thanks!
What is happening is that you are already correctly centering your image.
Your problem is that the image is huge. If you notice closely, the image is not centered if your browser window becomes smaller in width than the image.
Remove the white area from the image and it will center correctly.
Edit: in IE, you need to add the rule text-align:center to #header
Another way:
If you don't want to change your image, you can use this hack:
<style>
#header {
overflow-y: hidden;
background-color: transparent;
height: 260px;
width: 100%;
margin-left: 50%;
}
#logo-img{
display: block;
position: relative;
right: 50%;
}
</style>
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
I learned this hack a while ago here
Just use the logo at a size it's supposed to be (like this here), then all you need to do is add the align="center" attribute to your logo's div.
For some odd reason I added a responsive image to my responsive layout and it seems to add some sort of spacing below the image.
You may view the issue here: http://www.client.noxinnovations.com/jensenblair/
The top image. Here is my HTML and CSS.
HTML
<div class="header"> <img src="images/photograph.jpg" /> </div>
CSS
img {
max-width: 100%;
height: auto !important;
}
.header {
height: auto;
padding: 0;
margin: 0 auto;
border: none;
}
It seems to be consistent in each browser. Any ideas anyone?
There are two ways (that I know of) to solve this: http://jsfiddle.net/3kC4K/1/
<div>
<img src="http://placehold.it/100x100/"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="block"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="inline"/>
</div>
CSS
div{
border:solid 1px #f00;
margin:5px;
float:left;
}
.block{
display:block;
}
.inline{
vertical-align:bottom;
}
img tags, by default, are inline elements. Because of this, browsers will create a sort of "gutter" underneath them so that any text that wraps below it won't be flush with the bottom of the image.
In your case, simply applying display:block to the image should do the trick.