I have watched tutorials and checked on this site but no matter what I do I
can't get my page to be responsive for mobile. I want the image on top and
the text in a nice paragraph below. I am new to html and css, I don't know
any others. The code I'm adding is the original before I tried to make it
responsive.
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="merchandise.css"
</head>
<div class="header">
<img class="banner-image" src="ccc.png" width="100%" height="150px">
</div>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Enter to Win</li>
<li>Merchandise</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
<style>
.float-img {
float: left;
margin-right: 10px;
margin-left: 5px;
margin-bottom: 0px;
margin-top: 10px;
padding: 2px;
border: none;
border-color: #ffb6c1ff;
}
</style>
<body>
<img src="british-shorthair-3055340_1920.jpg" width:"400" height="400"
class="float-img">
<style>
p {margin-left: 250px; margin-top: 40px;
margin-right: 20px;
line-height: 38px;
}
</style>
<font size="5" color="#00b8e6" font-align: center >
<p>
Step into a magical world of cats at Cat Corner Cafe. Enjoy eating cute
cat themed foods and drinks in a relaxing environment. Spend some quality
time
playing with some feline friends. Enjoy watching the cats have fun in an
environment made just for them. All cats will be adoptable and provided by
the local shelter. Cat Corner Cafe will also have fun events like cat yoga,
art with cats and game days. Come by yourself, with your meetup group or
have your next birthday party here! We look forward to seeing you. To be
alerted when we open please sign up with your email on our homepage.
</p>
</text>
</body>
</head>
</html>
body {
margin: 0;
padding: 0;
font-family: 'arial', serif;
}
.nav {
background-color:#ffb6c1;
color:#ffffff
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
.nav > li {
display: inline-block;
padding-right: 50px;
font-size: 16px;
}
.nav> li > a {
text-decoration: none;
color: #ffffff
}
.nav > li > a:hover {
color: #C0C0C0
}
.banner {
width: 100;
display: block;
}
.banner > .bannerimage {
width: 100;
height: 100;
display: block;
}
ul.nav{
margin: 0;
}
div.left {
width: 50%;
padding: 0 0 0 5%;
margin-right: 5px;
margin-top: 10px;
float: left}
div.right {
width: 50%;
padding: 0 5% 0 0;
float: right}
p {
padding-top: 25px;
text-align: left;
}
Fixing your HTML first!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="merchandise.css">
<style>
.float-img {
float: left;
margin-right: 10px;
margin-left: 5px;
margin-bottom: 0px;
margin-top: 10px;
padding: 2px;
border: none;
border-color: #ffb6c1ff;
}
p {
margin-left: 250px;
margin-top: 40px;
margin-right: 20px;
line-height: 38px;
}
#media (max-width: 1024px) {
body img {
max-width: 100px;
height: 100px;
}
body div img {
max-width: 50px;
height: 50px;
}
}
</style>
</head>
<body>
<div class="header">
<img class="banner-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg/1160px-Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg.png" width="1365px" height="150px">
</div>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Enter to Win</li>
<li>Merchandise</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg/1160px-Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg.png" width:"400" height="400">
<div class="float-img">
<p>Step into a magical world of cats at Cat Corner Cafe. Enjoy eating cute
cat themed foods and drinks in a relaxing environment. Spend some quality
time playing with some feline friends. Enjoy watching the cats have fun in an
environment made just for them. All cats will be adoptable and provided by
the local shelter. Cat Corner Cafe will also have fun events like cat yoga,
art with cats and game days. Come by yourself, with your meetup group or
have your next birthday party here! We look forward to seeing you. To be
alerted when we open please sign up with your email on our homepage.</p>
</div>
</body>
</html>
Now for the right solution without framework use #media Queries. Do your homework here .
Now for you the easy Solution to get this responsive is looking into using an HTML framework ,such as the famous Bootstrap, which you wil have to learn allot to fully understand the power behind it but Bootstrap has good documentation to get you going.
You're gonna have to fix your code (html stuff) first and then learn to use media queries.
With media queries, you can target different devices and write specific css that applies to only those devices.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
DO NOT LEARN A FRAMEWORK JUST YET
You should build your knowledge of HTML and CSS first and have a firm understanding of both of them before learning any framework. This will insure that when you learn any framework, you'll be able to make the framework work the way you want.. If you start relying on a framework just yet, you will work according to the framework
Like a previous answer
You're gonna have to fix your code (html stuff) first
But, if for now you don't want to invest a lot of time learning about media queries or code a few rules in CSS, I'd suggest you use a framework and skip the design part, while still making your page look minimally presentable with a tidy look.
I recommend you give a look at Tacit CSS framework. It's ideal for people with zero CSS and design skills and it doesn't involve creating CSS rules from the ground up, you just worry about your HTML code and you need to include Tacit's CSS file.
In order for an image to be considered as a solid object in css it must have the "display: block;" attribute. You might need to also set the same style property to the text paragraph.
Try the following:
.float-img {
float: left;
margin-right: 10px;
margin-left: 5px;
margin-bottom: 0px;
margin-top: 10px;
padding: 2px;
border: none;
border-color: #ffb6c1ff;
display: block;
}
Explanation:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_display
Take a look at bootstrap http://getbootstrap.com/ it is html/css framework for making responsive websites. Check out how to make a grid layout.
You can dig into media queries yourself but that is not exactly needed if you use a framework https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Use a CSS framework. I will recommend bootstrap CSS framework. It will handle all of that for you. UIkit and Foundation are good alternatives too.
Related
Just starting out on html, how do I center the 'Webpage' Logo and remove margin to the right of that logo so the 'Home' can be in line to perform like a nav-bar. I added an image at the end of the code so you can look at the margin I'm trying to get rid of (don't know if that's even possible!).
……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Design</title>
<link href="q1.css" rel="stylesheet"/>
<style>
body{
margin:0;
background-color: rgb(36, 37, 37);
}
.container{
padding-top:3px;
padding-bottom:3px;
width: 100%;
background-color:#003333;
height: 50px
}
.title-box{
margin-left: 20px;
}
.title-box label{
margin: 5px;
width: 130px;
text-align: center;
color:#E0E0E0;
border-color:rgb(11, 107, 19);
border-style:double;
border-width: medium;
width: fit-content;
}
.tasks{
float: right;
}
.para{
padding-left: 8px;
margin: 0%;
background-color: #515253;
padding-top: 10px;
padding-bottom: 10px;
width: fit-content;
}
.para p{
margin: 0%;
color: #e1f2f7;
}
</style>
</head>
<body>
<div class="container">
<div class="title-box">
<label>Webpage</label>
</div>
<div class="tasks">
HOME
</div>
</div>
<div class="para">
<p>The first web page went live on August 6, 1991.
It was dedicated to information on the World Wide Web project and was made by Tim Berners-Lee.
It ran on a NeXT computer at the European Organization for Nuclear Research, CERN.
The first web page address was http://info.cern.ch/hypertext/WWW/TheProject.html.
A web page or webpage is a document, commonly written in HTML, that is viewed in an Internet browser. A web page can be accessed by entering a URL address into a browser's address bar. A web page may contain text, graphics, and hyperlinks to other web pages and files.
<br><br>
A web page is often used to provide information to viewers, including pictures or videos to help illustrate important topics. A web page may also be used as a method to sell products or services to viewers. Multiple web pages make up a website, like our Computer Hope website.
<br><br>
When you click a link provided by a search engine, you are accessing a web page. The Internet consists of millions of web pages, with more being added every day.
</p>
</div>
</body>
</html>
Add flex and align-items: center; to .container.
Remove the height on .container and use padding instead.
Remove float from .tasks and use margin-left: auto;.
Then you can adjust spacing between the a's using margin-right: on .tasks a
body {
margin: 0;
background-color: rgb(36, 37, 37);
}
.container {
padding-top: 3px;
padding-bottom: 3px;
width: 100%;
background-color: #003333;
padding: 25px 0;
display: flex;
align-items: center;
}
.tasks {
margin-left: auto;
}
.tasks a {
color: #fff;
text-decoration: none;
margin-right: 1em;
}
.title-box {
margin-left: 20px;
}
.title-box label {
margin: 5px;
width: 130px;
text-align: center;
color: #E0E0E0;
border-color: rgb(11, 107, 19);
border-style: double;
border-width: medium;
width: fit-content;
}
.para {
padding-left: 8px;
margin: 0%;
background-color: #515253;
padding-top: 10px;
padding-bottom: 10px;
width: fit-content;
}
.para p {
margin: 0%;
color: #e1f2f7;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Design</title>
<link href="q1.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="title-box">
<label>Webpage</label>
</div>
<div class="tasks">
HOME
HOME
HOME
HOME
</div>
</div>
<div class="para">
<p>The first web page went live on August 6, 1991. It was dedicated to information on the World Wide Web project and was made by Tim Berners-Lee. It ran on a NeXT computer at the European Organization for Nuclear Research, CERN. The first web page address
was http://info.cern.ch/hypertext/WWW/TheProject.html. A web page or webpage is a document, commonly written in HTML, that is viewed in an Internet browser. A web page can be accessed by entering a URL address into a browser's address bar. A web
page may contain text, graphics, and hyperlinks to other web pages and files.
<br><br> A web page is often used to provide information to viewers, including pictures or videos to help illustrate important topics. A web page may also be used as a method to sell products or services to viewers. Multiple web pages make up a
website, like our Computer Hope website.
<br><br> When you click a link provided by a search engine, you are accessing a web page. The Internet consists of millions of web pages, with more being added every day.
</p>
</div>
</body>
</html>
This question already has answers here:
Removing extra white space when using first-letter
(3 answers)
Closed 1 year ago.
I am just trying to layout some type of information page that has the question and then there is a it's answer. I have applied some indentation and make the first letter bigger of the paragraph. The problem is that there is a extra space under the first line. I don't want the extra space that is appeared after using ::before-letter pseudo selector. have any idea or trick...
Here is the code :
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
nav {
height: 50px;
background-color: rgb(236, 195, 141);
}
ul {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
}
li {
margin: 15px 10px;
font-size: 20px;
}
section {
background-color: rgb(194, 175, 212);
padding: 10px 20px;
}
h1 {
margin: 10px 0;
font-size: 30px;
}
p {
text-align: justify;
padding-right: 50px;
}
p::first-letter {
font-size: 55px;
padding-left: 30px;
}
footer {
background-color: rgb(236, 195, 141);
height: 30px;
text-align: center;
line-height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
<section class="main">
<h1>What you know about Technology?</h1>
<p class="para">Technology is the important part of our day to day life. We get up in the morning from the
ringing of our alarm clocks and go to bed at night after switching our lights off. All these luxuries
that we are able to afford are a resultant of science and technology. Most importantly, how we can do
all this in a short time are because of the advancement of science and technology only. It is hard to
imagine our life now without science and technology. Indeed our existence itself depends on it now.
Every day new technologies are coming up which are making human life easier and more comfortable. Thus,
we live in an era of science and technology.
Essentially, Science and Technology have introduced us to the establishment of modern civilization. This
development contributes greatly to almost every aspect of our daily life. Hence, people get the chance
to enjoy these results, which make our lives more relaxed and pleasurable. If we think about it, there
are numerous benefits of science and technology. They range from the little things to the big ones. For
instance, the morning paper which we read that delivers us reliable information is a result of
scientific progress. In addition, the electrical devices without which life is hard to imagine like a
refrigerator, AC, microwave and more are a result of technological advancement.
</p>
</section>
<footer>All rights reserved 2021</footer>
</body>
</html>
I don't know if this solution is neat enough, but you can fix it by adjusting its line-height.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
nav {
height: 50px;
background-color: rgb(236, 195, 141);
}
ul {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
}
li {
margin: 15px 10px;
font-size: 20px;
}
section {
background-color: rgb(194, 175, 212);
padding: 10px 20px;
}
h1 {
margin: 10px 0;
font-size: 30px;
}
p {
text-align: justify;
padding-right: 50px;
}
p::first-letter {
font-size: 55px;
padding-left: 30px;
line-height: 0.8;
}
footer {
background-color: rgb(236, 195, 141);
height: 30px;
text-align: center;
line-height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
<section class="main">
<h1>What you know about Technology?</h1>
<p class="para">Technology is the important part of our day to day life. We get up in the morning from the
ringing of our alarm clocks and go to bed at night after switching our lights off. All these luxuries
that we are able to afford are a resultant of science and technology. Most importantly, how we can do
all this in a short time are because of the advancement of science and technology only. It is hard to
imagine our life now without science and technology. Indeed our existence itself depends on it now.
Every day new technologies are coming up which are making human life easier and more comfortable. Thus,
we live in an era of science and technology.
Essentially, Science and Technology have introduced us to the establishment of modern civilization. This
development contributes greatly to almost every aspect of our daily life. Hence, people get the chance
to enjoy these results, which make our lives more relaxed and pleasurable. If we think about it, there
are numerous benefits of science and technology. They range from the little things to the big ones. For
instance, the morning paper which we read that delivers us reliable information is a result of
scientific progress. In addition, the electrical devices without which life is hard to imagine like a
refrigerator, AC, microwave and more are a result of technological advancement.
</p>
</section>
<footer>All rights reserved 2021</footer>
</body>
</html>
Question:
How do I style different elements of a HTML website properly? I've looked all over the internet and read books but am still sort of struggling.
Issue:
My problem is that I have a main heading, which is like the main "title" for my website which displays the website name, but to the left of my heading, I want to style a vertical navigation bar which will be in-line with my heading. Yet I am having trouble styling the navbar and heading to work next to each other, rather than one of them being on top of the other.
JSFiddle
HTML:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="homepage.css">
<head>
<title>CSGOWin | Win Big!</title>
</head>
<body>
<div class="navbar">
<ul>
<li>Jackpot</li>
<li>Coinflip</li>
<li>Giveaways</li>
<li>About Us</li>
<li>Contact Us<li>
</ul>
</div>
<h1>CSGO Win</h1>
</body>
</html>
CSS:
body {
padding: 0;
margin: 0;
background-image: url(bgimg.jpg);
width: 100%;
height: 100%;
background-size: 100%;
}
h1 {
font-family: Arial, Verdana, sans-serif;
background-color: #FFA500;
border-style: solid;
border-radius: 25px;
text-align: center;
margin-top: 50px;
margin-left: 350px;
margin-right: 350px;
padding-top: 1%;
padding-bottom: 1%;
font-size: 45px;
}
ul {
list-style-type: none;
margin-left: 50px;
margin-right: 85%;
margin-top: 50px;
background-color: #FFA500;
}
li a {
font-family: Arial, Verdana, sans-serif;
display: block;
}
.navbar{
}
Finally, I am very new to stack overflow, so I apologise if my question is not fully detailed. I will answer questions if there are any. Thanks for your kind help.
Like mentioned in the comment you can use float: left see this pen http://codepen.io/anon/pen/bpWzeK?editors=1100. Another way to do it is by using flex.
you can add class or id attributes to certain html tags and then in your stylesheet reference that class or id
->.navbar{
}
that references any tag with "navbar" class will get the style in that block
->#thisIsAnID{
}
that references any tag with the id " thisIsAnID" id
so . is used for classes
is used for ids
Yesterday I posted a question and some people responded very nicely. However I have tried everything you said and nothing seems to be working.
It does work if I give the image a width, but only if that width is smaller than the actual parragraph (500px). My image is bigger than that. I have tried to change the width in the image (adding a class to the image and then specifying the image's width in the css and still not working, even writing !important before the semicolon)
I am gonna paste the entire's "website" (is an easy one page Resume) code so you can see more clearly what might be wrong.
I want the image to be centered and maintain its original size:
<!DOCTYPE html>
<html>
<head>
<title>My Resume</title>
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Playfair+Display:900" rel="stylesheet" type="text/css">
<style type="text/css">
body, h1, h2, h3, p {
margin: 0;
}
header {
padding-top: 120px;
padding-bottom: 120px;
background-image: url('http://bit.ly/1FV66V8');
background-size: cover;
font-family: 'Playfair Display';
text-align: center;
color: #DB5175;
}
h1 {
font-size: 72px;
}
h2 {
margin-bottom: 40px;
font-size: 24px;
}
h3 {
margin-top: 70px;
margin-bottom: 70px;
border: 2px solid #ffffff;
display: inline-block;
padding-right: 30px;
padding-left: 30px;
padding-top: 15px;
padding-bottom: 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
main {
padding-bottom: 100px;
background-color: #DB5175;
font-family: 'Roboto';
color: white;
text-align: center;
}
p {
padding-bottom: 20px;
width: 500px;
margin-left: auto;
margin-right: auto;
line-height: 160%;
}
</style>
</head>
<body>
<header>
<h1>Name Surname</h1>
<h2>Blogger</h2>
<p>
<img src="https://lh4.googleusercontent.com/-AhzOzjiqgqg/UMIP9ONtHsI/AAAAAAAACzM/GzwcSFumocs/s65/facebook.png" alt="Facebook Icon" />
<img src="https://lh5.googleusercontent.com/-E4DPgG0jOhk/UMIP81ijQ1I/AAAAAAAACzI/5jFodl9F9N4/s65/twitter_bird.png" alt="Twitter Icon" />
<img src="https://lh6.googleusercontent.com/-mswXpGilY98/Ugp9MeFO_pI/AAAAAAAAER0/nhReers_OJg/s64/instagram.png" alt="Instagram Icon" />
<img src="https://lh5.googleusercontent.com/-DMXeFEjNoV8/UMIP9F6SnJI/AAAAAAAACzQ/itYWZIxvOuw/s65/pintrest.png" alt="Pinterest Icon" />
</p>
</header>
<main>
<h3>Background</h3>
<p>I've been rolling solo since 2014, but previously jammed with a bunch of tech startups like Dropbox, Codecademy, and Treehouse. My recent work is a departure from my product-centric past, focusing on 3D illustration, animation, and motion design.</p>
<p><img src="http://los40tuxtla.com/wp-content/uploads/2015/05/nrm_1410437342-blake-lively-gucci-hp.jpg" alt="Foto Blanca"/></p>
<p>That's kind of what it's all about, y'know? Feeling out our path, taking creative risks, and knocking it out of the park without taking it too seriously. I get into specific tactics and proven strategies, but it's also an ongoing conversation about growth, meaning, and happiness.</p>
<p>I've met lots of creative and curious people through my newsletter, where we talk shop and share experiences. I'd love to meet you, too!</p>
<h3>Philosophy</h3>
<p>I'm a lifelong learner and love to gather new skills and study extraordinary people. I believe 1) being exceptional is often just putting in more effort than anyone expects, 2) releasing our ego is a prerequisite for growth, and 3) life is too important to take seriously. Party on!</p>
</main>
</body>
</html>
Thanks!
Just set the width 100% in image. It will automatically adapt with the parent width.
body, h1, h2, h3, p {
margin: 0;
}
header {
padding-top: 120px;
padding-bottom: 120px;
background-image: url('http://bit.ly/1FV66V8');
background-size: cover;
font-family: 'Playfair Display';
text-align: center;
color: #DB5175;
}
h1 {
font-size: 72px;
}
h2 {
margin-bottom: 40px;
font-size: 24px;
}
h3 {
margin-top: 70px;
margin-bottom: 70px;
border: 2px solid #ffffff;
display: inline-block;
padding-right: 30px;
padding-left: 30px;
padding-top: 15px;
padding-bottom: 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
main {
padding-bottom: 100px;
background-color: #DB5175;
font-family: 'Roboto';
color: white;
text-align: center;
}
p {
padding-bottom: 20px;
width: 500px;
margin-left: auto;
margin-right: auto;
line-height: 160%;
}
<header>
<h1>Name Surname</h1>
<h2>Blogger</h2>
<p>
<img src="https://lh4.googleusercontent.com/-AhzOzjiqgqg/UMIP9ONtHsI/AAAAAAAACzM/GzwcSFumocs/s65/facebook.png" alt="Facebook Icon" />
<img src="https://lh5.googleusercontent.com/-E4DPgG0jOhk/UMIP81ijQ1I/AAAAAAAACzI/5jFodl9F9N4/s65/twitter_bird.png" alt="Twitter Icon" />
<img src="https://lh6.googleusercontent.com/-mswXpGilY98/Ugp9MeFO_pI/AAAAAAAAER0/nhReers_OJg/s64/instagram.png" alt="Instagram Icon" />
<img src="https://lh5.googleusercontent.com/-DMXeFEjNoV8/UMIP9F6SnJI/AAAAAAAACzQ/itYWZIxvOuw/s65/pintrest.png" alt="Pinterest Icon" />
</p>
</header>
<main>
<h3>Background</h3>
<p>I've been rolling solo since 2014, but previously jammed with a bunch of tech startups like Dropbox, Codecademy, and Treehouse. My recent work is a departure from my product-centric past, focusing on 3D illustration, animation, and motion design.</p>
<p><img src="http://los40tuxtla.com/wp-content/uploads/2015/05/nrm_1410437342-blake-lively-gucci-hp.jpg" width="100%" alt="Foto Blanca"/></p>
<p>That's kind of what it's all about, y'know? Feeling out our path, taking creative risks, and knocking it out of the park without taking it too seriously. I get into specific tactics and proven strategies, but it's also an ongoing conversation about growth, meaning, and happiness.</p>
<p>I've met lots of creative and curious people through my newsletter, where we talk shop and share experiences. I'd love to meet you, too!</p>
<h3>Philosophy</h3>
<p>I'm a lifelong learner and love to gather new skills and study extraordinary people. I believe 1) being exceptional is often just putting in more effort than anyone expects, 2) releasing our ego is a prerequisite for growth, and 3) life is too important to take seriously. Party on!</p>
</main>
Thanks to all.
I wanna answer what I did in the end in case it helps someone else in the future.
The teacher/class said to "wrap" the image in a p. Following #Fabian Lurtz's adice in changed the p for a div.
Then in the css, following #Alvin Pascoe's advice in this thread: http://bit.ly/1OniMMl
I added:
.div {
display: block;
margin-left: auto;
margin-right: auto;
}
If my "website" would have had more divs I could have just setup a class or id
Hope it helps. Thanks again to all!
If you want to set the width to 100%, just set the width to-
max-width: 100%
I am currently working on a practice example website as part of my Computer Science GCSE course. I am having real trouble with the navigation CSS. The website is very much in progress, so I know it's not great, but here is my code:
<!DOCTYPE html>
<html>
<head>
<title>The Cotswold Jeweller</title>
<link rel="stylesheet" href="../Assets/css/normalize.css" media="screen" type="text/css">
<link rel="stylesheet" href="../Assets/css/main.css" media="screen" type="text/css">
<link rel="stylesheet" href="../Assets/css/grid.css" media="screen" type="text/css">
</head>
<body>
<div class="head">
<h1>The Cotswold Jeweller</h1>
</div>
<div class="nav_contain">
<ul class="nav">
<li><h2>Home</h2></li>
<li><h2>Services</h2></li>
<li><h2>Location</h2></li>
</ul>
</div>
<div class="wrapper">
<p>Welcome to the home of The Cotswold Jeweller on the web. Here at The Cotswold Jeweller we offer a unique and reliable service to create a friendly and local experience for our customers. We are very proud to also stock products from many different popular and large groups, such as Citizen, Butler and Peach and many more while we still maintain our local, reliable ethos.</p>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=The+Cotswold+Jeweller,+Granville+Court,+Shipston-on-Stour&aq=0&oq=The+Cotswold+Jewe&sll=52.8382,-2.327815&sspn=8.08612,21.643066&ie=UTF8&hq=&hnear=&ll=52.062826,-1.623898&spn=0.006295,0.006295&t=m&iwloc=A&output=embed"></iframe>
</div>
<div class="footer">
<p>Copyright 2014 © The Cotswold Jeweller</p>
</div>
</body>
</html>
And here is the CSS:
body {
background-color: #FFFFFF;
}
.wrapper {
width: 1100px;
margin: auto;
}
.head {
text-align: center;
font-family: "Times New Roman";
font-size: 32px;
}
.nav li h2 a {
text-decoration: none;
color: #000000;
font-family: "Times New Roman";
width: 366px;
float: left;
}
.nav {
list-style: none;
width: 1100px;
margin: auto;
text-align: center;
}
.nav_contain {
border-top: 5px #990000 solid;
border-bottom: 5px #990000 solid;
}
I would like to have the navigation bar between, the two borders of the navigation container, but they are not aligned properly. Please can you provide a solution below. Thank You.
You can add overflow: auto to the .nav container. This will prevent its height from collapsing because it only contains floated elements.
.nav {
list-style: none;
width: 1100px;
margin: auto;
text-align: center;
overflow: auto;
}
Alternatively, adding this to .nav_contain has a similar effect.
Add this
.nav li{
display:inline-block;
}
and remove the h2 tags.
You may also have to reduce the size of the "a" tags to get them to stay in a line on screen. I'm on a 1280px monitor at the moment and I had to reduce their width to 300px.
Another alternative is to just remove the li tags completely. The links should still display side by side, and because your borders are outside of ".nav" then they should contain it.
If it doesn't work, just let me know.
generally try to avoid fixed values like
width: 1100px; //(1)
you can replace it for example by
width: 90%; //(2)
the (1) is destroying your site on other resolution than yours. Use (2) to avoid it.
try this code:
http://paste.debian.net/69881/