I know that "how to center stuff" questions are kinda annoying and boring, but anyway ...
I'm trying to get one word ("Impressum") to appear perfectly centered in the footer of my wordpress page by putting something like this in the footer.php:
<p style="float:left">Impressum</p>
The problem is, on the left side of the same line is the copyright notice (floated to the left), on the right side is the theme author credit (floated to the right). I've tried different things to get the word centered (in relation to the width of the page!), but the floating to the left that I need to get my word in the same line as the other stuff screws with the position ...
Here's a fiddle:
http://jsfiddle.net/GinSan/2t7e3zeq/
Note that most of this is dynamically generated by the theme and I don't want to touch it. Please try to help me by only altering line 3 (i.e. without rebuilding the whole footer ...). Also, though I used a fixed width of 1100px for testing purposes, it should be responsive and stay in the center regardless of the width of the page (down to 640px).
Thanks!
Just put your "impress" paragraph at the and of the footer and replace float:left with text-align:center. Here is updated fiddle
in the jsfiddle this run, in your page you might position: relative for the first div
<div style="width:1100px">
<p style="float:left">© 2014 foo</p>
<p style="position: absolute;text-align: center;width: 100%;">Impressum</p>
<p style="float:right;text-align:right">Powered by Theme</a></p>
</div>
Related
I am trying to horizontally align 3 columns (Bootstrap) that have variable heights depending on the size of the view port. As seen on the first picture, everything is centered and aligned on large screens.
When the viewport becomes smaller, the paragraph's height changes and the alignment is lost. I would like to keep the headings (blue), paragraphs, and buttons aligned.
My inital thought was to create three rows for the three different types of elements. Unfortunately I will not be able to do that since I want to keep the border in the middle column.
What would be a correct way of keeping alignment of these three columns regardless of the viewport size?
I've never really seen a perfect answer to this, thats not with javascript, I can't remember the exact code, however, last time i did it, i placed the text in a nested section, each boxes text section had the same class, and i assigned a min-height to that class that was long enough that it fitted the longest piece of text in, then place the button underneath that section.
If you put your code in a JSFiddle i can help you more, however,
it should looks something like this, layout wise,
<div class="four columns">
<img></img>
<div class="text"> this will have a min height
</div>
<input>button here</input>
</div>
I hope this helps, i know it doesn't seem very clear, if you have a live version or a JSfiddle i'm more than happy to help further.
as for the text, you're very limited, there is some very good jquery scripts, just look through http://www.unheap.com
and just have general play with text sizes
Assuming they are in an inline containe vertical-align:middle;
I'm trying to get my head around layout using CSS. As usual there seems to be more than one way to do things, but I have come up with a way of positioning things on my test webpage which works as I'd like, apart from getting some buttons in the correct place!
If you'll excuse my crude Paint layout diagram below, could you please look at how I've arranged the different parts, and then advise on how to position the buttons where they are shown?
The whole blue section is a wrapper to keep everything in, and has a
min and max width.
Nav bar - Just displayed as a block.
The main image is just max-width 100%, and the quote is positioned
inside this using absolute positioning relative to this image (so it
moves with the image)
Description 1 and 2 are floated left, both with a determined width
and margin (as a percentage) so they dont overlap and they dont
exceed the width of the screen.
My issue is with the buttons, shown in red. How can I get these where they are shown? If I float them as per the two descriptions, the buttons appear too low down (ie below the second description as this is further down the page).
I've tried an absolute position, but this seems a bit clunky as the only container I can refer it to is the entire wrapper, and it also seems a bit 'trial and error'y to get the position exactly right. Can I do an absolute position relative to the first description maybe? All suggestions/solutions welcome!
** Additional information **
Screenshot of the webpage layout after replicating the answer given:
Below is the HTML:
<div class="ib50">
<div id="desc1">
<h2>Welcome to Toms Properties</h2>
<p>There is a second leg to come at Old Trafford - on Wednesday 22 January - but who will the winners of tonight's tie face at Wembley?It will be Manchester City or West Ham, with the first leg of that one taking place at the Etihad tomorrow night.</p>
<p>Are we anticipating a Manchester derby final?</p>
</div>
<div id="buttons"><button>Ohai there!</button></div>
</div><div class="ib50">
<div id="desc2">
<h2>Site Navigation Tips</h2>
<p><strong>Charles in Golders Green, via text: </strong>I'm very much a Moyes supporter, but what I can't understand are his claims that we deserved to win or get something out of the Swansea and, to a lesser extent, the Spurs game. Regardless of new signings, now is the time Moyes must earn his money by rallying the side. Two results before Chelsea away in a fortnight are a must. </p>
</div>
</div>
And below is the CSS:
.ib50 {
display: inline-block;
width: 50%;
}
4/Description 1 and 2 are floated left, both with a determined width and margin (as a percentage) so they dont overlap and they dont exceed the width of the screen.
This is a very wrong way to go about it. Instead, try something like this:
<div class="ib50">
<div>Description 1</div>
<div id="buttons"><button>Ohai there!</button></div>
</div><div class="ib50">
<!-- Note that it is important to have no space between tags there -->
<div>Description 2</div>
</div>
Now apply this CSS:
.ib50 {
display:inline-block;
width:50%;
}
You should be able to figure out the rest from here :)
I'd like to horizontally align (for whatever screen resolution) the 2 main blocks.
One has a float:left.
If I set margin-left:auto to .site (main content block, at the right), it gets horizontally aligned. The problem is that I don't know how to have the sidebar (the block at the left) aligned too. It's difficult because I need to be sure that the menu gets perfectly "attached" to the content block (so I can't use position:relative;left:XXpx because it changes on different resolutions).
Any ideas? :)
EDIT: If possible, solutions that work with IE 7-8 too (unfortunately) :D
I might be missing something here, but you just want to get 2 block elements and make them center-aligned horizontally?
Just wrap them in another div and align that wrapper div with margin: 0 auto.
Check this link.
<div id="#wrapper">
<div id="sidebar">Sidebar</div>
<div id="content">Content</div>
</div>
EDIT:
Of course that you have to float the Content div as well (and not only the Sidebar)
I think this may sound pretty simple, but still I can not get it to work.
My design has different icons of same size and height and I need to display them one below another and at the same time I need to give a small description about the icon on the right side for every icon.
The text for every icon on the right side consists of two lines, the first line in bold(header) and the second line normal(description). The padding and margin is my call. But I need to display them in that way in my content.
you can simply left align your image and then devide 2 lines of your text with line break
<img src="image.jpg" style="float:left;" />
<strong>Header</strong><br />
<span>description</span>
this fiddle should set you in the right direction.
It basically floats both the <img> and <p>
Its not a finished artical, but it should point you in the right direction.
Check out this fiddle
Basically there is a container div with an unordered list inside it, each list item has a background image to the left and text to the right, no floats are used.
I'm trying to follow CSS How to set div height 100% minus nPx but for some reason it is not working.
I'm new to web development, so I apologize if I am doing everything in the most horrible way imaginable.
Here is the page: http://glados.cc/chat/layout.htm
The sidebar should be at the right, not sure what I'm doing wrong as I'm following the stackoverflow question I linked to at the top.
The text does wrap if it is too long, which is good! But the height that is taken doesn't increase, which makes it overlap the next line.
Also there are no vertical scroll bars (unlike the stackoverflow answer I linked) when the content gets too long..
Thank you!
The scroll bars can only appear if there is a height or maximum height set. If that is not the case, they simply expand.
Add something like height: 300px;
As for the wrapping of the chat text. This text is positioned absolute, so it is taken out of the flow of the document and cannot push other elements lower. You maybe want to consider using margin-left instead of position:absolute and left on .chatText.
And, as DrStrangeLove pointed out, your sidebar is missing the absolute positioning.
Here is an example:
http://jsfiddle.net/3YrZT/1/
try position:absolute for sidebar and middlePart