I recently developed a website that looks good on 1024 resolution but gets messed up on larger resolutions. Here are the links to the files you will probably need to review: CSS for the site, CSS for the menu bar. It's a PHP file but I've already linked to the included HTML files.
I have a regular 17' screen while the client has a widescreen. She sees white space on the right side that I don't. I've only seen it as I have used the website viewlike.us to test on different resolutions. How can I make it so it resizes proportionality? Thanks.
This is because you set the body to be 1024 px
body {
width:1024px;
background-image:url(images/top_background.jpg);
background-repeat:no-repeat;
background-color:#FFF;
}
You don't want to do that, what you usually do is to have a page wrapper where you set the size to be 1024px.
For instance you can have this in html
<html>
<head>...</head>
<body>
<div id="pageWrapper">
<!-- all your content here -->
</div>
</body>
</html>
Then in the css you can have something like this:
#pageWrapper {
width:1024px;
margin: 0 auto;
}
You usually have an structure like this:
<html>
<head>...</head>
<body>
<div id="header-wrapper>
<div id="header>
<!-- header content here -->
</div>
</div>
<div id="pageWrapper">
<!-- all your content here -->
</div>
</body>
</html>
Then you can set an image for the header and another for the body, or an image for the header and a background color for the body. It all depends on what are you doing.
The background images usually are not that big. What you usually have are images or patterns that can be repeated either on X or Y or both. On the css you can have something like:
#headerWrapper {
width:100%;
height: 100px;
background: url("/img/background.png") repeat-x;
}
With this the image will repeat horizontally on the header. Then you can set another background for the body, or just a background color.
Again, it depends a lot on what are you trying to achive.
Good luck!!
Related
I write a website with Vue.js and to handle user interface, I want to use Vue Formulate. All in all it works, but I have trouble to style input errors. So, I tried to make a very simple example to change the background color from the error list, but it doesn't work.
That is my easy component:
<template>
<div>
<p>Test for VueFormulate</p>
<FormulateInput
type="text"
validation="required"
/>
</div>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
<style scoped>
li.formulate-input-error {
background-color:green;
}
</style>
After the site is loaded and the error list element is there, I can change the background-color in the Google Chrome devtools. But not bevor.
I hope somebody can explain what I have to do to make it work.
Your style block is scoped meaning you cannot style elements that are not in your immediate <template> (that's the point of scoping). You have three options:
Remove the scoped portion of your <style> block. I don't really recommend this.
Move your general form styles to a global css file. I would recommend this if you use more than 1 input.
Use a deep selector like ::v-deep. This is great for case-by-case overrides, and allows you to select elements that are deeper than your current "scope". Here's an example:
<style scoped>
.formulate-input::v-deep li.formulate-input-error {
background-color: green;
}
</style>
I'm using Docusing php api to create and send documents to sign, but when I try to insert an image (I'm using HTML document) the document show's the signer only a white square with the text:
The linked image cannot be displayed. the file may have been moved, renamed, or deleted. Verify that the link points to the correct file and location.
Of course I check the image link several times, I changed the image to another server, try different formats, etc...
Any suggestions??
My HTML goes like:
return <<<HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
</head>
<body>
<img style="display: block; margin-left: auto; margin-right: auto;" src="/documents/logo.png" alt="" width="250" height="100" />
<p style="font-family: Garamond; text-align: center; font-size: 14pt; line-height: 0.1;"><strong>Document title</strong></p>
and then the rest of the document.
The only way to add an image to an htlm source doc used for DocuSign is to include it, inline, within the html. In the same way, any CSS must also be inline.
Use a dataurl with an img tag. It works fine.
If you want an embedded image I would suggest that it's inline in the HTML, or you can use PDF or Word or some other format that doesn't require the other file to be loaded.
the DocuSign system cannot load that file and in any case would "flatten" your HTML into a PDF anyway (unless you use responsive signing).
In a bootstrap website like www.teachyourselfpython.com, the welcome and the resources section (if you scroll down) are WHITE. That is, the background colour is white.
I have tried various things and it is not obvious to me where to put the code or what to put, to change that white background for each section (but not affecting the rest) to a light grey.
For example the 'Our resources' section on the page is BLACK, but I cannot see the code that turns it black.
<!-- About Section -->
<section id="about">
<div class="container">
<div class="row">
<p></br></br></br></p>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Our Resources</h2>
<h3 class="section-subheading text-muted">A Better way to learn Python.<h3>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>Unlike other books, websites and resources on Python, our customisable and hugely comprehensive, not to mention pedagogically tested power points, can be used by both teachers (to teach) and students for independent learning.</p>
<p>On subscribing to a series, interactivity and embedded videos can be accessed, together with all the python task and challenge solution files.</p>
<p></br></br></br></p>
Sign Up Today!
</div>
<div class="col-md-6" style="text-align:center;">
<div class="jetpack-video-wrapper"><iframe src='https://www.slideshare.net/slideshow/embed_code/64063652' width='80%' height='288' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></div>
</div>
</div>
<div class = "row">
<p></br></p>
</div>
</div>
</section>
Can anyone suggest the best method to make a very simple tweak (simply to the main index page) to turn the white parts of the background light GREY
Source code: www.teachyourselfpython.com can be used for demo (in terms of where to insert what)
I have tried adding this under each section
<!-- About Section -->
<section id="about">
<div class="container" style="background-color: #ce0818;opacity:0.8;">
but this turns the block 'red' (or whatever colour) and not the entire WIDTH of the website, this being the problem.
In context of our resources - you should put that background css to the section div not in container div
<section id= 'about' style="background:black;padding: 60px 0;
text-align: center;">
and to change the background to light grey write it in tag like
<body style="background:#cccccc !important;">
This is inline method which is not preferred much . You can use external css and write your css there and include that file in page
To use an external style sheet, add a link to it in the section of the HTML page:
example:
<link rel="stylesheet" href="styles.css">
and write
body{
background:#cccccc;
}
#about{
background: #24242a;
padding: 60px 0;
text-align: center;
}
or can include that css code in that page inside head tag example:
<head>
<style>
//write your style code here
</style>
</head>
teachyourself have that css written in css/main.css file
I have a JSF form that needs to upload a file via an icon click (i.e. without showing the textfield/browse button of the file upload component).
Is it possible to trigger the file-open dialog and uploading functionality of the upload component via some other component type?
No, the file upload dialog is meant to be pretty much unchangeable as a security feature.
I don't think there's any other "off the shelf" component you could use to trigger the file-open dialog (which, after all, results from a <input type=file> written by the renderer).
However, if you're willing to develop your own renderer, it could write both the <input> and your icon's <img> (one right after the other). Give the <input> a css class that uses absolute positioning to place it on top of the <img> and reduces it's opacity to 0 (you could also set the cursor to 'pointer').
Now, when the user clicks on the icon, they're also clicking on the invisible input, which pops up your dialog.
(Now that I think of it, I'm almost positive you can do this without writing your own renderer by just applying the same kind of css to off the shelf components...)
With HTML5, there is new way to styling the css with bootstrap for example and replace image by a glyphicon.
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
filter: alpha(opacity=0);
opacity: 0;
outline: none;
cursor: inherit;
display: block;
width:32px;
font-size:24pt;
height:12px;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<form>
<span class="btn btn-default btn-file btn-lg">
<span class="glyphicon glyphicon-upload"> </span> <input type="file">
</span>
</form>
</body>
</html>
I want the 2 columns to touch ie. remove the margins, how can I do this?
My code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>testing</TITLE>
<!-- css -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">
<!-- js -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.5.2/build/utilities/utilities.js"></script>
<style>
.yui-b {
background-color: #eeeeee;
}
</style>
</HEAD>
<BODY>
<div id="doc3" class="yui-t1"> <!-- change class to change preset -->
<div id="hd">header</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
bd.main
</div>
</div>
<div class="yui-b">bd.other</div>
</div>
<div id="ft">footer</div>
</div>
</BODY>
</HTML>
Add a class to the right column and set margin-left to 0.
If that doesn't work you might have to increase the width by 1 or 2%. You can use firebug to check the applied styles and change them on the fly.
Notice that you're using YUI (Yahoo UI).
Look for the YUI reset.css. Every browser has potentially different margin, padding, font-size defaults. You should really start every web app with a reset.css file like that to bring everything to a common denominator. Otherwise you might find you "fix" the issue, only for it to appear again when viewed from another machine / platform.
Should hopefully start you off with all block elements having no margins or padding and then you can rather add margins and padding back in where you need it.
Notice that you're using YUI (Yahoo UI).