This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
<p style="margin-left: 14" class="style19"><b>
<font size="6" color="#001E5A" face="Arial">401K Rollover and
Retirement Planning Center</font></b>
Where do I add the <h1> and </h1> tags without affecting the font or other characteristics?
You shouldn't be using markup for styling - use CSS for that, like:
Markup:
<h1> 401K Rollover and Retirement Planning Center</h1>
CSS
h1{
font-size: 6px;
font-family: Arial;
font-weight: bold;
}
Here it is the result.
You can embed the CSS code either in a <style type="text/css">tag, or in an external file, you would refer to as:
<link rel="stylesheet" type="text/css" href="/path/to/someStyleSheet.css">
Anyway, search for some recent web development guidelines online in order to get a better clue on the topic.
Related
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I have this idea of a div I'm trying to make. This is basically how it looks like.
How would you intend to make this? Or should I simply just use a image?
Redirect to URL is basically only a link to another website. This is also the top of a table. Or that's how I want it to be, but if any better ways, please tell!
______________
/ \
/ REDIRECT TO URL\
_______/ \________
How do you intend to do this?
How about this pure CSS solution..
HTML
<div class="topLeft"></div>
<div class="topMidd">Hello</div>
<div class="topRight"></div>
CSS
*{
font-size:14px;
}
.topLeft{
float:left;
border-right:1em red solid;
border-top:2em transparent solid;
width:0;
height:0;
}
.topMidd{
float:left;
background:red;
height:2em;
line-height:2em;
padding:0 2em;
}
.topRight{
float:left;
border-left:1em red solid;
border-top:2em transparent solid;
width:0;
height:0;
}
You can always play with the numbers to get how you want it. It's a cross-browser solution and it means you don't need to mess around making images.
Here is a JSFiddle
This could be done in css3 etc but would run into browser issues.
I would use an image for now, but if you want it to be nice and scalable for any text size I recommend laying out roughly like this.
<div class="holder">
<span class="block leftBlock"></span>
<span class="block innerBlock">REDIRECT TO URL</span>
<span class="block rightBlock"></span>
</div>
Then with your css
.holder{height:heightOFImage;}
.block{float:left;height:100%;display:block;}
.leftBlock{background-image:url("leftImg.png");width:20px;}
.centerBlock{background-image:url("centerImg.png");background-repeat:repeat-x;}
.rightBlock{background-image:url("rightImg.png"); width:20px;}
This means you can use this with all different types off length strings
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I got an issue with chrome.
A h1 Tag is formatted smaller than in IE and FF.
Here 2 screenshots:
I don't have a clue why is that. Do you have?
Sorry, but I don't want to post the URL here because it shouldn't be indexed by google. But it's e. g. like
ssd[minus]vergleichen.de/ssds/technische-daten/881/ocz-vector-128gb-2,5-Zoll.html
(Just C+P it and replace [minus] with -).
edit: This is the code:
#producttitlecontent {
padding: 6px;
margin: 2px;
background: #FDE5CA;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
#producttitlecontent h1 {
text-align: center;
color: #686868;
padding: 4px;
font-size: 1.7em Verdana;
}
<div id="producttitlecontent">
<img src="../images/bkbtn.png" alt="Zurück" onClick="history.go(-1);return true;">
<h1 itemprop="name">OCZ Vector 128GB 2,5"(VTR1-25SAT3-128G) </h1>
</div>
The user agent (Chrome) built-in style sheet looks like this:
any(article,aside,nav,section) h1 {
font-size: 1.17em;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
}
So the section tags that you are placing it in causes this. Is there anyway you can avoid use the section tag? I know this isn't ideal but I'm just explaining what is happening.
If you move the h1 tag outside of the section tags, it appears in a larger size (I tried it).
Im gonna agree with #j08691 who commented on your original post and follow up with the mention of inherited values. It is very much likely the case on your body or your containing element, or even at a document level somewhere you have defined a font-size on a "master" element, and due to your use of em (but not limited to.) every layer within the main element will base its font size off the parent element it comes in, so 1.7em on the outside is smaller on the inside and smaller inside that and smaller inside that and the values keep inheriting based on its parents calculated size.
Well I solved it myself I think. The solution was so easy I don't even dare to post it. I wrote
font-size: 1.7em Verdana;
facepalm! Thank you all for watching this anyway
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
Why is it that my CSS is not applied the same in all browsers? For example, for the below code:
<body align="center" background="F:\photos\sravan\wi7.jpg">
I can see my text which is aligned center and with background in Chrome, but not the same in Mozilla! Why is this happening?
Browsers restrict access to file:// resources for security reasons. AFAIK, you can specify image locations in the same directory only, i.e. your HTML file would also have to be in f:/photos and referenced using a relative path, ie. sravan/wi7.jpg.
Also, as pointed out in the comments, the notation you are using is not CSS. Specifying visual properties using HTML attributes is an outdated technique and it's better to switch to actual CSS. Learn about its basics e.g. here or on one of the sites recommended by Robert.
Your code is not CSS
Instead you should have HTML and CSS as in:
<body>
content
...
</body>
and body CSS
body {
background-image: url(URL to your image and not local path);
text-align: center;
}
Learn the languages
No offence but I warmly suggest you learn HTML and CSS before delving into writing any reasonable code.
Introduction to HTML
Introduction to CSS
HTML Specification
As per W3C specification body element doesn't support align attribute and background is deprecated in 4.01 and not supported in HTML5. So don't use it as an attribute. Define style using CSS:
in separate CSS file that you reference in HTML
add style element inside head HTML element
(not recommended) add style inline with your element:
<body style="text-align: center; background-image: url(wi7.jpg);">
Because of the way that CSS works having many inline styles makes your application hard to maintain and also intrduces new CSS hacks that you have to use in order for your page to render as expected. Separation of concerns rules. HTML file is your content definition, CSS file is its style. Keep them separate whenever possible.
General advice
Since browsers try to follow specification there may be differences between their rendering of HTML+CSS. Some may be very strict about it others a bit more loose. Try to stay within specification and you should get better cross-browser results.
I am trying to add an image in the header of my jQuery Mobile based web page.
I want the image to be aligned to the right edge and using CSS for this purpose. But the results are not satisfactory.
(Problem*)There is a big gap between the image and the edge and it is also not aligned with the header text.
Here is the header code:
<header data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></header>
and here is the CSS code for class align-right:
.align-right{
float:right;
margin-right: 5px;
}
No need to add custom styling or such. Jquery-Mobile already has built-in solutions for this. Just add the class 'ui-btn-left' or 'ui-btn-right' to your image (as if it were a button) and you're all set.
<header data-role="header">
<h1>My App</h1>
<img src="my_logo.png" class="ui-btn-right" />
</header>
I know the question has been asked way before, but I figured this might help those who are still looking for solutions. Besides, the question wasn't set as answered.
Based on your code example, you need a space between the alt attribute and the class attribute.
You have:
alt="Low resolution logo"class="align-right"
Should be:
alt="Low resolution logo" class="align-right"
Also, it is probably better to not have the <img /> tag inside of your <h1> element.
Check out the docs for more information on custom headers: http://jquerymobile.com/test/docs/toolbars/docs-headers.html
Something like this should work:
<head>
<style>
body{ margin: 0; }
.align-right{ float:right; margin-right: 0px;}
</style>
</head>
<body>
<div data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></div>
</body>
In my case, I was using a link as a button in my Header, and I wanted the same results where the image would show in the top right corner. I also wanted additional attributes added to the image such as no text, no corners, no disc, etc. Using ui-btn-right alone broke those other attributes. The fix was to include both ui-btn and ui-btn-right to the class, as shown below:
Options
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
Ive got a following problem.
I made a XUL toolbar. Toolbar works correctly, it is displayed correctly and works fine. The only problem is that it is not displayed in the list of toolbars in Firefox. I want it to be in this list - i want to be able to hide/show it from context menu.
What my problem could be in? XUL is organized in following way:
<?xml version="1.0" encoding="windows-1251"?>
<overlay id="myOverlayName"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="json.js"></script>
<script type="application/x-javascript" src="md5.js"></script>
<script type="application/x-javascript" src="sd.js"></script>
<toolbox id="navigator-toolbox">
<toolbar id="somebarid" mode="full"
customizable="false"
toolbarName="toolbarname"
accessibleType="1020"
context="toolbar-context-menu" >
...
...
</toolbar>
</toolbox>
</overlay>
toolbarName="toolbarname" should :
1) be spelled toolbarname
and
2) exactly match <em:name>toolbarname</em:name> string in RDF.
After that it works well.