I am quit new to html and css and hope someone can help.
With help of w3 schools (http://www.w3schools.com/CSS/css_image_gallery.asp) I created an simple gallery.
With this the images are put in the left upper corner. I want to put the images more in the central of the page.
Is there a way to easily do this?
Wrap everything in a div with an id of container. Then add #container { width: 100px; margin: 0 auto; replacing 100px with how wide you want the gallery to be.
Related
I'm making a website using fullPage.js, On the second page (or equivalently, second section) I want to achieve a very simple layout where I have a header fixed on top of the page displaying an image which should be responsive, or decreases in size as the window shrinks but stays at the top.
Currently, I'm wrapping the image to be displayed in a div. I then scale the div fullscreen using,
.post-header {
background: #22BDA0;
max-width: 100%;
height: auto;
}
The img tag inside of the div has a class header-image which I style as,
.post-header .header-image {
max-width: 100%;
height: auto;
margin: 0;
}
However, I'm not getting the desired result. There is a small space on top of the second page which I can't get rid of. You can see the website I'm making along with the source code HERE. Just scroll down to second page, or click Personal Details on the homepage.
Thanks a lot for the help!
What if you just give height:100%; to .section2-container? Will it solve your issue?
Remove display: table-cell; from .fp-tableCell and the padding disappears. Does this need to have display set to table-cell?
fullPage.js has an option: verticalCentered that can be set to false. This seems like a good solution, since the alternative means always trying to ensure that the content of the containing element is always 100%.
Hey guys i have a HTML/CSS related question here...
I'm developing on a salesforce application, which makes me use this apex tag to put images in and I'm not really comfortable with using them. I am making print layouts at the moment for some forms that i've created. Everything worked fine until i had 2 images that i needed to style differently. I have 1 image in the header and 1 image that is a box within the form. Since i am styling the image in the header with some padding and centering among other stuff...the other box image wont show up as i go to print. So i was wondering if i can just separate the header image via a div tag. Here is what i have so far....
HTML:
<div class="logo_print"></div>
CSS:
.logo_print{
float:left;
padding-left: 40px;
width: 64px;
height: 86px;
background-image:url('../css_images/seal2.png');
}
So this is the header image i put in a div tag...did not work but if anyone has any thoughts/solutions that would be great....been trying out a bunch of diff ways with no progress. Thanks
EDIT:
So I've put new CSS in with some recommendations..so now i see it on my website but when i go to print the forms...the image does not show up :/
OH and i am using #media print to put the CSS in
Reason it's not working is because you haven't specified a height and width in your css.
Try This:
.logo {
background-image: url('http://pixelative.co/wp-content/uploads/2014/06/logo2.png');
width: 209px;
height: 52px;
}
<div class="logo"></div>
Here's a codepen of the working example.
Hope this answers your question.
I'm currently working on a hobby website, and I'm trying to accomplish something which seems way more advanced that it should be, I hope you can help me.
I wish to bring a background element, du the foreground (Because a little bit of it should reach on top of the menu line)
I am using the CSS3 multiple background method, to use 3 different background elements. I have included the code and an image to show what I man.
Cheers
background-image:url(logo.png), url(shinybg.png), url(bgpat.jpg);
background-repeat:no-repeat, no-repeat, repeat;
background-position:top center, top 18px center, top left;
height:1000px;
padding-top:10px;
z-index:-1
Image: http://goo.gl/JEvhAz
EDIT:
Okay so it seems I fixed it. I made the img tag outside of my wrapper and made it position absolute, the way to center it was as follow:
#logotop {
width: 905px;
margin: 0 auto;
margin-top:-18px;
position:absolute;
left:0;
right:0;
}
The left and right 0 together with the margin 0 auto fixed it, cheers lads
Put your header image/logo into a new <img> tag that is placed on top of your page. This will give you much more control over positioning than what you're currently doing, and will allow you to use z-index.
If you're comfortable with HTML/CSS, I'd recommend creating a header <div> and set the background on that div (and also the z-index). This will allow you more options further down the line but the simpler option is to use the <img> tag.
Here is a jsFiddle with some examples that might help you: http://jsfiddle.net/tMhs7/1/
Here is the link to a site I am working on for a friend - http://jayclarkephotography.com/
I am trying to center the logo. I have tried various ways, but am new to making websites, so I think I am missing something.
On the a inside the header, add the following CSS:
display: block;
width: 340px;
margin: 0 auto;
You might want to ajust the padding of the header, because the logo is not dead center.
You can acheive this through CSS, tell the browser you want auto margins on the left and right, add this to the image tag
style="margin:0 auto;"
I have searched the internet for countless hours looking for a solution and I can never seem to find it. What if I had a log in page and I wanted to have it completely centered in the center of the page.
I've never figured out how to do this and hopefully someone can help me put and end to this lack of knowledge of mine.
Here is an example
What I want is to have a div with a height of 410px and a width of 756px to be centered on the screen. So vertically and horizontally. I then want to be able to put other 's inside it with content. For example maybe I want to put a login page in there or a blog post or anything.
Major thanks in advance!
Use margin: auto;.
HTML:
<div class="middle">middle</div>
CSS:
.middle
{
width: 100px;
height: 50px;
border: solid 1px red;
margin: auto;
}
See this link for vertical centering.
Here's a fully working example.