/    Sign up×
Community /Pin to ProfileBookmark

Space? (=margin?) between english – and spanish version?

Copy linkTweet thisAlerts:
Feb 27.2012

As you can see on my website ([url]www.eduardlid.net[/url]), between the 2 images there´s text (english and spanish)! I want space? between the english – and spanish words! I know   on the html sheet, but there must be a way to do this on the css sheet! But how?

to post a comment
HTML

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@TheAliveWinnerFeb 27.2012 — First I would like to [B][COLOR="Green"]APPRECIATE [/COLOR][/B]you to have thought about [I][COLOR="Navy"]CSS [/COLOR][/I]to handle this situation!

[I]Not many would do that![/I]

[B]The next post is your solution![/B]
Copy linkTweet thisAlerts:
@TheAliveWinnerFeb 27.2012 — [I][COLOR="Green"]You can use:[/COLOR][/I]
[code=html]<style>
p.translator{
white-space: pre; /* used to preserve white spaces */
}
</style>

<p class="translator">translator traductor</p>[/code]
[I][COLOR="Red"]Instead of:[/COLOR][/I]
[code=html]<p class="translator">translator&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;traductor</p>[/code]
[COLOR="DarkGreen"][B]I hope you understand![/B][/COLOR]
Copy linkTweet thisAlerts:
@TheAliveWinnerFeb 27.2012 — The [I][COLOR="Navy"]pre [/COLOR][/I]value of the [I][COLOR="Navy"]white-space[/COLOR][/I] property makes the element act much like a [COLOR="Navy"][I]<pre>[/I][/COLOR] [I]tag [/I]and [COLOR="DarkGreen"]preserves all white space[/COLOR]!
Copy linkTweet thisAlerts:
@spufiFeb 27.2012 — Should be two unordered list with the CSS aligning/positioning the lists to create the needed spacing. Code will come later if I get the time.
Copy linkTweet thisAlerts:
@asaauthorFeb 27.2012 — [I][COLOR="Green"]You can use:[/COLOR][/I]
[code=html]<style>
p.translator{
white-space: pre; /* used to preserve white spaces */
}
</style>

<p class="translator">translator traductor</p>[/code]
[I][COLOR="Red"]Instead of:[/COLOR][/I]
[code=html]<p class="translator">translator&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;traductor</p>[/code]
[COLOR="DarkGreen"][B]I hope you understand![/B][/COLOR][/QUOTE]

I´ve tried it, but don´t understand it! Do I´ve to write a number before pre?
Copy linkTweet thisAlerts:
@TheAliveWinnerFeb 27.2012 — [B]No! You won't have to specify any number![/B]

[I]It will depend upon your code.[/I]

If you give '[COLOR="Red"]10[/COLOR]' spaces in the code, e.g.
[code=html]<p>start end</p>[/code]
and assign the style as:
[code=html]<style>
p{
white-space: pre;
}
</style>
[/code]
They will be preserved and work as same as:
[code=html]<p>start&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end</p>[/code]
Copy linkTweet thisAlerts:
@TheAliveWinnerFeb 27.2012 — You can also use "[B]unordered lists[/B]" to better handle the presentation/look using [I]CSS[/I]!

[B][COLOR="Red"]HOW???[/COLOR][/B]

[B][COLOR="Green"]SEE>>>[/COLOR][/B]

[code=html]
<!doctype html>
<html>
<head>
<style>
ul li{
list-style: none;
}
ul#left{
float: left;
position: relative;
}
ul#right{
float: left;
position: relative;
}
</style>
</head>

<body>
<ul id="left">
<li>webdesign</li>
<li>database</li>
<li>translator</li>
<li>spanish</li>
</ul>

<ul id="right">
<li>dise&#241;o sitios web</li>
<li>base de datos</li>
<li>traductor</li>
<li>germaningl&#233;s alem&#225;n</li>
</ul>
</body>
</html>
[/code]

[B][COLOR="Green"]Liked it?[/COLOR][/B]

[COLOR="Red"][B][I]Need help?[/I][/B][/COLOR]

[B][COLOR="Green"]Ask...[/COLOR][/B]
Copy linkTweet thisAlerts:
@asaauthorFeb 28.2012 — You can also use "[B]unordered lists[/B]" to better handle the presentation/look using [I]CSS[/I]!

[B][COLOR="Red"]HOW???[/COLOR][/B]

[B][COLOR="Green"]SEE>>>[/COLOR][/B]

[code=html]
<!doctype html>
<html>
<head>
<style>
ul li{
list-style: none;
}
ul#left{
float: left;
position: relative;
}
ul#right{
float: left;
position: relative;
}
</style>
</head>

<body>
<ul id="left">
<li>webdesign</li>
<li>database</li>
<li>translator</li>
<li>spanish</li>
</ul>

<ul id="right">
<li>diseño sitios web</li>
<li>base de datos</li>
<li>traductor</li>
<li>germaninglés alemán</li>
</ul>
</body>
</html>
[/code]

[B][COLOR="Green"]Liked it?[/COLOR][/B]

[COLOR="Red"][B][I]Need help?[/I][/B][/COLOR]

[B][COLOR="Green"]Ask...[/COLOR][/B][/QUOTE]

I like it very much! However, I´ve an external css stylesheet. Therefore, how?
Copy linkTweet thisAlerts:
@spufiFeb 28.2012 — <i>
</i>ul li{
list-style: none;
}
ul#left{
float: left;
position: relative;
}
ul#right{
float: left;
position: relative;
}


Goes into your external CSS file. FYI, that was a painfully easy question to answer and you should have been able to figure it out yourself.
×

Success!

Help @asa spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...