I am learning HTML and CSS and I produced this code regarding the float property.
body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
}
p {
width: 230px;
float: left;
margin: 5px;
padding: 5px;
background-color: #efefef;
}
<!DOCTYPE html>
<html>
<head>
<title>Using Float to Place Elements Side-by-Side</title>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<p id="one">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p>
<p id="two">The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed on the ground in a gliding movement.</p>
<p id="three">It was not seen a suitable for any place other than a well maintained pathway. </p>
<p id="four">In 1865, the velocipede (meaning "fast foot") attached pedals to the front wheel, but its wooden structure made it extremely uncomfortable. </p>
<p id="five">In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel.
<p id="six">Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
</body>
</html>
Now, my question is this -
Why does the fourth paragraph id="four" come under the third paragraph id="three" rather than moving to the left hand edge?
float: left; will use every bit of free space available to make sure no space is wasted. You can see this in your example. The 3rd column has free space below, so the 4th column places itself there.
I think you're looking for display: inline-block; with a vetical-align: top; instead of a float: left; for a nice result. See the example below.
body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
}
p {
width: 230px;
margin: 5px;
padding: 5px;
background-color: #efefef;
display: inline-block;
vertical-align: top;
}
<!DOCTYPE html>
<html>
<head>
<title>Using Float to Place Elements Side-by-Side</title>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<p id="one">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p>
<p id="two">The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed on the ground in a gliding movement.</p>
<p id="three">It was not seen a suitable for any place other than a well maintained pathway. </p>
<p id="four">In 1865, the velocipede (meaning "fast foot") attached pedals to the front wheel, but its wooden structure made it extremely uncomfortable. </p>
<p id="five">In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel.
<p id="six">Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
</body>
</html>
It's because you don't have the clear property specified. From MDN:
The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.
body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
}
p {
width: 230px;
float: left;
margin: 5px;
padding: 5px;
background-color: #efefef;
}
#four {
clear: left;
}
<!DOCTYPE html>
<html>
<head>
<title>Using Float to Place Elements Side-by-Side</title>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<p id="one">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p>
<p id="two">The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed on the ground in a gliding movement.</p>
<p id="three">It was not seen a suitable for any place other than a well maintained pathway. </p>
<p id="four">In 1865, the velocipede (meaning "fast foot") attached pedals to the front wheel, but its wooden structure made it extremely uncomfortable. </p>
<p id="five">In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel.
<p id="six">Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
</body>
</html>
Related
Once in a while, a novel (book, story, short story, etc.) will have a block of centered text to display something external from the main subject, either a sign that is being read, an abstract text, etc.
Would it be proper (semantically correct) to use the blockquote element in these cases? For example:
section {
width: 350px;
font: 14px/1.3em Charter, sans-serif;
text-align: justify;
}
p {
margin: 0;
}
section>p+p {
text-indent: 1.5em;
}
blockquote {
text-align: center;
}
<section>
<p>I stepped back as far as I could and bent to peer under the door. There was nobody there; the stall must have been locked from the inside.</p>
<p>Cursing, I lowered my face and saw a piece of wet paper lying on the floor in front of the stall. It must’ve been glued to the door and fallen off. It informed:</p>
<blockquote>
<p>Closed for maintenance.</p>
<p>Sorry for any inconvenience.</p>
</blockquote>
<p>I fixed my eyes on the space between the floor and the door. It wasn’t so small, maybe […]</p>
</section>
Good Evening,
I have tried and tried to position my text to the right of an image and when the browser is smaller then drops down underneath the image.
Can somebody tell me what I am doing wrong or not doing.
#bandmemberinfo-container {
width: 100%;
background-color: black;
height: auto;
margin-top: 10px;
border: 1px red solid;
color: #fff;
font-family: Arial;
font-size: 10px;
text-transform: uppercase;
}
.bandmemberinfo-container img {
height: 100%;
max-width: 350px;
float: left;
}
<div id="bandmemberinfo-container">
<!-- BAND MEMBER INFO CONTAINER START -->
<img src="http://slade40years.page4.com/nobby_439_752.jpg" class="img-responsive nobbyboulder" />
<p>THE 1970'S HOSTED ONE OF THE MOST FLAMBOYANT DECADES IN THE HISTORY OF POP MUSIC AND ARTISTS SUCH AS SWEET, DAVID BOWIE, WIZZARD, T-REX AND MUD CHAMPIONED THE "GLAM ROCK" MOVEMENT, WHERE PLATFORM BOOTS, SEQUINNED SHIRTS, TWO-TONE FLARED TROUSERS AND
OUTRAGEOUS MAKE-UP, BECAME THE NORM FOR MANY POP BANDS. THE MIGHTY SLADE LED THE GLAM MARCH ACROSS THE UK, INTO EUROPE AND THROUGHOUT THE WORLD. IT IS A PART OF POP HISTORY THAT HAS SHAPED MUSIC CULTURE MANY YEARS LATER AND SLYDE CONTINUE TO KEEP
THE EXCITING ATMOSPHERE OF GLAMROCK ALIVE. THEY ARE THE PERFECT CHOICE FOR ANY 70'S THEMED EVENT WITH AN IMPRESSIVE STAGE SHOW DURING WHICH THEY COVER MANY OF THE CLASSIC HITS OF THAT ERA SLYDE HAVE SUPPORTED ARTISTS SUCH AS THE RUBETTES, BAY CITY
ROLLERS, SMOKIE, BONEY M AND THE LATE ALVIN STARDUST. THEY ARE THE LONGEST RUNNING TRIBUTE TO THE MUSIC OF SLADE AND HAVE PERFORMED WITH THEM AT 70'S WEEKENDERS, UNDER THE NAME OF GLAMROCK UK.</p>
<!-- BAND MEMBER INFO CONTAINER END-->
</div>
You are using a class selector that is not in your HTML
Use:
#bandmemberinfo-container img {
height: 100%;
max-width: 350px;
float: left;
}
or add "bandmemberinfo-container" class not id (http://www.w3schools.com/css/css_syntax.asp ;)
You have two little mistakes:
1.) The selector for the image has to be #bandmemberinfo-container img instead of .bandmemberinfo-container img
2.) Its CSS settings should be like this:
#bandmemberinfo-container img {
width: 100%;
max-width: 350px;
float: left;
}
I.e. 100% width not height) for small screens (below 350px wide), but with a maximum of 350px - then the text will float right of it on larger screens (above 350px).
#bandmemberinfo-container {
width: 100%;
background-color: black;
height: auto;
margin-top: 10px;
border: 1px red solid;
color: #fff;
font-family: Arial;
font-size: 10px;
text-transform: uppercase;
}
#bandmemberinfo-container img {
width: 100%;
max-width: 350px;
float: left;
}
<div id="bandmemberinfo-container">
<!-- BAND MEMBER INFO CONTAINER START -->
<img src="http://slade40years.page4.com/nobby_439_752.jpg" class="img-responsive nobbyboulder" />
<p>THE 1970'S HOSTED ONE OF THE MOST FLAMBOYANT DECADES IN THE HISTORY OF POP MUSIC AND ARTISTS SUCH AS SWEET, DAVID BOWIE, WIZZARD, T-REX AND MUD CHAMPIONED THE "GLAM ROCK" MOVEMENT, WHERE PLATFORM BOOTS, SEQUINNED SHIRTS, TWO-TONE FLARED TROUSERS AND
OUTRAGEOUS MAKE-UP, BECAME THE NORM FOR MANY POP BANDS. THE MIGHTY SLADE LED THE GLAM MARCH ACROSS THE UK, INTO EUROPE AND THROUGHOUT THE WORLD. IT IS A PART OF POP HISTORY THAT HAS SHAPED MUSIC CULTURE MANY YEARS LATER AND SLYDE CONTINUE TO KEEP
THE EXCITING ATMOSPHERE OF GLAMROCK ALIVE. THEY ARE THE PERFECT CHOICE FOR ANY 70'S THEMED EVENT WITH AN IMPRESSIVE STAGE SHOW DURING WHICH THEY COVER MANY OF THE CLASSIC HITS OF THAT ERA SLYDE HAVE SUPPORTED ARTISTS SUCH AS THE RUBETTES, BAY CITY
ROLLERS, SMOKIE, BONEY M AND THE LATE ALVIN STARDUST. THEY ARE THE LONGEST RUNNING TRIBUTE TO THE MUSIC OF SLADE AND HAVE PERFORMED WITH THEM AT 70'S WEEKENDERS, UNDER THE NAME OF GLAMROCK UK.</p>
<!-- BAND MEMBER INFO CONTAINER END-->
</div>
I think for what your desired effect is. You can put the image inside the paragraph tag as the first item before the text starts, then the text will wrap around the image. You can then just add margin to the image to give it extra space between the image and text. And possibly use the image align-attribute
I have added another more heavy html element approach below, to show another method to control a layout. This is using floats and a more responsive approach.
I would also avoid using ID; use class as a rule of thumb. As it is just one less think to think about. And, if you don't care about legacy (IE) browsers then you could consider to use Flexbox. Which will help with different screens and wrapping of images.
.bandmemberinfo-container {
display: inline-flex;
width: 100%;
background-color: black;
height: auto;
margin-top: 1em;
border: 1px red solid;
color: #fff;
font-family: Arial;
font-size: 0.9em;
text-transform: uppercase;
}
.img_wrap {
float: left;
width: 50%;
border: 1px yellow dashed;
}
.img_wrap img {
height: auto;
max-width: 100%;
}
.two {
float: left;
width: 50%;
}
<div class="bandmemberinfo-container">
<div class='img_wrap'><img src="http://slade40years.page4.com/nobby_439_752.jpg" /></div>
<div class='two'>THE 1970'S HOSTED ONE OF THE MOST FLAMBOYANT DECADES IN THE HISTORY OF POP MUSIC AND ARTISTS SUCH AS SWEET, DAVID BOWIE, WIZZARD, T-REX AND MUD CHAMPIONED THE "GLAM ROCK" MOVEMENT, WHERE PLATFORM BOOTS, SEQUINNED SHIRTS, TWO-TONE FLARED TROUSERS AND
OUTRAGEOUS MAKE-UP, BECAME THE NORM FOR MANY POP BANDS. THE MIGHTY SLADE LED THE GLAM MARCH ACROSS THE UK, INTO EUROPE AND THROUGHOUT THE WORLD. IT IS A PART OF POP HISTORY THAT HAS SHAPED MUSIC CULTURE MANY YEARS LATER AND SLYDE CONTINUE TO KEEP
THE EXCITING ATMOSPHERE OF GLAMROCK ALIVE. THEY ARE THE PERFECT CHOICE FOR ANY 70'S THEMED EVENT WITH AN IMPRESSIVE STAGE SHOW DURING WHICH THEY COVER MANY OF THE CLASSIC HITS OF THAT ERA SLYDE HAVE SUPPORTED ARTISTS SUCH AS THE RUBETTES, BAY CITY
ROLLERS, SMOKIE, BONEY M AND THE LATE ALVIN STARDUST. THEY ARE THE LONGEST RUNNING TRIBUTE TO THE MUSIC OF SLADE AND HAVE PERFORMED WITH THEM AT 70'S WEEKENDERS, UNDER THE NAME OF GLAMROCK UK.</p></div>
<!-- BAND MEMBER INFO CONTAINER END-->
</div>
Currently I'm trying to design an index page.
I came across an issue of having two columns being the same height, furthurmore, there is always an extra space on the left, about 5~10px.
Problems:
Columns does not have the same height
Extra space on the left
Solutions I tried:
I tried to set height = 100%, or to a specific amount of px, however, the columns get seperate heights.
I've also tried to remove all the padding and margins, but the left side would always have an extra space, causing the body and the h1 header to "blend" together since they have the same background color.
Code: Jsfiddle
<!DOCTYPE html>
<html>
<head>
<title>Web Based Metrics</title>
<style type="text/css">
body {
width: 100%;
font-family: Arial, Verdana, sans-serif;
color: #665544;
background-color: #74AFAD}
.column1 {
float: left;
width: 21%;
padding: 0px 5px 5px 5px;
margin: 0px 5px 0px 0px;
background-color: #AACECD;
color: #D9853B;}
.column2 {
float: left;
width: 76%;
padding: 0px 0px 5px 5px;
background-color: #ECECEA;
color: #000000;}
h1 {
float:left
position: relative;
padding: 50px 0px 0px 5px;
margin: 0px 0px 0px 0px;
top: 0%;
right: 100%;
left: 0%;
width: 100%;
background-color: #74AFAD;
color: #ffffff;}
h2 {
float:left
position: relative;
padding: 15px 0px 0px 5px;
margin: 0px 0px 5px 0px;
top: 0%;
right: 100%;
left: 0%;
width: 100%;
background-color: #558C89;
color: #ffffff;}
h4 {
color: #ffffff;}
p {
position: relative;
bottom: 100%}
</style>
</head>
<body>
<h1>Web Based Metrics</h1>
<h2>Title 2!</h2>
<div class="column1">
<h4> something </h4>
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since its wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
<p>The front wheels became larger and larger as makers realized that the larger the wheel, the farther you could travel with one rotation of the pedals. For that reason, you would purchase a wheel as large as your leg length would allow. This machine was the first one to be called a bicycle ("two wheel"). These bicycles enjoyed a great popularity during the 1880s among young men of means. (They cost an average worker six month's pay.)</p>
<p>Because the rider sat so high above the center of gravity, if the front wheel was stopped by a stone or rut in the road, or the sudden emergence of a dog, the entire apparatus rotated forward on its front axle and the rider, with his legs trapped under the handlebars, was dropped unceremoniously on his head. Thus the term "taking a header" came into being.</p>
</div>
<div class="column2">
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since its wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
<p>The front wheels became larger and larger as makers realized that the larger the wheel, the farther you could travel with one rotation of the pedals. For that reason, you would purchase a wheel as large as your leg length would allow. This machine was the first one to be called a bicycle ("two wheel"). These bicycles enjoyed a great popularity during the 1880s among young men of means. (They cost an average worker six month's pay.)</p>
<p>Because the rider sat so high above the center of gravity, if the front wheel was stopped by a stone or rut in the road, or the sudden emergence of a dog, the entire apparatus rotated forward on its front axle and the rider, with his legs trapped under the handlebars, was dropped unceremoniously on his head. Thus the term "taking a header" came into being.</p>
</div>
</body>
</html>
Firstly:
body{
margin: 0px;
}
Will fix the margin on the ends.
Your columns will never be the same size given you have different amount of text and set different amount of width for both of them.
for deeper understanding see this http://jsfiddle.net/PhilippeVay/sFBGX/2/
simply display div as table cells.
container {display: table;}
child1{display: cell;}
child2 {display: cell;}
Here is solution
1. CSS
.container{
display: table;
table-layout: fixed;
}
body {
width: 100%;
font-family: Arial, Verdana, sans-serif;
color: #665544;
background-color: #74AFAD}
.col {
display: table-cell;
vertical-align: top;}
.column1 {
width: 21%;
padding: 0px 5px 5px 5px;
margin: 0px 5px 0px 0px;
background-color: #AACECD;
color: #D9853B;}
.column2 {
width: 76%;
padding: 0px 0px 5px 5px;
background-color: #ECECEA;
color: #000000;}
h1 {
float:left
position: relative;
padding: 50px 0px 0px 5px;
margin: 0px 0px 0px 0px;
top: 0%;
right: 100%;
left: 0%;
width: 100%;
background-color: #74AFAD;
color: #ffffff;}
h2 {
float:left
position: relative;
padding: 15px 0px 0px 5px;
margin: 0px 0px 5px 0px;
top: 0%;
right: 100%;
left: 0%;
width: 100%;
background-color: #558C89;
color: #ffffff;}
h4 {
color: #ffffff;}
p {
position: relative;
bottom: 100%}
2.HTML
<h1>Web Based Metrics</h1>
<h2>Title 2!</h2>
<div class="container">
<div class="column1 col">
<h4> something </h4>
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since its wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
<p>The front wheels became larger and larger as makers realized that the larger the wheel, the farther you could travel with one rotation of the pedals. For that reason, you would purchase a wheel as large as your leg length would allow. This machine was the first one to be called a bicycle ("two wheel"). These bicycles enjoyed a great popularity during the 1880s among young men of means. (They cost an average worker six month's pay.)</p>
<p>Because the rider sat so high above the center of gravity, if the front wheel was stopped by a stone or rut in the road, or the sudden emergence of a dog, the entire apparatus rotated forward on its front axle and the rider, with his legs trapped under the handlebars, was dropped unceremoniously on his head. Thus the term "taking a header" came into being.</p>
</div>
<div class="column2 col">
<p>In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster: two same-size in-line wheels, the front one steerable, mounted in a frame upon which you straddled. The device was propelled by pushing your feet against the ground, thus rolling yourself and the device forward in a sort of gliding walk.</p>
<p>The machine became known as the Draisienne (or "hobby horse"). It was made entirely of wood. This enjoyed a short lived popularity as a fad, not being practical for transportation in any other place than a well maintained pathway such as in a park or garden.</p>
<p>The next appearance of a two-wheeled riding machine was in 1865, when pedals were applied directly to the front wheel. This machine was known as the velocipede (meaning "fast foot") as well as the "bone shaker," since its wooden structure combined with the cobblestone roads of the day made for an extremely uncomfortable ride. They also became a fad and indoor riding academies, similar to roller rinks, could be found in large cities.</p>
<p>In 1870 the first all-metal machine appeared. (Prior to this, metallurgy was not advanced enough to provide metal which was strong enough to make small, light parts out of.) The pedals were attached directly to the front wheel with no freewheeling mechanism. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
<p>The front wheels became larger and larger as makers realized that the larger the wheel, the farther you could travel with one rotation of the pedals. For that reason, you would purchase a wheel as large as your leg length would allow. This machine was the first one to be called a bicycle ("two wheel"). These bicycles enjoyed a great popularity during the 1880s among young men of means. (They cost an average worker six month's pay.)</p>
<p>Because the rider sat so high above the center of gravity, if the front wheel was stopped by a stone or rut in the road, or the sudden emergence of a dog, the entire apparatus rotated forward on its front axle and the rider, with his legs trapped under the handlebars, was dropped unceremoniously on his head. Thus the term "taking a header" came into being.</p>
</div>
</div>
I have a rogue bit of code for a simple paragraph that for some reason does not shrink when viewed on mobile phones.
Font size is set at 14px, yet on a phone, it displays large while the rest of the site's text is reduced to fit.
Am i missing something? Here's the page http://www.dantecreative.com/Peter
Also, on phones there is a big gap on the right hand side when view on mobile and the footer and header don't cover from left to right like they do on desktop.
Here's the CSS in question-
#main #mainblack #petetext p {
color:#FFFFFF;
font-size:14px;
margin-left: 60px;
font-family:Verdana, sans-serif;
line-height: 21px;
}
and the HTML
<div id="petetext">
<h1>Why Peter? Why not!</h1>
<p>
Initially attracted here by a passion for mountain biking and skiing, Dave has grown to love Whistler for so much more – it’s incredible community of positive people who live life to the fullest. This community, coupled with Whistler’s beautiful mountains and natural environment, give this world-class resort an indescribable energy, rivaled by no other. Dave has combined this passion with knowledge, experience and effective communication and negotiating skills to become one of Whistler’s top producing agents.
</p>
<p class="blue">
....................................................................................................................................
</p>
Hope someone can help. As usual, i'm sure it's something simple.
body {
-webkit-text-size-adjust: 100%;
}
As Nick said you should not need that chain IDs. If what you want is to add some style to contained in id petetex, you just need in your css: #petetex p
You can check this on this jsfiddle file1. It works on mobile phones as well. Good luck!
#petetext p{
color:red;
font-size:16px;
margin-left: 60px;
font-family:Verdana, sans-serif;
line-height: 21px;
}
I've been researching, but I'm not sure how to look for what I want. I am in my first term of HTML and CSS. My page looks great on my 15 1/2 inch monitor... but when I move it to my 19 1/2 monitor, it adds another part of the background image to the right side, and stretches the menubar across the whole distance. What code am I looking for that will keep the page intact on a wider screen, perhaps adding colored (or blank) borders on each side? Thank you for your help.
Thank you to Brad and Fiddle for helping. The no-repeat helped the background, however, on the bigger monitor, my menubar wants to go clear across, and the .box and img.posit want to stick to the far left side. I'd rather they stay measured according to the background image.
thes style sheet:
body {font-family:Arial, Verdana, Garamond;
background-image: beach.jpg; background-repeat: no-repeat; background-position: center;}
a {text-decoration: none;
color: #FF4D10; font-size: 14pt;}
a:hover {background-color: white;}
.menu {position:center;
text-align: center;
width: 100%; margin: 0; text-decoration: none;}
.menuword {width: 10%; background-color: beach.jpg; font-weight: 500; text-decoration: none;}
.menuwordselect {width: 10%; font-weight: bolder; font-style: italic; text-decoration: none;}
.menupipe {width: 0%; font-weight: bolder;}
.box {width: 400px; margin-left: 25px; margin-top: 100px; border-radius: 7px; background-color: #ffff9c; padding: 10px; color: #303032;}
/* set styles for class named box to position the image */
img.posit {position: relative; left: 550px; top: -435px }
/* sets styles for class named posit to position the image */
I really appreciate your help :)
Brad... here is the code for the page...
<body background="beach.jpg">
<div style="text-align: center;">
<img src="Oahu banner.jpg" width="995" height="295">
<table class="menu">
<tr>
<td class="menuword">Waikiki</td>
<td class="menupipe">|</td>
<td class="menuword">North Shore</td>
<td class="menupipe">|</td>
<td class="menuword">Cultural and Historical</td>
<td class="menupipe">|</td>
<td class="menuword">Best Deal Ever</td>
<td class="menupipe">|</td>
<td class="menuword">More Info</td>
<td class="menupipe">|</td>
<td class="menuword">Site Map</td>
</tr>
</table>
</div>
<div>
<p class="box">Oahu known as "The Gathering Place", is the third largest of the Hawaiian Islands and home to more than 950,000 people, almost 75% of the U.S. state of Hawaii's population. The state capital, Honolulu, is on Oahu's southeast coast. In the greatest dimension, this volcanic island is 44 miles (71 km) long and 30 miles (48 km) across. The length of the shoreline is 227 miles (365 km). The island is the result of two separate shield volcanoes: Wai'anae and Ko'olau, with a broad "valley" or saddle, the Oahu Plain between them. The highest point is Mt. Ka'ala in the Wai'anae Range, rising to 4,003 feet (1,220 m) above sea level.
<br><br>
But there is more to Oahu than just height and width. Honolulu, the state's capital, not only displays an impressive skyline of highrises, but also the beautiful beach of Waikiki, where Duke Kahanamoku "the father of surfing" developed his surfing and swimming skills.
<br><br>Across the pineapple fields at the middle of the island, the North Shore is home to modern day world renown surfing competitions, prolific fruit plantations and a quiet, rural lifestyle for many residents.
<br><br>The cultural heritage of the native peoples is richly preserved in many world class museums, libraries and attractions. Pearl Harbor as an important piece of our American history is a must see stop for all visitors.
<br><br>There is something for everyone on this beautiful tropical island. Come vist and Hang Loose in Oahu!</p>
<img class="posit" src="waterfallbig.jpg" width="513" height="386" alt="Waterfall" />
</div>
</body>
You need background-repeat: no-repeat since background images by default repeat both vertically and horizontally.
For the second part of your question, it sounds like you want background-position: center. This will center the image both vertically and horizontally, leaving space around the image. Optionally, you can set the background-color to whatever you want.
CSS
background: url("http://placehold.it/300x18") no-repeat center (whatever color you want);
JSFiddle
You may also try this, it would position the whole page in centre, irrelevant to size of screen
*{
margin:1px auto;
}