I am practicing web design and have a webpage at the url www.bigchip.co.nf and I can't work out why I cant get the button saying change date to drop down below the image and the little description. I thought that clear: right on the image of the chips would make the button drop down on a new line. Is the right way of doing this to put them into divs to seperate them?
After looking at your page, i've noticed that the image is not floated which causes clear: right on it not to work.. what you can do is to add a br tag after the image element to push the change date button to the bottom of the elements.
<div id="container">
<h1 id="header">BigChip.com</h1>
<ul id="nav">
<li class="li1">Home</li>
<li class="li2">Gallery</li>
<li class="li3">Funny Chips</li>
<li class="li4">Sign In</li>
</ul>
<p id="description">
Welcome to BigChip.com! The site with the biggest chips on the web. Get involved by uploading your own chips or browse through our gallery where your find all the chips uploaded by other users.
</p>
<h2 id="biggest_chip">Today's Biggest Chips!</h2>
<img id="chipsimg" src="images/chips.jpg">
<br />
<button id="button" type="button" onclick="change_date()">Change Date</button>
</div>
Related
I try to create my portfolio with using GitHub Pages https://rageanalyst.github.io/Portfolio/. I use a template and alter him. I don't know HTML. I have a problem with caption when I open a frame with project. Two pictures don't underneath, they have (untitled). Only the last picture have caption and is the project tittle.
Problem: example
Q: How can I add caption to individual pictures in this frame?
This is extract of code when I have a single project:
<article class="col-6 col-12-xsmall work-item">
<a href="images/thumbs/trainings.JPG" class="image fit thumb"><img src="images/fulls/gym.jpg" alt="" />
</a>
<h3>Gym Tracker</h3>
<p>This project contains tables that allow me to track my progress in the gym. </p><br>
<ul class="actions">
<li>Full Project</li>
</ul>
</article>
Edit:
I still haven't solved the problem, anyone else can help me?
I'm trying to reuse HTML from a previous page and write new content on a new page while still retaining the home button and footer for a portfolio. I copied over the HTML containing my home button and footer and used the same stylesheet. But upon opening up a new page with (mostly) the same content sans the hero and work section, the elements on my page look shifted over slightly to the right.
When I add the content from the landing page onto the new page, this problem goes away and the elements are flushed to the left like I want them. However, when I put in any content that does not contain the hero and work section from the landing page, the problem persists.
I've tried looking into not using margin and instead using positioning but am confused if this is the right direction I should go. I'll add the codepens to compare the two. Hopefully the difference is visible, as I really want to work on the actual content of my portfolio. I appreciate any advice.
My landing page:
<div class="container">
<header>
<h1 class="logo">Ryan M</h1>
</header>
<section class="hero">
<p>Hi, I'm Ryan!</p>
<p>
I'm a recent graduate from UC San Diego, where I received a B.S. in
Human-Computer Interaction. I am currently looking for work so feel
free to send me an email!!
</p>
<p class="social">
<a href="#"
>Resume</a
>
—
<a href="#"
>LinkedIn</a
>
—
<a href="
#">Github</a>
</p>
</section>
<section class="work">
<h2>Work ↓</h2>
<article>
<h3 class="title">KOTX website design</h3>
<h4 class="meta">Jan-Mar 2019</h4>
</article>
</section>
</div>
My new page I'm trying to make
I am working on a bespoke WordPress build and for some reason, I just cannot get some anchor links to work. It's driving me potty and I just don't know what the problem is.
I have discovered, static anchor links are working fine (the back to top button works). However, I am using Advanced Custom Fields to generate ID's for the anchor tags. The IDs are generating correctly, but won't work as anchor tags.
Anyone have any ideas? The bit I am referring to is the service boxes near the bottom of the page. The idea being you click on these and that they will take you to the services page, and down to the relevant section.
The markup I am using is:
<ul class="cf">
<li>
<div>
<a href="/services/#dimensional-surveys">
<div class="filter"></div>
<img width="500" height="600" src="pexels-photo-175771-500x600.jpeg" class="attachment-feature size-feature" alt="" />
<h3>3D Dimensional Surveys</h3>
</a>
</div>
</li>
</ul>
<ul class="service-list cf">
<li id="#dimensional-surveys">
<div class="feature" style="background-image:url(pexels-photo-175771.jpeg);">
</div>
</li>
</ul>
Just remove the # from id and it will work.
<ul>
<li id="example"></li>
</ul>
I have looked at your page
The point where an ancor should jump to should have no #
You do: <li id="#dimensional-surveys">
But do just <li id="dimensional-surveys">
Fix that first and test again.
You don't want the '#' on the anchor: <li id="#example"></li> should be <li id="example"></li>
I'm using a hybrid HTML/CSS/Java coding sheet that I copied and modified for my own use. So far, the customization has gone well except for trying to link images. The weird thing about it is, it only messes up when I link the first image.
When I link the first image, none of them will show up. If I link only the second and third, all of the images show up and the last two slides even link. I have looked through many times and I still can't understand why it won't work. There isn't anything in the Javascript (that I can see) that doesn't allow links and being that they're simple <li> it seems like it should work normally. Any ideas?
This is the part I'm having issues with:
<div class="container">
<div class="slider_wrapper">
<ul id="image_slider">
<li><img src="/assets/SLC_SewingMachineThread_banner.jpg"></li>
<li><a href="Teddy-Bear-Pattern-Pack">
<img src="assets/SLC_TeddyBear_Pattern_Banner.jpg"></a>
</li>
<li><a href="Leather/Pre-Cut-Leather-Pieces/Oil-Tan-Pre-Cuts">
<img src="assets/SLC_OilTan_PreCut_banner.jpg"></a>
</li>
</ul>
<span class="nvgt" id="prev"></span>
<span class="nvgt" id="next"></span>
</div>
newbie self learning web design. In theory, I've learned html and css. In practice I've hit a snag. Here is the barebones code so far.
<header>
<a id="site-logo" href="/"><img src="#" alt="Dot Design" /></a>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<form id="search">
<input type="search" placeholder="Search" />
</form>
</header>
<div id="content>
<!-- content goes here -->
</div>
Here is the template I'm referencing for practice: http://min.us/i/braxZb11KQjfD
The problem is I'm not quite sure if:
everything in the red box should go in the header
only the jquery slider should go in the header
everything in the red box should not be in the header
or it doesn't matter and just a matter of preference
Since I have no experience, I'd like some feedback as to which method is correct? Or more generally accepted and preferred?
Thank you very much for your input.
Everything in the red box should not be in the header unless that content describes the page content. Which at this point it does't look like it does. It's just homepage content. Unless the intro is directly related to the slider there's no reason to combine the two.
<header></header>
<div id="content">
<figure class="hero"></figure>
<p class="lead"></p>
...
</div>
Would work fine as a setup. The HTML offers a way to group elements semantically (for instance the section and header) or to provide hooks for styling (#content and .hero etc).