relocating divs of an Html page using css - html

I have HTML structure as shown below. I want to relocate the position of divs such that 'calc' div should move to 'region-content' div and should appear on the right end. Is it possible to achieve this using css? Can any one provide me some references to work on this using css, etc.
<div class='region-content'>
<form id='responseform'>
<div class='content '>
<div class ='formulation '>
<div class='qtext '>
<div class='calc '></div>
</div>
</div>
</div>
</form>
</div>

You cannot achieve the change in DOM structure with CSS. So, calc div can't be moved to region-content div. You need to do some javascript work for that.
However, styling it to appear where you want should be possible. Please provide your css code, if possible a jsfiddle, if this part is still troubling you.

You may try this.
.region-content { position: relative; }
.calc { position: absolute; top: 0; right: 0; }
Other then this you will also need to change parameter for width to make this possible. Since you just posted html structure and not content within it including respective css, this is how I can guess the solution for you.

Related

How to remove a text node that's before a div?

I have the following HTML structure:
<div id="wrapper">
<div id="some-id"></div>
"this is some texxt"
<div id="some-id-2"></div>
</div>
How can I remove the text with CSS?
Can't think of a very good way to do so, but
#wrapper {
font-size:0;
}
Would work.
Notice, that if the other two divs have text anywhere inside them, you will need to redefine new font-size for them, since it will be overwritten.
Not sure if this will work on every browser, but you should give it a shot.
#wrapper {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
It is accessible, and has much better performance than changing the font size.
More here - Replacing the -9999 font
Its not sexy - but it works - and I am assuming that you want the two divs, but not the text in the middle. If you can only affect the content with CSS (and not javascript / jquery) - then you could try the following. Force the background of the second div to be white and move it up by 1em using position relative / top -1em. That way it will cover over the offending text.
As I said - not sexy and I do NOT recommend using this - far better to find a way of actually modifying the content of the #wrapper div.
#some-id-2{
background:white;
display:block;
position:relative;
top:-1em}
<div id="wrapper">
<div id="some-id">text content 1</div>
"this is some texxt"
<div id="some-id-2">text content 2</div>
</div>
I recommended you to use jQuery code to remove the text definitely from the client side, because may be you will have some issues with some browsers.
If you decide to use jQuery you can place the following code in your page:
$(document).ready(function(){
var divContent = $("#wrapper").find("div");
$("#wrapper").html(divContent);
});
if the wrapper div can contain more HTML tags for example:
<div id="wrapper">
<div id="some-id">aaaa</div>
"this is some texxt"
<div id="some-id-2">bbbb</div>
<p>Hello world</p>
</div>
You can combine HTML tags in the find jQuery function by separate them by comma:
$(document).ready(function(){
var divContent = $("#wrapper").find("div,p");
$("#wrapper").html(divContent);
});
This is more save and clean

Use CSS to access style custom attribute

I don't know if this is possible or not, but any help would be very appreciated.
I have this code in my HTML:
<img src="mountains.jpeg" class="green inline-image" data-caption="A picture of mountains!">
where data-caption is a custom attribute.
I want to do something like this.
As you can see, the data-caption has to be in a small box right under the image, with the exact width as the image. I don't know if this is possible or not, so can you recommend an alternative way if not?
I tried doing something like this:
<img src="mountains.jpeg" class="green inline-image">
<div class="photo-caption">
A picture of mountains!
</div>
CSS:
.inline-image {
width:30%;
}
.photo-caption {
width:30%;
background-color:blue;
}
This works, but I'd prefer to not have to make a new <div> for every caption. I'd rather have it in the <img> tag.
Thank you very much!
Yeah it's possible using css content but problem in your case is you are using it on an img element which won't work on some browsers.
A different approach I would suggest is to insert your img element inside a div and have that custom attribute in there.
html:
<div class="img-block" data-caption="A picture of mountains!">
<img src="mountains.jpeg" class="green inline-image" >
</div>
css
.img-block:after {
content: attr(data-caption);
}
Reference

Remove styling on a center tag

