I'm having trouble with tables in Mediaw!iki. When creating a specific table for a home page it works correctly once and is broken the second time. A screenshot is shown below
The code is displayed at the bottom. Does anyone know why the visual box only displays correctly once?
Thank you in advance!
<!-- Lorem ipsum -->
{| id="mp-lower" style="margin:4px 0 0 0; width:100%; background:none; border-spacing: 0px;"
| class="MainPageBG" style="width:100%; border:1px solid #ddcef2; background:#faf5ff; vertical-align:top; color:#000;" |
{| id="mp-bottom" style="vertical-align:top; background:#faf5ff; color:#000; width:33%"
| style="padding:2px;" | <h2 id="mp-tfp-h2" style="margin:3px; background:#ddcef2; font-size:120%; font-weight:bold; border:1px solid #afa3bf; text-align:center; color:#000; padding:0.2em 0.4em"> [[Lorem ipsum]]
|-
| style="color:#000; padding:2px;" | <div id="mp-tfp"> Lorem ipsum dolor sit amet,</div>
|}
|}
<!-- Lorem ipsum -->
{| id="mp-lower" style="margin:4px 0 0 0; width:100%; background:none; border-spacing: 0px;"
| class="MainPageBG" style="width:100%; border:1px solid #ddcef2; background:#faf5ff; vertical-align:top; color:#000;" |
{| id="mp-bottom" style="vertical-align:top; background:#faf5ff; color:#000; width:33%"
| style="padding:2px;" | <h2 id="mp-tfp-h2" style="margin:3px; background:#ddcef2; font-size:120%; font-weight:bold; border:1px solid #afa3bf; text-align:center; color:#000; padding:0.2em 0.4em"> [[Lorem ipsum]]
|-
| style="color:#000; padding:2px;" | <div id="mp-tfp"> Lorem ipsum dolor sit amet,</div>
|}
|}
fizzisist showed me that the problem isn't Mediawiki but something pertaining to my particular installation.
Thanks
Related
I have a Div1, and Div2 inside Div1.
Div2 has image and variable length text in it, I want to keep the width of Div2 as auto and center it in the Div1.
As described below:
+-------------------------------------------------------------------+
| Div1 |
| +-------+--------------------+ |
| | Image | Some Test Text | <- Div2: Width:auto; |
| +-------+--------------------+ |
| |
+-------------------------------------------------------------------+
I am trying to create it but facing issue to cover the background Div to text and image, actually I want to keep Div height and width as Auto but it is not working as expected:
http://jsfiddle.net/2vhr4nLz/
If I've understood your question correctly, you should use css3 flexbox for this.
.text-and-image-holder {
justify-content: center;
align-items: center;
display: flex;
}
Above css will create the following layout as you can see in working snippet that text and image will be vertically middle aligned with respect to each other:
+---------------------------------------+
| | Lorem ipsum dolor sit |
| | amet, lorem ipsum dolor |
| | sit amet, lorem ipsum |
| <img> | dolor sit amet, lorem |
| | ipsum dolor sit amet, |
| | lorem ipsum dolor sit |
| | amet, lorem ipsum |
+---------------------------------------+
.image-style {
margin-right: 20px;
}
.text-style {
font-size: 15px;
}
.text-and-image-holder {
justify-content: center;
align-items: center;
margin-bottom: 20px;
background: red;
padding: 20px;
display: flex;
}
<div class="text-and-image-holder">
<img src="http://placehold.it/30x30" class="image-style">
<div class="text-style">Vertically Center Text Here</div>
</div>
<div class="text-and-image-holder">
<img src="http://placehold.it/30x30" class="image-style">
<div class="text-style">Very long text Vertically Center Here and lorem ipsum dolor sit amet.</div>
</div>
If I have understood, you can wrap all your content into a and then add this to your css
.wrapper {width:100%; text-align: center }
For Auto width: You can use CSS3 Flexbox.
For fixed width:
I modified your code and following are the changes;
HTML:
<div class="div1">
<div class="div2">
<img src="#">
<span >Vertically Center Text Here</span>
</div>
</div>
CSS:
.div1 {
background: red;
padding: 20px;
width: 100%;
}
.div2 {
background: white;
margin: auto;
width: 350px;
}
I want to make a menu on top of a div, so basically the text is on top of it (see example).
I want to have the text of the menu inside that same div, so the html is something like this:
<div id="text">
<div id="menu">Portfolio | About us</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
Thanks in advance.
Position the div relatively (position: relative;), and then the text absolutely (position:absolute;). Make sure the text is inside an element inside the div, and then set the nested element's top position to a negative number until it is positioned to your liking.
To center it, you will need to mess about with left and right properties.
This JSFiddle just about mimicks your screenshot.
I had to add this to the #menu styling:
margin-bottom: 0;
padding-bottom: 0;
line-height: 1em;
And then this to #text p:
margin-top: 0;
And that did the trick.
Making it all centered was as simple as this:
#text {
width: 500px;
margin: 0 auto;
}
You can use relative/absolute positioning or try something like this
<div id="text">
<div id="menu">Portfolio | About us</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
And in your css:
#text{
text-align:center;
}
#menu{
margin-top:-20px;
}
See http://jsfiddle.net/rVjCB/
HTML:
<div class="menu">
<ul class="top">
<li>Portfolio</li>
<li>About us</li>
</ul>
Text
</div>
CSS:
.menu{
background:#957F00;
max-width:500px;
margin:0 auto;
color:white;
}
.menu>.top{
background:white;
overflow:hidden;
color:black;
}
.menu>.top>li{
float:left;
width:50%;
border-left:3px solid #957F00;
margin-left:-3px;
text-align:center;
}
mistakenly i used this line of code
<style type="text/css">
into my Top_menu.css file (caused by copy and past) and forget to remove it. now when i want to remove all of my code would be crashed!!!
here my Top_menu.css file:
<style type="text/css">
#centeredmenu {
float:left;
width:700px;
background:#fff;
overflow:hidden;
position:relative;
}
#centeredmenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
margin-left:330px;
margin-top:72px;
text-align:center;
}
#centeredmenu ul li {
display:block;
float:left;
list-style:none;
margin:0 10px 0 10px;
padding:0;
position:relative;
}
#centeredmenu ul li a {
display:block;
margin:0 0 0 1px;
padding:20px 10px;
color:#000;
text-decoration:none;
line-height:1.3em;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#centeredmenu ul li a:hover {
background:#369;
background:#212121;
color:#fff;
padding-top:15px;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
color:#fff;
background:#212121;
font-weight:bold;
padding-top:15px;
}
#spread
{
position:relative;
top:128px;
width:955px;
height:340px;
background-color:#212121;
}
here my style.css file:
#charset "utf-8";
/* CSS Document */
#import 'reset.css';
body
{background:#e8e8e8 url(../images/Back.png) top repeat-x;
}
#outer
{
width:955px;
height:1200px;
margin:0 auto;
}
#header
{
background:url(../images/header.png) top no-repeat;
height:143px;
}
#logo h1
{
text-indent:-9999px;
}
#main_content
{
margin-top:128px;
height:400px;
background-color:#ffffff;
}
#left_side {width:550px; height:auto; float:left; }
#left_side h2
{
font-size:30px;
color:#2d5a65;
padding-top:30px;
padding-left:30px;
}
#left_side span
{
font-size:12px;
font-style:italic;
color:#bbbaba;
padding-left:30px;
}
#left_side h4
{
font-size:12px;
font-weight:bold;
color:#6f6f6f;
padding-top:30px;
padding-left:30px;
}
#left_side div
{
font-size:12px;
color:#6f6f6f;
padding-top:30px;
padding-left:30px;
line-height:20px;
}
#left_side a
{
font-size:12px;
color:#6f6f6f;
padding-top:40px;
padding-left:30px;
text-decoration:none;
}
#right_side
{
background-color:#f6f6f6;
width:295px;
height:300px;
border:15px solid #e7e7e7;
float:right;
margin-top:30px;
margin-right:40px;
}
#inside_right{ height:250px; margin:20px 10px 20px 10px; }
#inside_right span
{
font-size:18px; color:#7c7c7c;
}
#inside_right hr{width:200px; color:#dadada; margin-top:20px;}
#inside_right img{padding-top:30px; padding-right:10px; float:left;}
#inside_right div{width:250px; padding-top:25px; line-height:22px; height:150px; font-size:12px;}
#inside_right a{font-size:12px; font-weight:bold; text-decoration:none; color:#6d6d6d; float:right; padding-right:10px;}
/*Above footer*/
#above_footer{height:300px; border-top:10px #5a5a5a solid; border-bottom:10px #666666 solid; background-color:#656565;}
#f_left{width:230px; height:250px; margin-left:20px; margin-top:20px; float:left;}
#f_center{width:230px; height:250px;margin-left:100px; margin-top:20px; float:left; ;}
#f_right{width:230px; height:250px; margin-right:20px; margin-top:20px; float:right; }
.header_footer{font-size:20px; color:#ffffff; font-style:italic; margin-bottom:15px;}
.bold_footer{font-size:11px; color:#ffffff; font-weight:bold; padding-top:10px; clear:left;}
.reg_footer{font-size:11px; color:#FFF; line-height:15px; padding-top:5px; clear:left; }
.footer_line{width:200px; float:left; }
#below_footer{background-color:#1a1a1a; height:50px;}
.footer_color{color:#989898; font-size:11px;}
#copy{ padding:20px; float:left;}
/*footer menu*/
#below_footer ul{float:right; padding:20px;}
#below_footer ul li{float:left; }
#below_footer ul li a{ text-decoration:none; color:#989898; padding-left:2px; padding-right:2px;}
here my html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css/Top_menu.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="outer">
<div id="header">
<div id="logo">
<h1>cleanfolio</h1>
</div><!--End Logo-->
<div id="centeredmenu">
<ul>
<li><a href="#" class="active" >Home</a></li>
<li><a href="#" >portfolio</a></li>
<li><a href="#" >blog</a></li>
<li>About Us</li>
<li>Service</li>
<li>Contact Us</li>
</ul>
</div> <!-- end Center menu-->
<div id="spread">
</div> <!-- End Spread -->
<div id="content">
<div id="main_content">
<div id="left_side">
<h2>Welcome to our company</h2>
<span>Lorem Ipsum is simply dummy text of the printing and typesetting</span>
<h4>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</h4>
<div>
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.<br/><br/>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
</div><!--end div-->
Read More>>
</div><!--End Left_side-->
<div id="right_side">
<div id="inside_right">
<span>Testimonials:</span>
<hr />
<img src="images/unknown.png" alt="unknown"/>
<div>It is a long established fact that a
reader will be distracted by the readable content of a page when looking at its layout. Content here, content here', making it look like readable English."</div><!--End Div-->
-John Smith, webdesigner
</div><!--End Inside right-->
</div><!--End right_side -->
</div> <!--end main_content-->
</div><!--End Content-->
</div><!--End Header-->
<div id="above_footer">
<div id="f_left">
<div class="header_footer">Events < Updates</div>
<hr class="footer_line" />
<div class="bold_footer">
Posted on 20 May 09
</div><!--end div class bold footer-->
<div class="reg_footer">Listuem Names ligula a blandit ornare ligula a quis bibendum elit anten ecm etus blandit
</div><!--End Div with class reg_footer-->
<hr class="footer_line" />
<div class="bold_footer">
Posted on 24 May 09
</div><!--end div with bold footer class-->
<div class="reg_footer">
Nulla elit porttitor tellus quis bibendum elit ante nec metus.
</div><!--end reg footer class-->
<hr class="footer_line" />
</div><!--End Footer left-->
<div id="f_center">
<div class="header_footer">What We Do</div><!--End header footer-->
<hr class="footer_line" />
<div class="bold_footer">
It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged.
</div><!--End bold footered class-->
<br />
<div class="reg_footer">
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem
Ipsum.
</div><!--End reg footer-->
</div><!--End Footer center-->
<div id="f_right">
<div class="header_footer">Get in touch!</div><!--End header_footer class-->
<hr class="footer_line" />
<div class="reg_footer">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div><!--End reg_footer-->
<hr class="footer_line" />
<div class="bold_footer">+123456789</div><!--End bold one-->
<div class="bold_footer">+123456789</div><!--End bold one-->
<div class="bold_footer">company#domainname.com</div><!--End bold one-->
</div><!--End Footer right-->
</div><!--End Above footer-->
<div id="below_footer">
<div id="copy" class="footer_color">© Copyright 2009. Your Site Name Dot Com.</div><!--End copy -->
<ul class="footer_color">
<li>All Rights Reserved </li>
<li>Home<samp>|</samp></li>
<li>Contact<samp>|</samp></li>
<li>RSS</li>
</ul>
</div><!--End Below footer-->
</div> <!--End outer-->
</body>
</html>
That line should not be in the css file. You should include your css file with <link rel="stylesheet" type="text/css" href="Top_menu.css" /> in your main html file between <head> and </head>.
I have 4 small bodies of text that I'd like to display evenly across the page.
Here's an image of what I have in mind:
Something tells me tables would be the best way to go, but a)I've always been told not to use them and b) because of that, I have no idea how to do so if that is in fact the best route to take.
I'm open to suggestions; any and all help is appreciated.
I believe something like this would work:
CSS:
html, body
{
width: 100%;
padding: 0px;
margin: 0px;
border: none;
}
div.content
{
float: left;
vertical-align: top;
margin: 0px;
padding: 0px;
width: 25%;
}
HTML:
<div class="content">Blah</div><div class="content">blah blah</div>
<div class="content">Blah Blah</div><div class="content">blah blah blah blah</div>
See this jsFiddle
Travis's is good, this version gives you a little more to work with, and will let you dial in the padding between the blocks. The background colors are just in there for you to see how it's working.
CSS:
.testimonials {
border:1px solid black;
}
.testimonial {
float:left;
width:25%;
background-color:#ccc;
}
.testimonial blockqoute {
display:block;
padding:20px;
background-color:yellow;
font-style:italic;
}
.testimonial attr {
display:block;
font-style:normal;
}
.clear {
clear:both;
}
HTML:
<div class="testimonials">
<h3>Client Testimonials</h3>
<div class="testimonial">
<blockqoute>Blah blah...
<attr>John Smith <br/>
boomboom.com</attr>
</blockqoute>
</div>
<div class="testimonial">
<blockqoute>Blah blah...
<attr>John Smith <br/>
boomboom.com</attr>
</blockqoute>
</div>
<div class="testimonial">
<blockqoute>Blah blah...
<attr>John Smith <br/>
boomboom.com</attr>
</blockqoute>
</div>
<div class="testimonial">
<blockqoute>Blah blah...
<attr>John Smith <br/>
boomboom.com</attr>
</blockqoute>
</div>
<div class="clear"></div>
</div>
I would do something like this. Just replace the percentages with pixels if you don't want a liquid layout.
CSS:
* {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
#container {
width: 80%;
margin: 0px auto;
}
#container div {
width: 25%; /* 25% percent of the #container width */
padding: 10px;
float: left
}
HTML:
<div id="container">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
<div>Content 4</div>
</div>
HTML
<div id="content">
<h1>title</h1>
<div class="text_tontent">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="text_tontent">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="text_tontent">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="text_tontent">
<p>Lorem ipsum dolor sit amet</p>
</div>
CSS
'#content {width:100%; overflow:auto; padding:20px 0}<br />
.text_tontent {width:25%; float:left;}<br />
.text_tontent p {padding:0 10px;}<br />'
I've just added one small area on my website which looks like this:
The problem is in the "About me:" section. I need to move text there to look like this:
Can anyone suggest css / html align solution that would position text like in the second example?
Current HTML
<div id="profInfo">
<div id="profImage">
<img src="..." alt="user: ..."/>
</div>
<div id="profDetails">
<ul>
<li><b class="underb" style="color: #7da315;">Name</b><b style="color: #7da315;">:</b> Ilya Knaup </li>
<li><b class="underb" style="color: #1e8bb4;">Country</b><b style="color: #1e8bb4;">:</b> Spain </li>
<li><b class="underb" style="color: #c86c1f;">Stories</b><b style="color: #c86c1f;">:</b></li>
<li><b class="underb" style="color: #af1e83;">About me</b><b style="color: #af1e83;">:</b> Lorem ipsum dummy textum ...</li>
</ul>
</div>
</div>
Current CSS
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
#profInfo {
width: 512px;
margin: 10px 4px 0 3px;
}
#profImage {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
height: 100px;
width: 100px;
padding: 1px;
float: left;
background: #535353;
border: 1px solid #272727;
-khtml--webkit-box-shadow: 0 1px 2px #d6d6d6;
-moz-box-shadow: 0 1px 2px #d6d6d6;
box-shadow: 0 1px 2px #d6d6d6;
}
#profDetails {
float: right;
width: 395px;
line-height: 22px;
}
#profDetails ul {
list-style: none;
font-size: 13px;
}
.underb {
text-decoration: underline;
}
#profImage img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Here is all code together http://jsfiddle.net/8ERvz/7/
You can use float:left (on the “About Me”) and overflow:hidden (on the rest of the text) to achieve the layout you want.
Here’s an implementation with <span> tags and style attributes, just to illustrate what’s going on:
<li>
<span style="float: left;">
<b class="underb" style="color: #af1e83;">About me</b>
<b style="color: #af1e83;">:</b>
</span>
<span style="display:block; overflow:hidden; padding-left:.5em;">
Lorem ipsum dummy textum Lorem ipsum dummy textum Lorem ipsum dummy textum Lorem ipsum dummy textumLorem ipsum dummy textum Lorem ipsum dummy textum Lorem ipsum dummy textum Lorem ipsum dummy textum Lorem ipsum dummy textum
</span>
</li>
http://jsfiddle.net/fpzkx/
My answer to this question used the same technique; reading that might make it a bit clearer.
As crazy as it sounds, you can use a table.
You've got a set of headers with a set of data. Sounds like a table to me.
Update HTML
<div id="profInfo">
<div id="profImage">
<img src="..." alt="user: ..."/>
</div>
<div id="profDetails">
<ul>
<li><b class="underb" style="color: #7da315;">Name</b><b style="color: #7da315;">:</b> Ilya Knaup </li>
<li><b class="underb" style="color: #1e8bb4;">Country</b><b style="color: #1e8bb4;">:</b> Spain </li>
<li><b class="underb" style="color: #c86c1f;">Stories</b><b style="color: #c86c1f;">:</b></li>
<li><div style="float:left; display:block;width:60px;"><b class="underb" style="color: #af1e83;">About me</b>: </div> <p style="display:block;width:300px;padding-left:60px;">Lorem ipsum dummy textum ... Lorem ipsum dummy textum ... Lorem ipsum dummy textum ... Lorem ipsum dummy textum ...<p></li>
</ul>
</div>
</div>
Of course it would be better to store these updates in your stylesheet as opposed to inline styles but this will show you what needs to be done.