I'm reading through "HTML and CSS Design and Build Websites", one of the examples in Chapter 17 is this:
http://www.htmlandcssbook.com/code-samples/chapter-17/example.html
I'm following through the HTML/CSS in the book and it mostly makes sense. What I can't understand is a little nitpick though: using the developer tools from chrome and looking at "Contact" at the bottom right, the 10px margin-top value is shown as going outside the containing section block (of class="contact details"). Why is the top margin of the Contact heading not kept within the section block? Or rather, why is the section block not extended to keep all the content of the heading within? A minimal example:
<!DOCTYPE html>
<html>
<head>
<link href="example.css" type="text/css" rel="stylesheet" />
</head>
<body>
<aside>
<section class="contact-details">
<h2>Contact</h2>
</section>
</aside>
</body>
</html>
The CSS:
section, aside {
display: block;
}
aside {
width: 230px;
border: 1px solid green;
}
aside h2 {
border: 1px solid red;
color: #fe6582;
margin: 50px 0px 50px 0px;
}
I find that if I place a border around section then the problem is resolved (section contains all of the heading, including its margin). Is this a HTML trait or a problem with the developer tools of chrome?
The margin issue is actually a specified behavior.
Read here more about the margin collapsing.
Also read this stackoverflow for a better explanation.
Related
I'm making a responsive GitHub Homepage Clone (https://github.com/) with HTML and CSS before moving on to JS. I'm currently working on a search bar. However, when I narrow the screen from the left side, the search bar width stays the same, causing the search bar to leave the entire left navigation bar. Any help would be greatly appreciated :)
P.S. Please view the code snippet at full page view
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #f6f8fa;
font-family: Helvetica, sans-serif;
}
#left-menu {
background-color: white;
width: 25%;
display: flex;
flex-direction: column;
}
#left-menu-items {
margin: 40px 15px 300px 25px;
width: 85%;
}
#left-menu input {
background-color: transparent;
border: solid 1px #e1e4e8;
border-radius: 5px;
outline: none;
margin-bottom: 20px;
padding: 8px 113px 8px 10px;
}
#left-menu input::placeholder {
color: #d2d5d8;
font-size: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/735c9ee1fa.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>GitHub Homepage</title>
</head>
<body>
<section id="left-menu">
<div id="left-menu-items">
<input type="search" placeholder="Find a repository...">
</div>
</section>
</body>
</html>
The element I'm working on is the search bar that says "Find a
repository..." In order to allow the box to stretch to the right, I've
added a ton of padding.
Hi, Joshua.
In this case, asking a question with so many parts is hard to answer. If you can create a smaller example - it might help.
<aside class="sidebar">
<input type="search" placeholder="Find a repository">
</aside>
.
.sidebar {
border: 1px solid blue;
padding: 10px;
}
input[type='search'] {
padding: 5px 10px;
font-style: innherit;
}
https://jsfiddle.net/sheriffderek/smnovwqj/
From there - we can help you. You can always ask in the CSS Discord too.
HERE: with the sidebar in tact: https://jsfiddle.net/sheriffderek/e6k8gydu/
Presumably you want the search input to shrink and grow with the page.
To that end, you should use max-width: 300px along with flex-grow: 1 on the <input>.
flex-grow tells the flex-box how to allocate space along its main axis (in this case, the X axis). The value you give it represents a fraction of the parent flex-box. So in this case, if give it the value flex-grow: 1 it will take up as much space as it can, until it runs into another fixed with element, or another element that also has flex-grow set with a nonzero value.
Max-width simply tells the element how large it's allowed to get. You can obviously fine tune this by changing the value, but 300px seemed about right to me.
Put the two together and you no longer need your crazy padding. The input will shrink all the way down to nothing (if you want that to change you also add the min-width property)
and grow all the way up to 300px in this case.
You'll also also want to get rid of the <p> next to your text input. In this scenario, there's no reason at all to use a paragraph, as it has default styling that changes how it behaves. I would use a <div> instead.
After that I would get rid of the relative positioning on nav div p{} and just let flex-box do its magic. If you're trying to position an element in that way, a much better way is with margin. This is what margin is meant to be used for.
Sorry my answer isn't a more specific, but your question is a bit broad.
I'm not new to HTML or CSS, but I really don't know why this is happening. I could just be dumb and this is an easy question something is really wrong. I'm really having trouble with this. I have a very simple web page with a div element. Not matter what I do I still have space at the top, side, and bottom of it. Here's a picture.
And Here's my HTML and CSS code.
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<style>
.SideBar {
background: #4c4c4c;
float: left;
height: 100%;
margin-left: 0px;
padding-right: 25px;
}
</style>
</head>
<body style="background-color: #05bcff">
<div class="SideBar">
<p style="margin: 0px; padding: 0px">
asd
</p>
</div>
</body>
</html>
You should assign margin 0 and padding 0 to body element in your styling.
As Frontend employee said just add
.body{
margin: 0;
padding: 0;
}
a lot of people employee CSS reset codes at the top of their stylesheets which includes this. Its basically a list of default overrides that clears any styling on elements allowing you to begin with a clean slate
See (http://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/)
This happens because the <body> element has margin by default in some browsers. Different browsers can choose to apply some basic default styling to elements. Chrome, for example, adds 8px margin to by default. If you set
body {
margin: 0px;
}
This will dissappear.
A better way to go about it is to include Reset.css or Normalize.css in your code. Reset.css will unstyle absolutely everything, so that what you write is exactly what is displayed. This gives you greatest control but for most cases it's too much. For example, <h1> , <h2> , <h3>.. tags will all look the same after applying Reset.css .
Normalize.css on another hand preserves useful styling but will make sure that your elements are rendered consistently across all browsers. This is preferred in most cases.
In Codepen you can even try these out. If you click 'Settings' you can choose to include 'Normalize' or 'Reset' in your CSS. You can play around with these to see how your elements are displayed under each.
I have a HTML document with inline CSS that my professor asked to have the CSS within the head tag and have the same rending from the original HTML with inline CSS. I think I'm done but somehow the <hr> within the HTML with inline CSS looks thicker than the other one.
I already tried adding a height: declaration property but it renders even thicker than I want.
Original HTML: http://jsfiddle.net/2k66T/
Modified HTML: http://jsfiddle.net/dd63m/
Edit: Here are the instructions from the professor;
Write a CSS document in order to define the style of the following web
page (I refer this to as "Original HTML") in a right way. Add and erase in the original
page everything you think that is necessary. Use the on-line validator
of the World Wide Web Consortium to be sure that your work fulfills
the standards.
Real question is... why are you using HR?
Let's render a border on the div wrapping your logo image.
Have a fiddle! - http://jsfiddle.net/dd63m/11/
Updated fiddle - http://jsfiddle.net/8VTd8/3/
I have given the div wrapping your logo an ID of logo. I removed the br break tags, we can apply margins in the CSS. The font tag is no longer used.
HTML
<h1>MyTSC</h1>
<div id="logo">
<img src="./img/TSCLogo.jpg" alt="TSC">
</div>
<h2>My courses for Fal 2013</h2>
<ul>
<li>COSC 4330 Computer Graphics</li>
<li>IMED 1416 Wed Design I</li>
<li>ITNW 2413 Networking Hardware</li>
</ul>
The logo div is currently 300px wide, change to what you want. Note: margin: 0 auto; essentially this is centering your div. margin-bottom is applied to create those extra spaces. The border is applied to your logo div giving a consistent line across browsers.
CSS
body{
background-color: grey;
color: white;
}
h1{
text-align: right;
margin-bottom: 30px;
}
div{
text-align: center
}
ul{
font-style: italic;
}
#logo { width: 300px; margin: 0 auto; border-bottom: solid 1px #FFF; }
#logo img { margin-bottom: 30px;}
add background: white; in your css not color:white
like this
hr{
width: 50%;
height: 3px;
background: white;
}
They all have the same height, the one with the default color(no color specified) has a gradient effect so it looks a little thin.
Code for the Test fiddle
<hr width="50%" color="black">
<br />
<br />
<hr>
<br />
<br />
<hr id="test">
Js Fiddle
I've got an assignment for an introductory web design course, and so far it's been real easy, but when the professor introduced div and span tags, I really lost my momentum and have fallen into a slump. I've registered for the course late, and as luck would have it, an assignment on div and span is due tomorrow.
I have been using w3schools extensively thus far, as well as StackOverflow itself, but I can't really find a specific answer to my question, or the answers I find are well beyond my 'skill level'.
I want to emulate a website provided to me; no source code is provided, just an image of what the final product should look like, as well as resources like images, text sizes, etc. Here is the link to the assignment itself.
http://www.cosc.brocku.ca/Offerings/2P89/2P89%20Assign2.pdf
I've gone through the first few bits myself, but the meatier portion of the assignment I'm lost on. I need to make one large div element (I'm assuming), and inside that I need more div elements. I've got to this area:
"Below the main heading is the page's overall content area, with an overall 32% rating for the film, several critics' reviews, and an overview of the film at right. Taken together this content occupies 800px in width and is centered horizontally within the page. If the page resizes horizontally, this 800px section should move dynamically so that it remains centered horizontally on the page. This overall section has a 4px gray solid border with a 20px round radius and should be sized large enough to contain all of its contents. (Hint: See textbook section 4.3 on making contents fit.)"
The image in the link is how it should look, and so far I have everything above the rounded border section with all of the meatier content. Here is what I have thus far:
<!doctype html>
<html>
<head>
<link rel="shortcut icon" href="http://www.cosc.brocku.ca/Offerings/2P89/Images/rotten.gif"
type="image/x-icon">
<title>Abraham Lincoln: Vampire Hunter - Rancid Tomatoes</title>
<link href="abe.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="banner" style="background: url
(http://www.cosc.brocku.ca/Offerings/2P89/Images/bannerbg.png) repeat-x;width:100%;height:50px;">
<img src="http://www.cosc.brocku.ca/Offerings/2P89/Images/banner.png" alt="">
</div>
<h1>Abraham Lincoln: Vampire Hunter (2012)</h1>
<div class="reviewshell">
<div class="reviewleft">hi</div>
</div>
</body>
</html>
...and style sheet...
.banner {
margin:0px;
text-align:center;
}
.reviewshell {
margin-left:auto;
margin-right:auto;
border:4px solid;
border-radius:20px;
border-color:grey;
width: 800px;
}
.reviewleft {
margin:0px;
text-align:left;
}
.reviewright {
}
.reviewbottom {
}
body {
background-image:url("http://www.cosc.brocku.ca/Offerings/2P89/Images/background.png");
background-attachment:fixed;
font-size:8pt;
font-family:Verdana, Tahoma, sans-serif;
margin:0px;
}
h1 {
text-align:center;
font-size:24pt;
font-family:Tahoma, Verdana, sans-serif;
font-weight:bold;
text-shadow:#999999 3px 3px;
}
blockquote {
}
a:link {
}
a:visited {
}
ul.a {
}
I apologize in advance if homework help is frowned upon here; I've been at this for about 9 hours reading up on HTML and I can't find out how to continue. There is no prof or TA available on Sundays unfortunately.
edit; I should probably mention that I don't need a specific answer, just a link to a page or guide that can help me figure it out. w3schools is indepth, but I still can't get it.
That paragraph basically means "put the main content in a div with the following styles":
width: 800px;
margin-left and margin-right: auto; to center it
border: 4px solid gray
border-radius: 20px;
This is a pretty good Smashing Magazine tutorial: http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
I could write up a guide for you if no one supplies a better answer...
HTH.
I am learning HTML and CSS, and I want to create a fixed-width page which has a silver background color. I also want the background color outside of the fixed-width area to be black.
The problem is that there is a small black gap above the fixed-width area (above the heading), and I would like to remove this black gap, so that it's replaced with silver color.
How do I solve this?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Homepage</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main">
<h1>Welcome to my homepage.</h1>
<p>This is just a test.</p>
</div>
</body>
</html>
CSS:
body {background-color: #000000;}
.main {
width: 640px;
margin: 0 auto;
background-color: silver;
}
try
body {padding:0; margin:0; background-color:#000; }
try:
border-width:0px;
border and margin are two different things... here's a nice picture for you:
http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/
You can do below:
body {margin:0; padding: 0; background-color:#000; }
.main {
position: absolute;
width: 640px;
left: 50%;
margin-left: -320px;
background-color: silver;
}
problems like this one will be quite common when writing HTML & CSS, it is a hotly debated subject but I would strongly recommend you use a reset style sheet.
All browsers have their own set of rules as to how elements are displayed on a webpage, a reset style sheet goes a very long way to minimise the effect of browser specific style meaning your code reads much more logically and it easier to spot what is going on especially when you have a problem. That said, even with a reset style sheet you should always cross browser check a project as there are always quirks.
Here is one of the most widely used reset style sheets.
http://meyerweb.com/eric/tools/css/reset/
Just paste this above your website CSS on your style.css sheet or create a new stylesheet called reset.css and reference it BEFORE your site.css.