Edited after seeing a few copy& paste errors
Until I read the question HTML5 - Can I use Width and Height in IMG? I thought that there is only 1 way of defining the width/height of elements. 1 way in the
sense of that it always works the same.
Now that question has intrigued me and I began to wonder. With separate .css files I only know of 1 way to define height/width for elements:
img#myexample { width: 48px; height: 48px }
Now in the linked question there were 2 different ways of how the width were defined (corrected the error there in the original question where px were mentioned in the first variant):
<img src="...(here image)...." width="50" height="50" />
<img src="...(here image)..." style="width: 50px; height: 50px;" />
I did not know until that question that both of these have different results. So my question is how
would I need to adapt the above .css line to include both variants (or is that possible / adviceable at all)?
To be add to use an external css stylesheet you have link it in the head of your HTML page.
HTML
<!doctype html>
<html>
<head>
//Link to your stylesheet below
<link rel="stylesheet" href="yourstylesheet.css" />
</head>
<body>
<h1>Blah Blah</h1>
<img src="your image source" alt="Some text"/>
</body>
</html>
Now that you have external stylesheet linked in your HTML now you can modify the elements in the body of your HTML page.
yourstylesheet.css
h1{
font-size: 14px;
}
img{
width: 50px;
height: 50px;
}
The stylesheet will overwrite what you define in the attributes.
So if you define img{width:100px;} in a stylesheet and use an img tag like <img src="pic.png" width="200px" />, the image will be 100 pixels wide. If you do not define a width in your stylesheet, the attribute will be used of course.
You can define the css either in your html document like with surrounding tags or have a .css-file that you link like this (which is usually cleaner in a large project).
<link rel="stylesheet" type="text/css" href="style.css">
Related
I am writing a webpage , and I want to left part is nav page and right part is content page;
and I create a index.html , give a 100vw and 100 vh to container div label;
however when I look the page, the page is displayed not as I expected;
Anyone can help me understand why ?
I have read css width/height definition, can't figure it out by myself.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<% include('./easyui.art') %>
<title>测试用例管理系统</title>
</head>
<body>
<div class="easyui-layout" style="width: 100vw; height: 100vh">
<div
data-options="region:'west', href:'/feature/nav'"
split="true"
title="特性列表"
style="width: 20%; height: 100%"
>
<% include('./nav.art') %>
</div>
<div
id="content"
class="easyui-tabs"
region="center"
style="width: 80%; height: 100%; padding: 1px"
></div>
</div>
</body>
</html>
You posted ASP or Node inclusions <% ... %> which makes it impossible for other to answer to you faster because you didn't provide simple valid HTML reproducing the issue
I created this pen and tried to add as much comments as possible explaining the styles. The main idea is that if you want some elements on the page to take 100% of the height, all parent elements must have height = 100%, so in your case you need to set all HTML tags in the hierarchy to height: 100vh starting from the html and body. You don't have styles for the last two tags.
By default, div has display: block styles and this kind of element will not adjust to height: 100%. What you need to do instead is to either use height: 100vh on all elements or make all elements display: flex and flex-grow: 1 to auto populate available area on the screen.
I have a template written by someone else, and they have used an image in the CSS as a backgound image like so.
.block-title__inner:after {
background-image: url('../media/bg/11.jpg');
}
I am using this template in a CMS and need it to change to a simple img tag so I can change the image used in the backend.
So instead of the HTML being
<div class="block-title__inner "></div>
It would change to
<div class="block-title__inner">
<img src="../media/bg/11.jpg"/>
</div>
Ive searched around but either nothing is out there or Im not using the correct terms, eitherway I cant find anything around how to do this so any help would be great.
This answer has been edited due to new found information:
The website in question is: headyherps.azurewebsites.net/available/adult/gregory
Instead of using a background-image CSS property as your theme has done by default, you'd like to place an img tag within the parent instead because you consider that the best way to manage the content.
So, Your HTML looks something like this:
<div class="block-title__inner section-bg section-bg_second">
<img src="../media/bg/11.jpg" alt="" />
<div class="bg-inner">
<!--header elements-->
</div>
</div>
Now in order to get the img to behave in a similar fashion to the background-position property we need to apply some CSS properties to it.
.block-title__inner img{
position: absolute;
left: 0px;
top: 0px;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%; /* optional fail-safe for images that are too short */
}
I think something like this would work with inline styles.
<div style="background-image: url(../media/bg/11.jpg)"></div>
You can also use jQuery:
$(function(){
$('.block-title__inner').css("background", "url(../media/bg/11.jpg) ");
});
Don't forget to include it in your <head>
Another option ist to write a script that changes the parents style by using the src
https://jsfiddle.net/cdmp22ay/2/
If you want to keep the markup the same as:
<div class="block-title__inner"></div>
You can get the img src from the CSS class attached with jQuery and append the div with an image.
var bg = $('.block-title__inner').css('background-image');
bg = bg.replace('url(','').replace(')','');
console.log(bg);
$('.block-title__inner').append('<img id='theImg' src="' + bg + '" />');
Sorry for messing my code soo much.this is my first experiment. Doing it all with the help of google. So, Can you tell me how to write the following code in an efficient way and also, I want to pull the text up in the heading block. Help me.
<!DOCTYPE html>
<html>
<head>
<title>
seVen
</title>
<style>body{background:#A8A8A8;color:white;}
.heading{background:#303030;position:fixed;border-radius: 25px;top:10px;
right:2px;left:2px;bottom:85%;padding:10px;}
.login{position:relative;float:right;top:150px;bottom:145px;}
.padding{padding-left:30px;padding-bottom:30px;position:relative;}
</style>
<div class="heading"><div class="padding"><p style="font size:30px">seVen</p><p style="font-size:15px">Own your imagination</p></div></div>
<body>
<div class="login">
Enter your name <input type="text" id="name" /><br><br>
Password <input type="password" id="password" />
<br><br>
<input type="button" id="submit" value="Submit"/>
<input type="button" id="pwdForgot" value="Forgot Password"/></head>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><hr>
About Products
</body>
</html>
At the moment, the height of .heading is based on position:fixed;top:10px;bottom:85% which makes it a specific height which changes as you resize the page vertically. You could replace bottom with height and it will look more consistent.
You can then add line-height to put the text in the middle of the block:
.heading{
background: #303030;
border-radius: 25px;
padding: 10px;
position: fixed;
top: 10px;
bottom: 85%
height: 80px;
line-height: 80px;
}
Other suggestions:
You may consider changing fixed positioning (position:fixed;top:10px;right:2px;left:2px;) to specific widths and margins:
.heading{
background: #303030;
border-radius: 25px;
padding: 10px;
height: 80px;
line-height: 80px;
width: 98%;
margin: 1%
}
The differences with removing position:fixed is it won't scroll with the screen, and it will push everything else on the page below it.
Also, instead of using <br><br><br>... and ... try setting margin and padding:
<div style="margin-top:20px;margin-left:50px">Own your imagination</div>
(you may find display:inline-block, float:left, or float:right useful at this point if you end up changing the page a lot using these)
And your footer could make use of position:fixed if you want it to stick to the bottom of the page, something like:
<div style="position:fixed;bottom:10px;left:0;right:0;border-top:solid 1px white">
<a class="padding">About</a>
<a class="padding">Products</a>
</div>
Try to use margin-bottom
Example:
.heading .padding
{
margin-bottom: 10px;
}
There are a few very major issues with your markup:
Your div with class heading is outside of your body tag - all the content in your html file should be within your body tags.
Your head tag closes near the bottom of your document - the head tag always needs to close before your opening body tag.
You can't rely on characters and br tags to space your content - You need to use padding and margins.
You should find that once you've re-structured everything, that some of your issues should be fixed.
Also, the main reason that your 'own your imagination' text isn't on the same line, is because by default p tags will always start a new line.
Follow this basic html layout to restructure what you've got so far, following my points above:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
</style>
<body>
<!-- all your content needs to go in here -->
</body>
</html>
And then in your header, if you change your p tags to span tags and give them a style of display: inline-block, you'll be able to space them how you would like with some padding.
Also, generally speaking, it's better practice to link to an external stylesheet instead of using inline styles or including your css in style tags in the head, but concentrate on what you've got so far.When you feel confident, you can have a look at this:
Linking to an External Stylesheet
I also highly recommend using CSS Tricks as a general resource going forwards, there's some great stuff on there that should really help with structuring and layout.
I have lots of images in my content with preset styles like <img src="" style="float:left"> or <img src="" style="float:right">
I would like to set different margins for them depending on how they are floated. Is it possible to set CSS style for images with preset styles?
Thanks!
Strictly the (CSS3) selector you are after is the attribute contains selector:
img[style*="float:left;"] { margin: ; }
img[style*="float:right;"] { margin: ; }
Unlike Mr Lister's answer it will work even if the element has other inline styles. That said, I much prefer Lollero's answer of using classes and applying your margins that way; it'll be 100% browser compatible!
I don't know why you'd want to do it that way, so I'm going to suggest this:
http://jsfiddle.net/ZDjWT/
HTML:
<img class="left" src="http://lorempixel.com/g/200/100/" alt="" />
<img class="right" src="http://lorempixel.com/g/200/100/" alt="" />
CSS:
.left {
float: left;
margin-left: 30px;
}
.right {
float: right;
margin-right: 30px;
}
Yes, as long as the style is only "float:left" and doesn't include other properties, or whitespace around the colon, you can write img[style='float:left'] in your CSS.
If the style attribute can include other things too, you might be better off using Javascript to add the properties. (Check for .. .style.float)
Edit: and as Pekka says, the CSS doesn't work in all browsers. Maybe adding a class to the images is the better idea after all!
I am new to the world of coding as well as XHTML. I am in the process of putting a sample page together however having read a number of conflicting articles, it has been suggested that the navigation div block appear above the content div block or vice versa or does it not matter at all? Below is my base code as an example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample page</title>
<link rel="stylsheet" type="text/css" href="web.css" media="all" />
<style type="text/css" media="all">
body {
margin: 0;
padding: 0;
font-family: arial, verdana, sans-serif;
font-size: medium;
font-weight: normal;
font-style: none;
text-decoration: none;
}
#wrapper {
border: 1px solid #eeeeee;
width: 960px;
margin: 0px auto;
}
#header {
background-color: orange;
}
#leftnav {
background-color: yellow;
float: left;
}
#rightnav {
background-color: blue;
float: right;
}
#content {
background-color: gray;
}
#footer {
clear: both;
background-color: green;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
header
</div>
<div id="leftnav">
leftnav
</div>
<div id="rightnav">
rightnav
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
I think you need to elaborate your question. I am unable to figure it out that whether you are concern with SEO or HTML code. Declaring dive any where is not an SEO issue. But for better readability it would be better to make your web page in order.
Like Header at the top. Content in center and footer at the bottom. Left or right navigation menus can be mention before or after content but i suggest that first you should make left nav, then content and then right....
Ideally from an SEO perspective you would want the most important code to appear highest in the HTML source. This is one of the many factors that potentially contribute to how important certain content within a page is perceived to be to search engines.
If it were me I would make the following adjustments to the base template provided
Move the content div above the navigational elements within the source code.
Move the inline CSS code to an external CSS file to help reduce page load times and allow the most important content to move even higher in the source code.
The advice to put the navigation block before the content block is not SEO related, but usability related, in particular for those with screen readers.
The idea is to put a first (invisible to graphical browsers) link to the content of the page so navigation can be bypassed.
Your code is wrong, but here's how you can fix it:
You are using XHTML so you must include XML language information, also you should just include your general language info in your HTML declaration like this:
Microsft's Bing would flag this as an error and inform you to change it appropriately.
Don't use margins, or floats! This is like saying, ok, please move this element a little towards the left and kind of towards the right. Makes no sense! Use absolute positioning and percentages to place elements in your webpages CSS. There are too many different size screens and too many resolutions today. Float and margin are 1995, and I have no idea why people are still using these methods. We also have a society that is now driven by mobile. Keep in mind, one pixel on device will be larger or smaller than one pixel on another device. You can have 5 laptops that are all 17 inches and all have completely different resolutions! Its ok to specify a fixed pixel width and height for images and elements, but you must use percentages when placing those elements otherwise they won't appear in the right position on alternate devices and LCD screens.
If you position an element using absolute positioning with a percentage value such as:
"position: absolute; left: 30%; top: 5%;", then that particular element will be displayed on the screen at 30% from the left, and 5% from the top of the screen regardless of the device rendering it! However, if you position an element with a fixed pixel value say:
"position: absolute; left: 160px; top: 45px;" this will not render correctly on any screen other than the one you are viewing it on. Don't do this! Think about it? You have 2 separate resolutions, one is 1024x768, and the other is, 1366x768, obviously using fixed values will cause serious problems. A percentage is a percentage of the screens or browsers resolution, while a pixel value is a fixed value that hardly changes.
As for your question, you can include your navigation or any other content any way you wish, just be sure to use CSS ID's and corresponding DIV tags that map back to them. Doesn't matter where or when you specify them in your CSS at all. Its entirely up to you. Just stay away from all that "padding" and "margin" stuff, its pointless. With absolute positioning you don't have to float anything, cause everything goes exactly where you want it too from either the top-left, or bottom-right of the screen.