I'm doing a menu for a restaurant that they dynamiclly add. it looks like this
Dish Name Price
Content in the dish,Content in the dish,Content in the dish,
Content in the dish,Content in the dish.
What i want to do is to get the blank space dotted, with . or dotted border.
But i cannot figure out how to get the css to autoadjust the width of the blank space div.
The dishnames could be longer then "dishname".
Any1 have a solution for this?
EDIT
The price and name is in 2 divs already with floats on them
.dishHead
{
font-family:Verdana;
font-size: 18px;
color:#262626;
float:left;
font-weight:200;
}
.dishPrice
{
font-family:Verdana;
font-size: 14px;
color:#262626;
float:right;
}
Edit2:
The whole thing is structured as below:
a div that floats right or left
the left floating head, the right floating price, and a description below.
I need a div between the head and price without affecting the whole div it lies in
I think I would do it with a background image on the whole of the "heading" part then use a background color on the name and price div to cover the image however that will only work if the background is a plain colour.
In answer to your question to get a third div to take up the remaining space between the left and right divs you would use overflow:hidden on it so an example using a dotted border might look like this:
Example Fiddle
CSS:
.dishHead {
font-family:Verdana;
font-size: 18px;
color:#262626;
float:left;
font-weight:200;
}
.dishPrice {
font-family:Verdana;
font-size: 14px;
color:#262626;
float:right;
}
.spacer {
overflow: hidden;
border-bottom: 3px dotted #000;
}
HTML:
<div class="dishHead">Dish Name</div>
<div class="dishPrice">Price</div>
<div class="spacer"> </div>
<div class="dishContent">
Content in the dish,Content in the dish, Content in the dish,
Content in the dish,Content in the dish.
</div>
You could place lots of dots in an element with dishname and use the fallowing css:
.dishname {
width:400px;
overflow:hidden;
white-space:nowrap;
}
Related
I don't know if this is possible easily, but is there a CSS style to align the top of the tallest character with the border of its container?
HTML
<div><h1>The "T" of this h1 needs to align top (touch the border)</h1></div>
CSS
div {
background:orange;
}
h1 {
vertical-align:top; //does not seem to work?
}
JS-Fiddle
Currently, it looks like this
But it should look like this
Or like this (line-height = minimum?)
How can I achieve this?
This is kind of random, because it depends on the proportions of your font, but you can try something like this:
h1 {line-height: .9;}
Adjust the line-height value to suit the font. E.g. line-height: 32px; font-size: 38px;, or line-height: 0.9em; font-size: 2em; etc.
If there isn't enough orange at the bottom, you could always add some bottom border:
border-bottom: 20px solid orange;
Try below dear
div {
background:orange;
}
h1 {
position:relative;
top:-8px;
}
I have a page where I am displaying subheadings styles like this:
This looks fine until the text to be displayed exceeds a single line, when it looks like this:
What I would like to get is this:
i.e. the height of the decorative orange rectangle at the left should vary according to the height of the text.
Because we have a requirement that the decorative rectangle can be any colour, it is not done using an image. This is what we currently render:
<div class="header">
<div class="decor"> </div>
<h3>Text goes here</h3>
</div>
Is there a way I can style this using CSS to get the desired look? I'm happy to change the HTML used too. My restrictions are:
It must be possible for us to set the rectangle to any colour via CSS.
The heading text can vary, so we cannot apply specific hard-coded heights to specific headings via their IDs, it needs to work automatically.
DEMO
CSS
h3{
border-left:5px solid #F1592A;
background-color:#EEEEEE;
padding:2px;
}
I don't recommend using for styling (and keeping space is styling).
Padding is used to create inner element-spacing. And that's what you need.
Try adding the following CSS styling:
h3 {
padding-left: 10px; /* You can change this number */
}
You can create the left "decoration" by adding a border:
h3 {
padding-left: 10px; /* You can change this number */
border-left: 3px solid orange; /* You can change the color and width */
}
You can do something like this, http://jsfiddle.net/5SaCt/ . Set the left border to any color you want.
HTML
<div id="content">
1,2,3,4 <br/>
5,6,7,8
</div>
CSS
#content {
border-left:5px solid orange;
padding:5px;
width:500px;
height:auto;
}
OUTPUT:
Sure this is a simple solution to this, but I am scratching my head trying to solve it. I have a tabbed container with about 3 list items, each of which have hyperlinks in them. When I reduce the size of my browser window [let's say from the right] it does not hide the element to the extreme right, instead the size of the list item reduces and then adjusts itself right below the width of the other two list items.
I have the min width set to the same as that of the width of the element.
Where do I need to tweak ?
Here is the semantic structure
<div id = "tabbed">
<ul>
<li>Tab 1</li> <!-- 3 list items -->
</ul>
<div class = "tabs" id = "tab_1"> <!--3 tabs, each tab corresponds to the link in the list item -->
</div>
</div>
Here is the CSS:
#tabbed
{
width :80%;
margin:auto;
margin-top:20px;
}
#tabbed ul{
margin:0px;
margin-top:15px;
}
#tabbed li
{
display: inline-block;
list-style-type:none;
border:1px solid #ccc;
border-bottom: 0px;
border-top-left-radius:4px;
border-top-right-radius:4px;
margin-right:5px;
margin-top:5px;
padding:4px 4px 10px 4px;
width: 30%;
background:#87CEEB;
}
#tabbed a{
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #7F818B;
display:block;
text-align:center;
text-decoration:none;
margin-top:5px;
margin-bottom:5px;
}
Yes, please give us some example html and CSS/styles for what you are doing. The way a browser will wrap content depends very much on the implementation. I assume you are using the CSS display: inline to make the list horizontal?
Without any code to look at, I can suggest the following:
try
your_div {overflow:hidden;}
For starters,
Secondly, min-width is only observed by only half the browsers out there. I would suggest trying a different approach for setting minimum width, as well as a code example for best results:)
What is the best way to combine a border with some text like so:
----------- sometext ------------
| |
| form |
| |
---------------------------------
As it's for a form, you should use a fieldset element.
See: http://jsfiddle.net/thirtydot/AVGsr/
METHOD:
For use with anything even when not using the forms fieldset, you can use my method in this JSFiddle (It does NOT use Javascript, JSFiddle can be used for pure HTML & CSS), I will explain what it does in here:
What the fiddle demonstrates is having 3 divs as the top single border area, made up of 2 divs either side with a 1px border in the middle, and one on each side, and the middle div having text only, aligned to the center and padded as needed.
There is then a div placed underneath that which is the main content, but it only has 3 borders (left, right and bottom. The top has been made by the side div's).
The CSS and HTML is here, and JSFiddle link underneath.
FEATURES:
This method should fit all your criteria
Border text is in the place of part of the top border
Border text is central, can be placed anywhere along by modifying the CSS
Easy to change dimensions of the bordered area
CSS:
.wrapper-box { float:left; width:500px; height:150px; }
.side-border { float:left; height:24px; width:199px; border-top: solid black 1px; margin-top:25px; }
.side-border.l { float:left; border-left: solid black 1px; }
.side-border.r { float:left; border-right: solid black 1px; }
.border-text { float:left; height:35px; margin-top:15px; width:100px; text-align:center; }
.box-content { float:left; width:498px; height: 100px; border-left: solid black 1px; border-right: solid black 1px; border-bottom: solid black 1px; }
HTML:
<div class="wrapper-box">
<div class="side-border l"></div>
<div class="border-text">Border Text</div>
<div class="side-border r"></div>
<div class="box-content"></div>
</div>
EXTRA INFO:
To modify the CSS for longer text, just reduce the width of the border-text, and increase the width of the side-border.
JSFiddle Example Here
Hope this helps you out, I'll be keeping this for future reference myself :).
Define a division with border and put a heading in that division.
To make the heading overlap the top border, define a negative top-margin appropriately.
To make the line around the heading disappear define the background color of the heading same as the original background.
Here goes the code:
<div class="container" style="border: 1px solid black;">
<h4 style="margin-top:-1%; background: white;">Heading</h4>
</div>
Very similar to this discussion: How to center the <legend> element - what to use instead of align:center attribute?
As was said there, using the tag is a pain if you want consistent results across browsers. To achieve this effect, I'd use a <h> tag or <div> instead for the legend.
Here's a example: http://jsfiddle.net/CddE7/
Tested in Firefox, Chrome and IE 7,8,9 for PC. The vertical placement of the <h3> varies slightly by IE version but only by a little (and probably could be refined for more uniformity).
Since I assume people will complain about using an <h3> instead of a <legend>, yes, it's not as semantically correct. But it works.
Supporting the previous answer, the fieldset element came in html 4 and it helps to group like items within a form and creates a set or a field of like items or you can wrap all the items contained in your form..
e.g.
<form><fieldset><legend>Name of your field/Some Text(your case)</legend>
Then you can add your labels and inputs in p tags or table, but the p tag is more preferable. At the end close your fieldset and form tags.. and add this type of code to your css
fieldset{
border: thin dashed #000;
}
You can add border to your form elements in this way..
I have been using the examples here to setup a webpage that has columns with equal heights (using only HTML and CSS), and it is working relatively well. Here is the complete HTML and CSS code that I am using.
Newbie questions:
(1) As you can see, I tried to make the left column (id="column_bottom") have a white (#f5f5f5) background with black text, and the right column (id="content_bottom") with black background with white (#f5f5f5) text, but one side is always overriding the other. What can I do to make it what I want?
(2) Also, you can see in the CSS that I have defined fonts and background colors for body, but somehow that is not carrying through, what should I do?
Thanks!
P.S. I am looking for a pure HTML/CSS solution, and prefer not to use javascript.
You're close. In your code, just change your styling to the columns themselves, like so:
#content_bottom {
color: #f5f5f5;
background:#000000; /* right column background colour */
}
#column_bottom {
color: #000000;
background:#f5f5f5; /* left column background colour */
}
the code below will create two boxes side-by-side and the container will always wrap those boxes, no matter how tall they are. this should solve your issue of having columns of the same height.
html:
<div class="container">
<div class="box">blah</div>
<div class="box">blah<br/><br/>blah</div>
<div class="clear"></div>
</div>
css:
.container { position:relative; width:100px; border:1px solid red; }
.box { position:relative; float:left; width:40px; border:1px solid blue; }
.clear { clear:both }