So this is probably a very minor adjustment that needs to be made to the HTML/CSS code but here is the issue I've been facing. My code for a general HTML page is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<link href="sites/css/style.css" rel="stylesheet" type="text/css" />
<title>My Page</title>
</head>
<body>
<div class="wrapper">
<div class="header">Header</div>
<div class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div>
<div class="main_content">
</div>
<div class="footer">Copyright © 2012-2013.</div>
</div>
</body>
</html>
The CSS for the .wrapper class is as follows:
.wrapper {
border: 1px solid #ddd;
margin-left: auto;
margin-right: auto;
width: 980px;
}
I finding that when I put content into any of the other DIVs that go on the page especially when using either float: left; or float: right; the border for the wrapper does not continue on down the page unless I use a class called:
.clearer {
clear: both;
}
and put a DIV:
<div class="clearer"></div>
at the bottom of every DIV that is floated. Is there something I'm not doing correctly here or is this a common issue?
Any help or advice appreciated!
Thanks!
Dave.
This is a common issue, which you can usually fix by adding overflow: auto to the #wrapper. If that doesn't work, your clearer solution is another often-used alternative.
Related
I have seen in many css tutorials, syntax like p.class or p#id
Eg.
p.center
But I always have to use class p{ }, otherwise it doesn't get applied.
Any suggestions?
#nav li {
display: inline-block;
}
li#nav {
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="first.css">
</head>
<body>
<div id="icon">
<h1>icon</h1>
<div id="nav">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
</div>
</body>
</html>
p.center{} refers to p elements with 'center' class and .center p {} refers to
all p elements inside element having .center class. So based on your html structure you can have css selectors .
You can refer from here
li.list {
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="first.css">
</head>
<body>
<div id="icon">
<h1>icon</h1>
<div id="nav">
<ul>
<li class="list">link</li>
<li class="list">link</li>
<li class="list">link</li>
</ul>
</div>
</div>
</body>
</html>
So, element.classname means, element must be having a class with classname. Same goes for id. But, remember #id is always unique. So, prefer classname in such scenarios.
Also, you are trying to make a change to the P element in your html.
In css you just need to do p{} but that would change all the P on your page which is normally not a good idea unless you are 110% sure that is what you want, no matter what.
HTML
<div class="div1">
<ul class="dropdown">
<li>example</li>
</ul>
<div>
CSS
.dropdown{
visibility: hidden
}
.div1:focus .dropdown{
visibility: visible
}
I'm trying to make click event in css using focus without jquery and I need it when I am clicking on div1 it will hide a dropdown ul.
Is there any way to do that?
You can't do that with "focus", but you may do that with "active". Active is accepted by most browsers as the "click" event (i.e. while you click on an element it is active).
Check the code below. I have just tested with Chrome and it works as you intended. Also tested with Internet Explorer; it "sort-of" works with this too (the second selector is specifically for IE).
Hope this helps you out. Good luck!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title Goes Here</title>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
.div1 {
border: 1px solid green;
}
.div1:active .dropdown {
display: none;
}
.dropdown:active {
display: none;
}
</style>
</head>
<body>
<p>This is my web page</p>
<div class="div1">
test
<ul class="dropdown">
<li>example</li>
</ul>
<div>
</body>
</html>
What about using javascript
<div id="div1">
<ul class="dropdown" id="ul1">
<li>example</li>
</ul>
<div>
<style>
.hidden {
visibility: hidden;
}
</style>
<script>
document.getElementById('div1').onclick=function(){
var element = document.getElementById("ul1");
element.classList.add("hidden");
};
</script>
JSFiddle: http://jsfiddle.net/4Ls0ygp3/
I'm doing a sample webpage, but the results aren't coming along as I'd planned. What's supposed to happen is a black rectangular header box is supposed to show. I'll give you the sample code.
HTML CODE / learningcss.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="div.css" rel="stylesheet" type="text/css"
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>CSS Tutorial 1</title>
</head>
<p>
We are creating this page to see how to make a better looking website.
</p>
<p>
We are creating this page to see how to make a better looking website.
</p>
<div id="header">
This is a paragraph
</div id="header">
<body>
<div id="column 2">
<h1>The Header</h1>
</div>
<div id="Column 2">
This is a basic CSS<br>
<br>
Tokyo<br>
</div>
<div id="Column 3">
<h1><a href="<a href="http://gymforgeeks.userecho.com/http://gymforgeeks.userecho.com/">
This is GymForGeeks
</h1>
<p>
This is just a sample page using CSS.
</p>
<p>
Yet another sample text content.
</p>
</div>
<div id="footer">
Copyright Queensborough
</div>
</body>
<body>
<footer>
<p>Posted by: Mike</p>
<p>This is a test: <a href="mailto:someone#example.com">
someone#example.com</a>.</p>
</footer>
</body>
</html>
div.css
#Header {
background:#000;
height:100px
}
#header {
color: white
}
You have to close an opened div with only </div> not </div id="header">
CSS is is casesensitive so you have to use #header not #Header
And you can combine those two definitions:
#header {
background:#000;
height:100px;
color: white;
}
Hope i could help a little.
I cleaned up your mess a little further:
http://codepen.io/anon/pen/qacAg
Explanation:
after you closed the </head> you have to open a <body>
this is how a working link looks like: TEXT
you should only use id's for unique areas or divs not multiple times - use classes instead <div class="THECLASS">THE CONTENT</div>
dont use spaces in classes or id names it will create multiple classes
Your code is totally wrong:
1) body is the starting element, after /head, and that is the last element before /html and use it only once.
2) When you close the div, no need to add id.
3) Id should be one string
4) You use a href badly
5) You do not close your css
See this: http://jsfiddle.net/7uggw2x6/1/
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
....
</head>
<body>
<p>We are creating this page to see how to make a better looking website.</p>
<p>We are creating this page to see how to make a better looking website.</p>
<div id="header">This is a paragraph</div>
<div id="column_1"><h1>The Header</h1></div>
<div id="column_2">This is a basic CSS<br><br>Tokyo<br></div>
<div id="column_3">
<h1>This is GymForGeeks</h1>
<p>This is just a sample page using CSS.</p>
<p>Yet another sample text content.</p>
</div>
<div id="footer">Copyright Queensborough</div>
<footer>
<p>Posted by: Mike</p>
<p>This is a test: someone#example.com./p>
</footer>
</body>
</html>
CSS
#header {
background:#000;
height:100px;
color: white;
}
This is the valid version of your HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>CSS Tutorial 1</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>We are creating this page to see how to make a better looking website.</p>
<p>We are creating this page to see how to make a better looking website.</p>
<div id="header">This is a paragraph</div>
<div class="column-2">
<h1>The Header</h1>
</div>
<div class="column-2">This is a basic CSS<br><br> Tokyo<br></div>
<div class="column-3">
<h1><a href="<a href="http://gymforgeeks.userecho.com">This is GymForGeeks</h1>
<p>This is just a sample page using CSS.</p>
<p>Yet another sample text content.</p>
</div>
<div id="footer">Copyright Queensborough</div>
<footer>
<p>Posted by: Mike</p>
<p>This is a test: someone#example.com.</p>
</footer>
</body>
</html>
Some things you should know:
you should not have multiple elements with the same id
any HTML page can only have 1 body element
id must be string and should not contain spaces. e.g. column-3
any HTML tag (p, div, footer, span, ..) must be inside <body></body> tag
use classes if you want to apply same style to multiple elements
In order to make your elements appear in columns you will need to use a grid framework (getbootstrap.com, 960.gs, ..) or create your custom CSS that will order your elements:
e.g. style.css:
.column-2 {
float: left;
width: 20%;
}
.column-3 {
float: left;
width: 30%;
}
This is only an example. You will need to do some digging until you get to your desired grid.
You should use in your CSS-File following style:
#header {
background-color: #000;
color: #FFF;
height: 100px;
}
You can learn the Basic of HTML and CSS at www.w3schools.com.
I hope I could solve your problem.
Regards
t.koelpin
you have a few problems. The structure of your html is incorrect. the footer element goes inside
the body tag. You have to have a closing tag for your divs and your content goes in the middle.
<!DOCTYPE html>
<html>
<head>
<link href="div.css" rel="stylesheet" type="text/css"
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>CSS Tutorial 1</title>
<!-- this section is for loading scripts, css and metadata -->
</head>
<body>
<!-- this section is for content -->
<div class='header'>
Header text
</div>
<footer>
<!-- footer tags are HTML5 Tags and should be used with the HTML5 doctype -->
</footer>
</body>
</html>
The css
#header {
background:#000;
height:100px;
color: white;
}
Below is simple html page with an iframe. Inside this iframe are some fluid rows. The problem is now that the content in the iframe is stacked but it should be on the same row. There is enough space for "label" and "main content" to be on the same line.
Here is the code of the main page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row-fluid">
<div class="span12">
<iframe src="frame.html" width="500px"></iframe>
</div>
</div>
</body>
</html>
Here is the code of the iframe:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row-fluid">
<div class="span6">label</div>
<div class="span6">main content</div>
</div>
<div class="row-fluid">
<div class="span6">label 1</div>
<div class="span6">main content 1</div>
</div>
</body>
</html>
The result is now:
label
main content
label 1
main content 1
instead of
label main content
label 1 main content 1
Does somebody know how can I achieve the desired result?
Width of your iframe is 500px, and if you are using Twitter Bootstrap css for responsive layout, media queries will break your layout for small screens. You can use current markup, but remove Twitter Bootstrap responsive CSS.
Below is example with bootstrap-responsive.css
http://jsfiddle.net/ebrPt/ (try to decrease width)
And here is example without responsive css
http://jsfiddle.net/ebrPt/1/ (try to decrease width)
Finally I ended up overriding some media tags of bootstrap when I'm in an iframe
#media screen and (max-width: 767px) {
.row-fluid [class*="span"] {
float: left !important;
width: 49% !important;
margin: 0 !important;
}
}
#media screen and (max-width: 480px) {
.row-fluid [class*="span"] {
float: none !important;
width: 100% !important;
margin: 0 !important;
}
}
I have a very simple holding page I built centering a div, anchor and image. For some reason it will not center in IE8 (either mode), and I am hoping someone can tell me why. I haven't had a chance to try it in other IE browsers. I have tried this in Chrome and FF3 where it works OK.
<html>
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
I said it was really simple. :)
Thank you,
Brett
Do you really want your page to work in quirks mode? Your HTML centers fine once I added doctype to to force standards mode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="http://stackoverflow.com/content/img/so/logo.png" id="toLogo"></a> </div>
</body>
</html>
The margin of auto on the sides of the div leave it up to the browser to decide where it goes. There is nothing telling the browser that the div should be centered in the body, or left or right aligned. So it's up to the browser. If you add a directive to the body, your problem will be solved.
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center;}
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
I added a 1px border to the div so that you could see what was happening more clearly.
You're leaving it up to the browser because it's in quirks mode. To remove quirks mode, add a doctype definition to the top, like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
Now you'll be able to see your 300 px div center on the page.
Add text-align:center to the body. That should do it when combined with the margin:0 auto on the div.
You can center without using the text-align:center on the body by wrapping the entire page contents in a full-width container & then setting text-align:center on that as well.
<html>
<head>
<title>Welcome</title>
<style>
#container {text-align:center;border:1px solid blue}
#pageContainer {width:300px; margin:0 auto; border:1px solid red}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="container">
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</div>
</body>
</html>
(I added the container div). It doesn't really change anything though... just an extra div. You still need all the same css properties.
You probably want to change it to the following:
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center; }
#pageContainer {width:300px;margin:0 auto;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
The text-align:center; is moved to the body. If you want to place other aligned left content within the div #pageContainer, then you'll need text-align:left; for that class. This is the solution that I have used in quite a few websites now and seems to work across all browsers (it's what Dreamweaver uses in it's starter templates).
FOR BLUEPRINT USERS
This drove my nuts, until i found this post: problem with ie8 and blueprint
Long story short, in you html code change the
<!--[if IE]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
for
<!--[if lt IE 8]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
Regards
Alex
This works for me on IE6,7,8,FF 3.6.3:
#container
{
width:100%;
}
#centered
{
width:350px;
margin:0 auto;
}
and
<div id="container">
<div id="centered">content</div>
</div>