I'm new in HTML, CSS and I'm having trouble with editing the footer on my html page. I'm trying to resize the facebook and twitter icon too much smaller size (both the same size), they have them side by side in the bottom centre of the html page along with the copyright sign.
HTML:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="homepageuni.css">
<meta charset="utf-8">
<meta name="homepage" content="a homepage for the survey website">
<title> Kingston University Survey Homepage</title>
<body>
<img src="kingstonunilogo.jpg" id="uni" alt="uni logo"/>
<div id = "buttons">
<button onclick="window.location='http://www.google.com'" type="button home-button">Home</button>
<button onclick="window.location='http://www.google.com'" type="button contact-button">Contact Us</button>
LogIn
</div>
<br/><br/><br/><br/><br/><br/>
<img src="homepagepic.jpg" alt="homepagepic" id="middlepic" />
<br/>
<div id="footer">
©
<img src="facebookpic.png" alt="facebookpic" />
<img src="twitterpic.jpg" alt="twitterpic"/>
</div>
</body>
</html>
CSS:
#middlepic {
display: block;
margin: 0 auto;
}
#uni {
display: block;
width: 250px;
height: 200px;
}
#footer {
width: 100%;
height:100px;
display: inline-block;
text-align: center;
}
button {
height: 30px;
width: 200px;
background-color: #ccc;
border-radius: 10px;
float:left;
}
a {
text-decoration: none;
color: #000;
}
just add css rule like bellow
#footer img {
width: 25px;
height: 25px
}
if you wish to change size just change width and height
I would add a class to each image and set their size that way.
HTML
<div id="footer">
©
<img class="social-badge" src="facebookpic.png" alt="facebook logo">
<img class="social-badge" src="twitterpic.jpg" alt="twitter logo">
</div>
CSS
.social-badge {
width: 200px;
}
try this.
#footer {
text-align: center;
}
.logos{
width: 25px;
height: 25px;
}
<img src="kingstonunilogo.jpg" id="uni" alt="uni logo" />
<div id="buttons">
<button onclick="window.location='http://www.google.com'" type="button home-button">Home</button>
<button onclick="window.location='http://www.google.com'" type="button contact-button">Contact Us</button>
LogIn
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<img src="homepagepic.jpg" alt="homepagepic" id="middlepic" />
<br/>
<div id="footer">
©
<img class="logos" src="facebookpic.png" alt="facebookpic" />
<img class="logos" src="twitterpic.jpg" alt="twitterpic" />
</div>
Just add an class to the img tag an add a style from css like this.
CSS:
.socialimg { width: 10px; }
HTML:
<img class="socialimg" src="facebookpic.png" alt="facebookpic">
<img class="socialimg" src="twitterpic.jpg" alt="twitterpic">
Related
I am very new to this so please be kind :)
I am creating a portfolio page with an image gallery, with a header on top and a footer at the bottom. As soon as I entered the code for a gallery, my footer moved - and now I can't see how I can make it all in one line (like it is on the home page I created! It seems fine!)
If anyone would like to give any advice on how to fix this, I'd be so happy! Also for some reason the footer is just floating in the middle of the page?!
Thank you.
#banner{
text-align: center;
}
#heading{
font-size: 25px;
text-align: center;
}
html * {
font-family: 'Quicksand', sans-serif;
text-decoration-color: #f13c20;
}
.navbar{
text-align: center;
font-size: 23px;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.column {
float: center;
width: 32%;
padding: 4px;
}
.row::after {
display: table;
}
.footer-navbar{
text-align: center
font-size: 20px;
position: fixed; bottom
}
#copyfoot{
text-align: center;
}
#footernav{
text-align: center;
}
<!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>Maley Like Maybe</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="portfolio.css">
</head>
<body>
<!-- <---Header--->
<div id=banner>
<img src="images/banner.jpg" width="1250px" height="159px"/></div>
<div id="heading">
<h1>Karen Maley</h1>
</div>
<nav class="navbar">
Home
<!-- Testimonials -->
Contact
</nav>
<hr />
<br>
<br>
<br>
<!-- <---Main -->
<div class="gallery">
<a target="_blank" href="images/portfolio/adviceteacher.jpg">
<img src="images/portfolio/adviceteacher.jpg" alt="Advice from my Art Teacher 2001">
</a>
<div class="desc">Advice from Art Teacher 2001</div>
</div>
<div class="gallery">
<a target="_blank" href="images/portfolio/epping.jpg">
<img src="images/portfolio/epping.jpg" alt="Forest">
</a>
<div class="desc">Epping Forest</div>
</div>
<div class="gallery">
<a target="_blank" href="images/portfolio/immaterial2022.jpg">
<img src="images/portfolio/immaterial2022.jpg" alt="I'mmaterial">
</a>
<div class="desc">I'mmaterial</div>
</div>
<div class="gallery">
<a target="_blank" href="images/portfolio/lifedrawing.jpg">
<img src="images/portfolio/lifedrawing.jpg" alt="Life Drawing">
</a>
<div class="desc">Life Drawing - Movement</div>
</div>
<br>
<div class="gallery">
<div style="padding:35% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/721109316?h=07caa51b7c&badge=0&autopause=0&player_id=0&app_id=58479"
frameborder="0" allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"
title=""Peace is Exhausting" by Karen Maley 2022">
</iframe></div><script src="https://player.vimeo.com/api/player.js"> </script>
</div>
<div class="gallery">
<div style="padding:40% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/721142192?h=bfcb05da44&badge=0&autopause=0&player_id=0&app_id=58479"
frameborder="0" allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"
title=""Mobile""></iframe></div>
<script src="https://player.vimeo.com/api/player.js"></script>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<!-- <---Footer -->
<footer>
<div id="footernav">
<div class="footer-content">
<nav class="footer-navbar">
Home
<!-- Testimonials -->
Portfolio
Contact
</nav>
</div>
<br>
<br>
<div class="row">
<div class="column">
<a href="mailto:maleylikemaybe#hotmail.com">
<img src="images/socialMedia/email.png" alt="maleylikemaybe#hotmail.com"
width="64px" height="64px"><p>maleylikemaybe#hotmail.com</p>
</a>
</div>
<div class="column">
<a href="https://www.instagram.com/maleylikemaybe/">
<img src="images/socialMedia/insta.jpg" alt="#maleylikemaybe"
width="64px" height="64px" ><p>#maleylikemaybe</p></a>
</a>
</div>
<div class="column">
<a href="https://www.youtube.com/channel/UC96yaCbQbhyck2mNY0lMU9Q">
<img src="images/socialMedia/youTube.png" alt="Maley Like Maybe"
width="64px" height="64px" ><p>Maley Like Maybe</p></a>
</div>
</div>
<div id="copyfoot">
<p class="footer-cpr"> © Karen Maley 2022</p></div>
</footer>
</body>
</html>
Hello I'm completely new to HTML and I was trying to make a little project for myself so that I can learn a little bit more, but I wanted to ask something about how I can change the height of this text I'm trying to make it like Twitter and so that the tweets are separate from the others.
So that the "tweets" are separate like this
<!DOCTYPE html>
<html>
<head>
<title>My first web page!</title>
<style>
img {
width: 66px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
.username {
font-weight: bold;
margin-top: 30px;
}
</style>
</head>
<body>
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Yeni profil fotom nasıl?</p>
<img src="images/killjoy.jpg" />
<p class="username">#Killjoy</p>
<p>Profil foton çok tatlı!</p>
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Teşşekür ederim seninkiside öyle!</p>
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Merhabaa! Jett bu gün çok üzgün :(</p>
</body>
</html>
<html>
<head>
<title>My first web page!</title>
<style>
img {
width: 66px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
.chat {
margin: 100px 0;
}
.username {
font-weight: bold;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="chat">
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Yeni profil fotom nasıl?</p>
</div>
<div class="chat">
<img src="images/killjoy.jpg" />
<p class="username">#Killjoy</p>
<p>Profil foton çok tatlı!</p>
</div>
<div class="chat">
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Teşşekür ederim seninkiside öyle!</p>
</div>
<div class="chat">
<img src="images/reyna.png" />
<p class="username">#Reyna</p>
<p>Merhabaa! Jett bu gün çok üzgün :(</p>
</div>
</body>
</html> ```
create a div that contain image and text and
give some margin or you want the last message to take all the remaining space?
When I include css/bootstrap.min.css it overwrites some elements of my site such as 'a' tags, my .nav bar and font used on site.
Load order:
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="custom.css">
<link rel = "stylesheet" href = "styl.css" type = "text/css" />
<link href="css/fontello.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Oswald:400,600&display=swap&subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
html :
<div class="wrppr">
<div class="header">
<div class="logo">
<img src="LOGO.png" style="vertical-align:middle;height: 250px; width: 250px; float: left">
<span style="vertical-align:middle;"></br>Voodoo Doll Ink Studio</span>
<div style="clear:both"></div>
</div>
</div>
<div class="nav">
<ul>
list here
</div>
<div class="image">
<img src="tatofront.jpg" style="opacity: 0.6"/>
</div>
<div id="opis">
<p></p>
</div>
<div style="clear:both"></div>
<div id="option2">
<a href="#">
<div id="ig">
<i class="icon-instagram"></i>
</div>
<div class="txt">Sprawdź naszego Instagrama!</div>
</a>
<script src="https://snapwidget.com/js/snapwidget.js"></script>
<iframe src="https://snapwidget.com/embed/786091" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; "></iframe>
</div>
<div style="clear:both"></div>
<div id ="option3">
<div class="logobot">
<img src="duda.jpg" style="height: 300px; width: 300px;">
</div>
Tu opis o pierciengu i cennik
</div>
<div style="clear:both"></div>
<div id ="option4">
<div class="logobot">
<img src="duda.jpg" style="height: 300px; width: 300px; float:right;">
</div>
Tu opis o dreadach i dreadlockach
</div>
<div id="option5">
<div class="logobot">
<img src="LOGO.png" style="height: 300px; width: 300px;">
</div>
<div style="clear:both"></div>
<div class="footer">
VOODOO DOLL INK
</div>
</div>
Mostly everything is good though few things are overwritten:
a tag is unedited,
logo changes text alignement,
text in nav goes lower and its not centered
Elements which are overwritten by bootstrap.min.css in custom.css:
a {
color: white;
text-decoration: none;
display: block;
}
.logo
{
font-weight: bold;
vertical-align:middle;
width: 1000px;
font-size: 72px;
text-align: middle;
margin-left:auto;
margin-right:auto;
}
.nav
{
padding: 10px;
width:auto;
border-top: 1px solid rgb(38, 38, 38);
border-bottom: 1px solid rgb(38, 38, 38);
top: 0px;
z-index: 100;
height: 40px;
margin-left: auto;
margin-right: auto;
font-size: 20px;
text-align: center;
background-color:#0a0a0a;
}
Its my first time making responsive site || using bootstrap.
If your CSS files are in public/css, you should write:
<link rel="stylesheet" href="css/custom.css">
When you write the href, the start folder is public. Read more about it here.
Also, you are missing an e on the 3rd line:
<link rel="stylesheet" href="styl.css"> -> <link rel="stylesheet" href="style.css">
I can't get the .center class to apply to the following HTML. It gets applied to the ul element for some reason, but nothing else. Am I applying it wrong? Does it have something to do with IDs? I thought adding a class to a div would apply it to all elements within.
.center {
text-align: center;
}
ul {
list-style: none; /* getting rid of bullet pts */
padding: 0; /* practice to remove padding so we can set it later */
}
img {
display: inline;
width: 200px; /* we set in % or vh(view height) for responsive */
height: 100px; /* design - changes with page size (phones tablets etc) */
}
#footer {
width: 100%;
border-top: solid 2px black;
background-color: white;
position: fixed;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Guessing Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Bootstrap and CSS here-->
</head>
<body>
<div id='app' class='center'>
<div id='headers'>
<!-- Title and subtitles! -->
<h1 id='title' class='center'> Rav's Cheesy Guessing Game! </h1>
<h2 id='subtitle'> Guess A Number Between 1-100, You Won't </h2>
</div>
<div id='main'>
<div id='input-parent'>
<!-- Player's guess input, and submit button -->
<input id='player-input' class='center' placeholder="#" autofocus maxlength=2>
<button id='submit-button' type=submit>Go!</button>
</div>
<div id='guesses'>
<ul id='guess-list'>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
</ul>
<!-- unordered list of guesses -->
</div>
<div id="menu-btns">
<!-- reset and hint buttons -->
<button id='reset'>Reset</button>
<button id='hint'>Hint</button>
</div>
</div>
</div>
<div id='footer' class='center'>
<div>
<div class=''>
<img src='fa-logo#2x.png' alt="image">
</div>
<div class=''>
<h4>Project by Ravish Rawal</h4>
</div>
<div class=''>
<img src='grace_hopper_academy.png' alt="image">
</div>
</div>
</div>
</body>
</html>
I'm currently in the process of creating a HTML/CSS layout for a Kiosk-style site.
However, I am having a few issues making the alignment of the images and text to work exactly how I want.
The logo and header should be fixed in the same place across every page, whereas I might need to expand the amount of buttons on-screen.
Here is the illustration of an example: Example Image, where:
Black box represents logo
Blue boxes represent individual buttons
Current HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" type="text/css" href="style.css">
<html>
<body background="background.png">
<div id="logo">
<img src="logo.png">
</div>
<br>
<div id="icons1">
<img src="button-wmcweb.png"></a>
</div>
<div id="icons1">
<img src="button-appointments.png"></a>
</div>
<div id="icons1">
<img src="button-prescriptions.png"></a>
</div>
<br>
<div id="icons2">
<img src="button-somccg.png"></a>
</div>
<div id="icons2">
<img src="button-patient.png"></a>
</div>
<div id="icons2">
<img src="button-nhschoices.png"></a>
</div>
</body>
</html>
CSS:
body {
text-align:center;
}
#mainContainer {
margin:0 auto;
}
#icons1 {
display: inline-block;
}
#icons2 {
display: inline-block;
}
Is using inline blocks the best practice for what I'm trying to achieve?
Any help would be much appreciated.
I have created for you a JSFiddle with what you want as a starting point.
Click for the full screen mode for the fiddle.
There is the full code below for the ease of referencing.
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body background="background.png">
<div id="logo">
<div id="logoimg">
<img src="http://cs614926.vk.me/v614926650/93b6/n9S5OGKt8L0.jpg" />
</div>
<div id="logotext">lorem ipsum</div>
</div>
<div class="row"> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a>
</div>
<div class="row"> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a> <a href="http://stackoverflow.com/">
<img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
</a>
</div>
</body>
</html>
style.css:
body {
text-align: center;
}
#logoimg, #logotext, .row > img {
display: inline;
}
#logo, .row {
margin: 30px 10px;
min-width: 1000px;
}
#logotext {
min-width: 320px;
vertical-align: top;
font-size: 36px;
padding: 0 20px;
}
img {
width: 320px;
resize: noresize;
}
a:link {
text-decoration:none;
}
For more info on HTML/CSS, consider checking the following w3school tutorials: HTML and CSS.
Your HTML was wrong in a few places. No opening <a> tag, multiple id's with the same name, and the <link> for the css needs to be inside the <head></head> tags, as shown below.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Is this what you're looking to achieve?
http://jsfiddle.net/Q8gVL/