Somewhat new to html and css - html

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

Related

Float left not applying?

I can't seem to float my image to the left? Can't figure out why?
I've applied a class of align-left which contains float: left.
Live version at - https://www.workbooks.com/salesforce-alternative (see the review grid half way down below the heading 'High customer satisfaction ratings').
Code:
<section class="bluesection card__content__headings">
<img alt="Reviews-6.png" class="align-left" data-entity-type="" data-entity-uuid="" height="395" src="/sites/default/files/2017-03/Reviews-6.png" width="400" />
<h2 style="height: 400px;"></h2>
<p></p>
</section>
CSS:
.align-left {
float: left;
}
.bluesection {
background-color:#ecf0f2;
padding: 50px 100px 50px 100px;
}
Try this code:
<section class="bluesection card__content__headings">
<h2 class="heading--two inline-block__heading" style="margin: 0px 0px 20px; text-align:center;">High customer satisfaction ratings</h2>
<img alt="Reviews-6.png" class="align-left" data-entity-type="" data-entity-uuid="" src="/sites/default/files/2017-03/Reviews-6.png" width="400" height="395">
<p class="inline-block__copy">With our world class software, our CRM expertise and proven implementation best practices, we are a genuine partner you can rely on to accompany you on your CRM journey - helping you transform your business and drive ongoing success.</p>
<p class="inline-block__copy">But don't just take our word for it. Over 268 independent customers have reviewed Workbooks on G2 Crowd where Workbooks consistently scores above Salesforce in satisfaction and richness of functionality.</p>
<p class="inline-block__copy">The G2 Crowd Report compare Workbooks to its competitors based on independent user reviews. Workbooks is rated higher than Salesforce in most categories.</p>
<p style="clear:both;"></p>
</section>
As you can see, I change the img after h2, and I have added a p with clear:both style to the end inside of the section. Also I have added and removed some CSS styles to get a nice look.
It's not float-left but float: left;. That's not the only issue though.
The image is already floating left but the reason it doesn't work the way you want it to work is because of the padding of the blue section.
Keep in mind that the image is floating to the left relative to the element it is enclosed in. If you change the value of padding to padding: 20px 50px 20px 50px; you can see that the image will move further to the left because the padding got smaller than it was initially.
I figured it out.
The image was floated to the left, the reason why the text wasn't wrapping was due to an inline height: 400px being applied to the heading rather than the section.
Sam
it already floated left, the reason it cant go any further is because it reached the edge of the div. padding shrinks the edges relative to the child elements, but maintains it defined size unless values are bigger.
here is a recommended fix:
HTML
<section class="bluesection card__content__headings">
<img alt="Reviews-6.png" class="align-left" data-entity-type="" data-entity-uuid="" height="395" src="/sites/default/files/2017-03/Reviews-6.png" width="400" />
<div class="text">
<h2></h2>
<p></p>
</div>
</section>
CSS
.bluesection {
position: relative;
width: 100%;
display: flex;
}
.text {
width: 100%;
}
example in jsfiddle: https://jsfiddle.net/qf6w18p1/
I figured it out.
The image was floated to the left, the reason why the text wasn't wrapping was due to an inline height: 400px being applied to the heading rather than the section.
You can fix the height, but when you see your code in a phone device (360px x 640px), the section title h2 will be located under img, and it will not look nice.
My advice is to change the orden of the h2 and img tags.

create a line break within a div

I will have 3 icons side by side that will float left when the window shrinks. Under each icon, I'd like to add some text. I can pretty much get it as you can see below.
.icons {
BORDER-TOP: black 1px solid;
HEIGHT: 100px;
BORDER-RIGHT: black 1px solid;
WIDTH: 100px;
BORDER-BOTTOM: black 1px solid;
FLOAT: left;
BORDER-LEFT: black 1px solid
}
<div class="icons">div 1</br><a>some text</a></div>
<div class="icons">div 2</div>
<div class="icons">div 3</div>
In jsfiddle, this </br> tag seems to come up as invalid. Is there a valid and / or better way to accomplish this?
http://jsfiddle.net/kp950/mum68pwv/
Just apply display: block to your text elements.
a { display: block; }
The will force each element to consume the full available width of the container, and subsequent elements to the next line.
http://jsfiddle.net/mum68pwv/4/
You're getting an error thrown in jsfiddle due to your linebreak syntax being wrong.
You're using </br> when you should be using <br/>
2020/HTML5 EDIT
You no longer need to use self-closing tags in HTML5 (though browsers can still handle them), instead you can simply use <br>.
Instead of </br> use <br> or <br />
<br /> is a valid tag whereas </br> is not so.
Use :
<div class="icons">div 1
<br>some text
</div>
<div class="icons">div 2<br>some
<br>some text
</div>
<div class="icons">div 3
<br>some text
</div>
P.S.
<a> is anchor tag and it is not a good option for adding little elements to your webpage. Instead use <span> tag which will be more efficient.
You have a syntax error in your <br> tag
So this
<div class="icons">div 1</br><a>some text</a></div>
should become
<div class="icons">div 1<br><a>some text</a></div>

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.

