I am trying to make an image be 300px width in CSS. I created a div class around the image "mainpic" in HTML, and then in CSS, I did .mainpic and width:300px; but it's not changing sizes. Any ideas why the CSS is not applying to this div class? Thank you and code below!
Here's the HTML (minus head section):
<body>
<ul>
<li>Home</li>
<li>Information</li>
<li>Sources</li>
</ul>
<h1>Katherine Graham </h1>
<h2> Silver Spoon to CEO</p>
Democracy Dies In the Dark
<br>
<div class="mainpic">
<img src="http://t2.gstatic.com/licensed-image?q=tbn:ANd9GcR42mPHUzh3APxp1Q8iK6BiQNns98VuwX9zk2nQvukALjFAc8207NEMfcOES8Qe" alt="Katherine Graham">
<div>
<caption>Katherine Graham</caption>
</body>
Here's the CSS:
h1{
color:red;
font-size: 50px;
text-decoration: underline;
}
h2 {
font-size: 25px;
}
ul li {
display: inline;
background-color:;
margin: 10px;
border-radius: 25%;
border-color:khaki;
padding: 25px;
border: 25px;
width: 90px;
list-style-type: none;
}
body {
background-color: antiquewhite;
}
.mainpic {
width: 300px;
}
You need to specify width for img also, otherwise it would keep its original width.
h1 {
color: red;
font-size: 50px;
text-decoration: underline;
}
h2 {
font-size: 25px;
}
ul li {
display: inline;
background-color: ;
margin: 10px;
border-radius: 25%;
border-color: khaki;
padding: 25px;
border: 25px;
width: 90px;
list-style-type: none;
}
.mainpic {
width: 300px;
}
<ul>
<li>Home</li>
<li>Information</li>
<li>Sources</li>
</ul>
<h1>Katherine Graham </h1>
<h2> Silver Spoon to CEO</p>
Democracy Dies In the Dark
<br>
<div class="mainpic">
<img src="http://t2.gstatic.com/licensed-image?q=tbn:ANd9GcR42mPHUzh3APxp1Q8iK6BiQNns98VuwX9zk2nQvukALjFAc8207NEMfcOES8Qe" alt="Katherine Graham" width="100%">
<div>
<caption>Katherine Graham</caption>
Your container width .mainpic is already taking 300px;
Try to add .mainpic img {width:100%}.
This will work for sure.
Related
Probably very easy. But, i new to coding, this is my first personnel project. I want the list in the div to be show after the image1 and it is currently over the image
.image1 {
display: block;
margin-left: auto;
margin-right: auto;
width: 75%;
}
#list {
position: relative;
text-align: center;
color: blue;
}
ul {
padding: 20px;
list-style: none;
font-size: 40px;
}
ul li {
margin: 15px;
text-align: center;
}
<header>
<h1><strong>G.M.S.</strong> <br> Soudure Générale</h1>
<img src="images/soudeur.jpg" alt="Soudeur" class="image1">
</header>
<div id="list">
<h2>Specialités<br>Réparation et Modification</h2>
<ul>
<li>Rampe</li>
<li>Balcon</li>
<li>Escalier</li>
<li>Tourelle</li>
<li>Cloture</li>
<li>Grillage</li>
</ul>
</div>
Looks ok to me. If you are a beginer as u said, you should experiment in pages like codepen.io
Probably your problem is caused by some other css included by the content management system or site generator you are using.
You should check the applied rules using firefox inspector, or alike in browser you are running. Maybe a float, or fix size+overflow on the general img tag or the containing header.
.image1 {
display: block;
margin-left: auto;
margin-right: auto;
width: 75%;
}
#list {
position: relative;
text-align: center;
color: blue;
}
ul {
padding: 20px;
list-style: none;
font-size: 40px;
}
ul li {
margin: 15px;
text-align: center;
}
<header>
<h1><strong>G.M.S.</strong> <br> Soudure Générale</h1>
<img src="https://i.imgur.com/oqVsHoTl.jpg" alt="Soudeur" class="image1">
</header>
<div id="list">
<h2>Specialités<br>Réparation et Modification</h2>
<ul>
<li>Rampe</li>
<li>Balcon</li>
<li>Escalier</li>
<li>Tourelle</li>
<li>Cloture</li>
<li>Grillage</li>
</ul>
</div>
For some reason my navbar is bigger than it's supposed to be. Or atleast I think it's my navbar. Whenever I remove #rect It goes away. What's the problem here?
#tagline {
font-style: italic;
padding-right: 150px;
padding-left: 10px;
}
nav {
background-color: white;
display:flex;
align-items:center;
overflow: hidden;
}
#logo {
padding-top: 8px;
padding-left: 30px;
vertical-align: middle;
}
li, li>a {
text-decoration: none;
list-style-type: none;
color: black;
display: inline-block;
float: right;
padding: 5px 10px 5px 10px;
}
li>a:hover {
background-color: #7bcc1d;
color: white;
}
.active {
background-color: #7bcc1d;
color: white;
}
#main-bg {
background-image: url('https://s15.postimg.org/ra1dhmjkb/main-bg.png');
background-size: 100% 100%;
height: 500px;
margin: 0;
}
#rect {
background-color: white;
position: relative;
top: 50px;
left: 100px;
width: 400px;
height: 400px;
text-align: center;
}
h2 {
padding-top: 15px;
margin-bottom: 0;
}
span {
margin: 0;
}
#enroll_button {
text-decoration: none;
padding: 10px 20px 10px 20px;
background-color: #7bcc1d;
color: white;
}
<nav>
<img src="https://s12.postimg.org/n0yt5tenx/lb_logo.png" id="logo" alt="logo">
<span id="tagline">Live, 1-to-1, flexible and personalized</span>
<ul id="nav-items">
<li>How it Works</li>
<li>Courses</li>
<li>Teachers</li>
<li>Enroll</li>
<li>Login</li>
</ul>
</nav>
<div id="main-bg">
<div id="rect">
<h2>3 Steps to Complete<br>Your High School Foreign<br>Language Requirement</h2><br>
<span><strong>Convenient Scheduling: </strong>Pick lessons<br>to fit your schedule.</span><br><br>
<span><strong>Interactive Courses: </strong>Learn through<br>live, personal lessons.</span><br><br>
<span><strong>Earn Approved Credits: </strong>Earn credits<br>to satisfy high school requirements.</span><br><br>
Enroll in Your Course
</div>
</div>
You haven't set #rect as a block element and the h2 margin is pulling the whole thing down.
#rect h2{margin-top:0;}
That's because of margins which set in user agent stylesheet from the browser. You can link the reset.css and set your desire margins in your own css.
when I try to add in h3 onto the website it just stay at the top I tried to use position, top,left in the CSS but it doesn't want to response to it. I also tried to use a gallery template from w3schools to see if it will let me move the gallery but still no luck. I have tried to research this but I had no luck at all. sorry for the long code.
<html>
<link rel="stylesheet" href="sheet.css">
<head>
<title> Jon Barton </title>
</head>
<header>
<ul class= "nav-men">
<li> Gallery </li>
<li>About me </li>
<li> Contract me</li>
</ul>
<h1><span> Software Developer </span> </h1>
<p class = "kicker" >Ideas // Desinger // Implement </p>
</header>
<body>
<h3> Work</h3>
<footer>
<div class = "footer">
<div class ="content-wrap">
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
<p class = "copyright"> All content copyright 2016</p>
</div>
</div>
</html>
The css is a bit long sorry and some of it is just repeated.
#css
header {
background: url(.//277H.jpg) ;
text-align: center;
width: 100%;
height: auto;
position: absolute;
}
.nav-men li {
display:inline;
margin-left: 100px ;
}
.nav-men ul{
margin: 30px 30px 0px 0px;
padding: 0;
list-style-type: none;
text-align: center;
text-decoration: none;
}
.nav-men a {
color:white;
}
.nav-men a:hover, a:visited, a:link, a:active
{
text-decoration: none;
}
h1 {
font-size: 60px;
color: white;
letter-spacing: 0.05em;
text-transform: uppercase;
text-align: center;
font-weight: 700;
margin-bottom: 20px;
}
span {
display: inline-block;
padding: 0.2em 0.6em ;
border: white solid 10px;
}
.kicker {
text-align: center;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5em;
color: white;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
.alt-selction {
background: black;
}
.thumb-container {
max-width: 980px ;
margin: 0px auto ;
padding-bottom: 100px;
}
.thumb-unit {
display:block;
width: 25%;
height: 150px;
float:left ;
}
.footer {
margin: 30px;
background: url(../277H.jpg) ;
width: 100%;
height: 100px;
clear: both;
bottom: -53px;
left:-30;
right:0;
position: absolute;
background-size: cover;
float: left;
}
.content-wrap {
float: left;
}
li {
display:inline;
margin-left: 100px ;
}
ul{
margin: 30px 30px 0px 0px;
padding: 0;
list-style-type: none;
text-align: center;
text-decoration: none;
}
a {
color:white;
}
a:hover, a:visited, a:link, a:active {
text-decoration: none;
}
That's because the position of the <header> and footer is absolute.
position:absolute positioned an element relative to the nearest positioned ancestor instead of positioned relative to the viewport, like fixed.(from here)
Remove the position:absolute from the class header & .footer. Then it will let you put anything between them.
Use this tutorial to have a sticky footer:
[https://css-tricks.com/snippets/css/sticky-footer/]
After just add div at the top as a Header and you can add as many content between them after.
I would recommend first cleaning up a bit of your HTML to put your header and footer inside the body element, and closing your body element properly as otherwise you will most probably run into other problems.
See this fiddle for an example:
https://jsfiddle.net/jowxoaca/1/
Also, as jonju mentioned, removing the position:absolute for header and footer would fix your ordering issue.
I was just continuing with making this website and all of a sudden some of my navbar padding goes 'missing' and I can't seem to pinpoint the mistake. I've already played the detective game and commented out some of the stuff I thought was interfering. Luckily I have an original picture before the screw-up and one after. Some of the 'paragraph text' will be 'placeheld' for personal reasons and I think it's irrelevant, unless it's needed in order to fix the problem.
-Thanks.
Before and after picture: http://imgur.com/a/ts1FS
Code:
CSS:
body {
background-color: #1a1a1a;
color: #ccad00;
line-height: 1.9;
font-size: 19px;
}
p.desc{
text-indent: 50px;
}
h1 {
font-family: courier;
color: #ccad00;
}
h2 {
font-family: courier;
color: #ccad00;
text-align: center;
}
#divtitle {
width: 50%;
margin:auto;
padding-top: 50px;
text-align: center;
}
h2
{
font-family:courier;
color: #99cc00;
}
p {
line-height: 1.9
text-size: 19px;
}
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #ccad00;
height:40px;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
}
#nav li {
margin: 0px;
}
#nav li a {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #f2f2f2;
background-color: #ccad00;
float: left
}
#nav li a:hover {
color: #0d0d0d;
background-color: #35af3b;
}
.button {
background-color: #ffa600;
border: none;
color: #998200;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 40px;
font-family: courier;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button:hover {
background-color: white;
color: #998200;
}
div#containerbttn {
width: 800px;
height: 100px;
margin: auto;
background-color: green;
}
ul.square{
list-style-type: square;
}
.center {
text-align: center;
}
html:
<div id="nav">
<ul>
<li>Home
</li>
<li>Center
</li>
<li>Rules
</li>
<li>References
</li>
<li>Rankings
</ul>
</div>
<div>
<div id="divtitle" >
<h1> text </h1>
</div> -->
<div id="containerbttn">
<button class="button">GET STARTED!</button>
<button class="button">FAQ</button>
<button class="button">RANKINGS</button>
</div>
<h2> Synopsis: </h2>
<div class="center">
<p class="desc"> Welcome to ***!. This is a free...
<ul class="square">
<li> some text </li>
<li> some text </li>
</ul>
<p class="desc" > text </p>
</div>
</html>
Your problem exists because you have set the height of the #nav element to 40 px. When you add the padding to your a element, you make it larger than the ul element. This can be solved easily by updating two lines of code.
First, remove from css:
#nav{ height:40px; }
Then, add to html after ul but before closing the nav div:
<div style="clear:both;"></div>
Here is a jsfiddle of your working page: https://jsfiddle.net/8o279n5r/
And here is a great answer on what the clear property does: What does the CSS rule clear: both do?
I am recently new to CSS and HTML and I have a problem while allocating my block under the header:
I have tried several solutions but I have not succeed. I would appreciate if you could give me a hint with it. Thanks
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title goes here</title>
<meta name="description" content="Description of your site goes here">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="page">
<div class="header" >
<h1>
<img src="images/img1.jpg" width="250" height="190" float="right" />
<p> SOME TEXT HERE </p>
</h1>
</div>
<div class="topmenu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>What's New</li>
<li>Services</li>
<li>Contact</li>
<li>Resources</li>
<li>Links</li>
</ul>
</div>
</body>
</html>
And my CSS CODE:
body {
font-family: sans-serif,Arial;
font-size: 12px;
color: #000000;
margin: 0px;
background-color:#d9d7d7;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, textarea {
padding: 0px;
margin: 0px;
color: black;
}
a {
color: #072FCF;
text-decoration: underline;
}
a:hover {
color: #072FCF;
text-decoration: none;
}
.main-out {
background-image: url(../images/trans.png);
background-position: center top;
width: 100%;
float: left;
}
.main {
width: 1000px;
margin: 0px auto;
}
.page {
width: 1000px;
float: left;
padding: 42px 0px 0px 0px;
position: center;
}
.header {
position:absolute;
top:42px;
margin-left:-500px;
left:50%;
width: 1000px;
height: 200px;
background-color: white;
border-style: solid solid none solid;
border-width: thick;
}
.header h1{
display: inline;
text-align: left;
font-family: cursive;
font-size: 45px;
color: black;
}
.header img {
display: block;
float: left;
}
.header p {
line-height: 190px; /* Here is the trick... line-height = image height */
}
.topmenu {
position:absolute;
background-color: black;
width: 1000px;
height: 37px;
border: 1px solid #000000;
}
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 24px;
padding-left: 24px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #FFFFFF;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 21px;
padding-left: 21px;
}
.topmenu ul li a:hover {
background-image: url(../images/menu-hov.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Thanks
I have made several changes to your html/css:
body {
font-family: sans-serif, Arial;
font-size: 12px;
color: #000000;
margin: 0px;
background-color:#d9d7d7;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, textarea {
padding: 0px;
margin: 0px;
color: black;
}
a {
color: #072FCF;
text-decoration: underline;
}
a:hover {
color: #072FCF;
text-decoration: none;
}
.main-out {
background-image: url(../images/trans.png);
background-position: center top;
width: 100%;
float: left;
}
.main {
width: 1000px;
margin: 0px auto;
}
.page {
width: 1000px;
margin: 0 auto;
}
.header {
position: relative;
width: 1000px;
height: 200px;
background-color: white;
border-style: solid solid none solid;
border-width: thick;
}
.header h1 {
display: inline;
text-align: left;
font-family: cursive;
font-size: 45px;
color: black;
}
.header img {
display: block;
float: left;
}
.header p {
line-height: 190px;
/* Here is the trick... line-height = image height */
}
.topmenu {
position:relative;
background-color: black;
width: 1000px;
height: 37px;
border: 1px solid #000000;
padding-right: 8px;
}
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 24px;
padding-left: 24px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #FFFFFF;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 21px;
padding-left: 21px;
}
.topmenu ul li a:hover {
background-image: url(../images/menu-hov.jpg);
background-repeat: repeat-x;
background-position: left top;
}
<body>
<div class="page">
<div class="topmenu">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>What's New
</li>
<li>Services
</li>
<li>Contact
</li>
<li>Resources
</li>
<li>Links
</li>
</ul>
</div>
<div class="header">
<h1>
<img src="images/img1.jpg" width="250" height="190" float="right" />
<p> SOME TEXT HERE </p>
</h1>
</div>
</body>
You need to understand three things to improve your html & css skills:
Always follow natural stacking order (first element in html will
display before second element...),
Don't use position: absolute
except if you know what you are doing as #Billy said,
Use html5 tags if you don't need to support IE8 and below. If you do, then use HTML5
Shiv to make them compatible.
Now here is a valid code that is also responsive (it will resize to your browser's viewport size). I have added a lot of comments in the code so that you can easily understand.
Good luck with your project!
.page {
width: 100%; /* Makes the page responsive */
max-width: 1000px; /* all the content inside this div will be 1000 px width */
margin: 0 auto; /* To center your page div in the page */
}
.topmenu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.topmenu ul li a {
display: block;
float: left;
width: 14.2857142%; /* 100 / 7 (number of menu items) */
background-color: #000;
font: bold 12px Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
padding: 10px 0;
text-align: center;
}
.topmenu ul li a:hover {
/* As a general rule, never use images for hovers */
background-color: #fff;
color: #000;
}
.topmenu:after { /* This is a clearfix to clear your floated elements */
content: "";
display: table;
clear: both;
}
header img {
display: inline-block;
width: 250px;
height: 190px;
}
header h1 {
display: inline;
text-align: left;
font-family: cursive;
font-size: 25px;
color: black;
vertical-align: top; /* if you want the text to start at the top of the picture. Otherwise try middle or bottom */
}
<div class="page">
<!-- always start with the first element on your page: here it's your navigation -->
<nav class="topmenu"> <!-- use html5 tags. If you need to support IE8 or below you can use HTML5 Shiv -->
<ul>
<li>Home</li>
<li>About Us</li>
<li>What's New</li>
<li>Services</li>
<li>Contact</li>
<li>Resources</li>
<li>Links</li>
</ul>
</nav>
<header> <!-- same, use html5 tags -->
<!-- As a general rule, css is for styling not html so don't put any width, height or style in img tag -->
<img src="http://placehold.it/250x190" alt="your picture description"/> <!-- always use alt text in images for accessibility purposes -->
<h1>SOME TEXT HERE</h1>
</header>
</div> <!-- don't forget this div that closes your .page -->
Remove all of your absolute positioning (and add in the missing </div> tag to finish the .page div - I'm assuming this is wrapping all of your content inside).
To center your content, replace your .page CSS rule with this:
.page{
width: 1000px; // I would reccommend using 960px instead as it is more standard
margin: 0 auto;
//add your padding in if you need it
}
Don't use absolute positioning until you understand it and why/how/when you should use it
I think you should rearrange your HTML markup.It doesn't seem like you are using the proper nested rule.I suggest you try to remove the img tag outside the h1 tag.Your div with class = "page" doesn't have a ending tag.