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:
Related
body {
background-color: white;
color: #000000;
font-family:"arial",arial;
margin:auto;
}
(header logo EWITA) #header {
position:relative;
left:-150px;
background-color:transparent;
text-align:center;
margin-top:50px;
padding:0;}
(HR LINE) hr.main {
position:relative;
top:-5px;
background-color:#353535;
height:10px;
width:100%;
margin:0;
padding:0;
z-index: -1;
}
#menubar {
position:relative;
background-image: URL('./pictures/menu.png');
background-repeat:no-repeat;
left:730px;
top:-40px;
height:25px;
width:300px;
background-color:transparent;
color:#ffffff;
padding:5 0 0 20;
}
(menu bar) table,tr,td {
border-spacing:0;
border-collapse:collapse;
padding:0 10 0 10;
}
(page after head) #wrapper {
margin:auto;
min-height:500px;
background-image: URL('./pictures/background.png');
background-repeat: repeat-xy;
z-index:-2;
}
#content {
margin:auto;
width:700px;
background-color:#ffffff;
margin-top: 40px;
border:1px solid;
padding: 50 30 50 30;
this is my css i am writing a page for a client and due to some relative positioning it makes me a problem with a background as u see here the white line after the HR line.
Thanks everyone who responds.
Edit:
Wondered how to update this answer, as there is a lot to talk about found it best to take it from bottom up. This will bring you to a layout like this:
Stage one demo.
The menu and logo should stay in place when you re-size the window etc.
Had a look at your code now. It is better, but you still have some trouble:
border is still set on image. Invalid markup.
repeat-xy is still used on background. Invalid property value.
#content still has padding without units. Invalid property value.
<br> tags are still used to make paragraphs in text.
There is an extra } after #content. Invalidates CSS file.
Number 4. should be fixed, but not that important right now.
As we already have discussed 1-3 it is hard to understand why you keep them. Invalid markup and styling makes for unreliable result.
It can look OK in one browser, in one version of one browser, look whack in another, and totally break in a third. You get misinformation between code and result. When or if you fix it to be valid other unexpected things may change and you have to do a lot more work to clean it up. As a whole and rule number one. No matter how wrong markup and styling might be seen from a how to do it perspective one have to keep invalid markup and style out of it.
To validate your work, and as you are where you are in regards to experience, do it all the time. Do small changes: validate. Do small changes: validate. And so on. Use:
For HTML
For CSS
Markup
The markup as it is now is not the easiest to style or get to behave good in a dynamic way. hr's is not the easiest to work with and vary between browsers. Do not use tables for menu's or styling. They are best left for what they are intended to: show tabular data. For your menu you can ask yourself: what is the menu; well, it is a list. A list of options for end-user to navigate trough the site. There is a lot of examples on the web using lists as menus. Search the web for CSS list menu etc. You can create nice looking, cross-browser reliable CSS only, (no JavaScript dependency), menus.
But let us start with the basic markup: You will usually find it good to wrap the whole page inside a wrapper. Then add sub-items into that. To position elements like your main menu, logo etc. it could be good to use a wrapper for each and position them by float, margins etc.
In general use margins and padding.
Page layout
Head Div
Divider Div
Content Div
Footer Div
Head
Div float left Div float left
LOGOmenu
Styling + markup
To make it easy for yourself use temporary borders and background colors to view how the various elements float around. Also use the browsers built-in tools to show various things like margins etc. This is invaluable.
Only remember that if you use borders, and you intend to remove them on finished product, they can take up space.
As an example you could have something like this:
Strong colored first attempt.
HTML:
<div id="wrap">
<div id="head">
<div id="logo">
<a href="index.php">
<img id="logo_img" src="http://cupido.g6.cz/pictures/header.png" alt="EWITA" />
</a>
</div>
<div id="menubar">MENU</div>
</div>
</div>
CSS:
* {
margin : 0;
padding : 0;
}
body {
font-family: Arial;
height : 100%;
background : orange;
}
#wrap {
position : relative;
background : pink;
width : 100%;
height : 100%;
}
#head {
position : relative;
width : 800px;
height : 131px;
margin : 100px auto 0 auto;
background : blue;
}
#logo {
position : relative;
width : 431px;
float : left;
background : red ;
}
#logo_img {
width : 439px;
height : 131px;
float : left;
}
#menubar {
position : relative;
background : #fff;
width : 300px;
float : left;
margin-top : 107px;
padding : 3px 0 3px 10px;
}
Note: I use a hard reset of margin and padding on all elements by:
* {
margin : 0;
padding; 0;
}
And then set margins and padding on tags and elements as I use them. Often find this to be a much easier way then the other way around. Remember that things like body also has padding etc. and often can result in undesired spacing.
This way you also get rid of the horizontal scroll-bar at bottom.
By using float on thing like logo and menubar the elements align nicely.
Next we can add the divider. Here we could use a div and set border for top and bottom. On content we use padding to make space between header, text and footer. We also add white border to top of content that aligns nicely with the divider.
Added divider, content and footer.
HTML:
<div id="divider"></div>
<div id="main_content">
MAIN CONTENT
</div>
<div id="footer">
FOOTER
</div>
CSS:
#divider {
border-top : 5px solid #353535;
border-bottom: 3px solid #888;
}
#main_content {
position : relative;
background : url('http://cupido.g6.cz/pictures/background.png');
border-top : 2px solid #fff;
padding : 120px 0 130px 0;
}
Next we can add the content text and style it. Also added style to footer.
With content and styled footer.
HTML
<div class="content_text">
<p>
text text text ...
</p>
</div>
CSS:
.content_text {
margin : 0 auto;
width : 700px;
background : #fff;
border : 1px solid;
padding : 50px 30px;
}
.content_text p {
font-size : 16px;
}
Resize window etc. and see it floats nicely around.
Now it is time to add the menu. As mentioned earlier we can use list for the menu. It is much more suited for the task then a table. In that regard also note that a menu might have sub items, as such a list becomes the only sane option.
Also note on the menu: You likely do not want to style visited links with other color. But that is up to you of course.
With added menu and some re-styling on background colors etc.
HTML:
<ul>
<li><a class="menu" href="smaler.php">úvodní stránka</a></li>
<li><a class="menu" href="sluzby.php">služby</a></li>
<li><a class="menu" href="kontakt.php">kontakt</a> </li>
</ul>
CSS:
As we already have set margins and padding to 0 on all elements this is trivial:
#menubar ul {
list-style : none;
}
#menubar li {
padding : 0 10px;
float : left;
}
a.menu {
text-decoration : none;
color : #fff;
}
a.menu:hover,
a.menu:active {
color : #3cc8a8;
}
Remove helping colors etc. and we have a version 0.1 ready for further testing and expansion.
Result.
Result as one page.
Validated markup on result at W3C
Validated CSS on result at W3C
Original answer:
There is more then one problem. Firstly the markup:
XHTML
<link rel="icon" type="image/png" href="./pictures/favicon.png">
Should be:
<link rel="icon" type="image/png" href="./pictures/favicon.png" />
<link rel="stylesheet" type="text/css" href="style.css">
Should be:
<link rel="stylesheet" type="text/css" href="style.css" />
<img src="./pictures/header.png" width="439" height="131" border="0" alt="">
Should be XHTML 1.0 Strict img tag does not have a border attribute, and need
to be closed:
<img src="./pictures/header.png" width="439" height="131" alt="" />
<hr class="main" /></hr>
Should be:
<hr class="main" />
Use paragraphs to group text, not:
Text<br/><br/>Text<br/><br/>Text ...
but:
<p>Text</p><p>Text</p><p>Text... </p>
CSS
Inline comments are not valid, use:
/* some comment */
Not:
// some comment
You are missing unit on most of your padding values. If a value is non-zero it needs a unit such as pt, px etc. Use:
padding: 5px 0 0 20px;
/* Not: */
padding: 5 0 0 20;
If you do not, it has no/(should not have any) effect.
background-repeat does not have repeat-xy. Use:
background-repeat: repeat;
/* not */
background-repeat: repeat-xy;
or nothing at all, as that is the default.
Fix those first. Then set some color to your things so that it is easier to understand what you want. You can change them back later. Use red, blue etc.
Example.
Regarding zero width no break space bug, as displayed in Vim:
Try adding this CSS:
CSS:
#wrapper {
margin: auto;
min-height: 500px;
background-image: URL('../images/squared_metal.png');
background-repeat: repeat-xy;
z-index: 10;
padding-top:10px;
margin-top:-30px;
}
#content {
margin:auto;
width:700px;
background-color:#ffffff;
margin-top: 10px;
border:1px solid;
padding: 50 30 50 30;
}
I totally overlooked the 'padding-top' css property originally. Thank you all for providing that information!
Please update your site with this CSS and let me know if it works! Since I tested this on my own machine, you should change back the background-url to your custom .png file.
So I can't seem to identify what I'm doing wrong. I created a menu with 4 buttons, namely: Update, Register, Records and Sign out. I placed them together in a class and styled them with CSS. They turned out to be of different lengths, I've tried everything I currently know and understand about CSS and I'm stuck.
Here's the CSS code:
.button2 {
padding:15px 150px;
margin:0px auto;
border-radius:5px;
color:#221e1f;
font-family:corbel;
font-size:20px;
text-decoration: none;
border: 1px solid #d13129;
background: #d13129;
width:300px; /* set a width, can be fixed or percentage */
display:block; /* by default <a> tags arn't block elements and need to be for setting a width */
}
picture with the new edit:
http://gyazo.com/7c7203de14e01873b59e60392fa76207
You should define Height and Width in the css as well. Something like:
height:5px;
width:15px;
Set a width in the CSS (e.g. 'width: 50px;'). Unless you do this the size will match however large the text within the button is (plus the padding/borders).
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'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;
}
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 }