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 */
}
Related
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);
}
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 :)
Okay so I am trying to build a main header for multiple web pages that I am building. In this header, I have an image, text center below the image, (all to the left of my main header), a main header which I want centered in the page, and two links (home, and contact us) which will be placed to the right of the main heading. Here is my HTML and CSS so far:
<div class="header">
<div class="logoHeader">
<img src="6.jpg">
<p> My Image Header </p>
</div>
<h3> Page Header </h3>
Home Page
Contact Us
</div>
div.logoHeader {
width: 125px;
}
.logoHeader img {
margin: auto;
display: block;
}
.logoHeader p {
margin: auto;
font-size: 70%;
text-align: center;
font-weight: bold;
}
This correctly centers the text below the image, but now I don't know how to align my header to the center of the page, links to the right of the header, and then finally aligning the header div to center. When all is said and done, I want it to look like this:
IMAGE
Image Main Header (centered within middle of img) 2 links
(text centered under image)
All of this being centered in my window. Can anyone help me out with this? Any help would be greatly appreciated.
There are many ways to do this, but here is one way. I float the left (the logo and name) and right (the links) to opposite sides then use text-align:center and display:inline to center the page header
/* CSS */
.header {
background:grey;
display:inline-block;
width:100%;
text-align: center;
}
.logoHeader {
width: 125px;
float:left;
}
.pageHeader {
display: inline;
margin: 0 auto;
}
.headerLinks {
float:right;
}
.logoHeader img {
margin: auto;
display: block;
}
.logoHeader p {
margin: auto;
font-size: 70%;
text-align: center;
font-weight: bold;
}
/* HTML (slightly changed) */
<div class="header">
<div class="logoHeader">
<img src="6.jpg" />
<p>My Image Header</p>
</div>
<h3 class='pageHeader'>Page Header</h3>
<div class='headerLinks'>
Home Page
Contact Us
</div>
</div>
Demo here
EDIT
If you want it evenly spaced vertically as well and not use hard coded paddings and such to do so, you could change the setup to use a table format instead. You'll have to play with the width of each section and such to get it exactly the way you want it. I'm using the same HTML as above
.header {
background:grey;
vertical-align:middle;
width:100%;
padding:15px;
display:table
}
.header * {
display:table-cell;
width:33.3%; /* 100 / number of sections */
vertical-align:middle;
}
.logoHeader img {
margin: 0 auto;
}
.logoHeader p {
display:block;
margin:0 auto;
font-size: 70%;
text-align: center;
font-weight: bold;
}
.pageHeader {
text-align:center;
}
.headerLinks {
text-align:center;
}
Demo of tabular approach
For something like this nav a table isn't a poor decision, but some people recommend never using tables for layout, so you could also use flexbox's display:flex; justify-content:space-around instead if you'd like
This question already has answers here:
How can I align the image and the h1 header ajadecently?
(3 answers)
Closed 9 years ago.
I have problems with trying to align the image and the h1 tag together on one line. I tried display: inline and inline-block they didn't work and only made the container of the two. I added the width to 100% on the section and still nothing. Float doesn't work either and if it did, it screws up the alignment of the page. What am I doing wrong? Check my full source code here: http://jsfiddle.net/TheAmazingKnight/bkmyv/
HTML
<section>
<img id="me" src="assets/img/pose1.jpg" alt="A photo of me." />
<h1>FOLLOW ME ON...</h1>
</section>
CSS
section{
display:inline-block;
width:100%;
}
h1{
font-weight:bold;
font-size:40px;
color:#FFFFFF;
background-color:#FFB405;
display:inline-block;
}
This is because images as displayed as block elements by default, so they occupy a whole line.
Change your image to have a display: inline-block; as you did with your h1 element.
h1, img {
display: inline-block;
}
Here' a fiddle:
http://jsfiddle.net/ps2ms/
I added float:left; to #me and float:right; to h1 Fiddle
#me{
width: 600px;
height: 400px;
display: block;
margin: 10px 10px;
float: left;
}
h1{
display:inline-block;
font-weight:bold;
font-size:40px;
color:#FFFFFF;
background-color:#FFB405;
float: right;
margin: 10px;
}
Just give the img in the section a float: left.
I have this code:
<style>
.floatright
{
float: right;
margin-right:800px;
}
.menu {
padding: 0;
float: right;
width: auto;
position:relative;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
display:inline;
padding:0;
margin: 0px;
}
.menu a:link,
.menu a:hover {
text-decoration:none;
padding:0 5px 5px 0;
margin-right: 8px;
}
</style>
<div class="floatright">
<ul class="menu">
<li>api</li>
<li>tools</li>
<li>blog</li>
</ul>
</div>
it is meant to float to the right of the page (not in the right corner - just to the left) and have gaps between each link.
The gaps work ok but when the screen is resized ti does not stay where it is supposed to
any ideas?
Charlie, because you have a 800px margin on the right of the div it will always have that margin regardless of the screen resolution.
If you're wanting the margin to become less based on screen resolution maybe look at using percentages or media queries.
wou need to center the parent div ...and then the menu will float right.
.floatright {
width:1000px;
height:50px;
margin:0 auto;
}
Where the width should be the width of the "orange box".
The menu already floats well in its parent div.
here is a jsfiddle example: http://jsfiddle.net/hvLkh/
Additional advice: 1) do not put divs outside the body tags, 2) add a hight attribute to the div to push the box down, and 3) add the font formatting straight into your css and avoid font tags ... like this:
.floatright {
width:1000px;
height:50px;
margin:0 auto;
font-family:"Trebuchet MS",Arial,Verdana,Tahoma;
}
And here is an updated fiddle: http://jsfiddle.net/n6mnP/1/