I want my Header text (Events, Blog, About) to LAY ON TOP OF the "Images/Damask.png" image. Instead the image is displayed at the very top of the header with the text BELOW the image.
<header>
<header>
<img src="Images/Damask.png" width="100%" border="0" height="200" class="header">
<a href="index.html" id= "logo">![enter image description here][1]
<h1>J Barnes Events</h1>
<h2>Indianapolis's Finest<h2>
</a>
<nav>
<ul>
<li>Events</li>
<li>Blog</li>
<li>About</li>
</ul>
</nav>
</header>
Instead of separately adding an image, you can simply add the following CSS to your stylesheet and that would achieve what you're trying to do:
header {
background-image: url('Images/Damask.png');
}
Related
i have a menu bar that has 3 anchor elements and i want to load the content of those elements while staying on the same page.
i want to do so without making linking to another html file that has those contents.
i have tried adding id's to the divs and linking to them with an anchor element but that doesnt make the other content disappear no matter what link i am on
<div class = "logo">
<img src="logo-removebg-preview.png">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Programs</li>
<li>Library</li>
<li>Gallery</li>
<li>عربي</li>
</ul>
</nav>
</header>
<main>
<section class = "inner-section">
<div class="sub-menu">
<ul>
<li>Who We Are</li>
<li>Our Values</li>
<li>History & Structure</li>
</ul>
</div>
<div class="wrapper">
<div id ="who-wrapper"class="who-body">
<h3>Who We Are?</h3>
here is the image
You can use anchor tag to call the specific section
Anchor content
<section id="id_of_section">
some content here
</section>
So I added smooth scrolling and a button that scrolls you to the bottom and that's the point but now every time I load in and reload the site etc. it automatically scrolls down. I also want to put the "About me" heading further down so it isn't visible unless you click "Click to learn more"
Picture of the site: https://i.gyazo.com/79313e6ee1fe3de82d18b33f238ac5d9.jpg
HTML CODE:
<html>
<head>
<title>Intriguing Copy</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="banner">
<div class="navbar">
<img src="logo.png" class="logo">
<ul>
<li>Home</li>
<li>About me</li>
<li>Samples</li>
<li>Contact</li>
</ul>
</div>
<div class="content">
<h1>THE COPY THAT INTRIGUES BUT DONT DECEIVE</h1>
<div class="About">
<button type="button"><span></span><b>CLICK TO LEARN MORE</button>
<div id="down">
<h1>About me</h1>
</div>
</body>
</html>
I don't understand what you want to say provide CSS for easy to understand your problem.
Set #down as default display: none and then add script(see my code) and also add onclick="show()" in button element,
<html>
<head>
<title>Intriguing Copy</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="banner">
<div class="navbar">
<img src="logo.png" class="logo">
<ul>
<li>Home</li>
<li>About me</li>
<li>Samples</li>
<li>Contact</li>
</ul>
</div>
<div class="content">
<h1>THE COPY THAT INTRIGUES BUT DONT DECEIVE</h1>
<div class="About">
<button type="button" onclick="show()"><span></span><b>CLICK TO LEARN MORE</button>
<div id="down">
<h1>About me</h1>
</div>
<script>
function show() {
document.getElementById("down");
down.style.display = "block";
}
</script>
</body>
</html>
This
<button type="button"><span></span><b>CLICK TO LEARN MORE</button>
is invalid - you cannot nest interactive elements like that. Either use a button or use an anchor.
If your page is automatically scrolling, I'd assume you're reloading the page after clicking this anchor. I suspect that if you look at your browser's navigation bar, it will end with #down, like
https://whateveryourdomain.is/somepage.html#down
That's how page anchors work - the browser will attempt to scroll the page until the matching anchor tag or id'd element is at the top of the viewport.
I am currently working on a portfolio for my website. I added my picture in it, but the picture does not show.
<div id="wrap">
<h1>Portfolio/CV</h1>
<ul id="gallery">
<li>
<a href="#">
<img src="logo.png"> <!-- doesn't show -->
<div>These are coming soon!</div>
</a>
</li>
</ul>
</div>
You can see above html live on my portfolio.
I have uploaded the image to my server.
Does somebody understand what I'm doing wrong?
this is how your HTML looks, when you are able to access those links your site will work. Seems your images are uploaded to a different folder or maybe permission to read is not there.
http://www.anika.nl/logo.png
<body>
<div id="wrap">
<h1>Portfolio/CV</h1>
<ul id="gallery">
<li><img src="logo.png"><div>These are coming soon!</div></li>
<li><img src="lights2.jpg"><div>I am working on it!</div></li>
<li><img src="flo3.jpg"><div>Why are you even reading this?</div></li>
<li><img src="lights1.jpg"><div>Humans are always so curious</div></li>
<li><img src="flo2.jpg"><div>LOL </div></li>
<li><img src="lights3.jpg"><div>Can't stop?</div></li>
</ul>
</div>
</body>
</html>
I have one iframe on my index page that I want to have links to different pages. But I also want the link when clicked to navigate down to the actual frame, as right now it is just staying at the top of the page. I am quite confused about this.
Here is my code:
HTML
<header>
<div id="logo">
<img src="../../assets/images/logo.png" alt="">
</div>
<nav>
<ul>
<li>TOURS,PRICES & STANDARD FLIGHTS</li>
<li>MEET THE STAFF</li>
<li>Gallery</li>
</ul>
</nav>
<div id="mainInfo">
<iframe src="about:blank" name="iframe"></iframe>
</div>
I think you're thinking of anchored links:
<li>Gallery</li>
And iframegallery.html:
<div id="mainInfo">
<iframe src="about:blank" name="iframe" id="iframe"></iframe>
</div>
So I got this header, I want the logo in the middle, and then 2 links on the left and 2 links on the right. I guess I know how to do this but not what the best way is. Got what I think that works below. Edit: Obviously no css applied yet, gotta get the html straight first.
So here's the header
<header>
<div id="head-wrap">
<nav>
<ul>
<li>Smartphones</li>
<li>Tablets</li>
<li>Laptops</li>
<li>Desktops</li>
</ul>
</nav>
</div>
</header>
What might work
<header>
<div id="head-wrap">
<nav>
<div id="nav-left>
<ul>
<li>Smartphones</li>
<li>Tablets</li>
</ul>
</div>
<img src="logo.png" alt="Logo" height="42" width="42">
<div id="nav-right">
<ul>
<li>Laptops</li>
<li>Desktops</li>
</ul>
</div>
</nav>
</div>
</header>
Is this the best way or should I do it differently?
Regards
Your example has a lot of superfluous HTML elements in it. Instead of multiple div containers, try something like this:
<nav>
<ul>
<li>
Smartphones
</li>
<li>
Tablets
</li>
<li>
<img src="logo.png" alt="Logo" height="42" width="42" />
</li>
<li>
Laptops
</li>
<li>
Desktops
</li>
</ul>
</nav>
Then display the li elements inline:
li{
display:inline;
}
Example
Obviously you'll need to edit this more to fit your own needs, but a simple structure is the start of a good design.