so recently I had opened up my forum and am currently configuring the theme, but have ran into some trouble. On posts, there are stats displayed to the right, but they're too close together and display obscurely. After awhile of research such as positioning, containers, etc., I still haven't been able to find my answer, and still desperately need help. Here's a screenshot of what I'm talking about:
Screenshot 1
This is the CSS for the statistics:
.post .post_author div.author_statistics {
float: right;
font-size: 11px;
padding: 3px 10px 3px 5px;
padding-left: 50px;
color: #666;
line-height: 1.3
}
If you need any extra information, let me know and I can provide it. Thanks in advance for any help!
EDIT: Here's a part of the HTML for the stats.
<span style="font-size:13px;">
<div align="center">
<div class="float_left">Posts:</div> <div class="float_right"> 13</div><br>
<div class="float_left">Threads:</div> <div class="float_right"> 1</div><br>
<div class="float_left">Joined:</div> <div class="float_right"> Oct 2015</div>
<br><div class="float_left">Reputation:</div> <div class="float_right">
<strong class="reputation_positive">2</strong>
<!-- end: postbit_reputation_formatted_link --></div>
<!-- end: postbit_reputation --></div>
<!-- end: postbit_author_user -->
</span>
Try this one
.post .post_author div.author_statistics {
margin-right: 50px;
float: right;
font-size: 11px;
padding: 3px 10px 3px 5px;
padding-left: 50px;
color: #666;
line-height: 1.3;
}
You just need to increase or decrease the margin-right value
Your question is quite confusing as I thought this theme is quite normal in every single forum I had joined.
But you may try this code:
.post .post_author div.author_statistics .float_left {
float: left;
width: 80px;
text-align: left;
}
To achive this:
Hope it helps!
Related
I'm currently working on an old website that was created with some old crappy WYSIWYG editor. I'm new to web-dev and still trying to get my head around positioning elements properly. My current issue is, from what I have read, using absolute positioning is BAD, but how would you change this?
So this is the old code:
<div id="wb_Text1"
style="margin:0;
padding:0;
position:absolute;
left:187px;
top:24px;
width:83px;
height:147px;
text-align:left;
z-index:1;
border:0px #C0C0C0 solid;
overflow-y:hidden;
background-color:transparent;
">
<div style="font-family:'.Helvetica Neue DeskInterface';font-size:15px;color:#000000;">
<div style="text-align:left">
<span style="font-family:Arial;font-size:43px;color:#FFFFFF;">
<strong>W</strong>
</span>
</div>
<div style="text-align:left">
<span style="font-family:Arial;font-size:43px;color:#FFFFFF;">
<strong>A</strong>
</span>
</div>
<div style="text-align:left">
<span style="font-family:Arial;font-size:43px;color:#FFFFFF;">
<strong>C</strong>
</span>
</div>
</div>
And what I have come up with to replace it is:
HTML
<div class="logo-ul">
<ul>
<li>W</li>
<li>A</li>
<li>C</li>
</ul>
</div>
CSS
.logo-ul {
list-style-type: none;
color: white;
font-size: 2em;
z-index:24;
float: right;
margin-right: 80%;
}
Which looks fine until you collapse the window and it falls apart :( lol.
You can see what I'm doing here http://media.wacmotorcycles.co.uk/
How should I be writing this please?
Thanks.
Try changing #logo to
#logo {
max-width: 165px;
max-height: 171px;
margin: 0.75em 0;
float: left;
}
And, .logo-ul to
.logo-ul {
list-style-type: none;
color: white;
font-size: 2em;
z-index: 24;
float: left;
}
There is nothing inherently wrong with absolute positioning. If used incorrectly, it can have unexpected results when working with responsive layouts.
In your specific case, the W A C might be better implemented as part of the logo image itself rather than text. It's not offering any semantic or SEO benefit to include the letters in a list. Short of that, this is one way to implement what I think you're after:
.logo {
height: 6rem;
padding-left: 50px;
}
.logo-letter {
display: block;
height: 2rem;
}
<div class="logo">
<span class="logo-letter">W</span>
<span class="logo-letter">A</span>
<span class="logo-letter">C</span>
</div>
I'm taking the Free Code Camp course thing and the first project is to create a tribute page to whoever. Mine is on J Dilla, my favorite hip hop producer. God rest his soul. Anyways I'm trying to use a bootstrap thumbnail around a picture of him, with the text/caption also inside the thumbnail. My problem is that it messes up the centering and aligns the thumbnail to the left and I have no idea how to fix it. Here's the relevant code:
<style>
.cool-text {
font-family: Lobster;
font-size: 20px;
}
.image-centering {
display: block;
margin-left: auto;
margin-right: auto;
}
.vertical-centering {
margin-top: auto;
margin-bottom: auto;
}
.gray-background {
background-color: lightgray;
margin: 20px 100px 20px 100px;
border-radius: 5px;
}
.white-background {
background-color: white;
margin: 10px 560px 10px 10px;
}
</style>
<div class="gray-background">
<br>
<h1 class="cool-text text-center">J Dilla</h1>
<h2 class="text-center"><i>The one and only</i></h2>
<br>
<div class="span8 offset2">
<div class="img-thumbnail thumbnails">
<img class="image-centering" src="http://media.lessthan3.com/wp-content/uploads/2014/02/j-dilla-lessthan3.jpg" alt="The man himself."</img>
<p class="text-center">Dilla working on something ill, I presume</p>
</div>
</div>
<br>
</div>
</div>
Also if there's anything glaringly terrible about my code, I'd love some input on how to reformat it. This is my first time asking a question on stack overflow so forgive me if this is the wrong way to do so.
I want to customize the appearance of questions when they are in answer posts in my theme, which is based on the Minimal theme. I tried adding things from my previous template, which had asks formatted the way I want, but it didn't work.
Here's what I added:
A div with classes "question" and "bubble" around the {Question} element:
<div class="question bubble">
{Question}
</div>
CSS for the bubble:
.bubble {
color: #9f6f6f;
font-size: 13px;
line-height: 20px;
background: #f5f5f5;
border: 1px solid #d5d5d5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 8px 12px;
position: relative;
display: block;
}
This looked right when I open just that HTML/CSS as a snippet, but it didn't seem to have any effect at all on the theme. Nothing changed when I added it.
Furthermore, I wasn't able to find a {Question} hiding anywhere already in the Minimal theme.
How can I customize my {Question} display?
{Question} is one of the blocks that doesn't work unless it's inside a top-level block, in this case {block:Answer}. There's an example on http://www.tumblr.com/docs/en/custom_themes:
{block:Answer}
<div class="question">
<div class="asker">{Asker}</div>
<div class="asker-question">{Question}</div>
<img class="asker-avatar" src="{AskerPortraitURL-96}" alt="">
</div>
{block:Answerer}
<div class="answer">
<div class="answerer">{Answerer}</div>
<div class="answerer-answer">{Answer}</div>
<img class="answerer-avatar" src="{AnswererPortraitURL-96}" alt="">
</div>
{/block:Answerer}
<div class="replies">
{Replies}
</div>
{/block:Answer}
...however this didn't do exactly what I wanted either. What I ended up doing was putting the following markup into my theme right after the line containing {/block:Text}:
{block:Answer}
<div class="bubble">
<div class="asker">{Asker}</div> asked: <div class="question">{Question}</div>
</div>
<div class="answer">
{Answer}
</div>
{/block:Answer}
and then adding this CSS at the bottom, just before the line containing {CustomCSS}:
/* Answer Posts */
.bubble {
color: #6f6f6f;
font-size: 13px;
line-height: 20px;
background: #f5f5f5;
border: 1px solid #d5d5d5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 8px 12px;
position: relative;
display: block;
margin-bottom: 1em;
}
.asker {
display:inline;
font-weight:bold;
}
.question {
display:inline;
}
and for good measure I added {block:Answer}post-type-answer{/block:Answer} after {block:Audio}post-type-audio{/block:Audio} and {block:Answer}Answer{/block:Answer} after the audio block end as well, in the class name assignments for {block:Posts}.
and this gave me what I wanted:
Here is my code:
<div class="contact">
<p class="size25">TOP 1% Realtors</p>
<p class="size16">32 years in real estate</p>
<p class="size16">Closed one home every 10 days in 2011 - 2012</p>
<p class="size16">Specializing in the 24/680 Corridor</p>
<p class="size16">example#aol.com</p>
<p class="size25 phone">(510) 555.5555</p>
</div>
CSS:
.contact p{
float:right;
}
.contact{
color: #fff;
display: block;
width: 421px;
height: 114px;
position: absolute;
margin-top: -96px;
margin-left: 519px;
font-family: 'Marcellus', serif;
font-weight:300;
line-height: 12px;
}
.contact a:link {
text-decoration:none;
color: #AC872F;
}
.phone{color: #AC872F}
.size25{font-size:25px}
.size16{font-size:16px}
.size14{font-size:14px}
.size11{font-size:11px}
.size10{font-size:10px}
Image: http://imgur.com/LntF419
I want the text on the right to be aligned right and each on it's own line. Right now as you can see the email is not. This is also my first time using twitter bootstrap so if there is something that can help me please let me know.
Add clear: both to the .contact p. The clear attribute removes other elements in line with a floating element.
Demo: http://jsfiddle.net/q4YdC/ (I've removed the div margin for visibility reasons)
At the top of a page I've got two divs, one floated to the left and one to the right. I can place text with a border between them, however, I now need to stack two such areas of text between them.
Here's a Fiddle illustrating my problem: http://jsfiddle.net/TcRxp/
I need the orange box under the green box, with each center aligned with the other. The "legend" (floated to the right) used to be at the same level but is shifted down now.
I tried adding another table to the mix but that didn't help.
Excuse the markup - it's not real slick, I know. A few people have touched this over time and none of us are gurus at this.
And yes, I have lobbied for a designer to be added to the team but it hasn't happened yet.
Thanks,
Paul
UPDATE: Incorporating #Jeremy B's suggestion
Does it have to be via CSS changes? When dealing with scenarios like this, you need to be careful of the order in which the HTML elements are defined.
Look at the modification here: http://jsfiddle.net/TcRxp/8/
I was able to acheive what you needed by changing the order of the three DIVs and using the CSS suggesion from #Jeremy B
Essentially, the logic for the layout is
Draw the float-right content
Draw the float-left content
Draw the content in the middle (as it will now render to the right of the float-left content.
First make your top span a block element to stack them:
<span class="color status active bold" style="display:block">Status:</span>
then float the middle div left as well:
add float:left to #headmiddle in your css
It's always going to be difficult to get the desired results when you're combining CSS and tables-for-layout.
I would suggest simplifying your HTML:
<div id="headleft">a little search form here</div>
<div id="headmiddle">
<div class="active"><strong>Status:</strong> Active</div>
<div class="search">Search results displayed</div>
</div>
<div id="headright">
<dl>
<dt>Legend:</dt>
<dd>Status numero uno</dd>
<dd>Status two</dd>
</dl>
</div>
and your CSS:
div { padding: 2px; }
strong { font-weight: bold; }
#headleft { float: left; font-size: 0.8em; }
#headmiddle { float: left; font-size: 0.8em; }
#headmiddle div { border: 1px solid #000; margin-bottom: 3px; }
.search { background: orange; }
.active { background: #8ed200; }
#headright { float: right; font-size: 0.8em; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }
The result is semantically correct HTML, easier to read and therefore easier to modify in the future. Supporting fiddle.
If you need to do it with CSS, see my changes: Fiddle
I added the following:
#headmiddle span.status { display: block }
This will cause your spans to "stack".
I got it by putting together many different sources. Alex Coles' solution was closest right off the bat but the middle wasn't centered. It was much cleaner than my mess too. I started with the code from this post:
<style type="text/css">
.leftit {
float: left;
}
.rightit {
float: right;
}
.centerit {
width: 30%;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.centerpage {
width: 80%;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div class="centerpage">
<div class="leftit">Hello Left</div>
<div class="rightit">Hello Right</div>
<div class="centerit">Hello Middle</div>
</div>
(fiddle for above)
I took the elements Alex cleaned up which got me even closer to my goal, but the center color blocks were way too wide. From this question I learned about "max-width", which ended up being the final piece I needed...or so I thought.
Edit: max-width doesn't work in IE7 quirks mode (which I have to support) so from this page I learned how to tweak my css to work in IE7 quirks mode, IE8, and FF.
The final code (fiddle):
.leftit {
float: left;
font-size: 0.8em;
}
.rightit {
float: right;
font-size: 0.8em;
}
.centerit {
width:220px;
margin-right: auto;
margin-left: auto;
font-size: 0.8em;
}
#headmiddle div {
border: 1px solid #000;
margin-bottom: 3px;
}
.centerpage {
margin-right: auto;
margin-left: auto;
text-align: center;
}
strong { font-weight: bold; }
.search { background: orange; }
.active { background: #8ed200; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }
<div class="centerpage">
<div class="leftit">a little search form here</div>
<div class="rightit">
<dl>
<dt>Legend:</dt>
<dd>Status numero uno</dd>
<dd>Status two</dd>
</dl>
</div>
<div class="centerit" id="headmiddle">
<div class="active"><strong>Status:</strong>
Active</div>
<div class="search">Search results displayed</div>
</div>
</div>
Thanks to all the great answers - I learned a lot from this question.
Paul