I am trying to learn html 5, I am trying to reproduce the rules to my current favourite game Camel Up (or Camel Cup) and am trying to be a good person and not just use a table, this is what i am trying to achieve
this is what i am getting
here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CamelCup Rules</title>
<style>
body {background-color:#f3d7a0; font-family:cursive}
#wrapper {width:1000px}
.float-left { float:left;width:40%;padding-right:5px;padding-left:5px;}
.float-right {float:right;width:40%;padding-right:5px;padding-left:5px;}
#banner-text{ font-size: smaller;}
.red-label {font-size:medium; color:red;vertical-align:top}
h1 {color:red; text-align: center; font-size:40px}
.full-width {width="100%";}
</style>
</head>
<body>
<div id="wrapper">
<header>
<div class="full-width">
<div id="logo" class="float-left">
<img src="logo.PNG">
</div>
<div id="banner-text" class="float-right">
<p>
Witness the craziest camel race of all time, as things really go topsy-turvy when
camels stack up and entire pyramids turn upside down.
As members of Egyptian high society, you gather in the desert with one simple
goal: to gain the most money by backing the right camel to win a leg or even the
entire race. However, in this race, it’s not just the lucky ones who can beat the
odds. Reading the dynamics of the race and having a good sense of timing is just as
important when it comes to backing the right camels and taking the victory.
</p>
</div>
</div>
</header>
<section id="contents" class="full-width">
<h1>Components</h1>
<div id="pyramid" class="float-left">
<label class="red-label">1 Pyramid</label>
<img src="pyramid.png">
</div>
</section>
</div>
</body>
</html>
if I make it variable width and enlarge my browser it looks like this (this is in response to an answer telling me to make it variable width but i can't see where to add pictures to comments)
This rule has an error in it:
.full-width {width="100%";}
should be
.full-width {width: 100%;}
Make these Changes:
Remove "" from .full-width
.full-width {width: 100%;}
Add this styling
#contents{clear:both;}
Also change width of #wrappper from 1000px to 100%
wrapper {width:100%;}
Related
I have checked the file order and closed off tags. It seems whatever I put at the top of the CSS file will not be read, however, everything below the very top segment of cod ,in this case, #tribute-info will not be applied to the HTML. If I moved #title to the top and refreshed the browser #title will not have its CSS anymore. Same situation for #img-caption.
<style>
#tribute-info{ /* <-- anything I put at the top of the file is not getting read. If I moved #img-caption here, and #tribute-info below it, #img-caption will not work. */
color: blue;
}
#img-caption{
color: red;
}
#title{
text-align: center;
color: red;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/design.css" />
<meta charset="utf-8">
</head>
<body>
<div id="main">
<h1 id="title">History´s First Programmer</h1>
<div id="img-div">
<div class="row">
<div class="column">
<img src="images/ada_lovelace_house_emblem.jpg" alt="Ada Lovelace depicted in an emblem" id="image">
</div>
</div>
<p id="img-caption">The Mother of computer programming</p>
<div id="tribute-info">
<p>“The more I study, the more insatiable do I feel my genius for it to be.”</p>
<p>“Your best and wisest refuge from all troubles is in your science.”</p>
<p>“Mathematical science shows what is. It is the language of unseen relations between things.
But to use and apply that language, we must be able to fully to appreciate, to feel, to seize the unseen, the unconscious.”</p> <!-- this segment of code is not changing -->
</div>
<a href="https://en.wikipedia.org/wiki/Ada_Lovelace" target="_blank" id="tribute-link">Click here to learn
more about Ada Ada_Lovelace</a>
</div>
</div>
</body>
</html>
The code works fine if you remove the <style> tag from your css file
I want to make a resume header just like this
Expected Output
I have tried this HTML code with less CSS to achieve this task
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1 align="center">
<img src="http://gocartoonme.com/wp-content/uploads/cartoon-avatar.png"
width="10%" height="10%" align="middle">Sam<br clear="all">
</h1>
</body>
</html>
But I could not achieve that resume header.
The expected output would be a Resume header just like the image mentioned above
You can do it with CSS fairly easily, using properly structured HTML:
HTML:
<div id="bio-intro">
<div id="img-container">
<img src="" alt="treybake Frontend Developer" />
</div>
<div id="bio-info">
<h1>TreyBake</h1>
<h3>Frontend Developer</h3>
</div>
<div id="bio-contact">
<p>
e: someemail#domain.com <br/>
t: 0112233445566<br/>
w: domain.com
</p>
</div>
</div>
CSS:
#bio-intro {
background: lightgray;
width: 100%
}
#img-container, #bio-info, #bio-contact {
display: inline-block;
width: 33%
}
#img-container {
border: 1px solid;
border-radius: 100%;
max-width: 150px
}
We essentially break up each column into it's own container. We set these containers to a 1/3 of the parent width and set the display to inline-flex to make a row. Everything else is simple CSS to create a bordered image (no image, hence you see the ALT attribute value on the image - replace with an image and you'll see a much better result).
Working Example
I recommend flex-box.
You can assign "display:flex" to a element within which all your children are container, i.e., all the elements you are trying to align based on your requirements.
From there, flex-box provides numerous other features which you can explore here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flex-box not only easy to implement, but it is also responsive. This may not be too important in your specific case, but something additional benefit to keep in mind while styling elements.
<li class="flex-container">
<ul class="flex-item">Your image</ul>
<ul class="flex-item">Your Name/Title</ul>
<ul class="flex-item">Your contact</ul>
</li>
.flex-container {
display: flex;
justify-content: space-between;
}
https://jsfiddle.net/snehansh/fm3etpsu/5/
I am trying to set my background image to opaque keeping the content clearly visible. So far what I have tried do not seem to work. Here is my code. Any suggestions would be of great help
<head>
<title></title>
<style type="text/css">
body {
z-index: -1;
opacity: 0.9;
}
</style>
</head>
<body class="my-container" style="background-image: url('http://placekitten.com/1500/1000');">
<div class="container">
<h2>Scotch Scotch Scotch</h2>
<p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
<p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>
</article>
</div>
</body>
Here's a hacky way to do it...
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
z-index: -1;
opacity: 20%;
}
</style>
</head>
<body class="my-container" style="background-image: url('https://jaymartmedia.com/example/kitten.png');">
<div class="container">
<h2>Scotch Scotch Scotch</h2>
<p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
<p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>
</article>
</div>
</body>
</html>
Not optimal, but it's quick and easy, all I did was add opacity using an image editor.
Please download the image here.
https://jaymartmedia.com/example/kitten.png
Hope this helps.
You forgot a semi-colon after opacity, as well as it's measured in percentage. Fixed code is as follows:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
z-index: -1;
opacity: 90%;
}
</style>
</head>
<body class="my-container" style="background-image: url('http://placekitten.com/1500/1000');">
<div class="container">
<h2>Scotch Scotch Scotch</h2>
<p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
Convert to PNG and make the original image 0.2 opacity
because if u give opacity for body...it will effect to all contents inside the body including bg image.
CSS: set background image with opacity?
Opacity applies to entire container and thus resulting the effect in either the background and the content.
A good solution is to use a PNG with your desired level of opacity and apply it to a child container. In your case, you can apply to your .container.
With using this method, you can easily switch the background image anytime you need without worrying about its opacity level:
.container{
background-image: url('transparent.png');
}
The transparent.png image will be place on top of your background image.
Another way to do this:
<head>
<title></title>
<style type="text/css">
.my-container {
z-index: -1;
opacity: 0.2;
position: absolute;
}
</style>
</head>
<body>
<div class="my-container">
<img src='http://placekitten.com/1500/1000'>
</div>
<div class="container">
<article>
<h2>Scotch Scotch Scotch</h2>
<p>In the criminal justice system, the people are represented by two separate yet equally important groups. The police who investigate crime and the district attorneys who prosecute the offenders. These are their stories.</p>
<p>Look for the Union Label when you are buying a coat, dress, or blouse. Remember, somewhere our union's sewing, our wages going to feed the kids, and run the house. We work hard, but who's complaining. Thanks to the I.L.G. we're paying our way. So always look for the Union Label. It means we're able to make it in the U.S.A.!</p>
</article>
</div>
</body>
try use alpha filter in your section or background div, doest work if u link img on div and set opacity on body,
try this
.youclass {
background-image:url(../img/welovecats.jpg);
opacity:0.60;
-moz-opacity: 0.60;
filter: alpha(opacity=0.6);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;}
html
<html>
<body>
for section
<section class="youclass">
content
</section>
</body>
</html>
use body for only main items like data-target, scroll scripts, normalizes and other stuffs
body{
margin:0;
padding:0;
background-color:white;
font-family:sans-serif;
font-size:14px;
}
#wrapper{
margin-top:10px;
margin-bottom:50px;
margin-left:auto;
margin-right:auto;
width:550px;
}
<!DOCTYPE html>
<html>
<head>
<title>advanced website one</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="advanced1.css">
</head>
<body>
<div id="wrapper">
<header id="header">
<img id="logo" src="images/logo.png" alt="logo image"/>
<ul id="menu">
<li>Home</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<content>
<h2>About Blue Micro</h2>
<p>Blue Micro is meant for a site that doesn't necessarily need a huge amount of content. I've found that trying to put a small amount of text onto a large template ends up in a site that looks slightly off. So this template is for those that need a quick and simple site</p>
<h2>Titles are H1 Tags</h2>
<p>Try to include your keywords in the titles since they are what seach engines pick up, it's also a good idea to try to include those same keywords in the title as well (only one of two of your best ones).</p>
<h2>Background Image</h2>
<p>I debated using a fancy background for this template, but ultimately just decided to keep it blank. I did however create all the images with Alpha transparency, which means that regardless of what background you choose, it will always look good. So keep it white, or experiment with it if you please.</p>
<h2>XHTML 1.1</h2>
<p>This template validates as XHTML 1.1 - this is to ensure it'll work for many years to come, and it makes it really easy for you to modify.
Try to include your keywords in the titles since they are what seach engines pick up, it's also a good idea to try to include those same keywords in the title as well (only one of two of your best ones).</p>
</content>
<footer>
free xhtml template by web page designer
<!-- begin snippet: js hide: false console: true babel: false -->
</footer>
</div>
</body>
</html>
I want to do this "see border" border in css, its not that hard but i'm newbie at web development. This border is linear gradient and has radius and i think internal radius
here is the logo image logo image
border
.border {
float: left;
background-image: url(gradient_rectangle_back.png);
background-repeat: repeat-x;
background-color: #4586F1;
width: 547px;
margin-left: 14px;
clear: both;
margin: 0 auto 0 auto;
}
You also need to download this graphic
http://www.quackit.com/html/templates/download/bryantsmith/bluemicro/gradient_rectangle_back.png
Here is what I'm trying to do.
I want layout with three columns. Lets call them left, middle and right column. I can't figure out what to do so when the content of main increase the height of left and right columns to increase also ?
I'd suggest checking out this link for a great example of a 3 column liquid layout. Just view the source for the example of the HTML and CSS. He also provides examples of various other layouts (see the tabs at the top of the page).
Here is an excellent website: http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts that has a whole bunch of different layouts that are all CSS based.
HTML:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3 Columns</title>
</head>
<body>
<div class="container">
<div class="left">
<h3>Left Column</h3>
</div>
<div class="center">
<h3>Center column</h3>
/div>
<div class="right">
<h3>Right column</h3>
</div>
</div> <!-- /container -->
</body>
</html>
CSS:
.container {width: 800px; border:1px solid red; overflow:auto; }
.left {width: 250px; border:1px dashed green; float:left}
.center {width: 250px; border:1px dashed green; float:left}
.right {width: 250px; border:1px dashed green; float:left}
See the demo here:
http://jsfiddle.net/z2SLL/1/
I would strongly recommend against using the <table> element simply because for semantic reasons, we are not talking about displaying tabulated data.
Instead, exploit the display properties using values like "table", "table-row" and "table-cell". Here is a demo: http://jsfiddle.net/teddyrised/DLaCW/20/. You can see that although the content of each column varies, their overall height follows that of the tallest <div>.
Maybe the faux columns technique is what you need. Check it out here, here and here.
If you need it to be liquid or with no images (for whatever reason) then you might have to use some javascript like this example or you can check this weird example.
Anyway, with the little information there's not too much to offer because there's a lot of variables and different solutions.