I'm having great difficulty trying to make my website not move when seen in different screen. It appears more messed up on mobile screen then on computer screen. Here is my code.
<html>
<head>
<style>
#logo img {
width: 120px;
margin-top: 20px;
margin-left:350px;
}
#footer img {
width: 450px;
margin-top: 20px;
margin-left:250px;
}
#girl img {
width: 450px;
margin-top: 20px;
margin-left:200px;
}
#follow_us img {
width: 250px;
margin-top: 20px;
margin-left:300px;
}
img.NICE {
position: absolute;
left: 200px;
top: 0px;
z-index: -1;
}
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
margin:0;
padding:0;
border-width:0;
}
body {
-epub-hyphens:auto;
}
div.Basic-Text-Frame {
border-style:solid;
}
p.Basic-Paragraph {
color:#000000;
font-family:"Minion Pro", serif;
font-size:12px;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.2;
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
orphans:1;
page-break-after:auto;
page-break-before:auto;
text-align:left;
text-decoration:none;
text-indent:0;
text-transform:none;
widows:1;
}
p.ParaOverride-1 {
text-align:justify;
text-align-last:center;
}
span.CharOverride-1 {
color:#525358;
font-family:Raleway, sans-serif;
font-size:16px;
font-style:normal;
font-weight:200;
}
span.CharOverride-2 {
font-family:Raleway, sans-serif;
font-size:16px;
font-style:normal;
font-weight:200;
}
span.CharOverride-3 {
color:#98c3d0;
font-family:Raleway, sans-serif;
font-size:16px;
font-style:normal;
font-weight:200;
}
span.CharOverride-4 {
color:#f9a05d;
font-family:Raleway, sans-serif;
font-size:16px;
font-style:normal;
font-weight:200;
}
span.CharOverride-5 {
color:#31373c;
font-family:Raleway, sans-serif;
font-size:8px;
font-style:normal;
font-weight:normal;
}
span.CharOverride-6 {
font-family:Raleway, sans-serif;
font-size:8px;
font-style:normal;
font-weight:normal;
}
span.CharOverride-7 {
color:#525358;
font-family:Raleway, sans-serif;
font-size:9px;
font-style:normal;
font-weight:600;
}
a.button {
background: url(http://i.imgur.com/tnWFc1M.png) 1px 5px no-repeat;
background-size: 100px 20px;
border: none;
color: white;
padding: 25px 35px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 6px;
margin: 9px 300px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
a.button1 {
background: url(http://i.imgur.com/Dh3VnPe.png) 2px 6px no-repeat;
background-size: 101px 22px;
border: none;
color: white;
padding: 25px 40px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 6px;
margin: -65px 400px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
</style>
</head>
<div id="logo_info">
<p id="logo"><img src="http://i.imgur.com/aukUVxR.png" alt="Bethan Rainforth a comedic dancer">
</p>
</div>
<body id="TEXT" lang="en-US">
<div id="_idContainer000" class="Basic-Text-Frame">
<div id="header">
<hr>
</div>
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-1">our</span><span class="CharOverride-2"> </span><span class="CharOverride-3">name</span><span class="CharOverride-2"> </span><span class="CharOverride-1">is our</span><span class="CharOverride-2"> </span><span class="CharOverride-4">mission</span></p>
</div>
<div id="_idContainer001" class="Basic-Text-Frame">
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-5">We are a non-profit organization, founded by a medical doctor and eye surgeon. </span></p>
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-5">Our mission is to help people access vision care more effectively and conveniently. </span></p>
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-5">We prioritize low-income children and members of underserved communities by </span></p>
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-5">delivering eyecare for free to pre-schools, after-school programs, community centers </span></p>
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-5">and events. We also extend our services to individuals who are able to pay for </span></p>
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-5">exceptional eyecare delivered with the ease and convenience of services like Uber </span></p>
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-5">and Lyft. We will come to you and provide unprecedented levels of access to doctors. </span></p>
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-5">Being a non-profit organization, money collected helps us increase awareness of health </span></p>
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-5">and education and provide free services to those who otherwise cannot afford it. </span><span class="CharOverride-6"> </span></p>
<p class="Basic-Paragraph ParaOverride-1"><span class="CharOverride-7">To schedule an exam, please select from the following:</span></p>
</div>
<div id="buttonsz">
Go to WillGrant
Go to WillGrant
</div>
<hr>
<div id="header">
<p id="girl"> <img src="http://i.imgur.com/ac4JwDA.png" alt="Bethan Rainforth a comedic dancer">
<p id="girl"> <img src="http://i.imgur.com/FXF5Ysh.png" alt="Bethan Rainforth a comedic dancer">
</p>
<p id="follow_us"> <img src="http://i.imgur.com/ZU53otY.png" alt="Bethan Rainforth a comedic dancer">
</p>
</div>
</body>
</html>
Here's an expected output.
What you are asking doesn't have a simple answer. Responsive design is what you are asking for. A couple of quick suggestions to assist with different screen sizes is using percentages instead of px, and using max-width and max-height. Google responsive design and you'll find plenty of resources to help with your problem.
Well, yea. For example:
#logo img {
width: 120px;
margin-top: 20px;
margin-left:350px;
}
You probably did this on your screen and it looks ok. But once you move to a bigger/smaller screen, those 120px might mean something completely different. You have two options: 1) use media queries and try to cover as much screen resolutions as you can. 2) use some framework that has this almost resolved.
Option 1 will take quite some work. Option 2 will be easier, but you still will need to learn the framework. I recommend Bootstrap: http://getbootstrap.com/
On a side not, it would help to use percentages (%) instead of pixels. No guarantee it will look nice, but it will be less of a mess than with pixels.
Related
It's been about 5 years since my intro to website design class and I just wanted to add a clickable image below my nav float left and when I added it, it took up the css properties of the nav left div since it was inside the div. So i put it in its own div and when i cleared both on it to bring it below the nav for some reason it seems connected to the sidebar div and it gets cleared too and is at the same height as the image for some reason and i don't know how to fix it. I have researched floating with css and can't seem to find my solution.
Thank you
image of the website issue => website
Below is the HTML for the complete page but the issues lies within the div newtab & div sidebar
<!DOCTYPE html>
<html lang="en">
<head>
<title>Battle Ready</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="battlefield.css">
<link href="images/favicon.ico" rel="icon" type="image/x-icon"/>
</head>
<body>
<!--The fonts I used were verdana for the body and sidebar and table
headings, Agnes for the main titles under the banner, and BankGothic
Md BT for the navigation.-->
<script type="text/javascript">
<!--
alert("Welcome to BattleReady.com! This page is to inform you about
each of the playable kits on the videogame Battlefield 3 and how to
effectively use them. If you do not have the game, you should
definitely try it out!");
// -->
</script>
<div id="container">
<div id="header">
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Assault</li>
<li>Engineer</li>
<li>Support</li>
<li>Recon</li>
</ul>
</div>
<div id="newtab"
style="clear:both;">
<a href="images/BF3.jpg" target="_blank"><img
src="images/BF3_thumb.png" width="101" height="128" alt="Battlefield 3
Game Cover" style="width:101px;height:128px;border:0px;"></a>
</div>
<div id="sidebar">
<h3>Upcoming Events</h3>
<p class="events">With purchasing Battlefield Premium© you get
early access to future DLC. Coming out soon is DICE's new
expansion pack "After Math" which comes out December 4th.
For more information about Premium© and other upcoming
expansion packs, visit
<a href="http://battlelog.battlefield.com/bf3/premium/"
target="blank">Premium</a>.</p>
<h3>Social</h3>
<p class="events">• Dice's Battlefield 3 Twitter
will provide you more information
about any upcoming changes to the game.</p>
<p class="events">• Dice's Battlefield 3 <a
href="https://www.facebook.com/battlefield"
target="_blank">Facebook</a> will showcase community videos
and provide trailers and more information about the game.</p>
</div>
<div id="center">
<h2>What is Battle Ready?</h2>
<p>DICE's Battlefield 3 was released October 25, 2011. Heralded as
"The Call of Duty Killer" Battlefield 3 has lived up to the hype.
Whether you were
there at the midnight release of the game or you are about to
purchase it today the level of being ready for the battlefield is
determined by the skill of the player. This website will develop
your skills and help you to be battle ready when you go boots down
on the battlefield for the first time.</p>
<hr>
<h3>Battlefield 3: Why is it Special?</h3>
<p>So you may be asking yourself, "What makes Battlefield 3
different from any other generic FPS on the market?" and there are a
plethora of reasons of why Battlefield 3 is one of the best FPS's
on the market today. The answer to the question is simply four
things that Battlefield 3 has that other games don't have:</p>
<ul>
<li>Colossal-sized maps</li>
<li>Realistic destruction</li>
<li>All-terrain vehicle play</li>
<li>The game itself centers around teamwork</li>
</ul>
<p> The colossal size of the maps that the player gets to play on
for a variety of game modes
helps the player to be completely emerged in the battle and
helps give them the battlefield experience that cannot be obtained on
any other game. Destruction is it's finest on the game with
DICE's new game engine Frostbite 2.0 that will make you wonder
if you are still on a game or if it has become reality. The
variety of vehicles that the player gets to choose to from to operate
are jets, tanks, jeeps, and boats.</p>
<hr>
<h3>Battlefield 3 Expansion Packs</h3>
<p>Battlefield 3 will have a total of five multiplayer expansion
packs that will further enhance your multiplayer experience.
The first three expansion packs (Back to Karkand, Close Quarters,
and Armored Kill) have already been released leaving two more
for you to wait on in anticipation. With each expansion pack the
player gets not only maps, but also new weapons, vehicles, and
unique assignments that will reward the player with new weapon skins
as well as unlockable dog tags.</p>
<div id="gallery">
<ul>
<li><a href="images/BacktoKarkand1.jpg"
target="_blank"><img src="images/BacktoKarkand_thumb.png" width="128"
height="71"
alt="Back to Karkand thumb"><span><img
src="images/BacktoKarkand.jpg" width="500" height="265" alt="Back to
Karkand">
<br>Back to Karkand Expansion Pack</span></a></li>
<li><a href="images/Close_Quarters1.jpg" target="_blank">
<img src="images/close_quarters_thumb.png" width="128" height="76"
alt="Close Quarters thumb"><span><img
src="images/close_quarters.jpg" width="500" height="265" alt="Close
Quarters">
<br>Close Quarters Expansion Pack</span></a></li>
<li><a href="images/Armored_Kill1.jpg" target="_blank">
<img src="images/Armored_Kill_thumb.png" width="128" height="76"
alt="Armored Kill thumb"><span><img
src="images/Armored_Kill.jpg" width="500" height="265" alt="Armored
Kill">
<br>Armored Kill Expansion Pack</span></a></li>
<li><a href="images/Aftermath1.jpg" target="_blank"><img
src="images/Aftermath_thumb.png" width="128" height="76"
alt="Aftermath thumb">
<span><img src="images/Aftermath.jpg" width="500"
height="265" alt="Aftermath"><br>Aftermath Expansion Pack</span></a>
</li>
<li><a href="images/End_Game1.jpg" target="_blank"><img
src="images/End_Game_thumb.png" width="128" height="76" alt="End Game
thumb"><span>
<img src="images/End_Game.jpg" width="500" height="265"
alt="End Game"><br>End Game Expansion Pack</span></a></li>
</ul>
</div>
<div id="footer"> Copyright © 2012 Battle Ready<br>
Contact Us
</div>
</div>
</div>
</body>
</html>
CSS for Page:
/*I chose the color scheme of orange, blue, grey, and white as I
obtained those colors from the Battlefield 3 game cover. I chose
orange as the headers, blue as links visited and grey as the
backgrounds with white and black being the text color.*/
body { margin:0;
background-color: #000; }
#container { background-color: #444;
color: #fff;
min-width: 960px;
font-family: Verdana, Arial, sans-serif;
width:80%;
margin-left:auto;
margin-right:auto;
}
#header {border-bottom: 2px solid #000000;
height: 120px;
background-image: url(images/banner2.jpg);
background-position: bottom;
background-repeat:no-repeat;
padding: 0 20px; }
#nav { float: left;
width: 150px;}
#newtab {float:left;
width:101px;
}
#sidebar{ float: right;
clear:right;
width: 210px;
background-image: url(images/background.png);
background-position:bottom;
background-repeat:repeat;}
#sidebar a{ text-decoration:none;}
#sidebar a:link { color:#F63;}
#sidebar a:visited { color:#F03;}
#sidebar a:focus, #sidebar a:hover { color:#FF0;}
#sidebar a:active { color:#039;}
#center { margin: 0 210px 0 160px;
padding: 1px 10px 20px 10px;
background-color: #CCC;
color: #000; }
#footer { font-size: .70em;
text-align: center;
color: #f63;
background-color: #CCC;
padding-top: 10px;
clear: both;}
#footer a:link { color:#F63;}
#footer a:visited { color: #039; }
#footer a:focus, #footer a:hover { color: #FF0; }
#footer a:active { color: #F03;}
h1 { margin-top: 0;
font-size: 3em;
text-align: left;
text-shadow: 2px 2px 2px #000000;}
#nav ul { font-family: "BankGothic Md BT", arial, sans-serif;
margin-top: 20px;
list-style-type: none;
}
#nav a { text-decoration: none;
font-size: 1.2em;
border:1px solid #000;
padding:20px;
width:70px;
display:block;
background-color:#CCC;
margin-right:30px;
margin-left:-20px;
}
#nav a:link { color:#F63;}
#nav a:visited { color: #F03; }
#nav a:focus, #nav a:hover { color: #F63;
background-color:blue; }
#nav a:active { color: #093;}
#center p { margin: 20px; }
#center h2, #center h3 { font-family: "Imprint MT Shadow", Arial,
sans-serif;
color: #f63;
background-color: #CCC; }
#floatright { margin: 10px;
float: right; }
#sidebar h3 { padding-bottom: 2px;
margin: 10px;
font-size: .90em;
color: #039;
background-color: #CCC;
text-align:center;}
.events { font-size: .80em;
margin: 10px; }
#gallery {position:relative;}
#gallery ul {width:300px;
list-style-type:none;}
#gallery li {display:inline;
float:left;
padding:10px;}
#gallery img {border-style:none;
float:none;}
#gallery a {text-decoration:none;
color:#F63;
font-style:italic;}
#gallery span {display:none;}
#gallery a:hover span {display:block;
position:absolute;
top:10px;
left:340px;
text-align:center;}
#movie {text-align:center;}
table {width:75%;
margin:auto;
border-collapse:collapse;
border:outset 1px yellow;
color:#000;}
Caption {font-size:1.5em;
font-weight:bold;
color:#f63;}
th,td {border: 2px solid #039;}
thead {Background-color:#f63;
color:#fff;}
tbody td {vertical-align:top;
padding-left:5px;
padding-top:5px;}
tbody tr {background-color:#999;}
#title {text-align:center;}
I have looked at other examples here, but seem to work. I have a small amount of text and an image aligned left inside a blue div. As the page gets narrower the text sizes down properly in the div, but the image remains in the top left of the div. I would like it to stay in the vertical center of the div. It can get larger or stay the same size, I just need it to move to center.
JSfiddle
body, h4 {
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:13px;
color:#333333;
}
* {
padding:0px;
}
.warning {
line-height:1.5em;
font-size:16px;
color:#0c203d;
padding-left:60px;
}
.blueBox {
background-color:#D4DDF7;
min-height:50px;
max-height:150px;
padding:0;
text-align: left;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.icon {
padding:0;
display:table-cell;
vertical-align: middle;
float:left;
}
#media only screen and (min-width : 735px) and (max-width:1400px) {
.warning {
font-size:16px;
padding-top:14px;
}
#media only screen and (min-width : 321px) and (max-width:734px) {
.warning {
font-size:13px;
padding-top:1px;
}
}
#media only screen and (min-width : 200px) and (max-width:320px) {
.warning {
font-size:12px;
padding-top:1px;
}
}
<div>
<div id="ctl00_ContentPlaceHolder1_countyText">
<p class="text">To find road conditions use the County selection box or simply click on a County on the searchable map. To view ALL Counties at once, Choose ALL COUNTIES from the dropdown, and click Go.
<br />Map is not visible on small screens.</p>
<div class="blueBox">
<img class="icon" src="https://placeimg.com/50/50/arch/grayscale" alt="Arrow Icon" width="50px" height="50px" />
<h4 class="warning">THIS VIEW DOES NOT CONTAIN STORM RELATED EMERGENCY ROAD CONDITIONS.</h4>
</div>
<!-- End blueBox -->
<p>To view our progress on STORM Related closings, Visit our Work Plan and Current Closures site.</p>
<p><span id="ctl00_ContentPlaceHolder1_lblMessageCty" class="bText rText">See Results Below</span>
</p>
</div>
</div>
<br/>
<br/>
I guess this is what you are looking for:
You must specify display:inline-table to your .icon and .warning class. Also as you have image so you must not directly apply vertically-align:middle;, better if you wrap it around div/span.
Working : Fiddle
body,
h4 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #333333;
}
* {
padding: 0px;
}
.warning {
display: table-cell;
font-size: 16px;
color: #0c203d;
padding-left: 60px;
vertical-align: middle;
}
.blueBox {
background-color: #D4DDF7;
min-height: 50px;
max-height: 150px;
padding: 0;
text-align: left;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
display: table;
}
.icon {
display: table-cell;
vertical-align: middle;
}
#media only screen and (min-width: 735px) and (max-width: 1400px) {
.warning {
font-size: 16px;
}
#media only screen and (min-width: 321px) and (max-width: 734px) {
.warning {
font-size: 13px;
}
}
#media only screen and (min-width: 200px) and (max-width: 320px) {
.warning {
font-size: 12px;
}
}
<body>
<div>
<div id="ctl00_ContentPlaceHolder1_countyText">
<p class="text">To find road conditions use the County selection box or simply click on a County on the searchable map. To view ALL Counties at once, Choose ALL COUNTIES from the dropdown, and click Go.
<br />Map is not visible on small screens.</p>
<div class="blueBox"> <span class="icon"><img src="https://placeimg.com/50/50/arch/grayscale" alt="Arrow Icon" width="50px" height="50px" /></span>
<h4 class="warning">THIS VIEW DOES NOT CONTAIN STORM RELATED EMERGENCY ROAD CONDITIONS.</h4>
</div>
<!-- End blueBox -->
<p>To view our progress on STORM Related closings, Visit our Work Plan and Current Closures site.</p>
<p><span id="ctl00_ContentPlaceHolder1_lblMessageCty" class="bText rText">See Results Below</span>
</p>
</div>
</div>
<br/>
<br/>
</body>
Remove the float from the .icon element and margin-left: auto and margin-right: auto. Put the below code in whichever breakpoint you'd like to see this behavior.
.icon {
float: none !important;
margin: 0 auto;
}
Your #media queries have some issues, so I've edited them in this example.
body,h4 {
font-family:Gotham,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:13px;
color:#333;
}
* {
padding:0;
}
.warning {
line-height:1.5em;
font-size:16px;
color:#0c203d;
padding-left:60px;
}
.blueBox {
background-color:#D4DDF7;
min-height:50px;
max-height:150px;
padding:0;
text-align:left;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.icon {
padding:0;
display:table-cell;
vertical-align:middle;
float:left;
}
#media screen and (max-width: 480px) {
.icon {
float: none !important;
margin: 0 auto;
}
<body>
<div>
<div id="ctl00_ContentPlaceHolder1_countyText">
<p class="text">To find road conditions use the County selection box or simply click on a County on the searchable map. To view ALL Counties at once, Choose ALL COUNTIES from the dropdown, and click Go.
<br />Map is not visible on small screens.</p>
<div class="blueBox">
<img class="icon" src="https://placeimg.com/50/50/arch/grayscale" alt="Arrow Icon" width="50px" height="50px" />
<h4 class="warning">THIS VIEW DOES NOT CONTAIN STORM RELATED EMERGENCY ROAD CONDITIONS.</h4>
</div>
<!-- End blueBox -->
<p>To view our progress on STORM Related closings, Visit our Work Plan and Current Closures site.</p>
<p><span id="ctl00_ContentPlaceHolder1_lblMessageCty" class="bText rText">See Results Below</span>
</p>
</div>
</div>
<br/>
<br/>
</body>
When using media queries at specified breakpoints, you're typically safe to use display: table on a parent and display: table-cell; vertical-align: middle; on the children in order to vertically align their contents.
In the snippet below, I have removed most of your HTML to better outline the elements to which the CSS actually applies. This should help anyone else who happens to land on this question. Also, I replaced the img tag since an arrow in this case is not semantic content and it made things easier to style.
body { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* ------------------ Start Important Part ------------------ */
.warning {
display: table; /* Set container as table */
width: 100%;
background-color: #D4DDF7;
}
.warning > * {
display: table-cell; /* Set children as table-cell */
padding: 15px;
vertical-align: middle; /* Vertically center children */
}
/* ------------------- End Important Part ------------------- */
/* Icon */
.warning > .icon { width: 50px; }
.warning > .icon::after {
content: "";
display: inline-block;
background: url("https://placeimg.com/50/50/arch/grayscale");
width: 50px;
height: 50px;
}
/* Warning text */
.warning > p {
line-height: 1.5em;
font-size: 16px;
color: #0c203d;
font-weight: bold;
}
<div class="warning">
<span class="icon"></span>
<p>THIS VIEW DOES NOT CONTAIN STORM RELATED EMERGENCY ROAD CONDITIONS.</p>
</div>
I'm trying to keep the same styles (summary-description and summary-headline). I would want the divs that include Apple, Banana and Carrot text to all be centered.
I would want to keep the Watermelon text to be aligned left.
How would I accomplish this?
Check out my jsfiddle: http://jsfiddle.net/p28Qz/12/
<div id="wrapper-threecol">
<div id="threecol_row">
<div class="threecol_cell1">
<p class="summary-headline">Apple</p>
<p class="summary-description">Apple designs and creates iPod and iTunes, Mac laptop and desktop computers, the OS X operating system, and the revolutionary iPhone and iPad</p>
</div>
<div class="threecol_cell2">
<p class="summary-headline">Banana</p>
<p class="summary-description">Apple designs and creates iPod and iTunes, Mac laptop and desktop computers, the OS X operating system, and the revolutionary iPhone and iPad</p>
</div>
<div class="threecol_cell3">
<p class="summary-headline">Carrot</p>
<p class="summary-description">Apple designs and creates iPod and iTunes, Mac laptop and desktop computers, the OS X operating system, and the revolutionary iPhone and iPad</p>
</div>
</div>
</div>
<div class="wrapper-data">
<div class="data_row">
<div class="data_cell1_lt">
<p class="summary-headline">Watermelon</p>
<p class="summary-description">We here at the National Watermelon Promotion Board have one goal: to increase consumer demand for fresh watermelon through promotion.</p>
</div>
<div class="data_cell2_lt"> </div>
<div class="data_cell3_lt"><img alt="New Search Field" height="273" src="http://www.juicing-for-health.com/wp-content/uploads/2012/06/watermelon.jpg" width="420" /></div>
</div>
</div>
#wrapper-threecol {
position:relative;
width:100%;
border: none;
margin: 20px 0 37px 0;
}
#threecol_row {
height:100%;
white-space:nowrap;
}
.threecol_cell1, .threecol_cell2, .threecol_cell3 {
height:100%;
width:30%;
display:inline-block;
white-space:normal;
vertical-align: top;
margin-left: 5%;
}
.threecol_cell1{
margin-left: 0;
}
.summary-headline {
color: #232323;
font-family: Helvetica, Arial, sans-serif;
font-size: 20px;
line-height: 24px;
margin:0 0 10px 0;
text-align: left;
}
.summary-description {
color: #232323;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 23px;
margin: 0;
text-align: left;
}
.wrapper-data {
position:relative;
width:100%;
border: none;
margin: 40px 0 0 0;
overflow: hidden;
}
.data_row {
height:100%;
min-height:100%;
white-space:nowrap;
display:table;
width: 100%;
}
/* Landing Data - Left Content */
.data_cell1_lt {
width:47%;
white-space:normal;
display:table-cell;
vertical-align:middle;
}
.data_cell2_lt {
width:6%;
display:table-cell;
white-space:normal;
}
.data_cell3_lt {
width:47%;
display:table-cell;
white-space:normal;
}
.data_cell3_lt img {
display:block;
margin:0 auto;
}
.data_cell3_lt p {
text-align:center;
}
You're missing a definition for rtecenter:
.rtecenter {text-align: center;}
Then make sure to add it to your first block as well:
<p class="summary-headline rtecenter">Apple</p>
In order to have the all the p selectors centered except the one containing watermelon information, which you want left aligned, you have to have a special identifier for the watermelon paragraphs. Add id="watermelon" to <p class="summary-headline">Watermelon</p> and <p class="summary-description">.Then change the CSS to p:not(#watermelon)
{
text-align:center;
}
This will select all p that do not have the id of watermelon and center the text. Since you have .summary-headline and .summary-description as text-align:left, the watermelon will remain left-aligned, while everything else will become centered.
Im trying to wrap text around a div that has an image and some text on the bottom of it. I cannot seem to get the text wrapped.
html:
<div id="department-article-bottom" class="department-article">
<div id="article-photo">
<img src="includes/resources/images/DrNoemiBalogh.jpg" class='reverse alignleft' width="200" height="200" alt="Dr. Noemi Balogh, Attending, Anesthesiology">
<span id="photo-text"> Sunune Sayananondh, RN, and Juan Reyes, Special Procedure Technician, preparing patient for cardiac catheterization procedure</span>
</div>
<p>In the outpatient area, Bronx-Lebanon’s Cardiology practices are seeing more than 15,000 visits annually, providing comprehensive services in coordination with primary care and referring community physicians. Additionally, its Echocardiography and Nuclear Stress Testing Laboratories performed 10,000 echocardiograms (heart ultrasounds) and 3,000 stress tests in 2012. These facilities are internationally recognized for their high quality care.</P>
</div>
CSS:
.department-article {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style:normal;
color:#333;
width: 462px;
}
#article-photo {
clear:both;
width: 200px;
height: 200px;
padding-bottom: 5px;
margin-bottom:20px;
display:inline-block;
}
#photo-text {
font-family: "ff-din-web", Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
color:#155085;
padding:5px;
width:180px;
}
Everything is working fine on my default resolution; however, when I run my website on another resolution everything goes to the right instead of center. Why is this? I have tried setting the overflow to 0%.
Here is the HTML file:
<html>
<head>
<script type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"/>
<body>
<div id="banner">
<h2 id="bannertext"> Websites4u </h2>
</div>
<div id="buttonbar">
<a id="homeb" href="webpageone.html">Home</a>
<a id="aboutb" href="fake.html">About</a>
<a id="contactb" href="webpage2.html">Contact Us!</a>
</div>
<div id="mainbody">
<p id="radio">
3gb: <input type="radio" name="age" value ="<3gb"> <br> <br>
4gb: <input type="radio" name="age" value ="4gb"> <br> <br>
8gb: <input type="radio" name="age" value ="8gb"> <br> <br>
16gb: <input type="radio" name="age" value ="16gb"> <br>
</p>
<h4 id="bodytext"> Please Select Your Hardware </h4>
<h3 id="Ram"> Ram </h3>
</div>
</body>
</html>
Here is the CSS:
*{
margin:0;
padding:0;
}
h1 {
color:blue;
}
body{
width:1280px;
height:720px;
background-image:url("background colour.jpg");
overflow:hidden;
}
#banner{
position: relative;
height: 50px;
width: 148%;
border: medium solid BFBDBA;
background-color:F1C43E;
margin:0 auto;
}
#bannertext{
color:white;
text-align:center;
font-family:Comic Sans MS, cursive, sans-serif;
margin:0 auto;
}
#buttonbar {
position: relative;
height: 30px;
width: 148% ;
border: medium solid BFBDBA;
background-color:lightgrey;
color:white;
margin:0 auto;
font-family:Comic Sans MS, cursive, sans-serif;
font-style:bold;
}
#homeb {
position: relative;
left: 450px;
}
#aboutb{
position: relative;
left: 500px;
}
#contactb{
position: relative;
left: 550px;
}
a {
color: white;
font-weight:bold;
}
a:hover {
COLOR: orange;
font-weight:bold;
}
#bodytext{
position: relative;
top:50px;
left:50px;
color:red;
font-size:35px;
margin:0 auto;
font-family:Comic Sans MS, cursive, sans-serif;
}
#mainbody{
position: relative;
background-color: white;
height: 1000px;
width: 80%;
left: 30%;
top: 5px;
border:medium solid F1C43E;
}
#radio{
position: absolute;
top: 240px;
left:100px;
font-size: 18px;
margin:0 auto;
}
#Ram{
position: absolute;
top: 176px;
left: 100px;
font-size: 30px;
color: Green;
margin:0 auto;
font-family:Comic Sans MS, cursive, sans-serif;
}
Hard to fix all your issues quickly. Your basic mistake is that you have absolute values for every item.
For instance:
body{
width:1280px;
height:720px;
background-image:url("background colour.jpg");
overflow:hidden;
}
Because of width specified there, your content will always have width of 1280px when you open it on a screen with smaller width it will be still rendered with width of 1280px and because of overflow:hidden you will see it simply like it is shifted to the right side. When you do something with computer it will do not what you WANT, but what you ask it to do. And overflow:hidden simply hide everything outside of visible area, not center content like you want.
For #buttonbar:
#buttonbar {
position: relative;
height: 30px;
width: 148% ;
border: medium solid BFBDBA;
background-color:lightgrey;
color:white;
margin:0 auto;
font-family:Comic Sans MS, cursive, sans-serif;
font-style:bold;
}
- even have no idea why do you need width:148% here. Buttons inside it are centered with absolute positions:
#homeb {
position: relative;
left: 450px;
}
left:450px strictly says to browser: hey, put this #homeb on the 450th px inside its parent block. And browser will do it like that and will not shift it to little more left because you want it to be centered.
You may tell him to place all buttons in center:
#buttonbar {
height: 30px;
text-align:center;
border: medium solid BFBDBA;
background-color:lightgrey;
color:white;
margin:0 auto;
font-family:Comic Sans MS, cursive, sans-serif;
font-style:bold;
}
text-align:center; - this will tell browser to center content inside of #buttonbar not depending on its width, and no need to define classes for #homeb, #aboutb and #contactb.
And so on. There are to many places to fix. I gave you a starting point. Here is demo with some changes already done for you: http://jsfiddle.net/2rM6K/7/
You just need to understand what each line of your code means for browser if you want to get something working correctly. If you do not understand how something works - there is a lot of info in web and people are ready to help you. Just do not expect that some magic happens while you writing a code - you must learn how things work. Read, try, experiment, read again, try again, experiment again until you start understanding why and how something works.
page
{
Margin-right:auto;
margin-left:auto;
width:800px;
}
u can change width according to your requirement.