I use bootstrap and joomla.
I have a new design that requires my div and h2, to be 1920 pixels wide and have centered text. What i have done is:
.page-header {
background-color:#3c4547;
width:1920px;
top:0px !important;
position:relative;
margin-top:0px;
display:block;
padding:20px 0px 25px 0px;
z-index:999;
left:-385px;
}
.page-header h2 {
color: #white;
font-size:36px;
font-weight:400;
margin-left: auto;
margin-right: auto;
text-align: center;
}
The wrapper is only 1600 pixels wide or something, thats why i cheat with negative margin.
but it doesnt center the text right on resize - its need to be responsive aswell. Any suggestions?
This is my HTML code and i cannot edit it:
<div class="page-header"><h2 itemprop="name">Header text</h2></div>
It has a as parents.
This is basicly what i want and have, but it doesnt center on responsive:
.
and this is how it looks just with just 100% width:
For Lion and others, to explain the whole code:
<div class="parent">
<div class="page-header>
<h2>testest</h2>
</div>
</div>
.parent {
width:1000px;
}
.page-header {
width:100%;
background:red;
}
.h2 {
color: #ffffff;
text-align:center;
}
** try to use this code, i hope this code will help you :)**
div h2 {
max-width: 1920px;
width: 100%;
height: auto;
display: flex;
justify-content: center;
}
UPDATED
please replace your code to this
.page-header {
background-color:#3c4547;
width:100%;
top:0px !important;
margin-top:0px;
display:block;
padding:20px 0px 25px 0px;
z-index:999;
left:-385px;
}
.page-header h2 {
color: #white;
font-size:36px;
font-weight:400;
margin-left: auto;
margin-right: auto;
text-align: center;
}
no need of position..
Sorry if i did not get your point but if you want to make your h2 center align then why don't you use margin..
see this
.page-header{width:100%;}
h2{margin-left:auto;margin-right:auto;width:auto;text-align:center;}
.section{ margin-left: auto;margin-right: auto;text-align: center; width: 100%;}
i am assuming that you wanted to make your h2 text center align with responsiveness so i typed code like this..correct me if m wrong..
For Testing
<div class="page-header">
<h2 itemprop="name">Header text</h2>
</div>
<div class="section">
<p>lalalala</p>
<p>lalalala</p>
<p>lalalala</p>
<p>lalalala</p>
<p>lalalala</p>
</div>
please check my example and let me know your structure is different.. ty
screenshot
You guys had some good answers, but didnt really solve my problem - i am sure one of yours can be a solution to another with a problem simular to this, but in my case i solved the problem by using javascript to expand the id tag.
if(jQuery('.page-header').length > 0){
pageHeader = jQuery('.page-header');
jQuery('#main').prepend(pageHeader);
}
Related
I'll start by saying that my css skills are very weak.
Here is the site, and I was trying to add some margins to this background so I can see all the content. I now understand that I am not able to use margins on a background, so what are my options here?
Here is my HTML
<body>
<div id="container">
<nav id="navigation">
<ul>
<li>Homepage</li>
</ul>
</nav>
</div>
</body>
and here is my css
body {
background: url('images/prices.jpg');
min-height: 100%;
height: 100%;
}
#btn {
color: #FAF3BC;
background: #4FB69F url('images/texture.png') no-repeat right bottom;
padding: 15px 30px;
margin: 150px 0px;
border-top: 5px;
border-radius: 25px;
text-decoration: none;
text-transform: uppercase;
}
I am also having issues with the homepage button, I would like some room there as well, but I've tried couple of things like padding and margin and was not able to do it...
I would appreciate any help .... here is the page live, if you like to take a peak http://brewstahs.com/menu.html
I know why your css is not working. The most basic use of CSS is to create a layout, but even though your DOM contains div representing container and footer, the height occupied by each is
equal to the height of its content(because you have not provided any height to the div containers).In short,
margin : 150px 0px does not work because the parent container(nav) does not have that height to provide the margin to it. So provide a height to nav and div and it will work.
Use tools like Firebug to see your layout and see where you're going wrong.
All the best!!
Maybe you should try with background-position attribute:
http://www.w3.org/wiki/CSS/Properties/background-position
What do you want to do?
In case of moving the button, try
margin-top: 50px; for example in the css of btn. This way, the button is moved 50pixels to the bottom. Margin-left moves the button to right, ...
if you are trying to move the button down then you need to first put it in a wrapper
if not try this .
body {
background: url('images/prices.jpg');
min-height: 100%;
height: 100%;
}
#navigation {
position:relative;
display:block;
margin:40px 0px 0px 0px;
padding:0px;
width:auto;
height:auto;
}
#navigation ul {
display:block;
position:relative;
margin:auto;
padding:0px;
}
#navigation ul li {
list-style:none;
}
#btn {
color: #FAF3BC;
background: #4FB69F url('images/texture.png') no-repeat right bottom;
padding: 15px 30px;
margin: 150px 0px;
border-top: 5px;
border-radius: 25px;
text-decoration: none;
text-transform: uppercase;
}
and about your background you can try one thing. Have a looping background texture similar to the one you have right now with background-repeat:repeat; and then put the main background image above it with z-index and centered if required. Just to give you a simple example
body {
background-image:url('images/loop.jpg);
background-repeat:repeat;
}
#backgroundimg {
background-image:url('images/prices.jpg);
background-repeat:no-repeat;
display:block;
position:relative;
width:980px;
height:700px;
margin:auto;
padding:0px;
}
hope this helps :)
I have a small image and i have to show some text beside that image. for that i have used the below html and css.
<div class="main">
<img alt="image"/>
<h2>this is heading text. This is heading text. This is heading text</h2>
</div>
.main{
border:1px solid black;
height:200px;
width:400px;
padding:20px;
}
h2{
display:inline;
}
it is showing like this
The second line is wrapping below the image. I have to get the second line just below the first line not below the image.
I tried using float also. but not working. please help.
I created a fiddle so you can edit it easily: http://jsfiddle.net/codingsolver/MtqHh/1/
You could simply float the image, and push the h2 across with a left margin.
http://jsfiddle.net/MtqHh/8/
img { float: left; }
h2{ margin: 0 0 0 50px; }
hope it will help you
.main{
border:1px solid black;
height:200px;
width:400px;
padding:20px;
}
h2{
display: flex;
}
img{
float:left;
margin-right:10px;
}
Working demo http://jsfiddle.net/MtqHh/13/
.main{
border:1px solid black;
height:200px;
width:400px;
padding:20px;
display: inline-flex;
}
.main img{
float: left;
width: 50px;
height: 50px;
}
h2{
float:left;
margin-left: 50px;
text-align: left;
display: inline-block;
padding;0px;
margin:0px;
}
use this code usefull for you. and see this link http://jsfiddle.net/bipin_kumar/MtqHh/10/
A good way of achieving this is shown on an updated fiddle:
http://jsfiddle.net/y5ewr/1/
The advantage is highlighted in the use of overflow:hidden on the <h2>. This means that if the <img> is not in place the heading will flow full width and no margins are needed on the heading element.
I'm trying to create a fluid element for a site i'm working on, Check out this JS fiddle and make your browser a bit wider, you will see a grey line, a black box, and then a grey line.
When the browser's width is lower the right side line breaks down to the next line, but i want this to stay together no matter how wide the browser is. I generally use float's but have tried a few things, as you can see some css is commented out cause i'm playing with it.
Does anybody have some cool tricks to show me? Any help would be greatly appreciated! Let me know if you need any info.
http://jsfiddle.net/r8Xka/
CSS
header .lower{
overflow:hidden;
width:95%;
margin:40px auto 0 auto;
}
header .lower .line{
/*float:left;*/
display:inline-block;
background:#eaebeb;
width:35%;
height:8px;
/*display:block;*/
position:relative;
top:18px;
}
header .lower a{
/*float:left;*/
display:inline-block;
margin:0 20px;
/*display:block;*/
background: #000;
width: 141px;
height: 42px;
}
HTML
<header data-behavior="randomHeader">
<div class="lower">
<div class="line"></div>
Play Video
<div class="line"></div>
</div>
</header>
You have 3 column: left - fluid, middle - fixed, right - fluid. You would need some js to make it work.
Or some html/css trick like this:
<header data-behavior="randomHeader">
<div class="lower">
<div class="line"></div>
<div class="center">
Play Video
</div>
</div>
</header>
Css:
header .lower{
width:95%;
margin:40px auto 0 auto;
position: relative;
}
header .lower .line{
background:#eaebeb;
height:8px;
}
.center{
text-align: center;
position: absolute;
top: -20px;
left: 0;
width: 100%;
}
header .lower a{
border: 10px solid #FFF;
display:inline-block;
background: #000;
width: 141px;
height: 42px;
}
See working fiddle
Hi im a beginner in HTML and CSS! Im trying to get the proper alignment of a logo and a title . Both of them should be on the same line. The problem is that i cant remove the inner space of the h1 and there is always a margin on top of the text (if i color the bg for the h1, i see that it extends further above the text). Is there a way to solve this or am i doing it wrong? I want both of them to be exactly the same height and in the exact same horizontal position (the top of the "T" in title should be at the top of the img and the same for bottom).
HTML:
<header>
<img src="images/logo.gif" alt="logo">
<h1>Title</h1>
</header>
CSS:
header
{
overflow:auto;
}
header img
{
float:left;
width:55px;
height:55px;
margin-right:20px;
}
header h1
{
float:left;
padding:0px;
margin:0px;
font-size:55px;
}
Have you tried setting the line-height to a fixed value?
h1 { line-height: 55px;}
Try adding a negative margin-top to your header h1:
header h1 {
float: left;
padding: 0px;
margin: 0px;
font-size: 55px;
**margin-top: -15px;**
}
The negative margin is an option, like ssbrewster suggested, but if you don't want to mess up your layout you could try line-height:
header h1 {
float: left;
padding: 0px;
margin: 0px;
font-size: 55px;
line-height: 70%;
}
I have created a jsfiddle for you .. let me know if this is wat you are trying to achieve -
JSFiddle ALignment - H1 and IMG
header
{
overflow:auto;
}
header img
{
float:left;
width:55px;
height:55px;
margin-right:20px;
margin-top:10px;/*add this */
}
I want to know how to center a div with CSS. I googled some stuff & checked on stackoverflow but it was conflicting with my CSS code.
Here's my code (just in case):
body, p, span, div {
font-family: 'Droid Sans', arial, serif;
font-size:12px;
line-height:18px;
color:#6d6d6d; }
.countdown {
padding-top:15px; width: 100%;
height: 68px;
margin:0 auto 0 auto;
bottom:0;
position:absolute;
}
.countdown .countdown_section{
background:url('images/backcountdown.png') no-repeat 1px top;
float:left;
height:100%;
width:54px;
margin:0 5px;
text-align:center;
line-height:6px;
}
.countdown .countdown_amount {
font-size:15px;
color:#ab7100;
text-shadow:0 0.8px #fedd98;
line-height:52px;
font-weight:bold;
text-align: left;
}
.countdown span {
font-size:8px;
color:#999999;
text-transform:uppercase;
line-height:26px;
}
<body>
<div class="countdown clearfix">
</div>
</body>
The following automatically centers the element horizontally:
margin: 0 auto;
You can center a div with a specific width using the following css:
#yourDiv {
width: 400px;
margin: 0 auto;
}
Provided fixed width is set, and you put a proper DOCTYPE,
Do this:
Margin-left: auto;
Margin-right: auto;
Hope this helps
To center a div use:
#content{
margin: 0 auto;
}
<div id="content">This will be centered horizontally</div>
<div style="margin:auto; width: 100px;">lorem</div>
The above answers will work for divs with relative or static positioning. For absolutely positioned elements (like your .countdown element, you'll need to set left: 50% and margin-left: -XXXpx where XXX represents half of the div's width (including padding and border).
(example: http://jsfiddle.net/7dhwG/)
This will center your page it works great.
#yourdiv {
width: width you want px;
margin: 0 auto;
}
You can also center an absolute position div by setting left to 50% and margin-left to -half of the full width in px.
div {
position: absolute;
width: 500px;
left: 50%;
margin-left: -251px;
}
Stop using margin: 0 auto, Cross browser way of doing this is Here I have tested it and it works perfectly on all browsers