I've got a problem, I wanted to place a text just next to the image, as shown in the picture. But it doesn't work. I'm just starting CSS and HTML journey so don't blame please if the mistake is shameful.
I haven't forgotten about float: left and clear: both lines so I guess it may mean that the width or the height is too small to fit the text.
I'll paste a stack snippet here. The zip pack with a picture will be included as well, in case you'd like to see it how it works.
body {
background-color: #444444;
font-family: 'Didact Gothic', sans-serif;
font-family: 'Lato', sans-serif;
font-size: 18px;
color: white;
}
#container {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
#logo {
text-align: center;
padding: 15px;
background-color: #303030;
color: white;
font-size: 30px;
font-weight: 900;
margin-bottom: 30px;
}
#navbar {
background-color: black;
margin-top: 20px;
padding: 10px;
}
.click {
float: left;
margin-left: 20px;
}
.click:hover {
cursor: pointer;
background-color: green;
}
#quote {
height: 230px;
width: 980px;
padding: 10px;
background-color: red;
margin-top: 20px;
margin-bottom: 25px;
}
#quoteL {
float: left;
width: 200px;
height: 250px;
}
#quoteR {
float: left;
width: 800px;
font-size: 16px;
text-align: justify;
}
.bigtitle {
font-size: 32px;
font-weight: 900;
letter-spacing: 2px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Angielski - Nauka angielskiego dla zainteresowanych</title>
<meta name="keywords" content="angielski, English, english, nauka angielskiego, angielskiego, nauka, online, nauka angielskiego online,
efektywna nauka, prosta gramatyka, gramatyka, słownictwo, tłumaczenie,
pomoc, jak" />
<meta name="description" content="Ta strona pomoże ci nauczyć się angielskiego w wolnym czasie bez problemu i z przyjemnością!" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Lato:400,400i,700,900&subset=latin-ext" rel="stylesheet"> </head>
<body>
<div id="container">
<div id="logo">English 4 Everyone :D</div>
<div id="navbar">
<div class="click">TO BE</div>
<div class="click">TO HAVE/TO HAVE GOT</div>
<div class="click">PRESENT SIMPLE</div>
<div style="clear:both;"></div>
</div>
<div id="quote">
<div id="quoteL">
<img src="swan.jpg" />
</div>
<div id="quoteR">
<span class="bigtitle">Quote to success:</span> "Our job in grammar teaching is not to describe the language, as a grammarian does.It is to build a bridge from A (what the student knows) to B (what we want him/her to know next). If the bridge
is too long it will collapse." ~Michael Swan source: https://mikeswan.net/some-things-i-believe/
</div>
<div style="clear: both;"></div>
</div>
</div>
</body>
</html>
Pictures:
HTML, CSS and jpg file inside a zip file on Google Drive.
Change the width of #quoteL+#quoteR<=#quote
and if you want that img do not out of red section change the height to be smaller then #quote height
body {
background-color: #444444;
font-family: 'Didact Gothic', sans-serif;
font-family: 'Lato', sans-serif;
font-size: 18px;
color: white; }
#container {
margin-left: auto;
margin-right: auto;
width: 1000px; }
#logo {
text-align: center;
padding: 15px;
background-color: #303030;
color: white;
font-size: 30px;
font-weight: 900;
margin-bottom: 30px; }
#navbar {
background-color: black;
margin-top: 20px;
padding: 10px; }
.click {
float: left;
margin-left: 20px; } .click:hover {
cursor: pointer;
background-color: green; }
#quote {
height: 230px;
width: 980px;
padding: 10px;
background-color: red;
margin-top: 20px;
margin-bottom: 25px; }
#quoteL {
float: left; width: 180px;
height: 180px; }
#quoteR {
float: left;
width: 800px; font-size: 16px; text-align: justify; }
#quoteL img{ height: 210px;}
.bigtitle {
font-size: 32px; font-weight: 900; letter-spacing: 2px;
display: block;
}
<!DOCTYPE HTML> <html> <head>
<meta charset="utf-8" />
<title>Angielski - Nauka angielskiego dla zainteresowanych</title>
<meta name="keywords" content="angielski, English, english, nauka angielskiego, angielskiego, nauka, online, nauka angielskiego online,
efektywna nauka, prosta gramatyka, gramatyka, słownictwo, tłumaczenie,
pomoc, jak" />
<meta name="description" content="Ta strona pomoże ci nauczyć się angielskiego w wolnym czasie bez problemu i z przyjemnością!" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Lato:400,400i,700,900&subset=latin-ext"
rel="stylesheet"> </head> <body>
<div id="container">
<div id="logo">English 4 Everyone :D</div>
<div id="navbar">
<div class="click">TO BE</div>
<div class="click">TO HAVE/TO HAVE GOT</div>
<div class="click">PRESENT SIMPLE</div>
<div style="clear:both;"></div>
</div>
<div id="quote">
<div id="quoteL">
<img src="https://i.stack.imgur.com/8hZeG.jpg" />
</div>
<div id="quoteR">
<span class="bigtitle">Quote to success:</span>
"Our job in grammar teaching is not to describe the language, as a grammarian does.It is to build a bridge from A
(what the student knows) to B (what we want him/her to know next). If
the bridge is too long it will collapse." ~Michael Swan
source: https://mikeswan.net/some-things-i-believe/
</div>
<div style="clear: both;"></div>
</div>
</div> </body> </html>
Add this to ur quoteR
#quoteR {
float: left;
width: calc(100% - 200px); /*200px is width of image*/
font-size: 16px;
text-align: justify;
padding-left: 10px;
box-sizing: border-box;
}
Using calc, u can subtract the width of the image from the parent's width. the value of calc will be assigned to the #quoteR
body {
background-color: #444444;
font-family: 'Didact Gothic', sans-serif;
font-family: 'Lato', sans-serif;
font-size: 18px;
color: white;
}
#container {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
#logo {
text-align: center;
padding: 15px;
background-color: #303030;
color: white;
font-size: 30px;
font-weight: 900;
margin-bottom: 30px;
}
#navbar {
background-color: black;
margin-top: 20px;
padding: 10px;
}
.click {
float: left;
margin-left: 20px;
}
.click:hover {
cursor: pointer;
background-color: green;
}
#quote {
/*height: 230px;*/
width: 980px;
padding: 10px;
background-color: red;
margin-top: 20px;
margin-bottom: 25px;
clear: both;
}
#quoteL {
float: left;
width: 200px;
height: 250px;
}
#quoteR {
float: left;
width: calc(100% - 200px);
font-size: 16px;
text-align: justify;
padding-left: 10px;
box-sizing: border-box;
}
.bigtitle {
font-size: 32px;
font-weight: 900;
letter-spacing: 2px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Angielski - Nauka angielskiego dla zainteresowanych</title>
<meta name="keywords" content="angielski, English, english, nauka angielskiego, angielskiego, nauka, online, nauka angielskiego online,
efektywna nauka, prosta gramatyka, gramatyka, słownictwo, tłumaczenie,
pomoc, jak" />
<meta name="description" content="Ta strona pomoże ci nauczyć się angielskiego w wolnym czasie bez problemu i z przyjemnością!" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Lato:400,400i,700,900&subset=latin-ext" rel="stylesheet"> </head>
<body>
<div id="container">
<div id="logo">English 4 Everyone :D</div>
<div id="navbar">
<div class="click">TO BE</div>
<div class="click">TO HAVE/TO HAVE GOT</div>
<div class="click">PRESENT SIMPLE</div>
<div style="clear:both;"></div>
</div>
<div id="quote">
<div id="quoteL">
<img src="https://i.stack.imgur.com/8hZeG.jpg]" />
</div>
<div id="quoteR">
<span class="bigtitle">Quote to success:</span> "Our job in grammar teaching is not to describe the language, as a grammarian does.It is to build a bridge from A (what the student knows) to B (what we want him/her to know next). If the bridge
is too long it will collapse." ~Michael Swan source: https://mikeswan.net/some-things-i-believe/
</div>
<div style="clear: both;"></div>
</div>
</div>
</body>
</html>
You can use a table to take that whole description to the right of the image. Refer the following html code.
<div id="logo">English 4 Everyone :D</div>
<div id="navbar">
<div class="click">TO BE</div>
<div class="click">TO HAVE/TO HAVE GOT</div>
<div class="click">PRESENT SIMPLE</div>
<div style="clear:both;"></div>
</div>
<table id="quote">
<tr>
<td>
<div id="quoteL">
<img src="swan.jpg" />
</div>
</td>
<td>
<div id="quoteR">
<span class="bigtitle">Quote to success:</span> "Our job in grammar teaching is not to describe the language, as a grammarian does.It is to build a bridge from A (what the student knows) to B (what we want him/her to know next). If the bridge
is too long it will collapse." ~Michael Swan source: https://mikeswan.net/some-things-i-believe/
</div>
</td>
</tr>
<div style="clear: both;"></div>
</table>
the sum of quoteL and quoteR is not equal to quote, you can change him or if you want you can do % instead of px for see better the size :)
#quote
{
height: 230px;
width: 100%;
padding: 10px;
background-color: red;
margin-top: 20px;
margin-bottom: 25px;
}
#quoteL
{
float: left;
width: 20%;
height: 250px;
}
#quoteR
{
float: left;
margin-left: 5%;
width: 70%;
font-size: 16px;
text-align: justify;
}
#logo
{
text-align: center;
padding: 10px;
background-color: #303030;
color: white;
font-size: 30px;
font-weight: 900;
margin-bottom: 30px;
width:100%;
}
#navbar
{
background-color: black;
margin-top: 20px;
padding: 10px;
width:100%;
}
Related
I am having an issue with my project for my coding bootcamp.
Problem: My website seems to be scrollable even thought all my content fits on the page. I have tried to edit height, but it only throws the whole site out of wack.
Does anyone have a solution will prevent scrolling when it is not needed?
Thank you so much in advance.
Rob Connolly
html, body {
height: 100%;
}
#wrap {
margin: 0 auto;
text-align: center;
width: 960px;
background-color: white;
}
#firstName {
color: white;
margin: 0 auto;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: white;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
line-height: 125px;
display: flex;
justify-content: space-between;
align-items: center;
}
hr {
clear: both;
border-bottom-style: solid;
margin: 0 auto;
width: 100%;
align-self: center;
}
#backgroundTest {
background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
background-repeat: repeat;
padding: 70px;
height: 100%;
}
#wrap2 {
margin: 0px auto;
width: 960px;
background-color: white;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
#aboutMeHeading {
clear: both;
color: #4aaaa5;
margin: 15px 0 15px 15px;
}
#grayLine {
margin: 15px auto;
color: #dddddd;
width: 930px;
border-width: 1px;
align-self: center;
}
#footerBox {
margin-top: 50px;
width: 100%;
background-color: #666666;
height: 2.5rem;
border-top-style: solid;
border-top-color: #4aaaa5;
border-top-width: 10px;
align-self: center;
bottom: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#copyright {
text-align: center;
color: white;
overflow: hidden;
}
body {
margin: 0 auto;
}
#robImage {
width: 200px;
height: 200px;
float: left;
margin: 0px 15px 0px 15px;
}
p {
color: #777777;
text-align: left;
margin-left: 15px;
margin-right: 15px;
word-spacing: 3px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
}
#footerLine {
color: #4aaaa5;
}
#cr1 {
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework/myportfolio/assets/css/style.css">
</head>
<body>
<!-- this div contains the header-->
<div id="wrap">
<header>
<!-- name in header-->
<h1 id="firstName">
Rob Connolly
</h1>
<!-- Header-->
<div id="menu">
<span>
About
</span>
<span>
Portfolio
</span>
<span>
Contact
</span>
</div>
</div>
</header>
<!-- clear fix cleard float-->
<hr id="clearfix">
<!-- background image-->
<div id="backgroundTest">
<!-- Wrap2 wraps abouy me section-->
<div id="wrap2">
<!-- About Me Heading-->
<h2 id="aboutMeHeading">
About Me
</h2>
<!-- gray line in about me section-->
<hr id="grayLine">
<!-- Image of Rob-->
<img id="robImage" src="https://lh3.googleusercontent.com/Y0NrDdrtQbttFKexILjcVZ4tPrV55AoKy_jaCB0-lL-QkCfk9FjbYoWXfyLF6gZsz3lwXBSYwjunxjEC0Ti8r-zUe99lezpZXFyL5ReR7Xsf1enfVNYPTg0Fk9R8M3rm-OXNqCDYJgTojq1kl8sADXpR2-24UdZU5hrOMHTpULMyPMcxTu3PIaId-Nfgd4cTzNJ5qtY2YGzFqVL2JjOHukvKah7mWNfcbjEDuQ7iH13Ax4FmolxJcdT7lm6Z25b8gbKoecazzKpMzpwiatuOM8MrHkDG04z9JXlRbrK_BcrsZmzt6b5u79-YKK9siwnWIT_-LlRldygCWsDgPAjoB0EMSsS9D-dbS7nWXJ01SwHaUaLbtu5UgfixRdO6H1FSqJeMv-E1xA4K1MTrUPLLdSZ65_cxzCSzdkKU2Ny4lwWYo5ZvT09kjYLW56XWl7H5BalG0mHzOt4HsKY-XtPRGFC0Nw85ECbpZsEJvBPJDGui8SOS-FDMcHmjdgZNsIGxxG7yaQeK34Cc1MlxnHSzwba5RS-PMbynkuXdTb2Va_QDe_cAFhm-hE9tzgMfn_LWMcnUhrH0bIdq6s4NgwqQ7zz03bBZyXuiKS1zCJRnYobGHUeVJPdXQvR0ZbVl0NyJ_EgI0pm0bhUKYxS9d0ez81LzGcK81yG15SnjuvUjLpK9vSlJB7w0=s960-no" alt="rob connolly photo">
<p>Welcome to my portfolio page. I would like to first thank you for taking the time to learn more about who I am. I love to build and scale companies. I have founded two previous companies, one was recently acquired. I am very fourtante to have had the opportunity to learn from my previous failures and successes.
</p>
<p>This year I made the decision that I want to be in a position to help other start-ups looking to grow and scale their own companies. I made the decision to go to the University of California, San Diego's, Full-Stack Coding Bootcamp program to sharpen my development skills.
</p>
<p>If you have any questions about me, start-up questions, or how many games Notre Dame is going to win this season in football, please use the contact form above.
</p>
</div>
</div>
<!-- Start of footer-->
<div id="footerBox">
<!-- Text for footer-->
<p id="cr1"> © Copyright</p>
</div>
</body>
</html>
There are two things you'll want to resolve to get it working correctly.
First set your box-sizing property, because you currently do not have one and the size of your boxes is being affected as a result. border-box is the preferred method. You can read the W3 Schools writeup on this if you'd like to better understand what border-box does: https://www.w3schools.com/css/css3_box-sizing.asp
The height of your #backgroundTest element is 100% height, and since it's a direct child of the <body> element it will be that height. It's 87px taller than you'd like because the #wrap element and the header inside it are 85px in height, plus the hr#clearfix that is 2px in height. If you adjust your #backgroundTest to account for this, it will be resolved. Change height to calc(100% - 87px)
On a side-note I recommend not adding a set height on your #footerBox element because the text is being cut off (height isn't enough, so just remove height property altogether and let it create its own height based on font-size, line-height, padding, etc.)
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
#wrap {
margin: 0 auto;
text-align: center;
width: 960px;
background-color: white;
}
#firstName {
color: white;
margin: 0 auto;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: white;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
line-height: 125px;
display: flex;
justify-content: space-between;
align-items: center;
}
hr {
clear: both;
border-bottom-style: solid;
margin: 0 auto;
width: 100%;
align-self: center;
}
#backgroundTest {
background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
background-repeat: repeat;
padding: 70px;
height: calc(100% - 87px);
}
#wrap2 {
margin: 0px auto;
width: 960px;
background-color: white;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
#aboutMeHeading {
clear: both;
color: #4aaaa5;
margin: 15px 0 15px 15px;
}
#grayLine {
margin: 15px auto;
color: #dddddd;
width: 930px;
border-width: 1px;
align-self: center;
}
#footerBox {
margin-top: 50px;
width: 100%;
background-color: #666666;
height: 2.5rem;
border-top-style: solid;
border-top-color: #4aaaa5;
border-top-width: 10px;
align-self: center;
bottom: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#copyright {
text-align: center;
color: white;
overflow: hidden;
}
body {
margin: 0 auto;
}
#robImage {
width: 200px;
height: 200px;
float: left;
margin: 0px 15px 0px 15px;
}
p {
color: #777777;
text-align: left;
margin-left: 15px;
margin-right: 15px;
word-spacing: 3px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
}
#footerLine {
color: #4aaaa5;
}
#cr1 {
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework/myportfolio/assets/css/style.css">
</head>
<body>
<!-- this div contains the header-->
<div id="wrap">
<header>
<!-- name in header-->
<h1 id="firstName">
Rob Connolly
</h1>
<!-- Header-->
<div id="menu">
<span>
About
</span>
<span>
Portfolio
</span>
<span>
Contact
</span>
</div>
</div>
</header>
<!-- clear fix cleard float-->
<hr id="clearfix">
<!-- background image-->
<div id="backgroundTest">
<!-- Wrap2 wraps abouy me section-->
<div id="wrap2">
<!-- About Me Heading-->
<h2 id="aboutMeHeading">
About Me
</h2>
<!-- gray line in about me section-->
<hr id="grayLine">
<!-- Image of Rob-->
<img id="robImage" src="https://lh3.googleusercontent.com/Y0NrDdrtQbttFKexILjcVZ4tPrV55AoKy_jaCB0-lL-QkCfk9FjbYoWXfyLF6gZsz3lwXBSYwjunxjEC0Ti8r-zUe99lezpZXFyL5ReR7Xsf1enfVNYPTg0Fk9R8M3rm-OXNqCDYJgTojq1kl8sADXpR2-24UdZU5hrOMHTpULMyPMcxTu3PIaId-Nfgd4cTzNJ5qtY2YGzFqVL2JjOHukvKah7mWNfcbjEDuQ7iH13Ax4FmolxJcdT7lm6Z25b8gbKoecazzKpMzpwiatuOM8MrHkDG04z9JXlRbrK_BcrsZmzt6b5u79-YKK9siwnWIT_-LlRldygCWsDgPAjoB0EMSsS9D-dbS7nWXJ01SwHaUaLbtu5UgfixRdO6H1FSqJeMv-E1xA4K1MTrUPLLdSZ65_cxzCSzdkKU2Ny4lwWYo5ZvT09kjYLW56XWl7H5BalG0mHzOt4HsKY-XtPRGFC0Nw85ECbpZsEJvBPJDGui8SOS-FDMcHmjdgZNsIGxxG7yaQeK34Cc1MlxnHSzwba5RS-PMbynkuXdTb2Va_QDe_cAFhm-hE9tzgMfn_LWMcnUhrH0bIdq6s4NgwqQ7zz03bBZyXuiKS1zCJRnYobGHUeVJPdXQvR0ZbVl0NyJ_EgI0pm0bhUKYxS9d0ez81LzGcK81yG15SnjuvUjLpK9vSlJB7w0=s960-no" alt="rob connolly photo">
<p>Welcome to my portfolio page. I would like to first thank you for taking the time to learn more about who I am. I love to build and scale companies. I have founded two previous companies, one was recently acquired. I am very fourtante to have had the opportunity to learn from my previous failures and successes.
</p>
<p>This year I made the decision that I want to be in a position to help other start-ups looking to grow and scale their own companies. I made the decision to go to the University of California, San Diego's, Full-Stack Coding Bootcamp program to sharpen my development skills.
</p>
<p>If you have any questions about me, start-up questions, or how many games Notre Dame is going to win this season in football, please use the contact form above.
</p>
</div>
</div>
<!-- Start of footer-->
<div id="footerBox">
<!-- Text for footer-->
<p id="cr1"> © Copyright</p>
</div>
</body>
</html>
I am currently making my study project page. I want it to be responsive as it is a part of it.
However, when the screen size is to small words in head, section and body are overlapping. I can't make the words go to another line if there is not enough space for all of them (for whole sentence). I've tried using word-break, but it didn't work. Does anyone have idea what can I do to change it?
<html lang="pl-PL">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="css.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="My hobby page.">
<meta name="keywords" content="books, hobby">
<meta name="author" content="Bogna Gondek">
<link rel="stylesheet" href="css.css">
<script type="text/javascript" src="js.js"></script>
<title>Książki Moje Hobby | Witamy</title>
</head>
<body>
<header>
<h1>Książki Moje Hobby</h1>
<nav>
<ul>
<li><a class="aktywny" href="strona_główna.html">Strona Główna</a></li>
<li>Kontakt</li>
</ul>
</nav>
</header>
<div id="wnętrze">
<section>
<h2>„Bajki są więcej niż prawdą: nie dlatego, że mówią nam, że smoki istnieją, ale dlatego, że mówią, że smoki można pokonać.”</h2>
<h3>― Neil Gaiman, „Coraline"</h3>
</section>
</div>
<footer>
Książki Moje Hobby, Copywright © 2019
</footer>
</body>
</html>
body
{
font-family: Times, Courier, Verdana, Comic, Arial;
font-size: 20px;
line-height: 2px;
padding:0;
margin: 0;
background-color: white;
}
header
{
width: 100%;
margin: auto;
overflow: hidden;
padding-top: 20px;
min-height: 70px;
background-color: #404040;
}
header h1
{
margin-left: 20px;
float:left;
color: #f2f2f2;
}
header nav
{
float:right;
margin-top:10px;
margin-right: 20px;
margin-bottom: 20px;
}
header li
{
float:left;
display:inline;
padding: 0 20px 0 20px;
}
header a
{
text-decoration: none;
color: #f2f2f2;
font-size: 22px;
}
header a:hover
{
font-weight: bold;
}
header .aktywny
{
color: #b3b3b3;
}
div#wnętrze
{
max-width:100%;
height: 100%;
margin: auto;
overflow: hidden;
background:url("obrazki/glownyobrazek.jpg") no-repeat 0;
color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
section
{
background-color: red;
max-width: 80%;
word-wrap: break-all !important;
}
footer
{
padding: 20px;
margin-top: auto;
background-color: #404040;
text-align: center;
color: #f2f2f2;
}
The issue is the line-height you have set on the body.
body
{
font-family: Times, Courier, Verdana, Comic, Arial;
font-size: 20px;
line-height: 1;
padding:0;
margin: 0;
background-color: white;
}
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>
Oaki Softworks
</title>
<link href='style.css' rel='stylesheet' type='text/css'>
<link rel="icon" href="favicon.png">
</head>
<body>
<div id="navigation">
<div style="height:20px;width=15%;float:right;">
<img src="facebook_icon.png" class="social_media_icon">
<img src="instagram_icon.png" class="social_media_icon">
<img src="twitter_icon.png" class="social_media_icon">
<img src="youtube_icon.png" class="social_media_icon">
</div>
<div class="navigation_tile">Contact Us</div>
<div class="navigation_tile">Careers</div>
<div class="navigation_tile">Products</div>
<div class="navigation_tile">About Us</div>
</div>
<div id="content">
<div id="blurb">
<img src="Logo%20(inverted,%20transparent).png" style="width:90%;height:auto;align-self:center;">
<h2>Video games as art.</h2>
<p>Even before the conception of our company, we have always embraced video games as the newest, emerging art form. Video games engage an audience like no other medium: allowing them to digest the material at their own pace, to identify themselves within their avatar as they see fit, and to interact with the world around them. Oaki Software aims to underline these elements of art even further with our own game design.</p>
</div>
<div id="main_pic">
<img src="art.jpg">
</div>
</div>
<div id="footer">
<p>
Oaki Softworks™
<br>Fort Collins, CO 80521
<br>benkulka#oakisoftworks.com
</p>
</div>
</body>
</html>
Here is my CSS
body {
background-color: #021034;
padding: 0px;
margin: 0px;
}
#navigation {
position: fixed;
background-color: black;
height: 40px;
width: 100%;
color: white;
color: #adb7bd;
font-family: 'Lucida Sans', Arial, sans-serif;
font-size: 16px;
line-height: 26px;
}
div.navigation_tile {
height: 30px;
width: 15%;
align-content: center;
text-align: center;
float: right;
margin: 5px;
}
div.navigation_tile:hover {
background-color: #092466;
}
div.navigation_tile:active {
background-color: white;
color: black;
}
#content {
margin-top: 30px;
display: inline-block;
text-align: justify;
}
#blurb{
padding: 40px 0 0 25px;
width: 28%;
height: 250px;
}
#main_pic {
float: right;
width: 66%;
height: 250px;
border: 10px #092466 solid;
overflow: hidden;
}
h1{
color: #A5B7E3;
font-family: 'Lato', sans-serif;
font-size: 54px;
font-weight: 300;
line-height: 58px;
margin: 0 0 20px;
}
h2 {
color: #6681C4;
font-family: 'Lato', sans-serif;
font-size: 34px;
margin: 0 0 10px;
}
p{
text-indent: 20px;
color: white;
font-size: 12px;
font-weight: 100;
font-family: 'Lucida Sans', Arial, serif;
line-height: 20px;
}
img.social_media_icon{
height: 15px;
width: 15px;
padding: 5px;
}
#footer {
height: auto;
width: 100%;
background-color: black;
text-align: center;
padding: 5px;
}
I'm trying to get my #blurb div to line up with my #main_pic div within my parent #content div, but I'm having trouble doing so. Can someone point me in the right direction?
#blurb {
[...]
float: left;
}
#content {
[..]
overflow: hidden;
}
Also consider removing height: 250px; from #blurb ... hard to say is it required for some reason.
I am making a footer for our project. How do I make it so that when I zoom in the webpage, the "Follow us on Facebook" will go on top of the footer info? I am sorry for some mistakes that you may find in my code. Suggestions and corrections will greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Pamana Beach Resort </title>
<link rel="icon" type="image/png" href="icon.png">
<style>
div#fixedfooter {
position:fixed;
bottom:0px;
left: 0px;
width:100%;
height: 70px;
background:#00ADEF;
}
#footer-info {
background-color: #00adef;
width: 50%;
margin-left: 50px;
margin-top: 10px;
float: left;
}
#footer-infotext {
color: #FFFFFF;
font-family: footer-info;
font-size: 90%;
text-align: center;
float: left;
}
#social {
margin-top: 10px;
margin-right: 30px;
background-color: #00adef;
float: right;
widht: 400px;
}
#sociallogo {
width: 50px;
height: 50px;
}
#socialtext {
float:left;
font-family: footer-info;
padding-right: 10px;
color: #FFFFFF;
}
#font-face {
font-family: footer-info;
src: url(GOTHIC.ttf);
}
#font-face {
font-family: footer-infoBold;
src: url(GOTHICB.ttf);
}
#bold-info {
font-family: footer-infoBold;
font-size: 100%;
}
</style>
</head>
<footer>
<div id="fixedfooter" >
<div id="footer-info">
<p id="footer-infotext">Designed by <span id="bold-info">CMSC 2 Students | Pamana Beach Resort </span> © Copyright 2016, All Rights Reserved.</p>
</div>
<div id="social">
<p id="socialtext">FOLLOW US ON FACEBOOK</p>
<img id="sociallogo" src="social.png">
</body>
</html>
Major points:
Close your tags! You didn’t close your footer and some div-elements.
Put the “social”-div first, so it gets on top when the view gets
smaller.
From the id “fixedfooter” delete the “height” attribute.
Otherwise, the footer will not be big enough to show all the info on
small screens.
Use #media to change your code according to the screen-size.
Please look at the code snippet below to see all the changes. I hope it helps.
* {} #fixedfooter {
position: fixed;
bottom: 0px;
background: #00ADEF;
text-align: center;
}
#footer-info {
background-color: #00adef;
width: 30%;
margin-top: 10px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#footer-infotext {
color: #FFFFFF;
font-family: footer-info;
font-size: 90%;
text-align: center;
float: left;
}
#social {
margin-top: 10px;
background-color: #00adef;
width: 400px;
margin-left: auto;
margin-right: auto;
}
#sociallogo {
width: 50px;
height: 50px;
}
#socialtext {
float: left;
font-family: footer-info;
padding-right: 10px;
color: #FFFFFF;
}
#font-face {
font-family: footer-info;
src: url(GOTHIC.ttf);
}
#font-face {
font-family: footer-infoBold;
src: url(GOTHICB.ttf);
}
#bold-info {
font-family: footer-infoBold;
font-size: 100%;
}
#media(min-width: 768px) {
#footer-info {
width: 40%;
margin-left: 50px;
}
#social {
float: right;
margin-right: 30px;
margin-left: 50px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pamana Beach Resort</title>
<link rel="icon" type="image/png" href="icon.png">
</head>
<body>
<footer>
<div id="fixedfooter">
<div id="social">
<p id="socialtext">FOLLOW US ON FACEBOOK</p>
</div>
<div id="footer-info">
<p id="footer-infotext">Designed by <span id="bold-info">CMSC 2 Students | Pamana Beach Resort </span> © Copyright 2016, All Rights Reserved.</p>
</div>
</div>
</footer>
</body>
</html>
What you need is to place your "Follow us on facebook" on top of your other element and float it right at high resolutions. I've created this fiddle to demonstrate it. However you might need to adjust the resolution breakpoint in the #media query to fit your needs.
I'd like to have the white background cover content of the page but for some reason it only ends at the navigation menu/#main_content_top. How can I fix this?
HTML Look/Image:
http://img687.imageshack.us/img687/8461/croppercapture12.th.jpg
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#Text1
{
width: 77px;
}
#Text2
{
width: 78px;
}
body {
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
<div id="header"><h1>
<img alt="" src="images/tempBanner.jpg" style="width: 747px; height: 75px" /></h1></div>
<div id="sub_header">Facility Booking Registration</div>
<div id="main_content_top">Home | Book a Facility | <a href ="FindBooking.htm" >Find/Delete a
booking</a></div>
<div id="main_content">
<div class="content">
<p class="title">Public Service Announcements</p>
<h2>Vesak Day</h2>
<p>Vesak Day, a public holiday, will fall on 1/5/2011, please note the school will
be closed and no bookings will be allowed on this day.</p>
<h2>Labour Day</h2>
<p>Labour Day, a public holiday, will fall on 1/5/2011, please note the school will
be closed and no bookings will be allowed on this day.</p>
</div>
<div class="menu">
<div class="menu_title">Login</div>
<div>Username:
<input id="Text1" type="text" />
<br />
Password:
<input id="Text2" type="text" />
<br />
<br />
<input id="Button1" type="button" value="Sign In" />
</div>
</div>
</div>
<div id="clear"></div>
</div>
</body>
CSS style sheet:
body {
background: #CACACA url(images/background.png) repeat-x;
font-family: "Trebuchet MS", Verdana, serif, Arial
}
#container {
margin: 0 auto;
width: 750px
}
#header {
width: 100%;
height: 33px;
}
#sub_header {
text-align: right;
font-weight: bold;
font-size: 20px;
color: #FFFFFF;
padding-right: 20px;
padding-bottom: 20px;
}
#main_content {
margin: 0 auto;
width: 100%;
background: #FFFFFF url('images/background_content.gif');
background-repeat: repeat-y;
}
#main_content_top {
height: 30px;
background: #FFFFFF url('images/background_top.gif');
}
#main_content_bottom {
height: 30px;
background: #FFFFFF url('images/background_bottom.gif');
}
.content {
float: left;
width: 510px;
text-align: justify;
padding: 0 30px 0 30px;
font-size: 14px
}
.menu {
width: 139px;
float: right;
padding: 0 20px 0 20px;
border-left: #8C8484 1px solid;
font-size: 12px
}
.menu ul {
margin: 0;
padding: 10px 0 10px 15px
}
.menu il {
list-style-type: disc
}
#header h1 {
margin-bottom: 0px;
font-size: 28px;
font-weight: bold;
color: #A40008
}
.content h2 {
margin-top: 0px;
font-size: 20px;
font-weight: bold;
color: #A40008
}
.menu_title {
font-size: 18px;
font-weight: bold
}
#clear {
display: block;
clear: both;
width: 100%;
height:1px;
overflow:hidden;
}
a {
color: #A40008;
font-weight: bold;
text-decoration: none
}
a:hover {
color: #A40008;
font-weight: bold;
text-decoration: underline
}
.title {
margin: 20px;
text-align: center;
font-weight: bold;
font-style: italic;
height: 18px;
}
.highlight
{
font-weight:bold
}
.update
{
font-weight:bold;
color:Green
}
.confirm
{
font-weight:bold;
color:Red
}
table
{
border-style : dashed
}
Try adding overflow:auto to #main_content.
If i understand correctly, you want to set the background of the body white? If that is your requirement, within the body CSS, remove or comment out the background style.
You have to make it overflow hidden or float left and width..........