I am working with a system that outputs the following syntax (which I can't change)
<body>
<div class="page">
<center>
[The page contents]
</center>
</div>
</body>
I would like to nullify the formatting on the <center> element as it is messing with my responsive layout. Any ideas how to nullify the style on this element?
What about using jQuery to rewrite the content of the after-the-fact? Something like:
$(".page").replaceWith($(".page center").contents());
See it in action: http://jsfiddle.net/5fuBm/1/
It depends on exactly what you need to do, but you can use css on the center element like so:
center {
text-align: left;
}
or maybe:
center {
float: left;
}
Try out some different things and see what works best.

How to make a whole 'div' clickable in html and css without JavaScript? [duplicate]

This question already has answers here:
Make a div into a link
(30 answers)
Closed 9 years ago.
I want to make it so that a whole div is clickable and links to another page when clicked without JavaScript and with valid code/markup.
If I have this which is what I want the result to do -
<a href="#">
<div>This is a link</div>
</a>
The W3C validator says that block elements shouldn't be placed inside an inline element. Is there a better way to do this?
It is possible to make a link fill the entire div which gives the appearance of making the div clickable.
CSS:
#my-div {
background-color: #f00;
width: 200px;
height: 200px;
}
a.fill-div {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
HTML:
<div id="my-div">
</div>
<div onclick="location.href='#';" style="cursor: pointer;">
</div>
a whole div links to another page when clicked without javascript and
with valid code, is this possible?
Pedantic answer: No.
As you've already put on another comment, it's invalid to nest a div inside an a tag.
However, there's nothing preventing you from making your a tag behave very similarly to a div, with the exception that you cannot nest other block tags inside it. If it suits your markup, set display:block on your a tag and size / float it however you like.
If you renege on your question's premise that you need to avoid javascript, as others have pointed our you can use the onClick event handler. jQuery is a popular choice for making this easy and maintainable.
Update:
In HTML5, placing a <div> inside an <a> is valid.
See http://dev.w3.org/html5/markup/a.html#a-changes (thanks Damien)
Without JS, I am doing it like this:
My HTML:
<div class="container">
<div class="sometext">Some text here</div>
<div class="someothertext">Some other text here</div>
text of my link
</div>
My CSS:
.container{
position: relative;
}
.container.a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent: -9999px; //these two lines are to hide my actual link text.
overflow: hidden; //these two lines are to hide my actual link text.
}
My solution without JavaScript/images. Only CSS and HTML. It works in all browsers.
HTML:
<a class="add_to_cart" href="https://www.example.com" title="Add to Cart!">
buy now<br />free shipping<br />no further costs
</a>
CSS:
.add_to_cart:hover {
background-color:#FF9933;
text-decoration:none;
color:#FFFFFF;
}
.add_to_cart {
cursor:pointer;
background-color:#EC5500;
display:block;
text-align:center;
margin-top:8px;
width:90px;
height:31px;
border-radius:5px;
border-width:1px;
border-style:solid;
border-color:#E70000;
}
Nesting block level elements in anchors is not invalid anymore in HTML5. See http://html5doctor.com/block-level-links-in-html-5/ and http://www.w3.org/TR/html5/the-a-element.html.
I'm not saying you should use it, but in HTML5 it's fine to use <div></div>.
The accepted answer is otherwise the best one. Using JavaScript like others suggested is also bad because it would make the "link" inaccessible (to users without JavaScript, which includes search engines and others).
jQuery would allow you to do that.
Look up the click() function:
http://api.jquery.com/click/
Example:
$('#yourDIV').click(function() {
alert('You clicked the DIV.');
});
Well you could either add <a></a> tags and place the div inside it, adding an href if you want the div to act as a link. Or else just use Javascript and define an 'OnClick' function. But from the limited information provided, it's a bit hard to determine what the context of your problem is.
.clickable {
cursor:pointer;
}
Something like this?
<div onclick="alert('test');">
</div>
AFAIK you will need at least a little bit of JavaScript...
I would suggest to use jQuery.
You can include this library in one line. And then you can access your div with
$('div').click(function(){
// do stuff here
});
and respond to the click event.
we are using like this
<label for="1">
<div class="options">
<input type="radio" name="mem" id="1" value="1" checked="checked"/>option one
</div>
</label>
<label for="2">
<div class="options">
<input type="radio" name="mem" id="2" value="1" checked="checked"/>option two
</div></label>
using
<label for="1">
tag and catching is with
id=1
hope this helps.

HTML div with a background

I'm making a website (Although I know nothing about HTML & Photoshop).
Its quite a challenge for me and I'm pretty happy with what I got so far.
Now I want to make boxes / floating squares on the site.
So I wanted to do this by using a the div but I have no clue how :#
<div id="div1" style="background-image: url(../bg_content_middle.png);height: 129px">
HELLO IS THIS A BOX?
</div>
I have this in my style.css:
#div1 {Background: url("bg_content_middle.png");}
bg_content_middle.png is a 1 pixel high "bar" which I want between top and bottom.
And thats not even working :(
Please help me.
You're mixing in-line CSS with external CSS rules. The inline style with ../bg_content_middle.png is overriding the other background image url of bg_content_middle.png. You only need to define it once.
In this case you could go for a pure CSS solution:
<div id="div1">HELLO I AM A BOX ^_^</div>
#div1 {
background-color: #900;
border: #f33 1px solid;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
Please don't number your divs though, call them something relevant like <div id="content">.
Hope that helps
1) Make the B in background lower-case
2) Is the image in the same directory as style.css? If not, you'll have to link to the correct directory.
well, if all you want your div to have a backround, you can have something as simple as this example from this tutorial:
<body>
<div style="background: green">
<h5 >SEARCH LINKS</h5>
<a target="_blank" href="http://www.google.com">Google</a>
</div>
</body>
First of all, you only need to define this particular style once, but inline styles (styles within the tag's <style> attribute.) take precedence. You should remove the inline style in this case, since it's redundant and double check your image paths just in case. Remember that css paths can be document relative, in which case they refer to the location of the css file, and are not relative to the HTML page.
If it's one pixel high you might want to set the repeat property as well. put this in the element's CSS:
background-repeat: repeat-y;
And set a width equivalent to the image width.
You need to set the position : absolute in your css. From there you can use top, left and height to position and size your tags