I have a title (h1) which is centered on the page. I want to add lines to the left and right of the title, so that they fill the rest of the page's width.
However, I want the lines to adapt to the title's width, which is dynamic. So, I want the line's width to be dynamically calculated.
Here's an example of what I'm trying to accomplish: http://jsfiddle.net/cAEqE/1/
In the example I set the lines' width to 35% so they could get the effect that I want. However, if the title is longer, it will break into 2 lines, and I don't want that to happen.
My boss told me to avoid javascript, so it would be excellent to use only CSS. However, if this turns out to be impossible, I will turn to good old jQuery.
Cheers!
Edit: the website has a background-image, so I can't use a background on the h1. Thanks!
You can write like this:
CSS
h1 {
font-size: 26px;
text-align:center;
display:inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
background:#fff;
padding:0 10px;
}
#title {
text-align:center;
border-bottom:1px solid #97999C;
height:10px
}
HTML
<div id="title">
<h1>TITLE TEST</h1>
</div>
Check this http://jsfiddle.net/cAEqE/27/
UPDATED
Check this http://jsfiddle.net/cAEqE/63/
Instead of using divs for the lines, you should use a background image on the parent div.
For example, your HTML would be much simpler:
<div id="content">
<h1>TITLE TEST</h1>
</div>
And your CSS would be:
h1 {
font-size: 26px;
background-color: white;
display:inline;
padding:0 30px;
}
#content {
text-align:center;
width:100%;
background:transparent url(https://jira.atlassian.com/s/en_UKtovngv/725/4/1.0/_/images/mod_header_bg.png) repeat-x left center;
margin:0;
padding:0;
}
I've stolen a fair bit of this code from Jira which does basically what you're after.
Related
I'm trying to do something like this using css:
I need it to:
Only have background (with padding) around the text, and
Have a solid line occupying 100% page width thereafter
For example, I'd like to be able to do the following:
<div style="my-custom-style">T E X T</div>
Would appreciate some input
You can use the :after pseudo element to minimise markup.
The point is to position the pseudo element absolutly and keep the div's position to default static position. This way, setting the pseudo element to width:100%; will make it span the whole width of the divs parent (you will although need to set that parent to an other position than the default static position. In the following demo it is the body element) :
DEMO
CSS :
body{
position:relative;
}
div{
background-color:#FF7F27;
display:inline-block;
}
div:after{
position:absolute;
display:block;
content:'';
width:100%;
height:5px;
background-color:inherit;
}
EDIT:
As stated in comments by #Paulie_D, you should be using a text node to display text like <span> <p> <li> <h1> <h2> ... Using this technique, <span> or a title tag should suit you depending on the content you need to display.
As Stated by #KheemaPandey using a manual space between the letters isn't the best considering HTML semantics , maintainability of your code and the "concept" of CSS styling.
You should be using letters-spacing to space your letters.
Considering both points, your code could look like this :
DEMO
HTML :
<span>TEXT</span>
CSS :
body{
position:relative;
}
span{
background-color:#FF7F27;
display:inline-block;
letter-spacing:0.5em;
}
span:after{
position:absolute;
display:block;
content:'';
width:100%;
height:5px;
background-color:inherit;
}
Try following code
DEMO
<div style="my-custom-style"><span>T E X T</span></div>
div{
border-bottom: 3px solid orange;
}
span{
display: inline-block;
padding: 3px 5px;
background: orange
}
I've been having a problem with these boxes. The thing is that I need to make the text align always in the middle of the box + image no matter how many lines it has.
Have a look at the example bellow, many thanks:
HTML (I'm using 960 grid)
<div class="grid_4 prod-box-small alpha">
<h5>Shampoos</h5>
<div class="prod-img-box-small"><img src="images/product_small_1.jpg" alt="" /></div>
</div>
CSS
.prod-box-small {
border:1px solid #e4e4e4;
min-height:115px;
padding-right:12px;
padding-left:20px;
margin-bottom:20px
}
.prod-box-small h5 {
color:#820c8e;
float:left;
font-weight:600;
max-width:100px;
padding-top:42px;
padding-bottom:22px
}
.prod-img-box-small {
width:100%;
display: block;
padding:0;
max-height:105px;
margin-right: 0;
text-align: right;
line-height: 115px;
}
.prod-img-box-small img {
max-width:100%;
max-height:100%;
vertical-align: middle
}
Format the h5 using display:inline-block, so vertical-align can work on it, and give it a width - like this: http://jsfiddle.net/Cds5q/
(h5 and img elements are written without any whitespace between the tags here, otherwise you will get the width of a space character between them, and then they won’t fit into the div element exactly.)
stripped down to the important parts of the code: http://jsfiddle.net/aETC4/
you can use display: table for this. With vertical-align: middle your headline will be arranged centered inside the imaginary cell
simplest way us use margin-left: and margin right in percentage. you can check percentage value by debugger tool.
ive been making pages using tables forever. recently ive been trying to switch to divs since everyone seems to have done that, and its been a pain. anyway i was thinking if anyone could be nice enough to help me figure this one out. i have attached a picture that will explain the problem because after all a picture's worth a thousand words. thanks in advance.
[image removed]
do you mean something like this?
html:
<div id="content"><br/></div>
<div id="navigation"><div><br/></div></div>
css:
html,body{
height:100%;
margin:0;
padding:0;
}
#content{
width:800px;
border:1px solid red;
min-height:100%;
margin:0 auto;
position:relative;
}
#navigation{
position:absolute;
top:0;
width:100%;
height:100px;
background:gray;
}
#navigation div{
width:800px;
height:100%;
background:lightgray;
position:relative;
margin:0 auto;
}
demo:
http://jsfiddle.net/Z8UDf/
To center a div use CSS margins:
<div style="width: 800px; margin: 0 auto"></div>
Inside that div you can then place your navigation bar which will fill up the space available to it.
With regards to the spaces either side of the main content you have two options.
You can set a background-image on the body at top repeat-x so that it appears that you have a horizontal bar right the way across your page.
You can split the navigation from the main body, have both centered using the method above. Wrap the top 'navigation' div with another div that will be 100% width. You can then style that div as you wish. This has the advantage that you can move it without updating your background images.
use css style
<div style="position:absolute;left:100px;top:150px;" > MyDiv1 </div>
<div style="position:absolute;left:130px;top:150px;" > MyDiv2 </div>
I want my footer to take height same as the remaining bottom space. Currently I'm using following css for footer:
clear: both;
float: left;
background-color: #1F1102;
color: #E4F2FA;
min-height: 60px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
padding: 0;
padding-top: 10px;
text-align: left;
width: 100%;
min-width: 1000px;
margin: auto;
The result is:
Here as you can see the black has take only minimum height. I want it to take whole remaining space after it [that is marked with question marks]. Which changes do I have to make to get this?
note:- I don't want to give position:fixed to make it stick to bottom.
Well, the short answer is, You Can't!
The longer answer? You can fake it.
Why can't you?
Because a block level element is not able to strech and fill a space in height.
Fake it how?
Use the same background color as the footer for the container (or the same background image), that will cause it to appear like it's always fills up the entire space.
This is now possible with flexbox using a method similar to what is described here https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/. Do this, except put the flex-grow: 1 in the footer element instead of the content element (in the article it's listed as flex: 1).
You don't really can make a block-element span to the full height available in CSS. Best way is find use some workaround, which looks alike.
For example you may use a background-color (for the body/wrapper) or a centered background-image positioned to the bottom…
This worked like a charm for me (originally from how-to-keep-footer-at-bottom-of-page-with-css):
Put this in your css:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ededed;
padding:10px;
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
Then in your index/master/_layout/whatever:
<body>
<div id="wrapper">
<div id="header">
</div><!-- #header -->
<div id="content">
</div><!-- #content -->
<div id="footer">
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
I had the same type of problem. What worked for me was to add a few pixels of padding to the footer and it ended up taking up the bottom of the page.
This is what did it for me:
footer{
padding-bottom:10px;
}
I am aiming for a fixed width layout, with width:1008px across all monitors. Here's my HTML-
<body>
<div id="god_container">
<div id="root">
... all content ...
</div>
</div>
</body>
and CSS -
#god_container{
background:url("/site_media/images/bg-1008.png") repeat-y scroll center center #D4D9DD;
margin:auto;
position:static;
width:auto;
}
#root {
background-color:#FFFFFF;
margin:auto;
width:1008px;
color:#000000;
font-family:Verdana,Arial,sans-serif;
font-size:10pt;
}
body{
color:#373737;
font:16px arial;
line-height:1;
background-color:#D4D9DD;
}
I thought this would solve it. But when I render, the root css does not adhere to 1008px value. Also root's background-color does not show as #FFFFFF i.e. White. It still shows my body's background-color. What am I doing wrong?
UPDATE: To anyone interested I have found excellent ready-made CSS layouts at http://www.dynamicdrive.com/style/layouts/category/C12/
Giving the background-image and color to the body, makes sure it is displayed on all pages, and have the #god_container act as a wrapper for the page, center it by margin:0 auto; and give it the width:1008px;.
Also you don't have to give the position:static; to the #god_container wrapping div, instead use position:relative; to make sure all child divs, are placed inside it even if positioned absolutely.
At last, giving #root a width:100% will place the div to it's parent div width.
Try using this CSS:
body{
color:#373737;
font:16px arial;
line-height:1;
background:url("/site_media/images/bg-1008.png") repeat-y scroll center center #D4D9DD;
}
#god_container{
margin:0 auto;
position:relative;
width:1008px;
}
#root{
background-color:#FFFFFF;
margin:auto;
width:100%;
color:#000000;
font-family:Verdana,Arial,sans-serif;
font-size:10pt;
}
Not sure if I'm missing something here, but it could be much simpler. You don't need a wrapper DIV... the body can handle that. All you need is your root DIV.
CSS
body{
background: #D4D9DD url("/site_media/images/bg-1008.png") repeat-y center;
color:#373737;
font: 16px/1 Arial;
}
#root {
background: #FFFFFF;
color: #000000;
margin: 0 auto;
width: 1008px;
}
HTML
<body>
<div id="root">
... all content ...
</div>
</body>
Here ya go: http://jsfiddle.net/XdA92/1/
Try the below.
give the back ground url to the main body so that it will go to all pages
#god_container{
background:url("/site_media/images/bg-1008.png") repeat-y scroll center center #D4D9DD;
margin:auto;
position:static;
text-align:left;
width:1008px;
}