Hello i'm new to html and css. I wanted to use a section to display some images but it gives me a strange problem. when I use div for my section in html I get the wanted result but when I only use < section > I don't get the same result. Can some one help me to use only section in my html and not the div ?
this my css code:
#content2{
margin: 30px 0;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
text-align: center;
overflow:hidden;
}
.section {
display: inline-block;
margin: 0 10px;
}
.section a {
color: orange;
font-weight:bold;
font-size: 1.5em;
line-height: 1em;
text-align: center;
display: block;
}
.section p {
color: black;
font-weight:bold;
font-size: 1.5em;
line-height: 1em;
text-align: center;
display: block;
padding-bottom: 2em;
}
and my html looks like this:
<div id="content2">
<h4>Onze producten</h4>
<div class="section">
Pika deken
<img src="../images/NB1.jpg" />
<p>€19.99</p>
</div>
<div class="section">
City boy
<img src="../images/peuter1.jpg" />
<p>249.99</p>
</div>
<div class="section">
Classy girl
<img src="../images/peuter9.jpg" />
<p>€244.99</p>
</div>
<div class="section">
Outdoors
<img src="../images/girl1.jpg" />
<p>€129.99</p>
</div>
</div>
Thanks in advance!
First of all, make sure you specify <!DOCTYPE html> at the top of the page, to indicate HTML5 is being used (needed mainly for IE)
Second, <section> is not a block level element, e.g. a <div> is a block level element.
to fix this, add this to your .section CSS
display: block
this will cause a <section> to behave like a <div> and should fix your problem.
Make sure you're using <!DOCTYPE html> in your HTML document.
Related
This book is so confusing... I'm back with yet another question.
The book shows a picture of the chapters final look, and obviously I'm having problems with it.
Issue 1: I need to center a picture (I know how to do this) but what I don't know is how to left align a sentence after the picture. By after, I mean it would look like this picture:
But the centered text needs to be left aligned to the image, and when it reaches the end of the page, it starts the text under the picture instead of centered.
I'm pretty sure this has something to do with my wrapper, but I'm not 100% sure on what it is.
CSS file that controls most of the visual things below:
header {
background-color: #ccaa66;
color: #000000;
text-align: center;
}
h1 {
line-height: 200%;
}
body {
background-color: #ffffaa;
color: #330000;
font-family: Verdana;
background: url(background.gif);
padding: 25px;
}
nav {
text-align: center;
}
footer {
background-color: #ccaa66;
color: #000000;
font-size: 0.60em;
font-style: italic;
text-align: center;
padding: 5px;
}
#wrapper {
background-color: #ffffaa;
margin-right: auto;
margin-left: auto;
width: 80%;
min-width: 700px;
max-width: 1024px;
}
h2 {
background-color: #ccaa66;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 5px;
}
.details {
padding-left: 20%;
padding-right: 20%;
}
img {
border: 0px solid;
}
Now, the html page I'm loading that is having issues, is a "music" page, and since I can't really upload all of the necessary items you would need to fully construct the page, I'm going to have to go by word of wise.
The music.html page is coded like this:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="javajam.css">
<header>
<title> JavaJam Coffee House Music</title>
<meta charset="utf-8">
<h1><img src="javalogo.gif" alt="JavaJam Coffee House Logo" height="119" width="619"></h1>
</header>
<nav>
Home
Menu
Music
Jobs
</nav>
<body>
<div id="wrapper">
<p> The first Friday night each month at JavaJam is a special night. Join us from 8pm to 11pm for some music you won't want to miss! </p>
<h2> January </h2>
<p align="center"><img src="melaniethumb.jpg" alt="Melanie Morris">Melanie Morris entertains with her melodic folk style. <br> Check out the Podcast! CDs are now available.</p>
<h2> February </h2>
<p align="center"><img src="gregthumb.jpg" alt="Tahoe Greg">Tahoe Greg's back from his tour. New songs. New stories. CD's now available. </p>
</div>
</body>
<footer>
<em>Copyright © 2014 JavaJam Coffee House</em> <br>
Johnathon#Olivas.com
</footer>
</html>
What I'm really looking for is just a way to make the picture show up have the text follow the bottom right of the picture, and when it reaches the "end" of the page, it wraps back and stars under the picture instead of being center aligned. Namely where that <br> is, would be nice to have the text star back under the picture again.
If you need more info I'll try my best to provide it, but as I said earlier, I'm unable to give the actual pictures in the assignment.
I found some errors in the markup of the Web page.
This is the correction of your HTML.
I added a div tag with content class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title> JavaJam Coffee House Music</title>
</head>
<body>
<header>
<h1><img src="javalogo.gif" alt="JavaJam Coffee House Logo" height="119" width="619"></h1>
</header>
<nav>
Home
Menu
Music
Jobs
</nav>
<div id="wrapper">
<p>
The first Friday night each month at JavaJam is a special night. Join us from
8pm to 11pm for some music you won't want to miss!
</p>
<h2> January </h2>
<div class="content">
<p><img src="melaniethumb.jpg" alt="Melanie Morris">Melanie Morris entertains with her melodic folk style. <br> Check out the Podcast! CDs are now available.</p>
</div>
<h2> February </h2>
<div class="content">
<p><img src="gregthumb.jpg" alt="Tahoe Greg">Tahoe Greg's back from his tour. New songs. New stories. CD's now available. </p>
</div>
</div>
<footer>
<em>Copyright © 2014 JavaJam Coffee House</em> <br>
Johnathon#Olivas.com
</footer>
</body>
</html>
I've added a css class «.content» to center the content.
header {
background-color: #ccaa66;
color: #000000;
text-align: center;
}
h1 {
line-height: 200%;
}
body {
background-color: #ffffaa;
color: #330000;
font-family: Verdana, sans-serif;
background: url(background.gif);
padding: 25px;
}
nav {
text-align: center;
}
footer {
background-color: #ccaa66;
color: #000000;
font-size: 0.60em;
font-style: italic;
text-align: center;
padding: 5px;
}
#wrapper {
background-color: #ffffaa;
color: inherit;
margin-right: auto;
margin-left: auto;
width: 80%;
min-width: 700px;
max-width: 1024px;
}
h2 {
background-color: #ccaa66;
color: inherit;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 5px;
}
.details {
padding-left: 20%;
padding-right: 20%;
}
img {
border: 0px solid;
}
.content {
margin: 0 auto;
width: 600px;
}
I hope this helps you.
This should help you out. http://codepen.io/anon/pen/wKKLjG. the image is marked as display:inline-block and float:left. Refer more on cssfloat property. http://www.w3schools.com/css/css_float.asp.
CSS
#header #site_title_section {
float: left;
width: 300px;
margin-left: 30px;
text-align: center;
#site_title_section #site_title {
margin-top: 30px;
padding: 10px 0;
font-size: 40px;
color: #4379ab;
font-weight: bold;
}
#site_title_section #salogon {
font-size: 14px;
margin-left: 20px;
color: #333333;
}
Html
<div id="site_title_section">
<div id="site_title">
Professional
</div>
<div id="salogon">
New Media Company</div>
<div class="cleaner"> </div>
</div>
Could someone help me understand this
From the CSS codes "site_title_section" has appeared three times so when called in html codes which one would be executed?
First note there is a small error in your code:
#header #site_title_section {
float: left;
width: 300px;
margin-left: 30px;
text-align: center;
} /* <-- You forgot this */
Now to how CSS is read it goes like this:
[parent] [child1] [child of child1] ... { .. }
So for example think of it as going into the element in the HTML code. For example:
<div id="site_title_section"> <!-- #site_title_section part -->
<div id="site_title"> <!-- #site_title_section #site_title -->
Professional
</div>
<div id="salogon"> <!-- #site_title_section #salogon -->
New Media Company</div>
<div class="cleaner"> </div>
</div>
For #header #site_title_section, at least from the code that is shown. Even know we have #site_title_section inside. There is no parent with the id #header, so this does nothing. But supposed there was (you may have just forgot to paste it). Then it would effect the entire #site_title_section div.
Here is a fiddle with all your CSS affects (including an added header)
So, I'm trying to have two "halves" of the navigation thing under this title page thing, one floated left, the other right.
For some reason, They're not beside each other like they should be, unless I'm doing something wrong. Code is as follows:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Landing Mockup</title>
<link href="mockup.css" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="landing-container">
Hello. I'm Charles Baker.<br />
<span id="landing-codeblock">{ I design websites. }</span>
<div id="landing-links">
<div id="landing-links-left">
Small links here.
</div>
<div id="landing-links-right">
<ul>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
</ul>
</div>
</div>
<div id="clear"></div>
</div>
</body>
</html>
CSS:
body {
margin-top: 200px;
font-family: 'Roboto Slab', serif;
}
#landing-container {
width: 1000px;
margin: 0 auto;
font-weight: bold;
font-size: xx-large;
text-align: center;
}
#landing-codeblock {
font-family: 'Droid Sans Mono', monospace;
font-size: large;
}
#landing-links {
width: 700px;
margin: 0 auto;
border: 1px solid blue;
}
#landing-links-left {
border: 1px solid orange;
float: left;
text-align: left;
font-size: x-small;
width: 200px;
}
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right;
}
#landing-links ul {
border: 1px solid green;
list-style-type: none;
}
#landing-links ul li {
border: 1px solid red;
display: inline;
}
#landing-links li a {
display: inline-block;
padding: 5px;
}
#clear {
clear: both;
}
I've got borders temporarily so I can see where things are, but...yeah. I need to float them next to each other, I think I'm doing something entirely wrong. Any thoughts?
Behold! http://jsfiddle.net/QHeDZ/
I added display:inline-block to your .landing-links-left and .landing-links-right css and removed your floats. I think this is what you were trying to do? If not, let me know! I can fix it up.
You're getting a wedge of top (and bottom) margin as a browser default. If you inspect your unordered list in Chrome you'll see from the user agent style sheet:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
You can set the margins on your list to 0 to remove this default. Also, I would recommend having a look at http://necolas.github.io/normalize.css/ which provides a nice set of default rules for common elements, taking the pain away from these kind of issues.
Just add <div id="clear"></div> before closing this div <div id="landing-links">
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right; //modify this to left(so it could be next to the other container)
}
Hope this helped you!Cheers!
Technically they are on the same line, but margin and line-height values aren't being clearly defined for better aligning. Including the following properties:
#landing-links-left { line-height: 20px; }
#landing-links ul {
margin: 0;
line-height: 20px;
}
I have a square div (called "square") and trying to put another div ("caption") inside the "square". But the caption goes outside the square boundaries! How to cut its size to the exact boundaries of the parent div?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color: #000000;
}
a {
text-decoration: none;
color: #FFFFFF;
}
div.square {
background-color: #1BA1E2;
display: inline-block;
width: 44px;
height: 44px;
margin: 0 6px 0 9px;
}
div.caption {
display: inline-block;
margin: 15px 0 0 3px;
padding: 0;
color: #FFFFFF;
font-size: 24px;
}
span.description {
display: inline-block;
vertical-align: bottom;
font-size: 18px;
}
</style>
</head>
<body>
<p>
<a href="page">
<div class="square">
<div class="caption">
Caption
</div>
</div>
<span class="description">
Description
</span>
</a>
</p>
</body>
</html>
In this case, Caption should be cut to Cap+ 1/2t inside the blue box (something like WP7 style). And a description alongside.
Put overflow:hidden in the styles for div.square. This will cause the caption to cut off at the boundaries of the box.
Running example
Everything is OK in Chrome, FF and IE8. But in IE6 there's a strange margin right below the div "middle-column" (inside it there are 3 divs called featured1, 2 and 3.) which is above the divs "left-column" and "right-column"). I already tried everything to get rid of that problem. I tried the "display: inline technique" and CSS resets. Please Help! I'm testing my website here
MY HTML:
<body id="home">
<!-- header -->
<div id="header">
<div class="container">
<h1>wider design</h1>
<!-- navigation -->
<ul id="navigation">
<li class="home"><span>home</span></li>
<li class="portfolio"><span>portfolio</span></li>
<li class="about"><span>about</span></li>
<li class="contact"><span>contact</span></li>
</ul>
</div>
</div>
<div id="content">
<div id="top-column">
<p>We <strong>design and develop</strong> clean and effective webs in the <strong>top 3 languages</strong>
on the Internet. Internet is mean to reach the whole world.You are mean to reach the whole audience:</p>
</div>
<div id="middle-column">
<h2>Featured Projects</h2>
<div id="featured1">
<img alt="" src="images/project1.png"/>
<p>Featured work number 1</p>
</div>
<div id="featured2">
<img alt="" src="images/project2.png"/>
<p>Featured work number 2</p>
</div>
<div id="featured3">
<img alt="" src="images/project3.png"/>
<p>Featured work number 3</p>
</div>
</div>
<div id="left-column">
<h2>Web Design</h2>
<p>Create a web site easily with this online HTML generator. Follow the steps below to create web pages then click "view html page" to test it once it's completed. You can copy and paste generated code where you wish within the generated document(s). For example: You created an HTML table with 3 rows and 3 columns. You then added a link, which appears below the HTML table. If you want the link inside the HTML table, just cut and paste it inside the table in place of an "ADD TEXT" statement. Any where text,images,or links need to be, there will be a generated "ADD TEXT" statement in the HTML pages.</p>
</div>
<div id="right-column">
<h2>Web Translation</h2>
<p></p>
</div>
</div>
<div id="footer">
<div class="container">
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11932489-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>
MY CSS Reset:
/* reset */
* {
margin: 0;
padding: 0;
}
img {
border: none;
}
ul {
list-style: none;
}
/* tags */
body {
background-color: #FFFFFF;
color: #757575;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: 75%;
}
h1 {
background: url(../images/logo.png) no-repeat scroll 0 0;
margin-bottom: 20px;
text-indent: -9999px;
}
h2 {
color: #669BD9;
font-family: Arial;
font-size: 16px;
font-weight: normal;
margin-bottom: 10px;
}
a {
font-family: Arial, "MS Trebuchet", sans-serif;
}
/* classes */
.container {
margin: 0 auto;
width: 960px;
}
My CSS Structure:
#content {
background-color: #FFFFFF;
padding: 20px;
overflow: hidden;
margin: 0 auto;
width: 960px;
}
#content h2 {
border-top: 1px dashed #C0C0C0;
border-bottom: 1px dashed #C0C0C0;
padding: 2px 0 2px 0;
margin: 15px 0 15px 0;
}
#top-column {
color: #818181;
font-size: 16px;
font-family: Arial, "MS Trebuchet", sans-serif;
margin: 10px 0 10px 0;
padding: 10px 0 20px 0;
}
#top-column strong {
font-weight: normal;
color: #3C3C3C;
}
#middle-column div {
float: left;
height: 224px;
width: 320px;
}
#right-column {
float: left;
width: 420px;
}
#left-column {
float: right;
width: 500px;
}
#footer {
clear: both;
background-color: #F0F0F0;
height: 200px;
}
If you take a look at div id="slideshow", you'll see that it has margin:10px auto which is basically saying to apply a margin-top of 10px and a margin-bottom of 10px. IE6 tends to double margins so by applying margin:5px 0; it should display the same as it does in Firefox, IE8, IE7 and all other up to date browsers.
-- Also just for reference, the 'auto' style was not needed in this case, this is generally used if you are looking to make an element sit in the center of its parent. An example of this would be if you wanted a website to display in the center of your screen you would use 'margin:0 auto;'
I hope this solves your problem!