I need to have the logo as a link to the ideas page (Which is the home page) in HTML and CSS3 this is what I have. What do I need to add please?
<body>
<header>
<div id="logo">
<img id="logo" src="Photos/logo.jpg" alt="My logo">
</div>
<div id="navigation_container">
<!-- the body -->
<div class="rectangle">
<!-- the navigation links -->
<ul id="navigation">
<li>✭ IDEAS</li>
<li>✭ WORKSHOP</li>
<li>✭ TIPS</li>
<li>✭ DIGITAL PAPER</li>
</ul>
<!-- end the body -->
</div>
<img id="logo" src="Photos/logo.jpg" alt="My logo">
update your html like the below
<div id="logo">
<img id="logo" src="Photos/logo.jpg" alt="My logo">
</div>
You write your code should be like this
<div id="logo">
<a href="">
<img id="logo" src="Photos/logo.jpg" alt="My logo">
</a>
</div>
Related
I have an html page that contains "links" to many sections of the page. I'm using a single page layout where if a link is clicked, you are not actually taken to a new page. Instead you are taken to the section of the page that you clicked on in the nav bar. I have a section for 6 images, each with a caption. I need the images to be in 2 rows with 3 images per row without using a table.(each image with its caption underneath) But I also need them to be responsive, so if the size of the browser is minimized then the images stack up on each other (caption still there). I tried using padding and margins but I wasn't able to get it to work so I don't have any CSS to post but I do have my HTML code. Can someone please help me out? Here is my code:
<div class="allimagesgallery">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption">CAPTION.</div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image4.jpg">
<img id="galleryimages" src="images/image4.jpg">
</a>
<div class="caption">CAPTION</div>
<a href="images/image5.jpeg">
<img id="galleryimages" src="images/image5.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image6.jpeg">
<img id="galleryimages" src="images/image6.jpeg">
</a>
<div class="caption"> CAPTION </div>
</div>
</div>
it would help us if we knew what your css in "allimagesgallery" looked like.
A little reformatting like the code below might help:
/*-----css---------*/
.imagesgalleryrow img{
display: inline-block;
}
<!-- /// HTML \\\ -->
<div class="allimagesgallery">
<div class="imagesgalleryrow">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
</div>
<div class="imagesgalleryrow">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
</div>
<div class="imagesgalleryrow">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
</div>
</div>
I'm having trouble making my footer stay at the bottom of my page. I don't want it to be fixed when scrolling, just when the user reaches the bottom of the page. I think it has something to do with my grid.
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>The Developer</li>
<li>Contact</li>
</ul>
<h1>Welcome to the City of Melbourne!</h1>
<h2 style="margin-bottom: 50px;">Where would you like to go?</h2>
<div class="col_contain">
<a href="frederation/frederationsquare.html"><div class="container">
<img src="http://rmitcatalyst.com/wp-content/uploads/2013/03/Fed-Square.jpg" alt="Frederation Square" class="image">
<div class="middle">
<div class="text">Federation Square</div>
</div>
</div></a>
<a href="chinatown/chinatown.html"><div class="container">
<img src="http://www.whitehat.com.au/images/melbourne/CTown.jpg" alt="Chinatown" class="image">
<div class="middle">
<div class="text">Chinatown</div>
</div>
</div></a>
<a href="library/library.html"><div class="container">
<img src="https://www.slv.vic.gov.au/sites/default/files/styles/feature_image/public/strategic-plan-hero.jpg?itok=CCmv7jIG" alt="State Library" class="image">
<div class="middle">
<div class="text">State Library of Victoria</div>
</div>
</div></a>
<a href=""><div class="container">
<img src="http://www.mymarketsvic.com.au/directory/files/logo/58.jpg" alt="South Melbourne Market" class="image">
<div class="middle">
<div class="text">South Melbourne Market</div>
</div>
</div></a>
<a href="shrine/shrine.html"><div class="container">
<img src="https://thumbs.dreamstime.com/b/shrine-remembrance-melbourne-australia-july-bright-flowers-below-victoria-memorial-to-58139919.jpg" alt="Shrine of Remembrance" class="image">
<div class="middle">
<div class="text">Shrine of Remembrance</div>
</div>
</div></a>
<a href=""><div class="container">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/12/35/7f/fd/ngv-triennial-skull-room.jpg" alt="NGV" class="image">
<div class="middle">
<div class="text">National Gallery of Victoria</div>
</div>
</div></a>
</div>
</body>
<footer style="background-color: white;">
Created by Carisa Atmarini
</footer>
I have tried doing this but it became positioned above the body instead of being at the bottom. If anyone has a clue, please let me know.
Here's my codepen link for the full page:
https://codepen.io/codecarisa/pen/pZoXYW
I think the main issue is .col_contain: remove the height.
Also remove position: absolute on the footer, and make sure the footer is inside the body.
And change the padding on the body:
body { padding-bottom: 0; }
I am using Bootstrap & want to get the logo on the left & title in the center. I have used the following code but not able to get the desired result.
Please Guide.
<div class="panel-heading"><a href="#">
<img src="Logo.png" width="10%" height="10%" alt="">
</a>
<h1 align="center">Title</h1></div>
<h1 class="text-center">
<a class="pull-left" href="#">
<img src="path/logo.png" width="10%" height="10%" alt="">
</a><span style="margin-left: -20%;">Title</span></h1>
try this code.. anything in heading tag would be in one line
Demo
Add container-fluid div along with pull-left for <a>
<div class="panel-heading">
<div class="container-fluid">
<a href="#" class="pull-left">
<img src="Logo.png" width="10%" height="10%" alt="">IMG
</a>
<h1 align="center">Title</h1></div>
</div>
<div class="panel-heading">
<div class="container-fluid">
<div class="pull-left" style="background-color:lavender;">
<img src="logo.png" width="50px" height="50px" alt="">
</div>
<h1 align="center">Title</h1></div>
</div>
Give pixel size according to your requirement of image.
I am currently working on my website, but I have run into a problem. I have a Twitter button, that links to my Twitter profile, but when I make an image or a text on the website it becomes a link and if i click it, it goes to the Twitter profile. I cant seem to find the mistake.
Here is some of my code.
<!DOCTYPE html>
<title>Home</title>
<div class="PageLinkBar">
<ul class="ScrollPagelsidebar">
<li>Contact</li>
<li>Company</li>
<li>Games</li>
</ul>
</div>
<div class= "image2">
<a href="index.html"><img src="image2.png" alt="image2" title="image2" border="0" width= 150px; height= 100px; />
</div>
<div class="twitterbutton">
<a href="https://twitter.com/"><img src="TwitterLogo.png" alt="Twitter" title="Twitter logo" border="0" width=29; height=29;/>
</div>
<div class="image2">
<img src="image2.png" alt="image2" style="width:1050px;height:530px">
</div>
<div class="image">
<img src="image.png" alt="image" style="width:400px;height:40px">
</div>
<div class="TwitterbuttonNRGindex">
<a href="https://twitter.com/"><img src="TwitterLogo.png" alt="Twitter" title="Twitter logo" border="0" width=29; height=29;/>
</div>
The twitter button and twitterbuttonnrgindex are missing the </a> closing tags. This could couse everything to display as a link becouse the browser thinks everything is in the <a> tag.
You need to close your <a> tags, as so:
<!DOCTYPE html>
<title>Home</title>
<div class="PageLinkBar">
<ul class="ScrollPagelsidebar">
<li>Contact</li>
<li>Company</li>
<li>Games</li>
</ul>
</div>
<div class= "image2">
<img src="image2.png" alt="image2" title="image2" border="0" width= 150px; height= 100px; />
</div>
<div class="twitterbutton">
<img src="TwitterLogo.png" alt="Twitter" title="Twitter logo" border="0" width=29; height=29;/>
</div>
<div class="image2">
<img src="image2.png" alt="image2" style="width:1050px;height:530px">
</div>
<div class="image">
<img src="image.png" alt="image" style="width:400px;height:40px">
</div>
<div class="TwitterbuttonNRGindex">
<img src="TwitterLogo.png" alt="Twitter" title="Twitter logo" border="0" width=29; height=29;/>
</div>
At the bottom of this page http://kimcolemanprojects.com/cyanotype-hats.html there is a section with the title "Related Projects".
I can't move this title down from the grid of images above. I think there must be an error in the Html structure, but I can't find it. I have given the element padding and margin but it still will not move.
This is a section of the html code from that page:
<div class="container">
<div id="header">
<h1>KIM COLEMAN PROJECTS</h1>
<div id="nav">
<ul>
<li id="work">
Work
</li>
<li id="about">
About</li></ul>
</div><!--end nav-->
</div><!--end header-->
<div class="main-individual">
<!-- grid of Work -->
<a rel="hats" href="images/hats/velour 2.jpg" class="fancybox" data-title-id="title-5">
<div class="view view-sixth">
<img src="images/hats/small-velour 2.jpg" />
<div class="mask">
<div class="mask-text">
<h2>Velour trilby with Cyanotype ribbon</h2>
<p></p>
</div>
</div>
</div></a>
<div id="title-5" class="hidden">
Velour trilby with Cyanotype ribbon</div>
<a rel="hats" href="images/hats/balaclava.jpg" class="fancybox" data-title-id="title-1">
<div class="view view-sixth">
<img src="images/hats/small-balaclava.jpg" />
<div class="mask">
<div class="mask-text">
<h2>Balaclava with Cyanotype ribbon</h2>
<p></p>
</div>
</div>
</div></a>
<div id="title-1" class="hidden">
Balaclava with Cyanotype ribbon.
</div>
<span class="similar"><h6>Related Projects</h6></span>
<a href="unique.html" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/uniques.jpg" />
<div class="mask-small">
<div class="mask-text">
<h2>Unique</h2>
</div>
</div>
</div></a>
<a target="blank" href="http://kimcolemanjennyhogarth.co.uk/glare.htm" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/glare.png" />
<div class="mask-small">
<div class="mask-text">
<h2>Glare</h2>
</div>
</div>
</div></a>
<a target="blank" href="http://kimcolemanjennyhogarth.co.uk/act_natural.htm" >
<div class="view-small view-sixth-small">
<img src="images/related-project-images/act-natural-glare.png" />
<div class="mask-small">
<div class="mask-text">
<h2>Act Natural Glare</h2>
</div>
</div>
</div></a>
</div>
</div>
You could reduce the margin in the .view-small class, e.g. to margin: 20px 2%. Is this what you meant?
Update: Try to set the line-height: 30px; in .similar class. This moves the title down to the small images.