Website looking really weird - html

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/

Related

Somewhat new to html and css

I´ve been working with Html for a bit these last 2 weeks and just started css today. I understand some of the basics of css (some of the elements and how to make the code look neater) but there are a few things i dont quite understand and haven´t been able to find so far. Such as making an image smaller for example. Can anyone explain to me why this css code isn't working?
h1{
Color: #8a1319
}
.name {
color: #ba454b;
}
/*help with this part please? Cant figure out how to properly make it smaller*/
.joke{
border: 2px solid red;
max-height: 250px;
width: 50%;
}
body {
text-align:center;
background: powderblue
}
<div class="name">
<h1>Dylan Carlson</h1>
</div>
<section>
<h1 class="title">
website
</h1>
<p>
<div class=joke>
<img src=http://www.jeremychin.com/repository/tickled/0355.jpg class=image />
<div>
<br>
<br> Age: 17
<br>
<br> Grade:12
<br>
<br> Intrest: programming
<br>
<br> extra curricular: N/A
<br>
<img src=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSJjXu1Ulhi3ExUJYOsgRxEcXywik5FG2B-ouj4E3RqgDIARssdQ>
</div>
</p>
<p>
Favorite Icecream: IDFK
<br>
<br>
Favorite color: Gold/Black
</p>
</section>
Remove the DIV around the image and add joke to the class:
<img src="http://www.jeremychin.com/repository/tickled/0355.jpg" class="joke">
Since you had joke as a class of the DIV, it applied to the DIV and NOT the IMG. Thus, the max height of the DIV was 250px and since the picture was larger, it overlapped.
A bit of advice: Keep CSS at the lowest level you can (the IMG in this case and not the DIV).
You are editing the image's parent div, that's why it's not working. Use the image's class instead.
.image{
border: 2px solid red;
max-height: 250px;
width: 50%;
}
Css is not for creating things on the browser it is for styling elements. Ii is used to make things look as desired. The code as per your question will make a div (if styled on to) have a border with 2px in size with red colour and the div would be having width 50 percent as per the availability space and a maximum height of 250px

HTML - How to put text over a white background over a background image

I'm trying to emulate the following screenshot using HTML/CSS:
I have the following component files to work with:
1) the header image
2) the background image
and
3) the text starting from "They All Laughed..." all the way to "new training method that I've discovered"
I've been able to make the background image into the background image in the html file. Any ideas as to how to make the header image centered and scaled to rest at the top of the page and then to have a white background immediately below the header so that I can place the text on top of it? (extra credit for the shadowing on the sides, although not necessary)
Try This:
HTML
<body background="http://i1155.photobucket.com/albums/p560/sean1rose/backgroundimage_zpsa6c55a2e.png">
<div id="mainContainer" align="center">
<header>
<img src="http://i1155.photobucket.com/albums/p560/sean1rose/headerimage_zps9efccb9d.png" width="700" >
</header>
<section id="content-section">
<h2 style="color:#ff9900">“They All Laughed When This 49 Year Old Mother Of Two Said She Could Do Twenty Pulls-Ups In a Row…</h2>
<h2 style="color:#ff00ff">
But The Laughs Stopped And Their Jaws Dropped When She Grabbed the Pull-up Bar and Effortlessly Banged Out Five, Ten, And Finally Twenty Pull-ups In A Row”
</h2>
<div class="message" align="left">
<p>
Dear Friend,
</p>
<p>
Frankly, it doesn’t matter if you’re struggling to do one pull-up or if you’re banging out multiple pull-ups and just want to take your game to the next level… I can help you get there. Just watch the video to the right if you’re not convinced.
</p>
<p>
<b>I know what you’re thinking…</b> Yeah right!
</p>
<p>
You probably think that I’m an anomaly, a freak of nature, or that pull-ups come naturally to me.
</p>
<p>
Nothing could be further from the truth.
</p>
<p>
You see, there was a time where I could barely hang from the pull-up bar and do a single pull-up. My brain could NOT get my muscles to pull me to the bar no matter how hard I tried and how strong my back was. These days I can knock out rep after rep of pull-ups because of a unique and relatively strange new training method that I’ve discovered.
</p>
</div>
</section>
</div>
</body>
</html>
CSS
#mainContainer
{
margin:0 auto;
width: 75%;
}
#content-section{
background-color: white;
box-shadow: 4px 4px 4px rgba(50, 50, 50, 0.75);
margin-top:-18px;
width:700px;
}
#content-section h2{
text-align: center;
}
.message
{
margin-left:15px;
}
first see the output here:
http://jsbin.com/gimovuzo/58
IF this answer helps tou please vote up. :)
Make a container of width:80% and margin:0 auto
This will help you have the main content in the middle of the page.
Now, you can put all your contents in to it.
Give grey color to you body & make a section inside the 80% wide container & give its BG white color.
CSS
body{
background-color: grey;
}
#mainContainer{
margin:0 auto;
width: 80%;
}
#content-section{
background-color: white;
box-shadow: 2px 2px 1px rgba(50, 50, 50, 0.75);
}
HTML
<body>
<div id="mainContainer">
<header></header>
<section id="content-section"> </section>
<footer></footer>
</div>
</body>
This is one way of doing it. You can annytime replace the background-color with the images you want.

Aligning sub-heading "just right" beneath the Heading

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)

basic html css design of a box with image and title

I am not a very good designer. At least not with html and css. I have been using a very simple code like this:
<fieldset style=\"color: #000000; border: 1px solid #000000; width: 225px; text-align: left; padding: 5px;\">
<legend style=\"color: #999999; font-weight: bold;\">Headline.</legend>
<p>text</p>
</fieldset>
To output information in a php online game i am working on. I need something similar, put a little better looking. Can I get some help. I was thinking something like:
<h2 class="entry-title">Example</h2>
<img= examples.jpg" >
<div class="entry-content">
</div>
But im not sure what css code i can write to make a similar effect to the fieldset/legend that im currently using. I need a box with a title, an image on the left side and tekst on the right side of the image.
You could try use the div block below.
<div class="fieldset">
<h2 class="entry-title">Example</h2>
<img= examples.jpg" >
<div class="entry-content">
</div>
</div>
As styling, first give a border to your fieldset div. Then, you could just position the h2 tag relatively to your fieldset div playing top and left values. and be sure that your body background, filedset div's background and h2 tag's background is the same. Finally float both div entry-content and the image to left.
With a little tweaking you should get a similar looking of tag.

HTML element aside from headers <h1><h2>, ect

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.