I've got some CSS and HTML that I'm working on, I wanted to sub out the content that is a div block for an image and keep the border with rounded edges with it. But the image isn't showing up when I preview the code. The CSS and HTML are linked correctly. Admittedly, this is just me tinkering to learn more about both CSS and HTML.
If you could look at this and give me some insight of how to get the image to show up in the rounded box, I would appreciate it.
EDIT: I'm afraid I wasn't entirely clear enough on what the issue was. The image in the title tag and that is associated with the "a.title" css code isn't the issue, that's just a header image.
The issue is that I want an image to appear in the div class="content" portion of the HTML with the image source coming from the CSS portion that is div.content.
I'm pretty bad at explaining my questions/problems, sorry. But thank you for all of your help thus far!
HTML:
<html>
<head>
<title>Some Title</title>
<link href="/Volumes/lastname/sitename/css/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="container">
<p class="title"><img src="/Volumes/last/sitename/media/header3.png"></img></p>
<div class="navbar">
<a class="nav" href="http://www.facebook.com">Facebook</a>
<a class="nav" href="http://www.twitter.com">Twitter</a>
</div>
<div class="content">
</div>
</div>
</body>
</html>
Here's the CSS - I know its more of the code than you need to know but here any way:
body {
background: #ffffff
width: 1000px;
height: 800px;
margin: 0 auto;
font-family: "Arial";
}
#container {
width: 900px;
height: 800px;
margin: 0 auto;
}
div.content {
background-image: url('/Volumes/last/sitename/media/imagename.jpg') no-repeat;
border-style: solid;
border-width: 2px;
width: 900px;
height: 500px;
margin-top: -20px;
border-radius: 7px;
border-color: #a0a0a0;
}
a.title {
margin-top:120px;
font-size: 36px;
}
div.navbar {
margin-top: -62px;
float: right;
font-size: 18px;
}
a.nav {
text-decoration: none;
color: #717171;
padding-right: 20px;
}
a.nav:hover {
color: #1299d6;
}
div.text {
margin-top: 100px;
}
p.text1 {
display: block;
text-align: center;
}
p.text2 {
display: block;
text-align: center;
}
p.text3 {
display: block;
text-align: center;
}
p.text4 {
display: block;
text-align: center;
}
div.links {
margin-top: 50px;
text-align: center;
}
a.links {
text-decoration: none;
color: #ffffff;
padding-left: 10px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
border-radius: 10px;
opacity: 0.6;
}
a.twitter {
background: #42a300;
}
a.contact{
background: #1299d6;
}
a.subbutton{
background: #690260;
}
a.links:hover {
opacity: 1.0;
}
First of all your image tag is wrong. It must be
<img src="/Volumes/last/sitename/media/header3.png" />
http://jsfiddle.net/vBRBM/
Test the code.
You should take the image out of the div and just make a rule for the class.
p.title {
background-image: url('/Volumes/last/sitename/media/imagename.jpg') no-repeat right top;
border-style: solid;
border-width: 2px;
width: 900px;
height: 500px;
margin-top: -20px;
border-radius: 7px;
border-color: #a0a0a0;
}
I suspect it could have something to do with the URL. maybe try the .. notation? It depends on where the picture is in relation to all your other files.
body
{
background-image:url(' *CHANGE THIS* ');
background-repeat:no-repeat;
background-position:right top;
border-style: solid;
border-width: 2px;
width: 900px;
height: 500px;
margin-top: -20px;
border-radius: 7px;
border-color: #a0a0a0;
}
img tags don't have anything in them so they don't need a separate closing tag. End it in the same tag by adding the slash on the end /> like
<img src="/Volumes/last/sitename/media/imagename.jpg" />
Related
You can check the outcome here in this link. At the bottom of the page, on the extreme right, there is a circle with an image of a tshirt. The image is not vertically centered properly.
The css of the anchor tag is this:-
.dfa {
padding: 5px 5px;
font-size: 30px;
width: 44px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
//line-height: 10px;
}
.dfa-tshirt {
background: #2c4762;
color: white;
}
The HTML is this:-
<a href="https://disabilityloverstshirtbuilders.com/" class="dfa dfa-tshirt">
<img src="https://png.icons8.com/color/100/t-shirt.png" style="width:35px; height:35; margin:auto; top:0; right:0; bottom:0; left:0;"/>
</a>
How can I center it? For the time being, I am using inline css for the img, which I will later remove to css file.
I would recommend to just keep it simple, let flex handle it for you. All your margins and padding will exacerbate things when your image changes sizes or other common situations
.dfa-tshirt {
background: #2c4762;
}
a {
display: flex;
justify-content: center;
align-items: center;
border-radius:50%;
width: 44px; height: 44px;
}
a img {
width: 35px; height: 35px;
}
<a href="https://disabilityloverstshirtbuilders.com/" class="dfa-tshirt">
<img src="https://png.icons8.com/color/100/t-shirt.png" />
</a>
EDIT: Non-flex solution --
I can't really plan for every scenario you may have, but to answer your question and support most browsers, I would also recommend just moving the actual styling to the image only:
a img {
width: 30px; height: 30px;
padding: 5px;
border-radius: 50%;
background: #2c4762;
}
<a href="https://disabilityloverstshirtbuilders.com/">
<img src="https://png.icons8.com/color/100/t-shirt.png" />
</a>
Use this:
img { vertical-align: middle; }
.dfa {
padding: 5px 5px;
font-size: 30px;
width: 44px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
line-height: 10px;
}
.dfa-tshirt {
background: #2c4762;
color: white;
}
img {
vertical-align: middle;
width:35px;
height:35px;
}
<a href="https://disabilityloverstshirtbuilders.com/" class="dfa dfa-tshirt">
<img src="https://png.icons8.com/color/100/t-shirt.png">
</a>
The images parent needs to be displayed inline-block
.dfa {
padding: 5px 5px;
font-size: 30px;
width: 44px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
display: inline-block;
}
The inline style should just be
<img src="https://png.icons8.com/color/100/t-shirt.png" style="width: 35px; height: 35px;"/>
I have just checked you site url, you can add two lines for the class as bellow.
display: table;
float: right;
.dfa {
padding: 5px 5px;
font-size: 30px;
width: 44px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
display: table;
float: right;
}
Img tag
<img src="https://png.icons8.com/color/100/t-shirt.png" style="width: 35px; height: 35px;"/>
I'm a novice coder and I'm building my first proper website. I have a column of button links down the right hand side of my page. However, they're only visible if the window is full-screen. If I use my mouse to shrink the size of the window, the buttons disappear. Is there any way that I can make the buttons stay visible if the window changes size?
Here's the HTML code:
/* Scroll down to the bit that says ALL MY BUTTONS for the relevant CSS. */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #fff;
color: #555;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row {
max-width: 1140px;
//margin: 0 auto;
}
header {
background-image: url(img/joshua-earle-183442.jpg);
background: no-repeat center center cover;
height: 100vh;
background-size: cover;
background-position: center;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 5%;
left 50%;
font-family: 'Orbitron', 'Arial', sans-serif;
margin-left: 15px;
word-spacing: 15px;
font-weight: 300;
}
h1 {
margin-top: 0;
color: #ef872e;
}
/****ALL MY BUTTONS***/
.quizzes {
position: absolute;
display: inline-block;
margin-left: 1730px;
margin-bottom: 10px;
top: 50%;
text-decoration: none;
color: #ef872e;
font-family: 'Orbitron';
padding: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #ef872e;
}
.calculators {
position: absolute;
display: inline-block;
margin-top: 20px;
margin-left: 1692px;
top: 55%;
color: #ef872e;
text-decoration: none;
font-family: 'Orbitron';
padding: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #ef872e;
}
.solarsystem {
position: absolute;
width: 230px;
display: inline-block;
margin-top: 40px;
margin-left: 1612px;
top: 60%;
color: #ef872e;
text-decoration: none;
font-family: 'Orbitron';
padding: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #ef872e;
}
.mysteries {
position: absolute;
width: 240px;
display: inline-block;
margin-top: 60px;
margin-left: 1602px;
top: 65%;
color: #ef872e;
text-decoration: none;
font-family: 'Orbitron';
padding: 10px;
padding-right: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #ef872e;
}
.otherresources {
position: absolute;
width: 220px;
display: inline-block;
margin-top: 30px;
margin-left: 1623px;
top: 75%;
color: #ef872e;
text-decoration: none;
font-family: 'Orbitron';
padding: 10px;
border-style: solid;
border-width: 1px;
border-radius: 10px;
border-color: #ef872e;
}
.full:hover,
.full:active {
background-color: #e97512;
color: #fff;
transition: background-color 0.3s;
transition: color 0.3s;
}
.ghost:hover,
.ghost:active {
border-color: #e97512;
background-color: #e97512;
color: #fff;
transition: background-color 0.3s;
transition: color 0.3s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato|Orbitron:400,500" rel="stylesheet" type=text/css>
<title>Interactive Galaxy</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>Explore the universe, or whatever...</h1>
</div>
<a class="quizzes full" href="#">Quizzes</a>
<a class="calculators ghost" href="#">Calculators</a>
<a class="solarsystem ghost" href="#">The Solar System</a>
<a class="mysteries ghost" href="#">Mysteries of Space</a>
<a class="otherresources ghost" href="#">Other Resources</a>
</header>
</body>
</html>
Remove all the margin-left from your links. surround all your links by a div like this:
<div class="links">
<a class="quizzes full" href="#">Quizzes</a>
<a class="calculators ghost" href="#">Calculators</a>
<a class="solarsystem ghost" href="#">The Solar System</a>
<a class="mysteries ghost" href="#">Mysteries of Space</a>
<a class="otherresources ghost" href="#">Other Resources</a>
</div>
and then change the links container style like this :
.links {
float: right;
}
I think the reason is your margin-left property, simply, the window is not enough to display these many pixels. better set:
display: inline-block;
float: right;
Also, better put your buttons in the list for better view and controls in styling.
Your margin-left property is defined by a set number of pixels:
margin-left: 1730px;
Even when the screen is smaller, that rule will still apply by pixel count. To make your page more responsive, change the margin to a percentage, like:
margin-left: 80%; /* 80% is just an example */
or use #VaxoBasilidze's idea of applying float: right;.
The solution is simple.
You used a top: in % , so when you resize the window. css calculates the stated % according to window current width.
so to solve this; update your top: to px; like top: 555px; so when you resize the window your buttons will be visible.
I am making website in html and css and I have a problem. In my css file I made id "full" which set wooden background after sidebar and it should continue on all page. In my class "picture" I made 80% width white panel - so there should be 80% white background in the middle and 10% edges should be wooden. It works correctly untill my article section, where I added some images of pizzeria. Immediately there is no wooden edges, only white. I don´t understand because my "full" id and "picture" class continue untill end of the body. Could somebody see where is error please?
Image showing error
* {
padding: 0;
margin: 0;
border: 0;
}
.container {
margin: auto;
overflow: hidden;
width: 100%;
}
#full {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
.picture {
margin: auto;
width: 80%;
background: white;
}
#pizzaObrazok {
background-image: url("img/pizzaCompleted.png");
width: 100%;
height: 210px;
margin: 0px;
}
nav {
float: left;
margin-left: 2px;
width: 100%;
height: 32px;
}
ul {
float: left
}
li {
display: inline;
border: 4px solid black;
font-size: 24px;
padding: 10px 64px;
background-color: #990000;
color: #ffffff;
}
li a {
color: #ffffff;
text-decoration: none;
padding-top: 8px;
padding-bottom: 5px;
vertical-align: middle;
}
#imgPizza {
width: 59%;
height: 270px;
padding-left: 190px;
padding-top: 30px;
padding-bottom: 30px;
}
article p {
font-size: 120%;
font-family: fantasy;
text-align: center;
margin-right: 160px;
}
#imgPizza2 {
width: 30%;
height: 270px;
position: absolute;
transform: rotate(345deg);
margin-top: 100px;
margin-left: 50px;
border: 6px solid red;
}
#imgPizza3 {
width: 30%;
height: 270px;
position: absolute;
margin-left: 390px;
margin-top: 100px;
transform: rotate(15deg);
border: 6px solid red;
}
#phone {
border: 2px solid black;
margin-top: 150px;
margin-right: 180px;
padding: 5px;
position: absolute;
display: inline;
text-align: center;
background: #ff4d4d;
}
<header>
<div id="pizzaObrazok">
</div>
</header>
<div id="full">
<section id="navigation">
<div class="container">
<nav>
<ul>
<li>ÚVOD</li>
<li>FOTO</li>
<li>JEDÁLNY LÍSTOK</li>
<li>KDE NÁS NÁJDETE</li>
<li>NÁZORY</li>
</ul>
</nav>
</div>
 
