Forums
Thread
Standard CSS question.
Can anyone please tell me how I can simply separate the two text boxes in the following picture. I have tried modifying the properties and adding bottom-margin x px; but haven't had any luck.
Code below:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<style>
div.relative {
float:left;<!-- img setup with border -->
margin-left:auto;
margin-right: auto;
height: 359px;
width:575px;
border: 3px solid #73AD21;
margin-left: 10px;<!-- left margin of the img -->
}
div.columns {
width: 500px; <!-- default column setup -->
}
div.columns div {
width: 300px;
height: 366px;
float:left;
}
div.col {
background-color:#0a1a33;
}
#p01{
margin-top: 2.5px;
margin-bottom: 0px;
}
</style>
<style>
#p01{
margin-top: 2.5px;
margin-bottom: 12px;
}
</style>
</head>
<body>
<h2>Computer Science Workshops</h2>
<div class="columns">
<div class="col" >
<p style="font-family:Courier New;" id="p01"><font size="4" color="white">HTML/CSS/Javascript:</font></p>
<p id="p01"><font size="2" color="white">This introductory workshop module is design for students with little or no prior experience. It introduces students to the basics concepts of HTML (Hyptertext Markup Language), CSS (Cascading Style Sheets), and Javascript.</font></p>
</div>
</div>
<div class="relative">
<img src="img_lite.jpg" alt="Paris" style="width:100%">
</div>
<div class="columns">
<div class="col" >
<p style="font-family:Courier New;" id="p01"><font size="4" color="white">HTML/CSS/Javascript:</font></p>
<p id="p01"><font size="2" color="white">This introductory workshop module is design for students with little or no prior experience. It introduces students to the basics concepts of HTML (Hyptertext Markup Language), CSS (Cascading Style Sheets), and Javascript.</font></p>
</div>
</div>
<div class="relative">
<img src="img_lite.jpg" alt="Paris" style="width:100%">
</div>
</body>
</html>
Thank you!
You've got a number of problems here, so let's just go down the list. I suspect many of these problems stem from a tutorial or coursework that's decades out of date, which is why I'd highly suggest that whatever source you're learning from be kicked to the curb immediately as you're learning things completely wrong!
First off this is 2018, not 1997. There is no such thing as a FONT tag. No website written after 1998 was supposed to use that tag, nor is there any reason for that tag to even exist after around 2003. When we stopped caring about nyetscape 4.x users
Next you've got style inlined in the markup, that's most always a complete failure to grasp the point of HTML, so all those style=""" need to go. Whilst for testing the STYLE tag is cute, that too really shouldn't be done in production so I'd get that out of the markup.
Having your first heading on a page be a H2 is somewhat nonsensical, but is that just because this is a subsection of a smaller page? Those P + class + font look like they should be headings for structural reasons, being either h2 or h3 depending on what that first heading would/should be.
Next you have the charset meta after a CDATA bearing element, which could trigger a reparse. Charset goes before tags with CDATA in them like title, or even other meta.
Finally you're trying to build a layout with text content using just px, a giant middle finger to usability and accessibility.
So first let's clean up the markup.
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1" > <link rel="stylesheet" href="screen.css" media="screen,projection,tv" > <title> Tutorial </title> </head><body> <h1>Computer Science Workshops</h1> <div class="subsection"> <img src="img_lite.jpg" alt="Paris"> <div> <h2>HTML/CSS/Javascript:</h2> <p> This introductory workshop module is design for students with little or no prior experience. It introduces students to the basics concepts of HTML (Hyptertext Markup Language), CSS (Cascading Style Sheets), and Javascript. </p> </div> <!-- .subsection --></div> <div class="subsection"> <img src="img_lite.jpg" alt="Paris"> <div> <h2>HTML/CSS/Javascript:</h2> <p> This introductory workshop module is design for students with little or no prior experience. It introduces students to the basics concepts of HTML (Hyptertext Markup Language), CSS (Cascading Style Sheets), and Javascript. </p> </div> <!-- .subsection --></div> </body></html>Realistically that should be all that's needed to do this in the HTML.
First off notice how I condense the DOCTYPE through to the charset META to a single line, as well as closing HEAD and opening BODY, and the closure of BODY and HTML. This isn't done to save space, so much as a gentle reminder that these elements must appear in this order and that nothing has any business being pasted between them. It's a handy little way to keep yourself on track.
The viewport meta (or at least the values I set in it) tells mobile browsers not to assume our page is outdated garbage, and to actually leave our style choices alone.
CSS belongs in an external file, and in 95% of cases (not to pull a percentage out my backside) anyone telling you to use the STYLE attribute aren't qualified to tell you how to build websites, and those telling you to use the STYLE tag need a quadruple helping of sierra tango foxtrot uniform; being unqualified to write a single line of HTML or CSS. The only time style="" is acceptable is when the style is helping to convey meaning, such as font-size on a tag cloud, or width/height on HTML constructed bar graph. Otherwise, Nancy Reagan that nonsense.
Nothing in your HTML should be chosen based on what you want things to look like. That's why FONT, CENTER, and a host of other things were stricken from HTML back in '98, and really had no business having been added to HTML in version 3.2 in the first place.
Numbered headings exist to create your document structure. They mark the beginning of sections and subsections and so should be chosen accordingly. H1..H6 do not mean "fonts in different weights and sizes" and anyone telling you to chose them on that basis also has no business telling you how to make websites.
An H1 (if you don't use HTML 5's half-witted pointless SECTION tag) is the heading (singular) that everything on every page of your site is a subsection of. This is why the first content-bearing tag of every properly written website should be a H1, and why the site title/logo is often the best choice for that tag.
H2 indicate the start of major subsections of the page, with the first H2 marking the start of the page content. (making HTML 5's pointless MAIN tag... well... pointless.). H3 indicate the start of a subsection of the H2 preceding it. H4 indicate the start of a subsection of the H3 preceding it, and so forth down to H6 depth. As they indicate the start of subsections that's why throwing them in willy-nilly or skipping depths going "down" is gibberish semantics and breaks alternative (aka non-visual) navigation.
Even HR does not mean draw a line across the screen, it means a change in topic or section where heading text is unwanted or unwarranted.
The default appearance of HTML tags only exists to help convey the meaning -- they are not what they actually mean or represent why they should be used. Even tags like the bold and italic ones do not mean "show this text as bold or italic" they mean "this text would be made italic for grammatical reasons in a professionally written document" -- such as a legal entity in the case of bold, or a book title that isn't being CITEd or receiving EMphasis in the case of italic. Just as P means a grammatical paragraph and not "oh this is some text" and how lists are for short bullet points or selections, not massive sections with headings. That's bullet points in the grammatical sense, not "hurr durrz its be haz u dot befur its"
Aka what was 4th and 5th grade grammar school stuff back in the '70's.
When it comes to making content that scales properly, placing the image first so that it can be 'floated' into place is usually the best approach. This can have problems though in terms of keeping both elements the same height, but that's where techniques like flex-box and "CSS grid layouts" come to the rescue. Whilst those latter two are more powerful and often easier to implement, if you're just starting out IMHO you should learn to use floats first.
The big issue with using floats is again the equal height and/or having gaps between things, but for now you should be learning this technique as a starting point.
.subsection { overflow:hidden; /* obey floats and margins */ margin:0 auto; max-width:80em; } .subsection img { float:right; max-width:50%; height:auto; margin-left:1em; border:3px solid #7B2; } .subsection div { overflow:hidden; /* obey floats and margins */ padding:1em; background:#123; color:#FFF; } .subsection h2 { padding-bottom:0.66em; font:bold 150%/120% serif; }The use of hidden overflow "contains and obeys" our floats. Usually block-level elements like DIV ignore the existence of floats for calculating margins and width, wrapping underneath them so their inline content inside them can wrap around them. (Yes, that's as confusing as it sounds!). There are issues using hidden if you have "fixed size" content, but we can avoid that by letting the layout be "fluid" adjusting to the width and content sizes automatically, and by being "elastic" in using EM's instead of PX, which scale to the user's font-size preference preventing them from needing to dive for the zoom if they want larger (or smaller) fonts by default.
The max-width and auto-margin centers it and prevents the layout from getting too big for larger displays; excessive fluid width can cause long lines to be hard to follow, so setting a maximum width prevents that issue whilst still letting it shrink to fit smaller displays. This is called "Semi-fluid layout".
The image gets floated, and since we're letting the layout fluid adjust to the content like good little doobies instead of pissing on accessibility from orbit by declaring fixed pixel widths and heights, we want to set a max-width so enough space for the text is allowed in the shifting right column width. The left margin pushes our next DIV away from the content, and from there it's just some simple style.
That does most of what you're trying to do, though again it lacks the equal heights. Still the result is dynamic and fluid which is far more desirable. From there I'd add a media query -- which lets us customize by width -- to strip off the column based behavior.
@media (max-width:40em) { .subsection img { float:none; display:block; max-width:100%; margin:0; border-width:3px 0; } }That media(max-width) part means that only on displays smaller than 40em wide does what's inside it apply. In this case we're removing the float form the image, making it block so it auto-expands to fit, making it fulls screen width, stripping off the padding, and removing the left/right borders from it which just looks better.
EM being based on the user's default font size and not any actual fixed measurement -- could be anything from 12px to ... whatever the largest font-size the browser supports is. Good developers work in EM, not pixels. This is even more true now that vector images for things like icons and artwork supplants the outdated garbage of the past.
Live demo here:
cutcodedown.com/for_others/CEOMike
I also tossed the markup in there as a .txt
cutcodedown.com/for_others/CEOMike/imageColumns.h…
Just in case the 'view source' is too tricky for you. I know this is a lot to take in and you're clearly just starting out, hence I thought I'd try to steer you down the correct path as opposed to... whatever it is you've been learning from.
If I have time later I'll add "CSS grid layout" (a relatively new feature) to it to make the text area equal height with the image if it is shorter than it. Taller than it is problematic in fluid layout, which is why I generally don't go in for these sorts of layout concepts in the first place. To have maximum accessibility I develop elastic, semi-fluid, and responsive, three things that are often incompatible with much of the artsy-fartsy nonsense artists under the delusion they are designers long for.