I'm beginning to mock-up a WordPress theme based on Twitter's Bootstrap framework.
Could someone validate the code I have so far is kosher?
More specifically, the header...
I have my name and sub-head beside an avatar image.
I want the text to appear vertically in the middle of the image. This works successfully when the page is wide enough (screengrab: imgur.com/YCpSm). But, when I reduce the browser width and responsive design kicks in, the text moves up (screengrab: imgur.com/K4Vyj).
How do I ensure the text stays in the vertical center of the image?
Thanks.
--
Code: http://jsfiddle.net/robertandrews/jP4nT/ (contains standard bootstrap.css, standard bootstrap-responsive.css and custom CSS in one)
Page: http://jsfiddle.net/robertandrews/jP4nT/embedded/result/
You could go with floating elements instead of absolute positioning:
http://jsfiddle.net/jP4nT/1/
I also wouldn't place the <h1> tag within the <p>, but that's probably fine though.
This might be simpler: http://jsfiddle.net/6FMDR/
No extra html tags needed
Less css
CSS:
.myheader {
padding:15px 0 20px;
display:block;
}
.myheader img {
float: left;
padding:0 15px 10px 0;
}
.myheader h1 {
margin-top: 10px;
}
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%.
last week I coding a menu bar for my blog at http://iHMahmoodi.blog.ir
but for social buttons it's going to wrong and I think it's about float element!
I try to fix it with adding some width or more property but it's not work!
you can do it yourself with inspect element on my blog.
look to below image of my blog to know about my problem
http://i.stack.imgur.com/ntjIH.png
another question is near the rss image it's broad a lot of space on the right hand and if move you mouse between phone number and social button, all about rss!!
thanks a lot!
This will make them equal size and it list-image fits right to text
Edit with paddings you get your icons like picture below.
li.fb,
li.fb li {
box-sizing: border-box;
width: 150px;
padding-left: 0px !important;
padding-right: 0px !important;
}
i am having trouble center aligning images.
The images should stay in center never mind what size your screen is.
the problem is that the images are only center aligned until a specific size. my screen is quite small so they're perfectly centered, but when i go down to %75 the images are already not center aligned wich makes everything ugly.
i'm going to save you from spamming my code here, so just view the source of this page.
Thank you for reading :)
You're wrapping the images in a span8 offset2 div, which isn't designed for keeping them centered, but for keeping the element at a set width/left-offset.
Trying setting that parent div like so:
#showcase .row-fluid > div { margin: 0 auto; width: 612px }
Your code is pretty close already, since your .head divs are already inline-blocked, and your #header is text-align: center. What you'll want to do is remove the offset2, and change the span8 to a span12 so it encompasses the entire width.
The div holding the images needs to have
margin: 0 auto;
and the image blocks need to have:
float: none;
display: inline-block;
I have seen this in your CSS and HTML code, if you remove it(CSS only) will stay in center.
HTML
<div class="span8 offset2">
</div>
CSS
Before
.offset2:first-child {
margin-left: 17.094%;
}
After
.offset2:first-child {
/* margin-left: 17.094%;*/
}
I am studying on a tutorial how to create a tabless web template using HTML + CSS and I have a little doubt related to the following thing:
I have an header that contains a div having id=logo, something like this:
<div id="header"> <!-- HEADER -->
<div id="logo"> <!-- My Logo -->
<h1>My web site is cool</h1>
<p id="slogan">
My web site is finally online
</p>
</div>
......
OTHER HEADER STUFF
......
</div> <!-- Close header -->
And related to this #header div (and its content) I have the following CSS code:
/* For the image replacement of the logo */
h1 {
background: url(../images/logo.jpg) no-repeat;
text-indent: -9999px;
width: 224px;
height: 71px;
}
h1 a {
display: block;
width: 258px;
height: 64px;
text-decoration: none;
}
So this code put an image instead of the My web site is cool text that is in the tag.
I have some problem to understand the h1 a CSS settings, on the tutorial say that this CSS settings for h1 a:
Turns to block (from inline) the display mode of the link in the header, so I can set the width and height, and the image of the logo is now clickable
This thing is not very clear for me and I have the following doubts:
Have I to convert the a element (that is inline) into a block element to give it the same dimension of the underlying image (logo.jpg)?
Tnx
Andrea
Take this example,
an a element is inline by default, so if you were to do something like
CSS
a {background:red; height:210px; width:200px;}
HTML
test
You will notice that the width and height properties aren't working. Now for this element to be sized at that width, you need to set the element's display property to be either display:block or display:inline-block
JSFiddle Demo Example
HTML:
Without display:inline block, width and height set.
<br><br>
With display:inline block, width and height set.
<br><br>
With display:block, width and height set.
CSS:
a {background:#ccc; height:210px; width:200px;}
.inline-block { display:inline-block; }
.block { display:block; }
If you're linking an image, you don't need to give the a height/width or even a display:block. However, you really shouldn't be putting an image inside an h1 like that. You'd be better off making the a inside the h1 a block (using display:block) and setting the background to the image, then hiding the text. To the user of the site, there's not going to be much difference, but it removes images from your HTML code, makes it easier for screen readers, and is more semantically correct. So your code would be:
a { display: block; font-size:0; background-image:url("logo.png"); height:100; width:100 }
I am developing an html page on Windows platform. I find when the resolution (or size, in pixels) of browser (display) is larger than the page size, the page will be aligned to the left of the browser, and I want to align the page to the center (middle) of the browser when the page size is smaller than browser.
Any ideas how to implement this and how to find the root cause why aligned to left? The html page is big and not convenient to paste html code here.
thanks in advance,
George
First of all, you'll want to wrap your page content in a block (this block will be centered):
<div id="body">
<!-- your page content here -->
</div>
Then you'll want to style it as being centered. Due to a little disparity in how Firefox and IE handle centering a block, you'll have to do 2 things to center this block.
1. Set the body as centering everything (for IE):
body {
text-align: center;
}
2. Set the left and right margins of your interior block as 'auto'; and
3. Since centering text inherits to its child nodes, you want to set it back to left-alignment (unless, you do want all your text to be centered.. blah!):
#body {
margin: 0px auto;
text-align: left;
width: 800px; /* set this width to how wide you want your content to be */
}
Any ideas how to implement this and
http://dorward.me.uk/www/centre/
how to find the root cause why aligned to left?
… because that is the default.
<style>
body
{
width:800px;
margin:auto;
}
</style>
you simply need to add, text-align: center; to your body to cover legacy browsers and add:
text-align: left;
margin: 0 auto;
to your first container div ... this will be centered horizontally in all browsers, no matter how old.