I wonder why the css for the div class=iphone isn't working-you can't see a border or anything else I include in the css..however when I was writing the code on codepen it all worked just fine and once I did it on sublime, it won't show anything (but only for the div element with the class iphone). Does anyone know why? Thanks!!
Html:
<body>
<header>
<h1>Guess a Number!</h1>
<h2> - - - - - - - - - - - - -</h2>
<h3>Lets Play</h3>
<h4>Pick a number from 1-100</h4>
</header>
<section>
<div class="iphone"> ..
<div>
<input type="text" name="number" placeholder="number"
class=pickingNumber>
<button class="send"><i class="fa fa-share"></i></button>
</div>
<div class="playAgain">
<button class="buttons">
<p><b>---</b></p>
</button>
<button class="buttons">
<p><b>---</b></p>
</button>
</div>
</div>
</section>
<footer>
<div>
<p class="end">© Made by me</p>
<p class="end">Thanks for visiting!</p>
</footer>
</body>
</html>
part of css for that:
.iphone{
border: 6px solid #949599;
}
Does your HTML have a <link> to the css file?
http://www.w3schools.com/css/css_howto.asp
You have an extra div in the footer it seems. That may be a problem? There are precedential rules too, so make sure that iphone class is the last class loaded with that name.
You may need to give the iphone class some dimensions.
iphone {
height: 100px;
width: 100px;
}
Related
I am trying to achieve toggle of div using just inline css but its not working. please note that inline css is required no javascript. Thanks guys.
</head>
<body>
<div>
<a id="hide1" href="#hide1" class="hide">+ Expand</a>
<a id="show1" href="#show1" class="show" style="display: none;">- Expand</a>
<div class="details" style="display: none;">
Content goes here.
</div>
</div>
</body>
</html>
Use the summary / details HTML elements.
<details>
<summary>Expand</summary>
Content goes here.
</details>
Use a checkbox instead.
input:not(:checked) + .toggle {
display: none;
}
<span>Show</span><input type="checkbox" />
<div class="toggle">Hello World!</div>
I am learning HTML and CSS and I found one weird thing, despite training that I watch, and copy this step by step(using Visual Studio Code) I am unable to apply any style to any part of HTML file, when I add a Class to it. However, if I add ID, style applies.
My setting:
Visual Studio Code
Separate CSS and HTML File.
Example of not working code:
<div Class="Author">
<h1> About the Author</h1>
<img src="image link here">
</div>
however, if I change above code to this:
<div ID="Author">
<h1> About the Author</h1>
<img src="image link here">
</div>
This does work.
Yes, I do change properly the CSS file to be either "." or "#" is there anything I miss here?
I don't think this works:
<div Class="Author">
it should be lowercase:
<div class="Author">
and then in the css reference it like
.Author {color: red}
This functions correctly. You didn't give us css to work from so this is the best I can offer.
#Author {
color: red;
}
.Author {
color: blue;
}
<!-- no css applied -->
<div ID="no_css">
<h1> About the Author</h1>
<img src="image link here">
</div>
<!-- css applied to `ID` using `#` -->
<div ID="Author">
<h1> About the Author</h1>
<img src="image link here">
</div>
<!-- css applied to `Class` using `.` -->
<div Class="Author">
<h1> About the Author</h1>
<img src="image link here">
</div>
Title says all basically. I want the text right next to the slideshow.
<div class="displayBorder">
<div class="displayContainer">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')"><</div>
<img src="css/img/wexford-1.jpg" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<h2 id="wexford">17 My Street - Some Town, New York</h2>
<h3>$1,249,999</h3>
</div>
</div>
H tags have a specific purpose, to act as a header under which other content will fall. To use h tags side by side goes against their intended use (and is invalid html). The span tag does what an H tag does, but is an inline element (display:inline), where a H tag is a block level element (and acts like a div)(display:block). You can change the 'display' property of an H tag's css to do what a span does.
With that in mind, I would actually use 'display:inline-block' in your situation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1 {
display: inline-block;
}
h2.asCouple {
display: inline-block;
margin-left: 15px;
}
</style>
</head>
<body>
<div>
<h1>Topic - <h2 class="asCouple">Subtopic</h2></h1>
</div>
</body>
</html>
Hope this helps.
You can do it inline when declaring the HTML element, I did something like this:
<h6 style="display: inline">Posted by <h4 style="display: inline">{{.}}</h4></h6>
By doing this, you don't change the style of all <hSOMETHING> elements
<div class="displayBorder">
<div class="displayContainer">
<div class="displayTable">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')"><</div>
<img src="css/img/wexford-1.jpg" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<div class="txt-con">
<h2 id="wexford">Location</h2> <br />
<h3>$1,249,999</h3>
<p>Custom Built Home With Every Bell And Whistle !/ Ch Colonial With 6 Generous Bdrms, 2 Master Suites Or Use Lge Area For Office, 5 Full Baths, Wood Floors Thru-Out, Granite Eik W/ Center Isle, Top Appliances, Andersen Windows, Lots Of Details, Full Finished Basement W/ Ose, Full Wet Bar, Theater Tv Area, Playrm, Lots Of Storage, Custom Freeform Salt Pool, Custom Pool House</p>
</div>
</div>
<button class="learn-btn">LEARN MORE</button>
</div>
#Jared Scarito is this what you need??
CSS
.displayContainer{
display:table;
}
.photoContainer,.txt-con{
display:table-cell;
vertical-align:middle;
}
HTML
<div class="displayBorder">
<div class="displayContainer">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')">
<</div> <img src="https://i.stack.imgur.com/rhy46.png" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<div class="txt-con">
<h2 id="wexford">1234 My Street - Sometown, New York</h2>
<h3>$1,249,999</h3>
</div>
</div>
</div>
changed the image to demonstrate
Pretty much the same HTML, added extra div around h3 and h2..
I've started my new feminist blog. Sadly, the logo does not look good at all. I've tried to remove the shadow, but it doesn't helped at all. Here is how it looks like (up) and how I want it to look like (down):
Both logos
But I don't know how to do it. Here is the HTML code of my blog: view-source:https://glenn-gleich.blogspot.de/. This is what I have tried. I think I have to change following:
<!-- Begin header content -->
<div class='header-content'>
<!-- Begin Main Logo -->
<div class='main-logo'>
<div class='header section' id='header'><div class='widget Header' data-version='1' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
Glenn
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span>
</span></p>
</div>
</div>
</div></div>
</div><!-- /.main-logo -->
<!-- End Main Logo -->
I think it should be substituted with something like this:
<div class='item-thumbnail'>
<img alt='' border='0' height='72' src='https://3.bp.blogspot.com/address_to_image/name.jpg' width='72'/>
</a>
</div>
I hope you can help me.
<h1 class='title' style="color: #000">
<span style="background: #000; color: #fff; padding-left: 5px; padding-right: 5px; margin-right: 2px;">G</span>lenn
</h1>
This would give the desired result, you can change it a little to your preferences.
Note: Do not use styles! I did it to make it easier to read, but you should put it in a .css file.
I'm ultimately looking to rebuild an old website that complies to web standards, and thought I would try getting my feet wet in html5 and css3. I know neither of these are fully supported across browsers yet, but I'm willing to work within whatever limits for the time-being.
However, I'm already ramming my head against an early wall, and frankly feel pretty stupid right now. I can't seem to highlight text OR open links in the pages generated by my code.
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>The Hominis Inquiry: Reconstructing Psychology, Societies, and Human Ecosystems</title>
<link rel="stylesheet" href="HIcss3.css" />
<script src="HIjs.js"></script>
</head>
<body>
<div class="title">
<div id="search">
<form id="searcher" onclick="startSearch('sbox')">
<input type="text" id="sbox" size="15" value="Search This Site">
<input type="button" id="sbutt" value="Find">
</form>
</div>
</div>
<div class="navigation">
<div id="about"> About </div>
<div id="blog"> Blog </div>
<div id="research"> Research/ Academic Papers </div>
<div id="hypercourse"> Hypercourses </div>
<div id="links"> Links </div>
<div id="contact"> Contact </div>
</div>
<div class="download">
<a href="http://www.mozilla.com/firefox/" target="_blank">
Firefox is strongly recommended for viewing this page. Download the latest version free!<img src="firefox.jpg" />
</a>
</div>
<p>
Welcome to HI Updates!
</p>
</body>
</html>
css:
body {border:0; margin:0; padding:0; vertical-align:top; text-align:center; background-color:#FFDDAA; color:#440000}
h1 {font-size:3em; font-weight:700}
h2 {font-size:1.5em; font-weight:600}
h3 {font-size:1.25em; font-weight:500}
p {}
a {color:#000066; font-weight:600; text-decoration:none}
a:hover {background-color:#FFFFDD}
a:visited {color:#440066}
div.title {position:fixed; width:100%; height:10.5em; background-image:url(hominquiry_laeroprocni.jpg); }
div.download {text-align:left}
div.download img {border:0; float:left; width:3em; height:3em}
div.navigation {}
#about {}
#blog {}
This was not a problem with my last layout in html 4, and feel I must be overlooking something REALLY obvious... even worse, it went through the validator without a hitch :P
Thanks!
Your div.title is position: fixed so it is actually floating over your links, so they don't receive the hover or click events from your mouse. Remove it to try it out.
With: http://jsfiddle.net/LFTpB/
Without: http://jsfiddle.net/THyke/