</section>
<div class="picture">
<img id="imgPizza" src="img/pizzacheese.jpg">
<aside id="phone">
<h2>Telefónne číslo:</h2>
<h2> 0905 741 963</h2>
</aside>
</div>
 
<div class="picture">
<article>
<p>U nás dostanete najchutnejšiu pizzu z výlučne kvalitných surovín</p>
<img id="imgPizza2" src="https://cdn.vox-cdn.com/uploads/chorus_image/image/50289897/pizzeria_otto.0.0.jpg">
<img id="imgPizza3" src="https://media-cdn.tripadvisor.com/media/photo-s/09/bc/74/79/pizzeria-du-drugstore.jpg">
</article>
</div>
</div>
You have your elements "#imgPizza2" and "#imgPizza3" whit position absolute outside your "#full" wrapper. You can do various things to achive the effect you are looking for but depends of many others things.
I think the simpliest way is to put your background image in to the body and not in the warpper "#full" or change the postion of your images among others.
body {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
It looks like the wood background is 620 x 387, so my first thought is that it is big enough to cover the first section but not the articles. Maybe add background-repeat: repeat-y; to your #full class and see if the wood border spreads further down the page.
I am tinkering with a basic site I plan to host my blog on in the future and I cannot manage to get one of my div elements to align with the rest of the site properly. I have linked to the project on CodePen below. I cannot seem to eliminate the white space between .header and .main. I had thought simply making the display: inline-block and keeping the margin/padding/border small would do the trick but I am obviously mistaken. Thoughts?
http://codepen.io/Kpmfastball/pen/xOvBNB
Below is the CSS for .main, the div class I am struggling with, and .heading, which is the div located right above it on the webpage.
.main {
display: inline-block;
height: 800px;
width: 82%;
margin: 1px;
padding: 1px;
border-width: 1px;
font-family: times;
background-color: #29BA91;
}
.heading {
display: block;
font-family: times;
width: auto;
height: 150px;
border-width: 1px;
border-color: black;
margin: 1px;
padding: 1px;
background-color: #0F8CB2;
color: #ffffff;
}
Just put this in .main:
vertical-align: top;
try to use HTML5 tags and also why don't you use css frameworks like Bootstrap or Foundation?
it's a lot that you should do to make your website responsive. you're code was a little bit messy so i cleaned it up for you..
h1 {
font-size: 50px;
text-align: left;
}
HEADER {
display: block;
font-family: times;
width: auto;
height: 150px;
border-width: 1px;
border-color: black;
margin: 1px;
padding:1px;
background-color: #0F8CB2;
color: #ffffff;
}
MAIN{
display: flex;
justify-content: space-between;
}
.nav {
display: flex;
width: 200px;
font-family: times;
height: 900px;
border-width: 1px;
border-color: black;
margin: 1px;
padding: 1px;
background-color: #0A6D37;
color: #ffffff;
}
.main {
display: flex;
flex:1;
height: 900px;
margin: 1px;
padding: 1px;
border-width: 1px;
font-family: times;
background-color: #29BA91;
}
.link1 {
color: #ffffff;
}
<html>
<head>
<title>A-Not-So-Well-Respected Man Blog</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1 style="padding: 5px; border: 5px; margin: 5px">A-Not-So-Well-Respected Man</h1>
<h5>Random Thoughts and Musings</h5>
</header>
<main>
<div class="nav">
<h3 align="center">Menu</h3>
<ul>
<li>Posts A-Z</li>
<li>Posts By Tag</li>
<li>Newest Posts</li>
<li>About Me</li>
</ul>
</div>
<div class="main">
<a class="link1" href="https://anotsowellrespectedman.wordpress.com/2016/02/14/love-and-brutality-a-history-of-february-14th/">Latest blog post</a>
</div>
</main>
</body>
</html>
Hope it helps...
you can add float:left; to class nav and class main, it will be like this:
.nav {
display: inline-block;
font-family: times;
width: 200px;
height: 900px;
border-width: 1px;
border-color: black;
margin: 1px;
padding: 1px;
background-color: #0A6D37;
color: #ffffff;
float:left;
}
.main {
display: inline-block;
height: 800px;
width: 82%;
margin: 1px;
padding: 1px;
border-width: 1px;
font-family: times;
background-color: #29BA91;
float:left;
}
The following is my CSS code:
<style type="text/css">
body {
background-color:#FFF;
font-weight:bold;
font-size:12pt;
font-family:Arial,sans-serif;
}
.container {
width: 800px;
margin: 0 auto;
}
#header {
text-align: left;
padding-top: 220px;
font-size: 60pt;
}
#subheader {
text-align:left;
font-size: 15pt;
color: #666;
margin-top: -5px;
margin-bottom: 15px;
}
#email {
width: 165px;
height: 25px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-align:center;
border: 2px solid;
color: #666;
border-color: black;
}
input[type=submit] {
height: 30px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #000;
border-color: #fff;
color: #fff;
}
#socialMedia {
padding-top: 60px;
text-align:center;
}
#video {
padding-left: 600px;
margin-top: -260px;
}
</style>
The HTML divs are divided as follows:
<div class="container">
<div id="header">
<Content>
</div>
<div id="subheader">
<Content>
</div>
<Form Input Field>
<div id="video">
<Embedded Video>
</div>
<div id="socialMedia">
<Social Media Image Links>
</div>
</div>
</body>
</html>
The issue I'm having with this is that while the page attempts to center itself with browser rescale, only the left side of the content is really adjusting. The right side essentially hangs on to the edge of the page, thereby not centering it.
Any suggestions? I tried this using Chrome.
This may be the problem:
#video {
padding-left: 600px;
margin-top: -260px;
}
I'm not sure what size the video container is but maybe this is why it is not centering properly with everything else.
When you use this CSS instead, what happens?
#video {
text-align:right;
margin-top: -260px;
}
Maybe I'm misunderstanding what the problem is. Could you send a screenshot of the issue?
Try setting a max-width on the container:
.container {
max-width: 800px;
margin: 0 auto;
}
Here's a demo: http://jsfiddle.net/Ltf5U/