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.
Related
I am validating my html and I'm trying to fix:
Error: The align attribute on the div element is obsolete
And have tried using
<div style="text-align:center;">
But When removing the previous <div align="center"> and adding this new code, everything floats to the left of the viewport.
The use of this div is to center all content inside it, which contains nav bars, images, text etc.
What else can I try adding to align all this content and remove the mark-up error?
Thanks for reading!
Hope, this helps!
div{
text-align: center;
margin: auto;
}
Try aligning it in CSS
For example:
HTML
<div id="myDiv">My contents</div>
CSS:
#myDiv {text-align:center}
The attribute "align" that you were using is no longer present in HTML5. Use CSS instead: style="text-align:center;" for an inline CSS.
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.
I'm trying to fix a table and make it look better (I describe the issue better in the screen shot below).
this is a screen shot of what's going on and what I would like to happen:
What do I change in my style sheet?
the css file is located at rankingclimber.com/css/style.css (the footer part is clearly marked) and the signup part is clearly marked
The sign up page is located at www.rankingclimber.com/signup.php
here's the code for the footer file: rankingclimber.com/footer.php and the footer is called on the main page: rankingclimber.com/signup.php
To fix the placement of the line, move <div class="form_bt"></div> to just after the closing tag of <div class="form_tp">.
To fix the "Create Account" button not being inside the form, from <div class="chkp3">, remove float: left and margin-bottom: 20px. Then, to <a class="btn1">, add margin-top: 20px.
To fix the footer, move <div id="footer"> to just after the closing tag for <div id="wrapper">.
Tested in Firefox only, with Firebug.
Another answer pointed out you have missing close tags. In that case, my answer might not be very useful as the problems could have been caused purely by those missing tags.
Fix the missing close tags, and then see what your page is like before following any of the steps I posted.
I think, add margin:0; !important to the .form_bt style. Safari Web Inspector shows it currently has a margin-right of -60px. And in your HTML, put the div.form_bt outside of the <form> element, it's currently inside it.
try these fixes, I can't validate since I don't have all of your files, but you are missing closing tags for:
Missing </li> after the code: <li>What is Ranking Climber?
Missing </div> before the code: </form>
use this css
clear: both;
<div id="container">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
CSS for these DIV's
#container{
width:950px;
min-height:500px; // This will helps you to stick to footer to bottom about 500px below
}
.left{ width: 50%;}
.right { width:50%;}
.footer{
widht: 950px;
clear: both; // This will helps you to avoid footer to overlap. Use this when Some elements is overlapping
}
I want to end up with:
Hello there!
<image>
This is an image
Hi!
Where the image and the text This is an image are centered on the page. How do I accomplish this with Markdown?
Edit: Note that I'm looking to horizontally center the image and text on the page.
I figured that I'd just have to use HTML where I want to horizontally align anything.
So my code would look like this:
Hello there!
<center><img src="" ...></center>
<center>This is an image</center>
Hi!
I think I have a simple solution that will work given that you can define CSS. It also does not require any extensions or HTML! First your markdown image code:
Note the added url hash #center.
Now add this rule in CSS:
img[src*='#center'] {
display: block;
margin: auto;
}
You should be able to use a url hash like this, almost like defining a class name.
To see this in action, check out my JSFiddle using SnarkDown to parse MarkDown in a textarea - https://jsfiddle.net/tremor/6s30e8vr/
If you are using kramdown, you can do this
Hello there!
{:.center}
This is an image
Hi!
.center {
text-align: center;
}
In Mou (and perhaps Jekyll) this is quite simple.
-> This is centered Text <-
So taking that in mind you can apply this to the img syntax.
-><-
This syntax doesn't work for Markdown implementations that implement only what is documented on Daring Fireball.
You need a block container with a defined height, same value for line-height and image with vertical-align:middle;
It should work.
Hello there !
<div id="container">
<img />
This is an image
</div>
Hi !
#container {
height:100px;
line-height:100px;
}
#container img {
vertical-align:middle;
max-height:100%;
}
I'm surprised no one mentioned this way:
Hello there!
<p align="center">
<img src="">
This is an image
</p>
Hi!
With kramdown (used by githubpages)
{: style="text-align:center"}
That is, while there is value in the items on
the right, we value the items on the left more.
Or using the response from #(Steven Penny)
{:.mycenter}
That is, while there is value in the items on
the right, we value the items on the left more.
<style>
.mycenter {
text-align:center;
}
</style>
Here is a simple solution that does not use any deprecated tags or attributes:
Hello there!
<img style="display: block; margin: auto;"
src="https://stackoverflow.design/assets/img/logos/so/logo-print.svg">
<p style="text-align: center;">
This is an image
</p>
Hi!
Unfortunaly this site we're developing has to be IE6 compatible. It contains a horizontal block style menu, but there's still one more problem with IE6.
I have the following code:
<html>
<head>
<style type="text/css">
a {
display: block;
width: 0px;
background-color: red;
}
</style>
</head>
<body>
This is a anchor tag
</body>
</html>
Because of the spaces, it wraps every word on a new line. What do I need to do if I want it on a single line only?
Thanks!
Add this css on the a element:
white-space: nowrap
Have you tried popping your anchor into a span or div?
Well, don't set its width to 0 would be the cross-browser proper approach.
Use float: left instead, if you want the anchor to be displayed in block mode but not allocate 100% width.
When you use floats like that, you also need to make sure you clear them, to make them occupy space in their container:
<div>
<a ... />
<a ... />
<div style="clear: both;"></div>
</div>