I am trying to resize the icon on the upper left side. I tried to use resize in css but it doesn't change its size when I resized my browser. However, my main image in the middle and all the images on the bottom are able to be resized dynamically. Please give me some advices! Thanks :)
This is the html:
.icon{
display: inline-block;
position:absolute;
left:0;
margin-left:8px;
}
.icon img{
max-width: 45%;
height: auto;
resize: both;
vertical-align: center;
top:0px;
left:20px;
}
.header-text{
display: inline-block;
right:0;
margin-right:8px;
position:absolute;
height:900px;
}
#name{color: #707070;
margin-top: 40px;
margin-bottom: 5px;
font-size: 2.2vw;}
#ninja{
color: #A8A8A8;
margin-top: 1px;
font-size: 2vw;
position:absolute;
top:100px;
right:0px;
}
.line {
position: absolute;
top: 155px;
left: 10px;
height: 8px;
width: 100%;
background-color: #FFCCFF;
}
#nz{
position: relative;
top: 155px;
left: 7.25px;
}
#feature{
position: relative;
top: 145px;
left: 7.25px;
}
#feature h1{
color: #707070;
font-size: 3.2vw;
}
table{
table-layout : fixed
}
#baby-seal{
margin-top: 1px;
margin-bottom: 1px;
font-size: 3.2vw;
}
#wiki-link{
margin-top: 1px;
}
#wiki-link a{
font-size: 2.2vw;
}
.work{
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='/Users/yianlai/Desktop/UDACITY-PROJECT1/project1.css'>
</head>
<body>
<div class='icon' align='left'>
<img src='http://rlv.zcache.ca/kiwi_new_zealand_emblem_sticker-r12b5f18476154510b5c44ff86c3110e5_v9wth_8byvr_324.jpg'>
</div>
<div class='header-text'>
<div align='right'id="name"><h1>Baby Seal</h1></div>
<div align='right' id="ninja">NiNJA</div>
</div>
<div class="line"></div>
<div id="nz" align="center"><img src='http://www.wallcoo.net/nature/new_zealand_landscape/images/A%20melting%20glacier%20in%20New%20Zealand.jpg' style="width: 100%"></div>
<div id="feature">
<h1>FEATURE WORK</h1>
<table style="width:100%">
<tr>
<td>
<div class="work">
<div align="left"><img style="width: 100%" src='http://babyanimalz.com/wp-content/uploads/2013/03/baby-seal-picture.png' ></div>
<div id="baby-seal"><h1>Baby Seal</h1></div>
<div id="wiki-link">https://en.wikipedia.org/wiki/Seal</div>
</div>
</td>
<td>
<div class="work">
<div align="left"><img style="width: 100%" src='http://babyanimalz.com/wp-content/uploads/2013/03/baby-seal-picture.png' ></div>
<div id="baby-seal"><h1>Baby Seal</h1></div>
<div id="wiki-link">https://en.wikipedia.org/wiki/Seal</div>
</div>
</td>
<td>
<div class="work">
<div align="left"><img style="width: 100%" src='http://babyanimalz.com/wp-content/uploads/2013/03/baby-seal-picture.png' ></div>
<div id="baby-seal"><h1>Baby Seal</h1></div>
<div id="wiki-link">https://en.wikipedia.org/wiki/Seal</div>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
I would remove the <img> from the .icon container and set it as the background image.
The updated css for .icon would be this:
.icon{
display: inline-block;
position:absolute;
left:0;
margin-left:8px;
height:150px;
width:18%;
background:url(http://rlv.zcache.ca/kiwi_new_zealand_emblem_sticker-r12b5f18476154510b5c44ff86c3110e5_v9wth_8byvr_324.jpg) no-repeat;
background-size:contain;
background-position:center center;
}
Of course you can set the height and width to whatever you want. This way the icon will resize with the window and always stay in the center.
See this fiddle for a demo. (resize the frame window to see it in action)
Related
I need "tumbnail.jpg" , "child.png" and "nanny.png" to be in square shape.
also "tumbnail.jpg" as a thumbnail. (It's already a thumbnail I guess)
other two I need them as just squared images side by side. Please help me with this. I tried to solve this since 4 days but I couldn't.
how should I style those 3 to be squared?
body { background-image: url( "bg.jpg" ); }
h2, p { text-align: center; }
.lulu{font-family:Copperplate, Papyrus, fantasy;
text-align: center;
font-weight: bolder;
}
.parent{ background-color:lightgrey;
width: 80%;
margin-left: auto;
margin-right: auto;
height:200px;}
.column {
float: left;
width: 30%;
padding: 5px;
}
.child-1{
background-color:lightgray;
width:73%;
float:center;
height:900px;
text-align:center;
padding-top:50px;
padding-bottom:50px;
padding-right:50px;
padding-left:50px;
margin-left:130px;
margin-right:150px;
margin-top:80px;
margin-bottom:80px;
}
.child-1 p {
color: white;
padding-left: 10px;
padding-right:10px;
padding-top: 50px;
text-align:center;
width:80%;}
.child-2{
background-color:aliceblue;
width:300px;
float:right;
height:400px;
margin:50px;
text-align:left;
padding-left:10px;}
.child-2 p{
color: black;
padding-left: 10px;
padding-right:10px;
padding-top: 50px;
text-align:left;
width:80%;}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=styles.css>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>Daycare Center</title>
</head>
<body>
<div>
<div class="parent">
<header>
<h1 class="lulu"> DAYCARE</h1>
</header>
<style>
img {
border: 1px solid #ddd;
border-radius:2px;
padding: 5px;
max-width:auto;
max-height:auto;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<img src="tumbnail.jpg" alt="kids" style="width:100px" style="height:100px">
</div>
<div>
<div class="child-1">
<h3 style="color:white;">
Child care: Making the best choice
for your family</h3>
<p>.</p>
<div class="row">
<div class="column">
<style>
img {
border: 1px solid #ddd;
border-radius:50%;
padding: 5px;
max-width:auto;
max-height:auto;
}
</style>
<img src="house.jpg" alt="house" style="width:100px" style="height:100px">
</div>
<div class="column">
<style>
img {
border: 1px solid #ddd;
border-radius:50%;
padding: 5px;
max-width:auto;
max-height:auto;
}
</style>
<img src="heart.jpg" alt="heart" style="width:100px" style="height:100px">
</div>
<div class="column">
<style>
img {
border: 1px solid #ddd;
border-radius:50%;
padding: 5px;
max-width:auto;
max-height:auto;
}
</style>
<img src="feet.jpg" alt="feet" style="width:100px" style="height:100px">
</div>
<div class="row">
<div class="column">
<img src="child.png" alt="child" style="width:100%">
</div>
<div class="column">
<img src="nanny.png" alt="nanny" style="width:100%">
</div>
</div>
<div>
<div style="position:relative; right:8px; top:90px;">
<div class="child-2">
<h3>About us:</h3>
<p>.</p>
<h3>Our Service</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<main>
<section>
</section>
</main>
</div>
</body>
</html>
It is not ideal to use several differant styling options on one page.
It is recommened that all styling is maintained seperately from your pages code.
e.g by using a css.
Using the img tag in your css will affect ALL img tags in your code.
If you want to add additional specific changes to certain images then you should add a class e.g
<img class="fill"/>
.fill {
width:100%;
height:100%;
}
SPECIFICITY
If an item in your css is after a conflicting class the subsequent one will take priority as long as the element doesn't have a more dominat identifier.
You can read more about that here: https://www.w3schools.com/css/css_specificity.asp
For this example, having .fill after img will cause this image to be width and height 100% rather than 100px
EXAMPLE
img {
background:#cdf;
width:100px;
height:100px;
}
.fill {
width:100%;
height:100%;
}
<img src="https://i.stack.imgur.com/BxBTo.png">
<img class="fill" src="https://i.stack.imgur.com/BxBTo.png">
I recommend you clear the styling from your html and add it to your css.
body {
background-image: url("bg.jpg");
}
h2,
p {
text-align: center;
}
img {
border: 1px solid #ddd;
border-radius: 2px;
padding: 5px;
height: 100px;
width: 100px;
max-width: auto;
max-height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
.lulu {
font-family: Copperplate, Papyrus, fantasy;
text-align: center;
font-weight: bolder;
}
.parent {
background-color: lightgrey;
width: 80%;
margin-left: auto;
margin-right: auto;
height: 200px;
}
.column {
float: left;
width: 30%;
padding: 5px;
}
.child-1 {
background-color: lightgray;
width: 73%;
float: center;
height: 900px;
text-align: center;
padding-top: 50px;
padding-bottom: 50px;
padding-right: 50px;
padding-left: 50px;
margin-left: 130px;
margin-right: 150px;
margin-top: 80px;
margin-bottom: 80px;
}
.child-1 p {
color: white;
padding-left: 10px;
padding-right: 10px;
padding-top: 50px;
text-align: center;
width: 80%;
}
.child-2 {
background-color: aliceblue;
width: 300px;
float: right;
height: 400px;
margin: 50px;
text-align: left;
padding-left: 10px;
}
.child-2 p {
color: black;
padding-left: 10px;
padding-right: 10px;
padding-top: 50px;
text-align: left;
width: 80%;
}
<div>
<div class="parent">
<header>
<h1 class="lulu"> DAYCARE</h1>
</header>
<img src="tumbnail.jpg" alt="kids">
</div>
<div>
<div class="child-1">
<h3 style="color:white;">Child care: Making the best choice for your family</h3>
<p>.</p>
<div class="row">
<div class="column">
<img src="house.jpg" alt="house">
</div>
<div class="column">
<img src="heart.jpg" alt="heart">
</div>
<div class="column">
<img src="feet.jpg" alt="feet">
</div>
<div class="row">
<div class="column">
<img src="child.png" alt="child" style="width:100%">
</div>
<div class="column">
<img src="nanny.png" alt="nanny" style="width:100%">
</div>
</div>
<div>
<div>
<div class="child-2">
<h3>About us:</h3>
<p>.</p>
<h3>Our Service</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<main>
<section>
</section>
</main>
</div>
</div>
</div>
</div>
This is my sample html code:
.questions-table-main {
border-right: 3px solid rgb(242,244,247);
width:189px;
float:left;
padding-right:30px;
padding-top:10px;
display:table;
height: 200px;
}
.questions-table-main-category {
/* padding-top: 20px; */
text-align : center;
}
.questions-table-main-firm {
height:85px;
background-color:rgb(242,244,247);
text-align: center;
display: table-row;
vertical-align: bottom;
}
<div class="questions-table-main">
<div class="questions-table-main-category">
<img src="img/communication.png" alt="communication"/>
</div>
<div class="questions-table-main-firm">
<div class="questions-table-main-firm-image">
<span class="questions-table-firm-helper">
<img src="img/allianz.png" alt="allianz" /></span>
</div>
</div>
</div>
Let me clear this mess. I need to put <div class="questions-table-main-firm"> on the bottom of <div class="questions-table-main">. Next thing I need to do is that <div class="questions-table-main-category"> must be above <div class="questions-table-main-firm"> with 27px space between them. I was trying to do that with padding-top, but it's impossible because i have some different images with different dimensions. Now <div class="questions-table-main-category"> is on the top of parrent div. How to fix that ?
You can do it by using position: absolute; and top. For bottom div use top: 0 so that it says at top and for first div use top: 112px including height(85) and margin 27.
.questions-table-main {
border-right: 3px solid rgb(242,244,247);
width:189px;
padding-right:30px;
padding-top:10px;
display:block;
height: 200px;
position: relative;
}
.questions-table-main-category {
text-align : center;
height:85px;
top: 112px; /* height 85 + 27 margin*/
position: absolute;
}
.questions-table-main-firm {
height:85px;
background-color:rgb(242,244,247);
text-align: center;
top: 0px;
position: absolute;
}
<div class="questions-table-main-category">
<img src="https://placehold.it/189x85" alt="communication"/>
</div>
<div class="questions-table-main-firm">
<div class="questions-table-main-firm-image">
<span class="questions-table-firm-helper">
<img src="https://placehold.it/189x85" alt="allianz" /></span>
</div>
</div>
</div>
You need to remove the display table atributes, do it as follows:
.questions-table-main {
width:189px;
float:left;
padding-right:30px;
padding-top:10px;
height: 200px;
}
.questions-table-main-category {
/* padding-top: 20px; */
text-align : center;
margin-bottom: 27px;
}
.questions-table-main-firm {
background-color:rgb(242,244,247);
text-align: center;
vertical-align: bottom;
}
<div class="questions-table-main">
<div class="questions-table-main-category">
<img src="http://placehold.it/350x150" alt="communication"/>
</div>
<div class="questions-table-main-firm">
<div class="questions-table-main-firm-image">
<span class="questions-table-firm-helper">
<img src="http://placehold.it/350x150" alt="allianz" /></span>
</div>
</div>
</div>
I've tried margin-bottom and min-height on my body tag with the same height as the footer. The footer container called .contact is not respecting the div .store-items above it. I'm looking for a clean fix, eventually I will learn about flex boxes but I am suspicious there is a simple error in my strategy. Thanks, here is the code:
/*=================
Start of Rules after reset
===================*/
body{
font-family: Open Sans;
margin-bottom: 70px;
min-height: 500px;
}
/*
================================
Body
================================
*/
.store-items {
margin-left: 20px;
margin-right: 20px;
width:900px;
max-height: 900px;
border: solid 1px;
position: absolute;
padding: 30px;
padding-left: 65px;
display: block;
}
.store-items .item-1-3 {
display: inline-block;
width:30%;
margin-right: 20px;
margin-bottom: 20px;
height:300px;
border: solid 1px;
background-color:#333333;
position: relative;
}
.store-items .item-1-3 img{
height: 190px;
width: 150px;
position: relative;
width:100%;
}
.store-items .item-1-3 h3{
text-align: center;
color:white;
position: relative;
top: 7px;
}
.store-items .item-1-3 p{
position: relative;
left:170px;
top:15px;
border:solid 1px black;
width:40px;
background-color: white;
z-index: 1;
}
/*
================================
Footer
================================
*/
.contact {
position: relative;
width:100%;
left:0;
bottom:0;
height:70px;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>The Viking Store</title>
<link rel="stylesheet" type="text/css" href="vkhmp.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
</head>
<body>
<header>
<div class="navbar">
Viking Store
<div class="cart">
<img src="resources/noun_355_cc.svg" alt="shopping cart" style="width:32px; height:32px;">
Your Cart
</div>
</div>
<div class="header-image">
<img src="resources/viking_ship_background_medium.jpg" alt="viking ship background">
<h1>The Viking Store</h1>
</div>
<div>
<div class="tagline1">
<p>The Best Viking Gear on the Whole Web</p>
</div>
<div class="tagline2">
<p>Choose from among our lineup of fine axes below</p>
</div>
</div>
</header>
<div class="store-items">
<div class="item-1-3">
<h3>The Silent Night</h3>
<p>$200</p>
<img src="resources/axe_silent_night_small.jpg" alt="The Silent Night">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>The Dainty Daisy</h3>
<p>$100</p>
<img src="resources/axe_dainty_daisy_small.jpg" alt="The Dainty Daisy">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>Double Trouble</h3>
<p>$340</p>
<img src="resources/axe_double_trouble_small.jpg" alt="Double trouble">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>Whispering Wind</h3>
<p>$225</p>
<img src="resources/axe_whispering_wind_small.jpg" alt="Whispering Wind">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>The Cunning Cutter</h3>
<p>$200</p>
<img src="resources/axe_cunning_cutter_small.jpg" alt="The Cunning Cutter">
<div>
<input type="submit" value="Add to Cart">
</div>
</div><!--
--><div class="item-1-3">
<h3>The Kingmaker</h3>
<p>$400</p>
<img src="resources/axe_kingmaker_small.jpg" alt="The Kingmaker">
<div>
<input type="submit" value="Add to Cart">
</div>
</div>
</div>
<div class="pagination"></div>
</body>
<footer>
<div class="contact">
<h2>Contact</h2>
<img src="resources/noun_14614_cc.svg" alt="horn call" style="height:32px; width:32px;">
1-000-000-000
<img src="resources/noun_631009_cc.svg" alt="scroll email" style="height:32px; width:32px;">
<h2>contact#vikingstore.com</h2>
</div>
</footer>
</html>
As K. Daniek wrote, you closed the bodytag before the footer, Apart from that, there is a lot of unnecessary code - no need for all this absolute and relative positioning - use margins for creating distances and leave the position settings at the default.
Here's a codepen: http://codepen.io/anon/pen/BLJxyk
Here's the changed CSS:
body {
font-family: Open Sans;
margin-bottom: 70px;
min-height: 500px;
}
.store-items {
margin-left: 20px;
margin-right: 20px;
width: 900px;
max-height: 900px;
border: solid 1px;
padding: 30px;
padding-left: 65px;
}
.store-items .item-1-3 {
display: inline-block;
width: 30%;
margin-right: 20px;
margin-bottom: 20px;
height: 300px;
border: solid 1px;
background-color: #333333;
position: relative;
}
.store-items .item-1-3 img {
height: 190px;
}
.store-items .item-1-3 h3 {
text-align: center;
color: white;
margin-top: 7px;
}
.store-items .item-1-3 p {
left: 170px;
margin-top: 15px;
border: solid 1px black;
width: 40px;
background-color: white;
}
.contact {
height: 70px;
display: block;
}
Okay so I am trying to integrate a link into the flow of the paragraph (directly to the right of '1.' but for some reason it is not showing up? How do I make it integrate into the flow.
Here is a http://jsfiddle.net/5CMfv/ for reference
Thanks
<div id="home-infobox">
<div class="infobox_picture">
<img src="images/image1.png" width="91" height="90">
<a style="position:absolute; padding-left:30px;"><h1>Image1</h1><p>Kappa kappa kaap 1. <p>more</p></a>
</div>
<div class="infobox_picture">
<img src="images/news.jpg" width="92" height="90">
<a style="position:absolute; padding-left:30px;"><h1>NEWS</h1><p>DKappakpapapapa</p> </a>
</div>
<div class="infobox_picture">
<img src="images/314.JPG" width="93" height="90">
<a style="position:absolute; padding-left:30px;"><h1>The Team</h1><p>KappaKappa </p> </a>
</div>
</div>
#home-infobox{
height: 335px;
background-color:#425eb4;
background-repeat: no-repeat;
background-position: left top;
width: 450px;
float: left;
position: absolute;
top:250px;
left:80px;
}
#home-infobox{
height: 335px;
background-color:#425eb4;
background-repeat: no-repeat;
background-position: left top;
width: 450px;
float: left;
position: absolute;
top:250px;
left:80px;
}
.infobox_picture {
margin-top: 15px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
clear: both;
background-position: center bottom;
background-repeat: no-repeat;
background-color: white;
height: 90px;
position: relative;
}
.home-infobox ~ .home-infobox:before {
content: '';
position: absolute;
left: 0;
top: -8px;
width: 100%;
border-top: 1px solid black;
}
#home_infobox p a{
color: #3B4B7E;
text-decoration: none;
z-index:999;
position:relative;
}
#home_infobox p a:hover{
color: #475883;
text-decoration: underline;
}
h1 {font-family:'Montserrat', sans-serif; font-size:15px; position:relative; z- index:999}
h2 {font-family: 'Montserrat', sans-serif; font-size:25px; position:relative;}
h3 {font-family:'Montserrat', sans-serif; font-size:15px; position:relative; z-index:999}
You have invalid HTML:
<p>Kappa kappa kaap 1.<p>more</p>
should be:
<p>Kappa kappa kaap 1. more</p>
On further inspection, you have other HTML issues as well.
http://validator.w3.org/
You can do it like this:
<div class="infobox_picture">
<img src="images/image1.png" width="91" height="90">
<div style="display:inline-block; position:absolute; padding-left:30px;">
<h1>Image1</h1>
<p>Kappa kappa kaap 1.</p>
<p>more</p>
</div>
</div>
An a element always has to have an href attribute. It's better to put an 'a' inside a text element. So, i'va put a div element on de place where you had an 'a' element, and added the display:inline-block css-property to make this block element behave somewhat like the inline 'a' element.
I have image on the center of the page .
I want to display block of text inside the <div class='contain'> which will be float left to the image. 10px between the image to <div class='contain'>.
I don't want to move the image ,I want to image will stay in the center and just in the right side i put the <div class='contain'>.
I add property clear:both; to image or to the div and I think that I don't know how to use it.
jsfiddle Demo
how can I do that?
Thx
my code:
<h1><a id="toptitle" href="http://www.centerwow.com">portfolio</a></h1>
<div id="container">
<div id="all_pages">
<div class="page">
<h1>Home Page</h1>
<img src="images/yellow_flowers.jpg" width="300px" height="300px">
<div class='contain'>this is the home page bla bla bla</div>
</div> <!-- page1 -->
<div class="page">
<h1>About Us Page</h1>
<img src="images/Pink_Flowers.jpg" width="300" height="300px">
</div> <!-- page2 -->
<div class="page">
<h1>Contact Us Page</h1>
<img src="images/green_flowers.jpg" width="300" height="300px">
</div> <!-- page2 -->
</div> <!-- #all_pages -->
</div> <!-- #container -->
<div id="menu">
<ul>
<li id="1" class="link CC3366 active">Home</li>
<li id="2" class="link 33FF66">About</li>
<li id="3" class="link FFFF33">Contact Us</li>
</ul>
</div> <!-- #menu -->
<div id="footer"><a class="link" href="http://www.centerwow.com">mysite</a></div>
body {
background: #CC3366 url(images/temp.png) center 130px no-repeat ;
overflow:hidden;
margin:0;
padding:0;
}
#container {
width: 1000px;
overflow: hidden;
position: relative;
height: 450px;
margin: 0 auto;
}
#all_pages {
position: absolute;
left: 0;
top: 0;
width: 3000px;
}
.page {
width: 1000px;
height: 400px;
float: left;
text-align: center;
margin-top: 10px;
}
.page img {
margin-top: 10px;
}
#menu {
background: #000;
}
#menu ul {
list-style: none;
width: 457px;
height: 35px;
margin:auto;
}
#menu ul li {
float: left;
color: #FFFF33;
width: 150px;
line-height: 35px;
text-align: center;
cursor: pointer;
}
.active {
color: #fff !important;
}
#footer a{
font-size: 25px;
font-weight: bold;
}
#footer{
line-height: 100px;
background: #CC3366;
width:100%;
height:1000px;
text-align: center;
display: block;
}
#toptitle {
position: absolute;
width:100px;
top: 30px;
left: 30px;
color: #000;
cursor: pointer;
z-index:20;
}
a {
text-decoration: none;
}
#contain{
clear:both;
float:left;
margin-left:10px;
background: blue;
width:300px;
height:300px;
}
.clear{
}
$(".link").click(function(){
var page = $(this).attr("id");
var color = $(this).attr("class");
color = color.substr(5,6);
$('#all_pages').animate({left: (page-1)*(-1000) });
$("body").animate({backgroundColor: '#'+color});
$("#menu ul li").removeClass('active');
$(this).addClass('active');
});
I using table to do the job and it seems work out ok.
<center>
<table>
<tr>
<td valign=top align=right width=50%>Here is the text</td>
<td width=300px><img src='fun.jpg' width=300px height=300px></img></td>
<td width=50%></td>
</tr>
</table>
</center>