I'm trying to add the titles of this 2 image below them. But every time I try to add either h or p the text goes to do the right side instead to the bottom.
What am I doing wrong? Im just starting to learn html and I really like it but I'm stuck, and this is for my exam. Need help in this.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Comenzando la Fotografia</title>
</head>
<body>
<div class="contenido">
<div id="pagetitle">
<h1>Comenzando la Fotografia</h1>
<div id="navigation">
<ul id="nav_item">
<li>Inicio</li>
<li>Paisajes</li>
<li>Retratos</li>
</ul>
<div style="clear:both"></div>
</div>
</div>
<div>
<section id="central">
<img id="centralpic" style="align-content: center" src="img/paisajecentral.png" alt="imagencentral" title="paisaje1" width="730" height="413">
</section>
<article id="sidebyside">
<img id="leftpic" src="img/portadapng.jpg" alt="imagenderecha" title="paisaje2" width="640" height="400">
<img id="rightpic" src="img/woman.jpg" alt="imagenizquierda" title="retrato1" width="736" height="1104">
</article>
</div>
<footer class="piedepagina">
<div id="footer1">
<section id="contact">
<h3>Contacto</h3>
<p>Correo: rdelarosa042019#gmail.com</p>
<p>Calle 3ra Avenida la Paz</p>
<p>Telefono: 220-0000</p>
</section>
<section id="terms">
<h3>Terminos</h3>
<p>Nos reservamos los derechos de autor y todo contenido es privado</p>
</section>
<section id="redes_sociales">
<h3>Redes Sociales</h3>
<a target="_blank" href="https://www.facebook.com"><img src="icon/facebook.png">Comenzando la Fotografia</a>
<a target="_blank" href="https://twitter.com/"><img src="icon/twitter.png">#comenzandolafotografia</a>
<a target="_blank" href="https://www.instagram.com/?hl=en"><img src="icon/instagram.png">#comenzandolafotografia</a>
</section>
<section id="rights">
<h3>Derechos</h3>
<p>Ruben De La Rosa</p>
<p>Copyrights©-2017</p>
</section>
</div>
</footer>
</div>
</body>
</html>
body{
background-color: #02010a;
color: white;
}
.contenido{
width: 900px;
margin: 0 auto;
text-align: center;
}
#pagetitle{
background-color: #5b7989;
width: 100%;
height: 100px;
margin-top: 0 auto;
display: block;
position: relative;
border-top-left-radius: 10px;
border-top-right-radius: 10xp;
}
h1{
float: left;
display: inline-block;
text-shadow: 2px 2px #02010a;
padding-left: 10px;
}
a{
text-decoration: none;
}
ul li a{
color: white;
}
#navigation{
float: right;
}
#nav_item{
list-style-type: none;
font-size: 100%;
padding: 10px 10px 10px 10px;
}
li{
display: inline;
}
#central{
background-color: #82c3a6;
width: 900px;
height: 450px;
display: block;
position: relative;
}
#centralpic{
align-content: center;
margin-top: 15px;
}
#sidebyside{
background-color: #d5c75f;
border-width: 1px;
display: flex;
height: 500px;
width: 900px;
overflow: hidden;
align-content: center;
}
#leftpic{
height: 300px;
width: auto;
position: relative;
margin: 60px auto;;
}
#rightpic{
height: 300px;
width: auto;
position: relative;
margin: 60px 70px auto;
align-content: center;
}
Wrap your <img> element to <figure> element and after <img> element add <figcaption> element. So your code will be something like this :
<figure>
<img id="leftpic" src="img/portadapng.jpg" alt="imagenderecha" title="paisaje2" width="640" height="400">
<figcaption>Your text here</figcaption>
</figure>
Hope it help you out.
Related
This is the HTML. I need the header to be visible all the time, but when I click the link in the nav bar, the content goes below the sticky header. Can I solve this ussing only CSS? I have tried several solutions but none of them seems to work, perhaps because I use a header wraping another header.
'''<link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap"
rel="stylesheet">
<header id="header" class="header-outer"><div class= "header-logo"><a><img alt="img"
id="header-img" class= "smaller-image img " src=
https://logopond.com/logos/4797fa121d6d6c33b9d7d4411b994aa8.png
https://farm4.static.flickr.com/3071/2371922778_c1634f19e2.jpg?v=0></a></div>
<div class="header-inner responsive-wrapper">
<div>
<h1>Le Librairie du Parthénon</h1>
</div>
<nav class="header-navigation">
<ul>
<li><a class= "nav-link" href="#catalogo">Catalogo</a></li>
<li><a class= "nav-link" href="#ejemplares-raros">Raros</a></li>
<li><a class= "nav-link" href="#ejemplares-unicos">Unique</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="box content-box">
<div class="black-box">
<section id="catalogo">
<div class="desc">
<h2 class="dark-red">Catalogo de libros</h2>
<p>Nuestro catalogo tiene una amplia colección de ejemplares antiguos y poco comunes</p>
</div>
</section>
</div>
<div class="container">
<section id="ejemplares-raros">
<div class="desc">
<h2 class="dark-red">Ejemplares raros</h2>
<p>Libros extremadamente raros y difíciles de encontrar</p>
</div>
</section>
</div>
<div class="container">
<section id="ejemplares-unicos">
<div class="desc">
<h2 class="dark-red">Ejemplares únicos</h2>
<p>Libros únicos e invaluables</p>
</div>
</section>
</div>
<div>
<p>Los libros malditos mas peligrosos de la historia</p>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/eZIjIWbEZdk"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<input name="email" id="email" type="email" placeholder="email"/>
<input id="submit" type="submit"/>
</form>
</div>
</div>
</main>'''
This is the CSS. You can see the header inner an header outer yha I use to make the header change size when you scroll down the page. The problem is that when I click a link in the nav bar the content goes below the header and it is not visible. I am a begginer and I would like to find a solution with CSS only, I already tried several solutions but anything seems to work.
'''#media (min-width: 576px;)
nav {
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 50px;
color: rgb(143,55,36);
}
body {
padding: 0;
margin: 0;
}
.smaller-image {
width:150px;
}
header {
display:flex;
position: fixed;
top:0;
left:0;
bottom:10;
width:100%;
}
.header-outer {
display: flex;
align-items: center;
position: sticky;
height: 120px;
margin: 0;
top: -50px;
background-color: rgb(153,0,0);
box-shadow: 0 2px 10px 0 rgba(0,0,0, 0.1);
}
.header-inner {
height: 70px;
position: sticky;
margin:0;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between
}
.header-logo img {
display: block;
height: 70px;
}
.header-navigation {
display: flex;
flex-wrap: wrap;
}
.responsive-wrapper {
width: 90%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
nav > ul {
width: 35vw;
display: flex;
flex-direction: row;
justify-content: space-around;
font-weight: 400;
font-size: 22px;
color: silver;
}
ul {
color: rgb(123,55,36);
}
a {
color: rgb(21,5,11);
}
[type= "submit"] {
padding: 15px;
margin: 15px;
display: flex;
}
.box {
border-style: solid;
border-color: rgb(21,72,82);
border-width: 5px;
background-color: rgb(82,32,21);
color: rgb(21,72,82);
padding: 10px;
}
.second-box {
border-style: solid;
border-color: rgb(21,72,82);
border-width: 5px;
background-color: rgb(82,32,21);
color: rgb(21,72,82);
padding: 10px;
}
.black-box {
background-color: #292929;
padding: 30px;
margin-top: 85px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.content-box {
box-sizing: content-box;
}
main {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 180px;
margin-right: 150px;
}
.padding {
padding-top: 170px;
}'''
I am trying to get 4 images to line up with text centered under them. I have been able to get them close but they are still aligning slightly off. I am still trying to get the hang of HTML 5, and have tried to find some others that have had the same issue but have not had much luck. Any advice would be great since I have hit a brick wall. I will attach a screen shot of my page.
#navigation {
height: 40px;
font-size: 20px;
font-family: Verdana;
font-weight: bold;
text-align: center;
background-color: #000000;
}
main {
margin: 0 210px 0 160px;
padding: 1px 10px 20px 10px;
background-color: #FFFFFF;
display: block;
color: #000000
}
body {
background-color: #FFFFFF;
margin: 0;
}
header {
background-color: #000000;
color: #FFFFFF;
text-align: right;
box-sizing: border-box;
display: block;
height: 120px;
padding: 0 20px;
border-bottom: 2px solid;
}
aside {
display: block;
box-sizing: border-box;
float: right;
width: 150px;
}
footer {
display: block;
box-sizing: boreder-box;
font-size: .70em;
color: #FFFFFF;
background-color: #000000 padding-top: 10px;
clear: both;
}
#container {
background-color: #969696;
color: #000000;
min-width: 960px;
font-family: Verdana, Arial, sans-serif;
}
#navigation ul {
height: auto;
padding: 5px 20px;
margin: 1px;
}
#navigation li {
display: inline;
padding: 50px;
}
#navigation a {
text-decoration: none;
color: #FFFFFF;
}
body {
background-color: #969696;
}
side {
display: block;
box-sizing: border-box;
float: right;
width: 150px;
}
#rose {
overflow: hidden;
}
.imageContainer {
float: left;
margin-right: 250px;
margin-left: 20px;
}
p {
text-align: center;
}
.imageContainer2 {
float: center;
margin-right: 250px;
margin-left: 20px;
}
p {
text-align: center;
}
<!DOCTYPE html >
<html lang="en">
<head>
<title>St. Pete Flower Market</title>
<meta charset="utf-8">
<link rel="stylesheet" href="test.css">
</head>
<body>
<div id="container">
<header role="banner">
<span>Search</span>
<h1>St. Pete Flower Market</h1>
</header>
<nav>
<div id="navigation">
<ul>
<li><a class="navigation" href="index.html">Home</a></li>
<li><a class="navigation" href="contact.html">Contact Us</a></li>
<li><a class="navigation" href="occasions.html">Occasions</a></li>
<li><a class="navigation" href="flowers.html">Flowers</a></li>
<li><a class="navigation" href="giftbaskets.html">Gift Baskets</a></li>
<li><a class="navigation" href="deals.html">Deals</a></li>
<li><a class="navigation" href="aboutus.html">About Us</a></li>
</ul>
</div>
</nav>
<section id="side">
</section>
<aside role="complementary">
</aside>
<main>
<div id="rose">
<h1><img src="roses.jpg" width="100%" height="300px">
</div>
</h1>
<div class="image123">
<div class="imageContainer">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</div>
< <div class="image1234">
<div class="imageContainer2">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer2">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</main>
<footer> fjiefjwiofjewfjiewofjewo</footer>
</div>
</body>
</html>
There are some errors in your code:
the h1 tag inside the div #rose is actually closing outside it. consider getting rid of the h1 tag in the first place, unless you need a title with the top image.
A similar error is div class="image1234" closing outside the main tag.
My solutions (which seems to work fine) is to get rid of the css for both the image containers, add an outer div and set its css to display:flex; and justify-content: space-around;
that worked for me
<div id="newDiv">
<div class="image123">
<div class="imageContainer">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</div>
<div class="image1234">
<div class="imageContainer2">
<img src="sunnydays.jpg" height="300" width="300" />
<p>This is image 1</p>
</div>
<div class="imageContainer2">
<img class="middle-img" src="flowerdeal.jpg" / height="300" width="300" />
<p>This is image 2</p>
</div>
</div>
</div>
the css:
#newDiv {
display:flex;
content: space-around;
}
have a look here for more info:
https://www.w3schools.com/css/css3_flexbox.asp
I have a problem..
I am trying to make my footer bar but it is not going very well.
The copyright logo, the year and my name are on the left and the social icons have to go to the right. I can't solve this problem! ;( I can't float it to the right.
If someone knows how it works, please react! :D
footer {
width: 100%;
height: 50px;
clear: both;
background-color: #303030;
color: #868686;
position: relative;
}
footer span {
display: table-cell;
vertical-align: middle;
height: 50px;
}
.footerwidth {
width: 80%;
margin: 0 auto;
}
.icons {
float: right;
width: 150px;
}
<footer>
<div class="footerwidth">
<span>© 2016 Jasper Mulder
<div class="icons">
<img src="../images/icons/facebook.png">
<img src="../images/icons/instagram.png">
<img src="../images/icons/linkedin.png">
</div>
</span>
</div>
</footer>
Thank you for helping me!
Change your HTML and put the social icons before the copyright span:
<footer>
<div class="footerwidth">
<div class="icons">
<img src="../images/icons/facebook.png">
<img src="../images/icons/instagram.png">
<img src="../images/icons/linkedin.png">
</div>
<span>© 2016 Jasper Mulder</span>
</div>
</footer>
Move your .icons div outside the <span> and also add float: left to the span:
footer {
width: 100%;
height: 50px;
line-height: 50px;
clear: both;
background-color: #303030;
color: #868686;
position: relative;
}
footer span {
display: table-cell;
vertical-align: middle;
height: 50px;
float: left;
}
.footerwidth {
width: 80%;
margin: 0 auto;
}
.icons {
float: right;
width: 150px;
}
<footer>
<div class="footerwidth">
<span>© 2016 Jasper Mulder</span>
<div class="icons">
<a href="#">
<img src="../images/icons/facebook.png">
</a>
<a href="#">
<img src="../images/icons/instagram.png">
</a>
<a href="#">
<img src="../images/icons/linkedin.png">
</a>
</div>
</div>
</footer>
I also added line-height: 50px; as a little bonus ;)
Here you go, there are many solutions.
footer span {
position:relative;
top:15px;
left:-110px;
height: 50px;
}
Do not use table for layout.
http://codepen.io/damianocel/pen/BjdWWq
Here is the jsFiddle for your problem.
Please go through it.
https://jsfiddle.net/dhqp3Ln5/
css should be:
.footerwidth {
width: 80%;
margin: 0px auto;
PADDING-TOP: 15PX;
}
footer span {
display: inline-block;
height: 50px;
}
.icons {
float: right;
HEIGHT: 50PX;
width: 150px;
}
HTML should be:
<div class="footerwidth">
<span>© 2016 Jasper Mulder</span>
<div class="icons">
<img src="../images/icons/facebook.png">
<img src="../images/icons/instagram.png">
<img src="../images/icons/linkedin.png">
</div>
</div>
Demo: https://jsfiddle.net/9n4cav1o/
I am trying to reproduce a layout similar to Youtube to practice some of the things I've learned just recently. How can I reposition an embedded Youtube video?
I tried making a parent div for the embedded video with display: relative, but it's not budging.
http://jsfiddle.net/GztRt/
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="bluetube.css" /> <title> Webpage #3 </title>
</head>
<body>
<div id="header"> <!-- Top header with logo, search bar, upload button-->
<a href="http://www.youtube.com" id="logo">
<div id="blue"> Blue</div>
<div id="tube">Tube</div>
</a>
<form style="display: inline; width: 200px;" name="searchbar" action="searchinput.asp" method="get">
Search <input type="text" name="searchinput">
<input type="submit" value="Submit">
</form>
<a href"http://www.amazon.com" id="uploadparent">
<div id="upload">Upload</div>
</a>
</div>
<div id="videobox">
<object width="420" height="315">
<param name="movie" value="http://www.youtube.com/v/dQw4w9WgXcQ? hl=en_US&version=3"></param><param name="allowFullScreen" value="true">
</param><param name="allowscriptaccess" value="always">
</param><embed src="http://www.youtube.com/v/dQw4w9WgXcQ?hl=en_US&version=3" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true">
</embed></object>
</div>
<div id="column_box_right"></div> <!-- Related Videos spans the Right side! -->
<div id="column_box_left>ddddddddddddddddddddddd</div> <!-- column spans the left side! -->
<div id="vidinfo"></div>
<div id="footer"></div>
CSS:
html body {
width: 100%;
}
#header {
height: 35px;
background-color: grey;
margin-top: -6px;
position: relative;
margin-left: -7px
overflow: auto;
min-width: 1000px;
}
#blue {
height: 35px;
width: 60px;
background-color: grey;
border-radius: 4px;
text-align: center;
color: blue;
display: inline-block;
font-size: 20px;
font-family: Verdana;
}
#logo {
float: left;
margin-right: 14%;
}
#tube {
height: 35px;
width: 60px;
background-color: blue;
border-radius: 4px;
text-align: center;
display: inline-block;
color: white;
font-size: 20px;
font-family: Verdana;
}
#upload {
height: 30px;
width: 100px;
}
You had an extra space in your #videobox div. Changing it from #video box to #videobox allowed the div to position correctly in your jsfiddle. I'm not sure if this is your issue on your site, but since most copy and paste, I figured I'd throw it out there.
This will move your videobox div where ever you want on the screen. This will move it to the center.
#videobox {
display: block;
height: 100%;
left: 25%;
position: absolute;
top: 25%;
width: 100%;
}
I have a text-rollover where an address-block appears on rollover. The address-block itself has two independent rollover links.
Here it is (I isolated the relevant top menu for simplification reasons). Please roll over the "contact" menu to see what I mean:
here's the example page
The email link works fine but I can't figure out how to make the phone link independent from the email link so that if you rollover the email link it leeds you to your email browser and if you rollover the phone line it dials the respective phone number (with href="tel:917-650...." etc.). If I have both links within their respective paragraph tags the contact rollover doesn't work anymore. Looks like the link tag needs to be wrapped around the address-block for the contact-rollover work, and nested links won't be the solution either. How can I resolve that?
The HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>raphaelzwyer</title>
<link href="css/raphaelzwyer.css" type="text/css" media="screen" title="raphaelzwyer stylesheet" rel="stylesheet" charset="utf-8"/>
<script type="text/javascript" src="js/raphaelzwyerFive.js"></script>
</head>
<body onload="MM_preloadImages('images/menubg_b.png','images/th_att_b.png','images/th_bmw_b.png','images/th_directv_b.png','images/th_giostra_b.png')">
<div id="container">
<div id="topmenu">
<ul id="menulist">
<li class="menubuttonactive">portfolio</li>
<li class="buttonspaces"><img src="images/spacer.png" width="68" height="36" alt="spacer" /></li>
<li class="menubuttons">about</li>
<li class="buttonspaces"><img src="images/spacer.png" width="12" height="36" alt="spacer" /></li>
<li class="menubuttons">resume</li>
<li class="buttonspaces"><img src="images/spacer.png" width="180" height="36" alt="spacer" /></li>
<li id="contactrollover">
<div class="menubuttons">
<a href="mailto:info#raphaelzwyer.com" target="_new">contact
<span id="addressbox">
<p id="email">info#raphaelzwyer.com</p>
<p id="phone">917-650-9534</p>
<p id="address">143 leonard street, apartment 5, brooklyn ny 11206</p>
</span>
</a>
</div> <!-- end of menubuttons -->
</li> <!-- end of contactrollover -->
</ul> <!-- end of menulist -->
</div> <!-- end of topmenu -->
</div> <!-- end of header -->
</body>
</html>
The relevant CSS:
.menubuttons {
position: relative;
top: 0px;
width: 100px;
height: 36px;
background-image: url("../images/menubg.png");
background-repeat: repeat-x;
padding-top: 10px;
float: left;}
.menubuttons:hover {
position: relative;
top: 0px;
width: 100px;
height: 36px;
background-image: url("../images/menubg_h.png");
background-repeat: repeat-x;
padding-top: 10px;
float: left;}
.menubuttonactive {
position :relative;
top: 0px;
width: 100px;
height: 36px;
background-image: url("../images/menubg_a.png");
background-repeat: repeat-x;
padding-top: 10px;
float: left;}
.menubuttonactive a {
color: #be1f2d;}
.buttonspaces {
height: 36px;
list-style: none;
float: left;}
#contactrollover {
position: relative;
top: 0px;
margin-bottom: -36px;
width: 100px;
left: 0px;
float: left;}
#contactrollover div {
width: 100px;
height: 50px;
float: left;}
#contactrollover a span {
display: none;}
#contactrollover a {
display: block;}
#contactrollover a:hover span {
display: block;
position: absolute;
top: 0px;
left: -560px;
padding-right: 12px;}
#addressbox {
position: absolute;
top: 0px;
width: 548px;
left: 212px;
height: 60px;
background-image: url("../images/menubg.png");
background-repeat: repeat-x;
padding-top: 10px;
letter-spacing: 0.062em;
text-align: right;
float: left;
z-index: 800;
color: #a9a9a9;
background-color: white;}
#addressbox:hover {
float: left;
z-index: 900;}
#phone:hover, #email:hover {
color: #be1f2d;}
#address {
position: relative;
width: 548px;;
height: 22px;
float: left;
z-index: 900;
color: #a9a9a9;}
You're wrapping everything in your email link. Try this instead - DEMO
HTML
<li id="contactrollover">
<div class="menubuttons">
contact
<span id="addressbox">
<p id="email">info#raphaelzwyer.com</p>
<p id="phone">917-650-9534</p>
<p id="address">143 leonard street, apartment 5, brooklyn ny 11206</p>
</span>
</div> <!-- end of menubuttons -->
</li> <!-- end of contactrollover -->
CSS
#contactrollover a+span {
display: none;
}
#contactrollover a {
display: block;
}
#contactrollover a:hover+span,
#contactrollover span:hover {
display: block;
position: absolute;
top: 0px;
left: -560px;
padding-right: 12px;
}