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>
Related
I haven't done HTML and CSS for a while so I may be forgetting something, but for some reason a "style" tag with the "text-align" property set isn't working even in the simplest context. I'm about to show you the whole, entire file that I have but my problem is only in the two comments I have. Don't worry about the other stuff; it's for a little passion project I'm working on.
So here is the whole file. I have a lot of stuff in it that isn't relevant nor important; just focus on the code in the two comments.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>JSON Generator</title>
<link rel="stylesheet" href="web_mod.css"></link>
</head>
<body bgColor="#E3E3E3">
<!--Start here-->
<span style="text-align: center">Coded by AnnualMelons</span><br>
<!--Finish here-->
<span style="color: red; background-color: #2CE65A">Use this generator to generate the code required to create a JSON message.<br>
Fill in the blanks to generate the code. The generator will guide you through it as you go along. Have fun!</span>
<script>
</script>
</body>
</html>
The "Coded by AnnualMelons" part is supposed to be in the center but it's not. At least for me it's not.
I know that the other part of the file isn't relevant but I figured I might as well show you as it may be an external problem.
I'm sure I'm just making a silly mistake because I haven't done this for a while, but it's not working... so yeah. I'm using Firefox as my web browser in case that helps.
Thanks!
The <span> Element is, by default, an "inline" element. Meaning unlike block level elements (<div> <h1> <p> etc.) the span only takes up as much horizontal space as its content.
text-align: center IS working, but you're applying it to an element that doesn't have a width greater than its content (as all block elements do).
I recommend either changing the span to a <p> element, or specifying the display: block property on your span.
Here's a JSfiddle to demonstrate that both a <span> with display: block; text-align: center and a <p> with text-align: center; achieve the same effect.
Hope that helps!
Use a p or div rather than a span. Text is an inline element and so is a span. For text-align to work, it must be used on a block level element (p, div, etc.) to center the inline content.
example:
<div style="text-align: center">Coded by AnnualMelons</div><br>
Use this in style
margin-left: 50%;
example-
<span style="margin-left: 45%;">Centered Text</span>
.span {
text-align: center;
width: -webkit-fill-available;
}
This Worked for me and the text inside my span tag is now aligned to the center.
I'm using the following code in body section.
<center>Get Started</center>
Is there any alternative for <center> tag?
How can I make it center without using <center> tag?
Add text-align:center;display:block; to the css class. Better than setting a style on the controls themselves. If you want to change it you do so in one place.
You can do this:
<div style="text-align: center">
Get Started
</div>
You can use css like below;
Get Started
You can put in in a paragraph
<p style="text-align:center;">Get Started</p>
To align a div in the center, you have to do 2 things:
- Make the div a fixed width
- Set the left and right margin properties variable
<div class="container">
<div style="width:100px; margin:0 auto;">
<span>a centered div</span>
</div>
</div>
I don't know why but for me text-align:center; only works with:
text-align: grid;
OR
display: inline-grid;
I checked and no one style is overriding.
My structure:
<ul>
<li>
<a>ElementToCenter</a>
</li>
</ul>
You can use the code below:
a {
display: block;
width: 113px;
margin: auto;
}
By setting, in my case, the link to display:block, it is easier
to position the link.
This works the same when you use a <div> tag/class.
You can pick any width you want.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
</head>
<body>
<h4 align="center">
Center
</h4>
</body>
</html>
There's also a handy tag... whatever you put in between, gets centered.
Like so:
<center>
<a href..... whatever>
</center>
you can try this
display inline-block to make it fit width,
margin-left to make it move 50% away from left,
and transform translateX to make it center his position
display: inline-block;
margin-left: 50%;
transform: translateX(-50%);
In your html file:
Get Started
In your css file:
.hpbottom{
text-align: center;
}
I am new to web-designing styles and css. I read that usage of tables for layout is a bad practice. Hence I tried to create this layout using <br\> , div and float.
Problem :
Once, <br\> is applied, I can't render the upper part, (similar to once \n is printed in console, we cant go to the upper line).
So, could any one provide an alternative way of designing the page, without using <table> and <br> tags.
Looks like a perfect example usage of a grid system.
Without using a grid system, you can just use float: left for each of the div and it should be OK.
Here is simple example for doing so,
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>StackOverFlow</title>
<style type="text/css">
.content{
width:150px;
height:100px;
border:1px solid blue;
}
.content .text{
display:block;
border:1px solid red;
}
</style>
</head>
<body>
<div class="content">
<div class="text">
text here
</div>
<div class="text">
another text here
</div>
<div class="text">
yet another text here
</div>
</div>
</body>
</html>
Code Explanation
What i did is wrap text div inside content parent div and assign fixed width and height to parent div.
Now for child div i just used display:block and see the result. You do not need to use <br/> display:block; will do it for you.
Now what is the meaning of display:block; so it just tell browser to allow that particular DOM to take whole width of the parent div.
By adding css to DIV's you can get some great layouts (i.e the three column style you're looking for here) , try this aticle to get you started:
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm
I want to put a textarea on my webpage, but it has to be inside a div tag in order to keep my layout. I don't want the users to be able to re-size the textarea until it's out of the div tag I put it in, it messes up the hole layout. Is there a way to set the max size on the textarea?
Thanks for help!
CSS:
textarea {
width:400px;
height:200px;
resize:none; /* disable resize functionality */
}
The easiest way (although it is a little sloppy) is to style the textarea in-line. If you define a width and resize:none, your users will not be able to resize the textarea and ruin your design.
<div>
<textarea name="yourtextarea" style="width:300px;height:200px;resize:none;" /></textarea>
</div>
I would however recommend that you style your textarea similarly to how Xander has answered as it is much cleaner. I would change one thing though, and that is to add a less generic selector.
<head> // place in your header
<style type="text/css">
#textAreaId {
width:300px;
height:200px;
resize:none;
}
</style>
</head>
<body> // place inside of your div, within the body tag
<div>
<textarea id="textAreaId" name="yourtextarea" /></textarea>
</div>
<body>
I have a question about a problem, of which I originally thought, that it would be fairly simple to solve. But apparently it is not - at least not with only CSS.
This is the basic situation:
<div id="wrapper" style="height:90%;width:410px;background:#aaaaaa;">
<div id="top" style="margin:5px;width:400px;background:#ffffff;">
</div>
<div id="content" style="margin:5px;width:400px;background:#ffffff;">
</div>
</div>
I have a wrapper div that fills up 90% of the screen height and two inner divs. The first div "top" contains some varying elements. The second div "content" should fill out the remaining space of the wrapper div.
So far, I haven't found a way to set the div "content" to fill up the remaining space - even if I would know the exact height of the div "top" as I only know the relative height of the wrapper div.
Thus, I would be happy to learn of a method to either the div "content" to fill up the remaining space or how to mix relative and absolute sizes (i.e. height:100%-100px).
There is currently no cross-browser solution to achieve what you're trying with div elements and CSS. You can however get the behavior you want with the tried and true method of using a table instead.
<html>
<head>
<style type="text/css">
#wrapper {
height:90%;width:410px;background:#aaaaaa;border-spacing:5px;
}
#wrapper td {
padding:0;vertical-align:top;
}
#top {
background:#ffffff;
}
#content {
height:100%;background:#ffffff;
}
</style>
</head>
<body>
<table id="wrapper" role="presentation">
<tr>
<td id="top">Top</td>
</tr>
<tr>
<td id="content">Content</td>
</tr>
</table>
</body>
</html>
EDIT:
It appears I stirred a nest of hornets with my answer. There seems to be a near-religious following of people who say using tables for layout is bad. In many cases that is absolutely true, however there are situations where a table will do what CSS cannot. This is one of those situations, where a CSS alternative is on the horizon, but most browsers do not support it yet. It is up to the site designer to decide whether he wants to have a layout with cross-browser functionality now, or use a pure CSS layout with its limitations that may become easier to maintain in the future.
Your HTML code is really wrong:
don't use comma's after attributes
don't use inline CSS, put all CSS in a stylesheet and load the stylesheet in your HTML page
CSS syntax is: propertie: value; example: width: 10px; not: width=10px
To use 100% - 100px you can use CSS3 calc, but this feature has less browser support. You can use JS to make a sort of calc function.
There is no cross-browser way to get the content div to fill all available space with CSS, but it is fairly easy to make things look as if it did:
<html>
<head>
<style type="text/css">
#wrapper {
width:400px;height:90%;border-style:none solid;border-color:#aaaaaa;border-width:5px;background:#ffffff;
}
#top {
border-bottom: 5px solid #aaaaaa;
}
#content {
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
Top
</div>
<div id="content">
Content
</div>
</div>
</body>
</html>
This should be sufficient for most situations, unless you want to use something like an onmouseover handler on the content.