I'm very confused about how things like this should be done. I am able to layout a whole site with html and css, but when it comes to things like this, I begin to doubt whether i'm doing it the right way or not.
Can somebody please help me? I am trying to have a H1 and a H3 (or H2) laid out (as shown below) somewhere inside a div that is 25% wide?
Any help is much appreciated, and thank you!
http://tinypic.com/r/2wd5bfl/7
P.S.
I was kinda thinking something like this?:
<div class="yipeee">
<h1 style="float:left; position:absolute; top:2; left:2;">This is a pretty awesome heading</h1>
<h3 style="float:right; position:absolute; bottom:2; right:2;"><i>if only it were better than this sub-heading...</i></h3>
</div>
Not sure if this is what you're asking for, but here's a solution for the given example:
<h1 id="heading">This is a pretty awesome heading</h1>
<h2 id="subheading">If only it were better than this subheading</h2>
<style type="text/css">
h1#heading { font-size: 36px; font-weight: bold; }
h2#subheading {
margin-left: 25%;
font-style: italic;
}
</style>
See the jsFiddle example at http://jsfiddle.net/fausak/WmuRf/
Here you go, this is almost exactly the same as the picture:
Here is the example: http://jsfiddle.net/MarkKramer/WmuRf/2/
I used your jsfiddle and edited it and now it is almost exactly like the picture (just the font has to be changed)
Related
Why is my paragraph bigger than the div when its inside it. To me it doesn't make any sense. Can you guys explain why this is happening and how I can fix it.
CSS:
#whos{
font-size: 15px;
color: black;
}
HTML:
<div id="Text">
<b id="bold">Hello,my name is Navjeeven</b>
<p id="whos">
I am Currently enrolled at
Brampton Christian School
</p>
</div>
What it looks like right now?
You have another style: #inside p which overrides the font size.
https://css-tricks.com/specifics-on-css-specificity/
I'm creating a very simple webpage. It has a div tag with a single paragraph containing some text.
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
Here is a the CSS style for the div:
div#titlebox {background-color:#f2f2f2;
padding-top:2px;
padding-bottom:2px;
padding-left:2px; }
Snippet:
div#titlebox {
background-color: #f2f2f2;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2px;
}
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
</HTML>
The text appears correctly, background color is also fine, but regarding padding, only padding-top is applied while padding bottom and left are ignored. Any suggestions on what is wrong with this code? By the way I am new to HTML. I googled the issue, there was point regarding float, but that doesn't solve my problem.
Here's a solution you can try without using css
<html>
<head></head>
<body>
<div align="left" style="padding-top: 20px;padding-left: 20px;padding-bottom: 20px;">
<p>First Heading</p>
</div>
</body>
Hello I wouldn't criticise you I see you are a beginner, that would just dis encourage you but normal syntax, html,head,body written in simple letters to avoid confusion of reading your own code later
follow this url:
Is it bad to use uppercase letters for html tags?
Your code works fine :)) I simply made padding bigger to make it more obvious
div#titlebox {
background-color: #f2f2f2;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 100px;
}
<HTML>
<Head>....</Head>
<Body>
<div id="titlebox">
<p>First Heading</p>
</div>
</Body>
</HTML>
Your left and bottom padding is working but you probably can't see it because 2px is really small. Change it to 20px or something and you should see the padding.
Handy tool - if you are using Chrome, you can right-click on the element you want to inspect and select the Inspect tool to see all your padding and margins on a diagram.
--note-- depending on which browser you are using, there will be some default styles/padding/margin applied to certain elements already, in this case your paragraph tag already have some top and bottom padding
I've read that headers shouldn't be used as subtexts to other headers for HTML5 in order to have a nice outline.
for example:
<h1>Frustration</h1><br />
<h2>The life of developers</h2>
Rather, it could be written like this instead:
<h1>Frustration
<br />
<span style="font-size: 0.67em">The life of developers</span>
</h1>
The problem is that I have no control on the line-height of the subtext. It takes on the line-height of the H1 and that always seem a little too far.
I realize could do something like:
h1+.subtitle
to target the same thing, but I'd just like to know whether there is any way for the second option above to let me manipulate a paragraph with two different line-heights.
EDIT:
I'm using the latest version of Firefox.
As I continue to look for a solution, I'm beginning to wonder if this is a silly question to be asking, seeing as the browser has no reason to think the user would want separate line-heights within the same tag--especially when there are alternatives like using block elements with a negative margin-top.
You could do this:
<h1>
<span class="mainText">Frustration</span>
<span class="subText">The life of developers</span>
</h1>
h1 .mainText {
display: block; /* this prevent the need for the <br/> */
/* additional style for the main header text */
}
h1 .subText {
/* styling for the subtext */
}
You could also do this (which is easier I guess):
<h1>text
<div>subtext</div>
</h1>
h1 div {
font-size: 0.67em
}
The subtext will have a lower line height. See this jsfiddle for the latter one: http://jsfiddle.net/wLD35/
I spent a little while trying to figure out how to achieve the following effect without using a table but couldn't figure it out: http://jsfiddle.net/sKFzA/
CSS :
.header{width:100%;font:25px Arial,Helvetica,sans-serif;}
.titleCol{width:99%;}
.dateCol{vertical-align:bottom;white-space:nowrap;}
.dateText{font-size:12px;}
HTML :
<table class="header">
<tr>
<td class="titleCol">This is the blog title</td>
<td class="dateCol"> <span> </span><span class="dateText">1/23/2012</span>
</td>
</tr>
</table>
To explain it, I have a blog title and a blog date. The title could be long and wrap. At the end of the last line, wrapped or not, I want the blog date to be aligned to the right.
So I have two questions. Is there any reason not to use a table for this? If so, how would you achieve it without assuming static font sizes?
CSS has properties that allow any element to behave like specific components of a table.
http://cssdeck.com/labs/rjiesryc
<header>
<h1>This is the blog title</h1>
<time datetime="2012-01-23">1/23/2012</time>
</header>
CSS
header {
display: table;
width: 100%;
}
header h1, header time {
display: table-cell;
}
header time {
/*vertical-align: bottom;*/
}
With the help of cimmanon and the others, I've gathered that:
The only reason's not to use a table here is because layout is not technically a table's intended purpose and also by not using a table you can separate your layout (CSS) from your markup (HTML). However, if I were to use a table, I am not aware of of any negative effects.
There doesn't seem to be a good solution to this exact layout without the concept of table, but my table solution can be achieved without using an HTML table by applying styles to display other elements as the table. So I replaced my table elements with divs. The span with the space before the date allows the smaller sized date to stay aligned to the title's baseline without having to hard-code line height's or font sizes. So if the font sizes change, I don't have to worry about updating any other magic numbers hard-coded around them.
http://jsfiddle.net/K35gT/
HTML
<div class="header">
<div class="titleCol">This is the blog title</div>
<div class="dateCol">
<span> </span><span class="dateText">1/23/2012</span>
</div>
</div>
Styles:
.header{display:table;width:100%;font:25px Arial,Helvetica,sans-serif;}
.titleCol{display:table-cell;width:99%;}
.dateCol{display:table-cell;vertical-align:bottom;white-space:nowrap;}
.dateText{font-size:12px;}
You do not need tables at all, simply block elements with the right styles.
If it was my website, I would do this:
<header>
<h1>This is the blog title</h1>
<time datetime="2012-01-23">1/23/2012</time>
</header>
Combined with this CSS:
header {position:relative; width:100%; font:25px Arial,Helvetica,sans-serif;}
header > h1 {margin:0px;}
header > time {display:block; font-size:12px; text-align:right;}
You can decide if you want to use HTML5 elements, or general elements and if you want to hook in class names or not. Here's the jsFiddle for above: http://jsfiddle.net/sKFzA/13/
Something like this? I hope i got you right.
HTML:
<div id="titleRow">This is the blog title</div>
<div id="dateText"><span id="spandate">1/23/2012</span></div>
CSS:
#titleRow{width:80%; height: 25px; font:25px Arial,Helvetica,sans-serif;
float:left;text-align: left;}
#dateText{width:20%; height: 25px; font-size:12px;float:left; text-align: right; position: relative;}
#spandate { position: absolute; bottom: 0; right: 0;}
See here: http://jsfiddle.net/sKFzA/31/
I was browsing related issues for my question but I can't seem to find the answer for it. Anyways, I want to know if I can still use the p or div tags instead of header tags when I have already used both (p and div tags) as plain text on my site. The reason is that I only want to have one header tag h1 present in my site. I tried to tweak some parts and got lost along the way. Sadly, after a couple of testing, it did not work... I was wondering if it's possible or if there's any other HTML tag that I can use other than header tag. Any response from you guys will be very much appreciated. =)
You can make a <p> look however you like, for example:
<p class="header">This is a header</p>
with
p.header { font-size: 200%; font-weight: bold; }
but I would recommend against it. The reason is that HTML is (ostensibly) semantic so if you declare:
<h3>This is a header</h3>
you're actually saying (semantically) that the given text is a heading of some sort. Remember you have <h1> through <h6> and you can pick and choose which of them you use. There is no need to use <h1> to use <h2> and so on.
This is also useful for those visually impaired as something styled as a heading won't be indicated as such to those using screen readers but a heading will be. You should cater for accessibility issues where possible.
You should not style a div, span, or p to look like a heading and then use it in place off an h1-h6. That is exactly contrary to the spirit behind the rule of thumb that you shouldn't have more than one h1 on a page.
<span> is a useful addition, as well.
You can use P and DIV tags over and over. If you need to, style them to look like H1's.
p.title {
font-size:18px;
font-weight:bold;
}
p.header2 {
background: url("bg.jpg");
}
--
<p class="title">My Title</p>
<p>And this paragraph will simply be regular text.</p>
<p class="title header2">My Other Title, with a Background Image</p>
<p>And this paragraph will also be regular text.</p>
Don't forget to remember SEO on your site. Presumably this is why you only want one H1 tag?
<span> <strong> and <em> are others you can use inside your <p> tags.
i would use <div> or <span> tags and use ids or classes to control the style. use ids if there is only once instance or classes if you want to repeat this style. you can also use multiple classes on one element
for example
<div id="text">Text Here</div>
<span class="red">This would be red</span>
<div class="red big">This would be big and red</div>
with css
#text{ font-size: 20px; }
.red{ color: red; }
.big{ font-size: 40px; }
hope this helps
You can use multiple h1's or h2's and just target them like this:
<div id="header"><h1>Title of page/h1></div>
<div id="main"><h1>Title of article</h1></div>
#header h1{ color:red;}
#main h1{ color:blue;}
It's not quite what you're asking. I suspect Google is a bit smarter than single H1 approaches.