How do you float the content of my body left of the page via CSS?
I have tried this in CSS..
.body {
float: left;
}
but it doesn't work. Only when I add the method written below does it work..
.html, body {
float: left;
}
but I do not want to move the whole page, just the body content left.
What have I missed or shall I say, what am I doing wrong?
As long as you have an element with class body, this should work.
.body {
float: left;
}
div {
margin: 1em;
padding: 1em;
overflow: auto;
}
<div style="background-color: red;">
<div style="background-color: yellow;" class="body">
this is .body
</div>
text
text
</div>
By using your code you are telling your browser to select all tags with with the class "body"
What you are actually trying to do is select the body tag itself so your css should look like the following:
body{
CSS CODE HERE
}
"#"something{} = tag with the ID of "Something"
"."something{} = tag with the class of "Something"
""something{} = the tag itself "something" (example: body)
EDIT: EXAMPLE OF ID
HTML Document:
<html>
<head></head>
<body>
<table id="myIDExample">
</table>
</body>
</html>
CSS Document:
body{
float:right;
}
#myIDExample{
padding-left:100px;
}
Related
I have html script like :
<html>
<head></head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
then I want to access the div by url, if url is:
example.com#div1
I want to hide div2 and if url is:
example.com#div2
then I want to hide div1
How do I solve that with css?
It is possible through CSS using pseudo selector
<html>
<head>
<style type="text/css">
.my-div {
background-color: green;
display: none;
height: 100px;
width: 100px;
}
.my-div:target {
display: block;
}
</style>
</head>
<body>
<div id="div1" class="my-div">Div 1</div>
<div id="div2" class="my-div">Div 2</div>
</body></html>
Make sure you always hit with #div1 in url e.g. example.com/#div1 or example.com/#div2 else it will show blank page
I did this recently, don't think you can do with CSS only.
this will load correct div on page load, including when the user uses back in browser.
<script>
$(document).ready(function() {
if (window.location.hash) {
var hash = window.location.hash.substring(1);
changeTab(hash);
}
else {
changeTab('div1');
}
});
function changeTab(divNo) {
$('.divclass').hide();
$('#' + divNo).show();
window.location.hash = '#'+divNo;
}
</script>
if you use a button to change divs just use:
onclick="changeTab('div1');"
set your div's class attribute to a type like 'divclass'
How to target outer div based on url?
The CSS pseudo-class :target is perfectly suited to this:
div {
float:left;
width: 300px;
height: 150px;
}
#div1, #div2 {
display:none;
line-height: 150px;
color: rgb(255,255,255);
font-size: 72px;
text-align: center;
font-weight: bold;
}
#div1 {
background-color: rgb(255,0,0);
}
#div2 {
background-color: rgb(0,0,255);
}
#div1:target, #div2:target {
display:block;
}
<div>
<p>Display Div1 (but not Div 2)</p>
<p>Display Div2 (but not Div 1)</p>
</div>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
Basically I wanted the Sign in link to be on the right and my logo to be where it is. I'm still a newbie at CSS and I've tried all that I could think of in terms of the code. Here's the HTML:
<!--header-->
<div id="header">
IMG
Sign into CGC!
</div>
And here is the CSS:
#div header{
font-family; sans-serif;
}
#div a signIn{
float: right;
}
Any advice would be appreciated.
Your selectors are incorrect:
div#header{
font-family; sans-serif;
}
div#header a#signIn{
float: right;
}
Since you've assigned an ID you can just use:
#signIn{
float: right;
}
Your code specifies a 'signIn' element, that is a child of an anchor element, that is a child of an element with the ID 'div'. Hope that's clear.
Same goes for the header
#header{
font-family; sans-serif;
}
Use this code:
Fiddle:
CSS:
div#header{
font-family; sans-serif;
}
div a#signIn{
float: right;
}
Okay so this is a subscription box with fancybox that I'm making and everything is going well.
Just a little problem here.
the image that I'm using is stuck to the left and even margin property is of no use.
<style type="text/css">
body{
background-image:url(../../images/subscribe.png);
background-repeat:no-repeat;
background-position:left bottom;
margin-bottom:85px;
line-height:2px;
margin-left:10px;
margin-right:10px;
}
#h1_1 {
something;
}
#h1_2 {
something;
}
#h1_3 {
something;
}
/*
#img1_1 {
background-position:left bottom;
margin:0px;
background-repeat:no-repeat;
}
*/
</style>
</head>
<body>
<p id="h1_1">
<b>Subscribe Us</b>
<br>
<p id="h1_2"> Sometext</p><!-- end h1_2 -->
<p id="h1_3"> sometext</p><!-- end h1_3 -->
</p> <!-- end h1_1 -->
<!-- <img src="../../images/subscribe.png" id="img1_1"> -->
</body>
</html>
If the margin propety is applied the whole body gets shifted
and if i don't put the image in the background, creatig in the body, this way i can't write the exact text right besides the image.
I think this gets you in the right direction:
if you use the img tag then this should work
#img1_1 {
margin-left: 20px;
}
if you use the background-image you should use background position:
body {
background-position: 20px 20px;
}
No offence, but I recommend you further dive into CSS and HTML, because this is a pretty basic CSS question.
Here is my site: http://mytestsite.nfshost.com/.
If you make your browser window thinner, you'll notice that the content in the page's 'body' tag overtakes the 'footer' element. Instead, I'd like it to merely push the 'footer' content down without engulfing it.
How do I do that?
Below are the relevant sections from the HTML and CSS.
<html>
<head>
-- HEAD CONTENT HERE --
</head>
<body>
<h1>U.S. Neighborhood Income Map</h1>
<h2>See how rich or poor every part of every city in America is</h2>
<div id="address-form-container">
<span id="form-pretext"> Enter a city name or address and pick a state (Or just a pick a state from the dropdown).</span>
<br>
<input id="address" type="textbox">
,
<select id="state-select">
<input type="button" value="Search">
<br>
<span id="note">(NOTE: If loading takes a while, try zooming in or out.)</span>
</div>
<div id="map-canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
-- MAP HERE --
</div>
<div id="below-map">
<p id="source-note" class="italics">
</div>
</body>
<footer>
<p id="contact">Please send all questions, comments, complaints, and suggestions to [EMAIL ADDRESS]</p>
</footer>
</html>
Here's the relevant CSS
html {
float: right;
height: 100%;
text-align: center;
width: 100%;
}
body {
background:url(./images/bg.png);
height: 85%;
position: relative;
right: 8px;
width: 100%;
}
#map-canvas {
height: 75%;
margin-top: 5px;
width: 100%;
}
footer {
margin-top: 3em;
}
footer must be inside body tag.
use css padding
footer {
padding-top: 25px;
}
Create a division with class = "clear"
css
div.clear {
clear:both
}
Use this above any division that you want to push down as page content grows. Also footer must be in body tag as Alex stated.
What is the correct way to select a link of a certain class within a body of specific class. For example my body has the class "abc" and my link has the class "efg", what would my css code look like? (I'm trying to create active links for a Magento block)
body.body_class a.link_class
This question is a bit basic - you should try to learn this stuff a bit.
You have to do some research
body.abc a.efg {
rules
}
even w3c can help you with that
You should write something like this:
.abc .efg {
/*Your CSS Rules*/
}
SEE DEMO
Check this example
<html>
<head>
<style>
.outer
{
background-color: red;
height: 40px;
margin: 10px;
}
.inner
{
background-color: blue;
height: 20px;
margin: 5px;
}
.outer .inner
{
background-color: green;
}
</style>
</head>
<body onload="loadCars()">
Check div style.
<div id="mydiv" class="inner">
</div>
</div>
<div id="mydiv" class="outer">
<div id="mydiv" class="inner"></div>
</div>
</body>
</html>
Save the above code in an html file and open it.