I have an HTML where I need to add copyrights text at the bottom of the page but I need to add that text on another image. Here is my div which I added:
<div class="copy-rights">
<img src="https://s30.postimg.org/ws4b9bff5/copyrights.png" />
<p>
©THE NORTHMAN COMPANY . 2017 . ALL RIGHTS RESERVED
</p>
</div>
I have created this jsfiddle in which I have added copy-rights div at the bottom of the page but somehow in my jsfiddle I see lot of white spaces between my copyrights div and the bottom page so I am not able to put an image first and then copyrights text on top of it properly.
My copy-rights div is getting messed up and that copyrights image is also messed up in my jsfiddle.
Technically it should be like this: https://s12.postimg.org/s70kwke59/copyright-image.png
What wrong I have done?
There seemed to be many mistakes in your code that were throwing out the layout.
When i amended the errors, the background was gray in parts and black in others. If this was not what you are aiming for, it should be easy enough to change now.
I didn't fix everything, but i did a few things. Your footer issue fixed anyway. There seems to be a problem in the left sidebar that was happened while other things fell into place. I'm sure you can fix it with a bit of margin-top or something, I didn't look at it closely.
Do review the changes in the css. You've said you're a beginner; it's a good way to learn.
Fiddle
Happy coding!
EDIT: Yaha! (fix i took out top/left/bottom etc positions and some padding) still might need a tweak til you're happy with it.. Preview
Paudel is right you can just set background: grey; and it will look the same.
Otherwise you will need to set wrapped div to be relative and the text element absolute. Something like:
.content {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
Regards
Make the picture a background-image
HTML:
<div class="copy-rights">
<p>
©THE NORTHMAN COMPANY . 2017 . ALL RIGHTS RESERVED
</p>
</div>
CSS:
.copy-rights {
background-image: url('https://s30.postimg.org/ws4b9bff5/copyrights.png');
}
Update:
Since the image is just a grey area, background color can be applied as well:
.copy-rights {
background-color: grey;
}
Related
So I wanted to make a website which is pc related. I was into coding a few years ago, and I decided to pick it up again. I came across the following problem.
https://imgur.com/VjZaUEZ
If you look at this picture, you can see the part of the site which I made.
I want it to be responsive so that the text on the left side of the picture (explanation of CPU) is shrinking when I shrink my browser.
However, this is happening:
https://imgur.com/LBaHlOu
I want this text which is beneath the picture, to be next to it and shrinking. After a few hours trying things with display: and margin: etc, I decided to ask you guys.
Here are my codes (I know the codes aren't the best):
CSS: https://imgur.com/UOThxjv
HTML: https://imgur.com/DAhC6dx
if you need any clarification, please ask me.
You need to set divs around h4 dynamic width to something like 60%. Make div container for img and set its width to 40%. You should use parahraphs instead of heading-4 for text as well.
Modify HTML:
<div class="text">
<p>your text</p>
</div>
<div class="img-div"><img src="pc.png" alt="pc.png" /></div>
CSS:
.text {
width: 60%;
float: left;
}
.img-div {
float: right;
width: 40%;
}
.img-div img {
width: 100%;
height: 100%;
}
Responsive image map
To make the image map responsive you need to use a js script to manipulate coordinates on window resizing or use .SVG images for image map:
Check out this SO question.
JS image map resizer script
All the dimensions and margins in your CSS code are constant pixel lengths.
Instead, you should make them percentages of the window size. For example, you could make the width of a div tag or an image always be 20% of the screen size by putting in this line of CSS to its CSS class as shown below:
width: 20%;
I am building a mobile version of a website.
The site displays pictures with captions underneath.
The problem I am having is that, on mobile version, when the next line of picture is displayed, it overwrites the caption above it.
My question is is there a way to control how a div displays its content if it spills to next line, so that I can give it enough space from the contents above it.
I know I have not included any codes but any push in the right direction will be appreciated. Thanks in advance.
It's hard to tell without looking at the code, but I would suggest wrapping image and caption into a div like this:
<div class="image-container>
<img src="yourImage"/>
<div> Some caption </div>
</div
and in CSS:
.image-container {
overflow: hidden;
margin-bottom: 10px;
}
The issue is at: http://www.tenyeartwilight.com/
There is a jQuery slideToggle function on the second paragraph of the main section of the page (which is just a sandbox for me to learn). It works, but the enclosed text shifts from a left-align to a center-align and I can't figure out how and why, and I know this has got to be simple. The background corners change also, and I am not sure what's getting inherited/"de-herited".
I don't mind cruelty as long as I understand the solution. Thanks.
p.s. - the text is an excerpt copied from Inside the Microsoft Build Engine: MSBuild and Team Foundation Build by Sayed Ibrahim Hashimi and William Bartholomew.
EDIT: My web programming level should be pretty obvious from my question. I understand the broad strokes, but am still breaking down the details.
It is not only centered when it collapse. It is centered all the time. The reason why it looks like its centered is because the second paragraph got covered by left menu.
when it collapse, jQuery set the width of the second paragraph to a right amount which is just wide enough to show the left side of the ul.
Add this css to your code to see what i mean.
#nav{
opacity: 0.5;
}
EDIT: Responsive css and restructure for better readability
Move footer out of section. It's easier to manage and make scene to ours who read your code.So inside <body>you have
<div id="header"></div>
<div id="nav"></div>
<div id="section"></div>
<div id="footer"></div>
on the same level
Then in css you will have
#nav
{
width: 18%;
padding: 1%;
float: left
}
#section
{
width: 78%;
padding: 1%;
float: right;
}
In aim of using all free space on my page, I need your help to relocating add banner which is under the FB share button I would like it to be right next to it (share, thin banner in right). As I guess it should be solvable by CSS, I'm not good with. Thank you.
I want to get this:
[share] >[banner]
Instead of:
[share]
[banner]
http://pretesti.ge/testtesttest/ my page link
from what I can see, the banner is on top and the share is on the bottom. To make them in the same line, you can use CSS. I visited your website and looked at the code. Before we can start rearranging, there is a <p></p> in you code between the banner and the share button. That needs to be deleted. Then your html code should look similar to this:
<div class="share-banner">
<div>Facebook stuff goes here</div>
<img alt="banner" src="http://pretesti.ge/wp-content/uploads/2013/12/baner560x60.png">
</div>
Now, you need to add some CSS:
.share-banner {
display: table;
}
.share-banner img {
display: table;
float: left:
}
.fb_iframe_widget {
display: table;
float: left;
}
Click on Ike's and you'll notice a div appear below the map. Try to click on the link. It's not working.
I'm using this to show/hide the div's on click
function ikesClick() {
filler.style.display='none';
FrontDeskDesc.style.display='none';
LoungeDesc.style.display='none';
StudyDesc.style.display='none';
IkesDesc.style.display='inline';
};
If you view the page source, you can see the entirety of the Javascript there.
My question is, what do I do to make the link clickable?
I'm almost certain this is happening because of the way it's displaying none/inline.
You can observe the HTML here:
<section id="roomInfo">
<section id="filler" style="display:inline">
Hover over or select a colored area for details about individual rooms and locations in the library.
</section>
<section id="IkesDesc" style="display:none;">
<h1>Ike's - Late Night Diner</h1>
<p>
In the hub of President’s Park, Ike’s provides a late night dining option. Visit dining.gmu.edu for hours of operation.
</p>
<img src="Ikes.JPG" style="max-width:500px; width:100%;" alt="Ike's Facade" />
</section>
<section id = "FrontDeskDesc" style="display:none;">
Get your temporary keys and stuff here!
</section>
<section id ="LoungeDesc" style="display:none;">
loungin'
</section>
<section id ="StudyDesc" style="display:none;">
Studying for finals yo
</section>
</section><!--end room info-->
The problem persists under the section "IkesDesc" where the link to dining.gmu.edu is.
First of all, your link is incomplete:
dining.gmu.edu
So this should be something like:
dining.gmu.edu
Also, since you have jQuery already running on the page, you might want to simplify your code to:
$("#Ikes").click(function() {
$(".objects").hide();
$(this).show();
});
Where Ikes is the id of the clickable img and .objects is the class of all the clickable images.
Also, I saw that it is not possible to click Ikes in FireFox. So you might want to look into that as well.
UPDATE
What seems to be causing the problem is your layout:
you use position:relative; and position:absolute; throughout whereas this is quite dangerous when 'spawning' divs.
For example:
#svg {
display: block;
left: 0;
margin: -55px 0 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
}
#roomInfo {
background-color: #CCCCCC;
margin-top: 75%;
outline: 1px solid gray;
padding: 5px;
width: 100%;
}
Also, you seem to position some elements as if they have position absolute whereas they actually are placed relative.
I advice you to make the total layout relative such that it is responsive and can handle things as smaller screens and the spawning of divs.
I helped you a bit in this jsFiddle, but I'll leave the rest for you.
Also, look at my jQuery code which basically reduces THIS to the jQuery used in my jsFiddle:
$(document).ready(function() {
$("#area1").click(function() {
$(".extra").hide();
$("#IkesDesc").show();
});
$("#area2").click(function() {
$(".extra").hide();
$("#FrontDeskDesc").show();
});
$("#area3").click(function() {
$(".extra").hide();
$("#LoungeDesc").show();
});
$("#area4").click(function() {
$(".extra").hide();
$("#StudyDesc").show();
});
});
I made the example working so you can copy/paste as you please.
Also, I added the following:
var position = $("#IkesDesc").position();
scroll(0,position.top);
This is a really cool trick that will scroll to the div that just appeared such that the user actually notices something changed (I kind of miss that in your current site).
You can check it as a working example HERE.
I hope that helped you out!
Good luck!