Even out space layout (table)

For a web application I'm creating (in Umbraco, but don't think that really matters in this case) I need a page that can show an overview of different media types; audio, video and images.
No problem there, for images and videos (hosted on YouTube) I will show a thumbnail and for audio I will show a static image.
The rough layout of an item will be that the image is shown on top, and below that is some info like the title and a short description.
Now because of the difference in dimensions of the images (thumbnails can have a variable size, the audio static image will probably always be smaller than the thumbnails, etc.) one item (or column if you will) can be of less width than another.
What I would like to do is show three items per row, and when the row isn't completely filled I would like to fill it up with a colored box. But that box should not always be at the end, it could also be in between, or the beginning. It just is inserted 'randomly' when a space fill is needed.
Because a picture says more than 1000 words (wire-frame of what I'm trying to describe);
Now my question; is this at all possible? If yes, how?
I can't wrap my mind around it, it can't be done in pure HTML and CSS I think. Because you couldn't determine how big an item is and if a 'filler' is needed.
The rough HTML I have right now is something like this:
<table id="portfolio">
<tr>
<td>
<div class="portfolioItem">
<div class="portfolioItemImage">
<a rel="prettyPhoto" href="http://www.youtube.com/watch?v={video}"><img src="http://img.youtube.com/vi/{video}/1.jpg"/></a>
</div>
<br clear="both" />
<div class="portfolioItemDescription">
<h3>Title</h3>
<p>Description lorem ipsum etc.</p>
</div>
</div>
</td>
</tr>
</table>
Of course there is some more dynamic stuff in there to determine whether it is a video, audio or image, determine when to start a new row, etc. but that isn't relevant here.
Here is the CSS associated with it:
#portfolio {
width:100%;
}
#portfolio td {
width:33%;
}
#portfolio .portfolioItem {
border: 1px solid #000;
}
#portfolio .portfolioItem .portfolioItemImage {
margin:0px;
padding:0px;
}
Again; can this be done? And how?
Thank you!
I think that what you want is jQuery Masonry or the Wookmark jQuery Plugin.
I would create the grid using DIVs instead of TABLES, regardless I think this is what you are looking for?:
#portfolio td
{
min-width:33%;
}
EDIT:
Here is a rudimentary example of a grid created with DIV's:
http://jsfiddle.net/rdtnU/
<div class="con">
<div class="row">
<div class="cell">a</div>
<div class="cell">b</div>
<div class="cell is_last">c</div>
</div>
<div class="row">
<div class="cell">d</div>
<div class="cell">e</div>
<div class="cell is_last">f</div>
</div>
</div>
.con {}
.row { width:340px; margin:0 0 20px 0; overflow:hidden; }
.cell { width:100px; margin:0 20px 0 0; float:left; background:orange; }
.is_last { margin:0; }​
I would use the div's as suggested but I would not limit myself to the row/columns as stated. I would use a more fluid layout even if it is for a specified width of a certain section.
The following will only work if you know the width of the div with the content, to allow the floating to occur (this could work if there is a min-width or if your code can determine the size of the image)
Here is the HTML
<div class="elements">
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
text and graphics here.
</div>
<div class="singleElement">
thisonewillpushthewidthoftheboxfartherthanthe150pxwidth
</div>
<div class="singleElement">
small text
</div>
</div>
Here is the CSS (I put some simple background colors so you can see what is going on with the width and how things are tucked in where space is available.
.elements { overflow: hidden; width: 500px; background: #FCC; }
.singleElement { padding: 5px; white-space:nowrap; float: left;
height: 200px; min-width: 100px; background: #CCC;margin: 0 10px 10px 0; }
Please note the details of the styles are just for demonstrating the example. They can be altered to fit your need.
EXAMPLE: Here is the example in jsFiddle.

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.