So I've finally decided to try and code my own website after doing a basic GFX from my understandings. First off, I'd like to position everything obviously, but for some reason I just CAN'T seem to get the hang of it, it's so frustrating.
The main error I keep getting is that it does not seem like it will fit ANY resolution which irritates me. I've heard to use %, but that does not seem to solve the issue.
The most current error I am running into is that my image does not even show up when I have my code like the following:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="refresh" content="30">
<meta name="keywords" content="Voyage, Voyage Community, Website">
<meta name="description" content="Voyage Community">
<title>The Voyage</title>
<link href="site.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<body background="images/Background.png">
<div id="header">
<div class=".headerImage1">
</div>
This is my css stylesheet:
#header
{
width:100%;
height:auto;
}
.headerImage1
{
background-image:url('images/Header.png');
position: absolute;
width: 100%;
height:120px;
}
Any help?
EDIT: This is the latest update:
body
{
margin: 0px;
padding: 0px;
background: url("images/Background.png")
}
#header
{
position: absolute;
top: -160;
left: 420;
right: 0px;
}
.headerImage1
{
margin: 0px;
padding: 0px;
position: absolute;
width:100%;
height:100%;
background-repeat:no-repeat;
}
Now do I do the positioning in HTML instead of CSS?
(Here is an IMG to how it looks currently: http://puu.sh/6Rg11.jpg)
(Just took another SS to show what it looks like on a different resolution: http://puu.sh/6RgHg.jpg - Why is it showing different?
Regarding images not showing up:
First, remove the dot in <div class=".headerImage1">
Classes only have a dot in front of them in CSS style definitions, not in HTML.
The dot itself means, "this is a class" in CSS.
Similarly, if you had id="words" in HTML that'd be #words in CSS.
Second, in your CSS use this, and remove background= from your HTML:
body {
background: url("images/Background.png")
}
For both situations, make sure your images actually exist at the URI you are using. If they are off the root directory, start the URI with / ( i.e. /images/ rather than images/ )
Regarding the resolution/positioning issue:
First, remove extra spacing. Make sure to include something like this to remove extra space added automatically, which you don't want if you expect 100% coverage for anything:
#header {
margin: 0px;
padding: 0px;
/* the above remove extra space around and inside #header */
width:100%;
height:auto;
}
/* add this to your body tag in CSS */
body {
margin: 0px;
padding: 0px;
}
Second, set a location for your #header when you use position: absolute, like this:
#header {
position: absolute;
top: 0;
left: 0;
right: 0px;
}
Incidentally, when you do that second thing, the first is likely not needed, and you don't need to use width: 100% either.
Last, the way you seem to be intending it to work, you want to use an <img> tag for headerImg1 and set your sizing as I showed for #header above, instead of sizing the image directly. Otherwise, you need to move your top, left, right attributes to the class as you have it now, rather than #header as I did.
Related
So, I'm moving from Wix to Neocities. And I can't really just take the pages from Wix and paste them into Neocities, so I need to remake a few things by hand now.
I already asked google about this and got this as an answer:
How do I position one image on top of another in HTML?
Which, for only TWO images works, sort of fine, aside from the fact that it literally just breaks if I add align="center" to the div.
It also just... doesn't really allow me to put more than the first two on top?
Here's the full code in the page:
<title>Work in progress...</title>
<link rel="icon" type="image/x-icon" href="/pages/images/favicons/main.png">
<link rel="stylesheet" type="text/css" href="/style.css">
<!-- CSS and div to make the site logo look the same as the Wix version, modified from https://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html
I might just put this into the main style.css, not sure.-->
<style>
.logo {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
top: 0;
left: 0;
}
.image2 {
position: relative;
top: 0;
left: 0;
}
.image3 {
position: absolute;
top: 0px;
left: 0px;
}
</style>
<div class="logo">
<img class="image1" src="/pages/images/general/logo/1.gif" />
<img class="image2" src="/pages/images/general/logo/2.gif" />
<img class="image3" src="/pages/images/general/logo/3.gif" />
</div>
Since this stupid dumb site needs me to have 10 rep to even post images, you'll just have to take these links instead. At least I don't have to break the links like on GBATemp back when I was new there. I get that it's to prevent spam, but isn't there a better way?
Expected result:
https://i.stack.imgur.com/suFVh.png
Actual result:
https://i.stack.imgur.com/suXC7.png
(screenshot left slightly uncropped to show that it's starting at the top-left of the page, not the absolute-regardless-of-window-size center like I want. plus the 3rd image (filename 3.gif) is completely outside of the div!)
I feel like a valve developer working on TF2. This shit doesn't work!! Why? Has I ever?
In all seriousness, I'm still new to CSS and just want to know what the hell is wrong because doing it the HTML way would be WAY WAY easier for me than the "just put them all into one gif" way.
What I want in the end is for the div to just control the position of all 3 images inside of it, so that I can just put align="center" into the div's opening tag and have it just work.
Oh, and I'll put a live preview of the site at https://catboybeebop.neocities.org/pages/main_new.html, so you guys can see this all in action to better help me through this.
.logo {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: absoulute;
top: 0;
left: 0;
}
.image2 {
position: absolute;
top: 0;
left: 0;
}
.image3 {
position: absolute;
top: 0;
left: 0;
}
<div class="logo">
<img class="image1" src="https://catboybeebop.neocities.org/pages/images/general/logo/1.gif" />
<img class="image2" src="https://catboybeebop.neocities.org/pages/images/general/logo/2.gif" />
<img class="image3" src="https://catboybeebop.neocities.org/pages/images/general/logo/3.gif" />
</div>
So, I made a sister thread about this on gbatemp and actually got a working answer pretty quickly!
To quote shaunj66:
Get rid of the center property on each CSS declaration. It's not valid.
Remove position from image1 so it gives the parent logo div a calculated height so that any following content added later will be below the logo div.
Add left and right rules to image2 and image3 so the browser knows there to position them then add margin 0 auto (0 margins top and bottom, automatic margins left and right) to centrally position them.
CSS:
.logo {
position: relative;
}
.image2, .image3 {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
I am currently using WKHTMLTOPDF to generate PDFs through my Laravel application. The PDF template uses Bootstrap 3.3.6.
What I'm currently seeing is that the text, font, layout renders perfectly, but text is cut off from the left-margin.
If I remove the call for the Bootstrap CSS, it doesn't cut off the text, but the tables etc.. aren't aligned/laid out correctly. It must be something in Bootstrap that's causing this issue.
Top of template
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
width: auto !important; min-width: 100% !important;
font-family: 'Lato';
}
.page-break {
page-break-after: always;
}
</style>
The line width: auto !important; min-width: 100% !important; makes more of the text visible, but it's still not perfect (see screenshot below on the second page):
Any text wrapped in<p> </p> fits on the PDF correctly, but the headers and tables etc.. are cut off on the left hand side.
Controller code:
$pdf = PDF::loadView('reports.view-full-audit-report', $data)
->setPaper('a4')
->setOrientation('portrait')
->setOption('encoding', 'utf-8');
return $pdf->download('auditReport.pdf');
Has anyone experienced this before? If so, how did you resolve it? If you require further code samples, please let me know. Many thanks.
I have experienced this before, on Frappé Framweork and ERPNext. The HTML rendering for a DocType (Sales Invoice) will do this for mysterious reasons. So far I have found two workarounds:
1. Set the viewport size in the HTML code as per your final document size. For example, an 8.5 x 11 Letter sized page would be:
<style>
#media screen {
.print-format {
width: 21.59cm;
min-height: 27.94cm;
padding: 0.0cm;
}
}
</style>
I think you can use inches or other accepted measurements as well. You must declare an adequate viewport size on the HTML or Jinja template by doing the above solution
If all else fails, I solved my problem alternatively with the following styles and HTML:
<style>
div.general{
position: relative;
top: 0.0cm;
/*left: 0.0cm; */
}
div.document_size{
position: absolute;
width: 21.59cm;
height: 27.94cm;
}
</style>
<div class="general">
<div class="document_size">
<!-- YOUR HTML GOES HERE -->
</div>
</div>
Finally, to carefully position your elements on the page, use the span tag, with a declared class style, so you can place it in absolute terms within the divs created above. Distances are measured from the top left (origin) of the document:
span.item1{
position: absolute;
top: 1cm;
left: 1cm;
}
Once you have placed the span class= "item1" within the div tags as above, you can place anything you want within them. I consider these span tags as a sort of coordinate system marker, that ensures consistent output on every generation of wkhtmltopdf.
I have a quick question, I'm making a simple html document, with an image that I want to fill the entire page.
For some reason, it wants to create a border around the image. I've tried border="0"; and padding 0px 0px 0px 0px;
Here is the code in which I have: (You can also check it out live if you prefer www.kidbomb.com/chefwannabe)
<!DOCTYPE html>
<html>
<head>
<title>Pre-Order Now!</title>
</head>
<body>
<img style="width: 100%; overflow:hidden;" src="http://www.kidbomb.com/chefwannabe/chefwannabepreview.png" />
</body>
</html>
Add the following CSS in your code. Default body will give some margin and padding. So better whenever you start new work, add this style in your css for getting the proper result.
body
{
padding:0;
margin:0;
}
Instead of using the img tag, set the background-image property of the body tag so it encompasses the entirety of the page.
body {
background-image: url("path/to/image.jpg");
height: 100%;
width: 100%;
}
I'm setting a landing page for My new website
I've created an image, and I'm setting it as the background image. Unfortunately, I can't seem to figure out at all how to get it to be full screen, and scrollable - so you can just scroll up/down to see the full image - but without having any white spaces or anything.
<!DOCTYPE html>
<html>
<title>On The Ropes Boxing! Coming Soon!</title>
<body>
<style>
html {
height: 100%;
margin:0px;
background: url(comingsoon.jpg) no-repeat top center;
background-size: cover;
background-attachment: scroll;
}
body {
min-height: 100%;
margin:0px;
}
#appcontainer {
position: relative
background-color: rgba(255, 255, 255, 0.7);
width:560px; height:2220px;
left:20px; top:20px;
}
<img src="comingsoon.jpg" style="minwidth:100%;height:100%;" alt="" />
</style>
</body>
</html>
That is what I have so far. I'm completely new to HTML and CSS, so I'm basically just learning on the job and going through trial and error. I fully expect to be told I'm doing this completely the wrong way. Any advice is appreciated - just be aware that I may need to be told as if I'm an idiot :)
Thanks so much.
Replace the img tag in your code with this:
<img src="http://www.ontheropesboxing.com/comingsoon.jpg" style="width:100%;position:absolute;z-index:-1" alt="" />
And move it out of the style tags.
Before I get into the answer, allow me to correct your code first.
The basic format for a webpage is this:
<!doctype HTML>
<html>
<head>
//Titles, scripts, styles, etc.
</head>
<body>
//Everything else, can also hold scripts and styles.
</body>
</html>
You're missing a head in your code.
Second, don't place html tags inside style tags (referring to your img).
As for your question,
<!DOCTYPE html>
<html>
<head>
<title>On The Ropes Boxing! Coming Soon!</title>
<style>
html, body {
height: 100%;
width: 100%;
margin:0px;
border: 0;
}
.splash {
width: 100%;
z-index: 0;
}
//Rest of styles
</style>
</head>
<body>
<img src="http://www.ontheropesboxing.com/comingsoon.jpg" class="splash" />
</body>
</html>
Putting the image as the background won't work, as the page won't have anything to scroll to. Putting the background as an image will allow the page to scroll.
MyPage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Color Flash Cards</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div id="header">
<div id="title">
<h1>Color Flash Cards</h1>
</div>
</div>
</body>
</html>
index.css
body{
background-color: #31859C;
margin-left: 0px;
margin-top: 0px;
overflow-x: hidden;
}
#header{
margin-top: 0px;
height: 120px;
background: #9838CE;
}
#title{
margin-top: 0px;
}
result:
Where is the margin that is at the top (above the purple) coming from? And what do I need to do to get rid of it? I could use negative values for margin-top to do it but is that the "real" solution here?
All headings have a default margin that can be canceled out with:
h1 {
margin: 0;
}
Demo:
I would recommend using a css reset code like this one if you want to avoid these quirks and style them yourself.
One of two things might be causing this:
Padding in the body? Add padding: 0; to body.
The top margin on the H1. To combat this add overflow-hidden; to #header
Adding overflow: hidden to the #header will cause the header DIV to contain it's contents (including the margin on the H1).
Set the margin of h1 tag to 0:
h1 { margin: 0; }
See jsFiddle demo.
Try setting the margins of html to 0 as well.
html {
margin:0;
padding:0;
}
Two things:
You might want to add
body{
padding:0;
}
but that's not the real issue, its the H1 tag that is spoiling the layout
add this to your css
h1{
margin-top:0;
}
here is a little fiddle
use reset css for default browser setting will be reset.
http://meyerweb.com/eric/tools/css/reset/
enter code here