I've made this code for navigation bar.
HTML :
<div class="header-nav">
<div class="header">
<img src="../Pictures/LifeFrame/2.jpg" width="100%" height="100px" />
</div>
<div class="nav" align="center">
Home
Gallery
</div>
</div>
CSS :
.header-nav {
position:fixed;
top:0;
width:100%;
left:0;
right:0;
}
.nav {
height: 42px;
background-color:#FF0000;
}
a {
display:inline-block;
width:50%;
height:42px;
float:left;
}
but the text in tag a is on top not in middle. how to make the text in a tag with display inline block to middle ?
Since you're using float rule vertical-align may not work in this case so You can provide margins to this like following:
a{
display:inline-block;
width:50%;
height:42px;
float:left;
margin: 10px 0; /* add this */
}
OR
If you want to use vertical-align then you need to adjust width accordingly
a{
display:inline-block;
width:20%; /* reduce width */
height:42px;
/*float:left; */ /* remove this */
margin: 10px 0; /* add this */
vertical-align:middle;/* add this */
}
Demo
Updated Demo
Do you mean to center "Home" in the block you've created?
Try in css with padding.
a{
display:inline-block;
width:50%;
height:42px;
float:left;
padding-top: 2px;
}
Play with that
Try vertical-align: middle;
More info. on vertical-align: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
Remove float and use vertical-align:
a{
display:inline-block;
width:50%;
height:42px;
vertical-align: middle;
}
Do it like this:
1) Keep your HTML as is.
2) Change your CSS as follows:
.header-nav {
position:fixed;
top:0;
width:100%;
left:0;
right:0;
}
.nav {
height: 42px;
background-color:#FF0000;
vertical-align:50%;
display:flex;
align-items:center
}
a {
width:50%;
float:left;
}
See fiddle here
You can try giving padding for the <a> tag
CSS:
a{
padding:10px 0;
display:inline-block;
width:50%;
height:42px;
float:left;
}
See the fiddle:
http://jsfiddle.net/xpfsyds2/
Add the following to your 'a' style:
line-height: 42px;
Related
Please take a look at this fiddle https://jsfiddle.net/t2w4yd8j/1/
I have a couple of questions about this:
1) There seems to be a padding between the .top div(red) and the browser if I use the relative position. However if I change the position of .top div(red) to absolute the padding goes off. Why is that?
2) The .next div(pink) should stack after the .main div(grey). But the main div seems to be taking a bit more extra space even though the height is set to auto and there is no children in the extra space. Why is that?
Thanks
CSS
.main{
height:auto;
width:100%;
text-align:center;
background-color:#CCC;
}
.top{
position:relative;
top:0px;
left:0px;
width:100%;
height:50px;
background-color:#F00;
}
.middle{
position:relative;
top:-25px;
width:100%;
height:auto;
text-align:center;
z-index:3;
}
.midfill{
width:200px;
height:50px;
display: inline-block;
background-color:#0F0;
}
.bottom{
position:relative;
top:-50px;
left:0px;
width:100%;
height:50px;
background-color:#00F;
}
.next{
width:100%;
height:100px;
background-color:#F0F;
}
HTML
<div class="main">
<div class="top"></div>
<div class="middle">
<div class="midfill"></div>
</div>
<div class="bottom"></div>
</div>
<div class="next"></div>
1) By placing it relative, it relates to it's parent, the body tag. Remove the padding and margin from the body and HTML tag, and it fits. When you place the div absolute, it's taking out of the document flow, making it relate to the viewport. That explains the difference.
html, body { margin: 0; padding: 0; }
2) you position the div's relative, and then move them around. But the place stays reserved in the parent div. I moved the divs a bit around.
html, body {
margin: 0;
padding: 0;
}
.main{
height:auto;
width:100%;
text-align:center;
background-color:#CCC;
}
.top{
width:100%;
height:50px;
background-color:#F00;
}
.middle{
position: absolute;
margin-top: -25px;
width:100%;
height:auto;
text-align:center;
z-index:3;
}
.midfill{
display: inline-block;
width:200px;
height:50px;
background-color:#0F0;
}
.bottom{
width:100%;
height:50px;
background-color:#00F;
}
.next{
width:100%;
height:100px;
background-color:#F0F;
}
Updated Fiddle
Solution for your both problem is following. By Default it takes extra margin by removing it from body solved your issue:
body{
padding:0;
margin:0;
}
Check Fiddle Here.
I'm a newbie at this and I'm trying to figure out what I'm doing wrong. I want to centre everything within a div, but it won't budge no matter what I do.
Could you guys advise?
<div id="main1">
<h1>blah</h1>
<div id="intro">
<p>Bettina is a designer who is learning to code. She is very cluey and a bit fustrated because she doesn't know what she is doing.</p>
</div><!--intro-->
#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;}
#title {
position:absolute;
top:500px;
right:auto;
margin:auto;
}
#intro {
bottom:0px;
width:50%;
margin:0 auto;
position:absolute;
text-align:center;
}
Add text-align:center; to your <h1> for it to center. Also, remove position:absolute; from #intro for its text to center.
Working Code Snippet:
#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;
}
#main1 h1{
text-align:center;
}
#title {
position:absolute;
top:500px;
right:auto;
margin:auto;
}
#intro{
bottom:0px;
width:50%;
margin:0 auto;
/*position:absolute;*/
text-align:center;
}
<div id="main1">
<h1>blah</h1>
<div id="intro">
<p>Bettina is a designer who is learning to code. She is very cluey and a bit fustrated because she doesn't know what she is doing.</p>
</div><!--intro-->
</div><!--main1-->
You can make the parent DIV (#main1) get the center alignment first. So that elements under it are moved to the center. Als have made change for intro div(#intro) too so that it is centered and below your header.
#main1 {
width:100%;
height:700px;
margin:0;
position:relative;
background-color:#CCC;
text-align:center;
}
#intro {
margin: auto;
width:50%;
text-align:center;
}
Centering essentially means recognizing that text-align:centershould be reserved for centering text, so it's appropriate for an H1 tag or a P tag. When it comes to DIVs, if you work with margin and width styling you can usually compel a DIV to center. If you're having an issue see if you have applied position:absolute to the DIV and either remove it or change it to position:relative or if fitting position:static. Here's some code that I suggest which centers the text vertically and horizontally, as follows:
#main1 {
margin: auto;
width:100%;
height:600px;
background-color:#eee;
}
#main1 h1 {
padding-top:33%;
text-align:center;
}
#intro {
bottom:0px;
width:33%;
min-width:90px;
margin:auto;
background:#fff;
padding:32px;
}
#intro p {
text-align:justify;
}
Note: I changed the height so you could better see the results in the live demo; see below link.
I essentially worked with the HTML provided and used text of similar word count. The CSS centers the DIV containing the paragraph. The CSS for the P tag gives the illusion of centered text without actually applying text-align: center, to prevent each line of text being centered which can be visually annoying when reading sentences.
<div id="main1">
<h1>Centered</h1>
<div id="intro">
<p>Centering can be a lot of fun or it can lead to much frustration. It all depends. Sometimes it's a challenge and sometimes it's just what it is.</p>
</div><!--intro-->
Live demo here
Thank you for all your suggestions! This is what I've ended up doing:
#main1 {
width:100%;
height:700px;
margin:0;
background-color:#CCC;
position:relative;
}
#title {
display: block;
margin-left: auto;
margin-right: auto;
position:absolute;
top:300px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
#intro {
width:50%;
text-align:center;
position:absolute;
bottom:0px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
I am trying to lay out a group of images in a table format with using div's. I have an image and then I want to put a Delete link underneath the image. But I can't get it to layout correctly. This is what I have:
<div class="container">
#foreach (var item in Model)
{
<div class="imagetiles">
<img src="#Url.Content(item.ImageURL)" alt="" width="30%" height="30%" />
<a>Delete</a>
</div>
}
</div>
My styles look like this, I copied it from the Fiddler mentioned in the comments below. The Fiddler works, but when I apply it, it doesn't work.
div.container {
width:100%;
}
div.imagetiles {
display:inline-block;
margin:10px;
}
div.imagetiles a {
display:block;
text-align:right;
width: 30%;
}
Below is how this renders. I want this to put the images next to each other with up to 3 per line. Why doesn't the Fiddler work for this here? Why is the imagetile div so big, I can't reduce it to fit the image?
If you want three per row, I would set the image container (not the main one) to be 33% and then make the width of each image to control the spacing around it (kind of like padding). Something like this:
div.container {
width:100%;
margin:0; /* make sure there is no padding or margin on container */
padding:0;
}
div.container div.imagetiles {
float:left;
width:33%;
padding:0;
}
div.container div.imagetiles img {
width: 95%;
margin: 10px;
}
div.imagetiles a {
display:block;
text-align:right;
width: 100%;
}
Demo: http://jsfiddle.net/Gd2V6/
If you are using something like LESS (recommend or SASS):
div.container {
width: 100%;
margin:0; padding:0;
div.imagetiles {
float:left;
width: 100%;
padding:0;
img {
width: 95%;
margin:10px;
}
a {
display:block;
text-align:right;
width: 100%; /* may need to tweak this */
}
}
}
There are small things we need to maintain when display is not defined.
Also we need to analyze the position: property of element that plays big role in this.
After adding the above I have added z-index to the element and that did it!!.
Have a look at this fiddle
CSS:
div.container {
display:block;
width:100%;
position:relative;
}
div.imagetiles {
display:inline-block;
margin:10px 5px;
float:left;
}
div.imagetiles img{
position:relative;
display:inline-block;
z-index:1;
}
div.imagetiles a {
height:25px;
width:50px;
position:relative;
display:inline-block;
float:right;
top:-25px;
left:-50px;
z-index:10;
}
your Implementation is all right. you just need to add width of imagetiles
like:
div.imagetiles {
display:inline-block;
width:30%;
margin:10px;
}
It will work like a charm :)
I have a div containing only an image with a height of 400px. The div has no padding but it's height is 406px causing an ugly grey 6px horizontal stripe below its img.
The reason for the grey background is that comparable divs may contain a caption beneath their img.
What causes the extra 6px and how can I get rid of it?
P.s. I'm aware the HTML markup is not semantic/HTML5 but I'd rather not change it.
The basic markup is
<body>
<div>
<div class='img w960'>
<img src='timg-960-480.png' alt=''>
</div>
</div>
</body>
The CSS for this example is
body>div{
font-size:20px;
width:26em;
margin:5em auto;
text-align:justify;
}
div.img{
border:0px solid #fff;
border-radius:.5em;
background:#ddd;
margin:1em 0;
width:1px;
overflow:hidden;
display:table;
}
div.w960{
position:relative;
left:-7em;
}
div.w960 img{
width:40em;
}
div.img h3{
margin:0;
padding:1em;
font-size:20px;
font-style:italic;
}
Set line-height: 0 on your div.img. This will affect the image caption h3 but you can correct that with an extra CSS line. The image is set inline and sits on the text baseline.
body>div{
font-size:20px;
width:26em;
margin:5em auto;
text-align:justify;
}
div.img{
border:0px solid #fff;
border-radius:.5em;
background:#ddd;
margin:1em 0;
width:1px;
overflow:hidden;
display:table;
line-height: 0;
}
div.w960{
position:relative;
left:-7em;
}
div.w960 img{
width:40em;
}
div.img h3{
margin:0;
padding:1em;
font-size:20px;
font-style:italic;
}
I always solve this problem by setting the image's display property to block (display: block;).
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? Sometimes it's hard to understand why it doesn't work as intended and need some help.
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{
position:relative; /*position wherever desired on the page*/
top:0;
bottom:0;
right:0;
left:0;
font-weight:bold;
font-size:40px;
color:#FFFFFF;
background-color:#FFB405;
}
Add display: inline-block; to your h1 properties, as I've done here.
Try this:-
h1{
position:relative; /*position wherever desired on the page*/
top:0;
bottom:0;
right:0;
left:0;
font-weight:bold;
font-size:40px;
color:#FFFFFF;
background-color:#FFB405;
display: inline-block;
}
You have some CSS conflicts on h1...
This should work
section {
display: block;
}
h1 {
position:relative; /*position wherever desired on the page*/
display: inline-block;
font-weight:bold;
font-size:40px;
color:#FFFFFF;
background-color:#FFB405;
}
section img {
display: inline-block;
}