Форум

Data.BG Форуми: CSS да е на един ред - Data.BG Форуми

Прехвърляне към съдържание

Страница 1 от 1
  • Вие не можете да започнете нова тема
  • Вие не може да отговаряте на тази тема

CSS да е на един ред

#1
Потребителят е неактивен   petarcheto 

  • Група: Потребители
  • Мнения: 793
  • Регистриран: 18-December 06
  • Репутация: 27
  • Пол:Мъж
  • Интереси:motori , girls
Едно даскалчи ми даде къде да си сложа сайт и сига прая сайтчи, ама като пробвах css и нещата станаха на 3 реда. Добре си бях с табличката, ама тя не искаше да се центрира. Затуй си спомних какво съм правил на младини и пробвах с вече споменатият css, ама 3 думи станаха на 3 реда. Ето кода:
p {
			font-family: Arial, Helvetica, sans-serif;
			font-size: 14px;
			margin: 2px 0px;
			}
			p.center { text-align: center; font-size: 200%;
					 }
			p.left { text-align: left; font-size: 150%;
					 } 
			p.right { text-align: right; font-size: 150%;
					 }-->
  </style>
  <script type="text/javascript"> 
	function right(e) { if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)) return false; else if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 2 || event.button == 3)) { alert("All copyrights on the graphics in this website are owned by Petar."); return false; } return true; } document.onmousedown=right; if (document.layers) window.captureEvents(Event.MOUSEDOWN); window.onmousedown=right; 
  </SCRIPT>
 </head>
 <body>
 <p class="center">Дневник</p><br>

 <p class="left">Гладни</p><p class="center">действащи</p><p class="right">лица:</p><br>





И тоя скрипт да не се натиска дясно копче вече не работи ;( Някой има ли подобен, ама работещ?


0

#2
Потребителят е неактивен   NSB0P 

  • Група: Потребители
  • Мнения: 138
  • Регистриран: 06-October 11
  • Репутация: 3
  • Пол:Мъж
  • Град:София
Такак.. :) ще можели да ми кажеш какво точно трябва да се направи по този код и какво не му работи :)

а това какво ще рече :emote_wacko:

Цитат

И тоя скрипт да не се натиска дясно копче вече не работи

Транскрипция на абривиатурата НСБОП:
Никакъв Софтуер Безплатно за Обикновените Потребители :D
0

#3
Потребителят е неактивен   petarcheto 

  • Група: Потребители
  • Мнения: 793
  • Регистриран: 18-December 06
  • Репутация: 27
  • Пол:Мъж
  • Интереси:motori , girls
Искам "Гладни действащи лица" да е на един ред, защото в момента е на три последователни реда.


<script type="text/javascript"> 
function right(e) { if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)) return false; else if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 2 || event.button == 3)) { alert("All copyrights on the graphics in this website are owned by PeTaRcHeTo."); return false; } return true; } document.onmousedown=right; if (document.layers) window.captureEvents(Event.MOUSEDOWN); window.onmousedown=right; 
	</SCRIPT>






0

#4
Потребителят е неактивен   NSB0P 

  • Група: Потребители
  • Мнения: 138
  • Регистриран: 06-October 11
  • Репутация: 3
  • Пол:Мъж
  • Град:София

Преглед на мнениеpetarcheto, на 07.11.16 - 19:37, каза:

Искам "Гладни действащи лица" да е на един ред, защото в момента е на три последователни реда.


<script type="text/javascript"> 
function right(e) { if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)) return false; else if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 2 || event.button == 3)) { alert("All copyrights on the graphics in this website are owned by PeTaRcHeTo."); return false; } return true; } document.onmousedown=right; if (document.layers) window.captureEvents(Event.MOUSEDOWN); window.onmousedown=right; 
	</SCRIPT>





Ето едно бързо решение със функция на Javascript

<!DOCTYPE html>
<html>
<body>
  <head>
  <p>Дневник</p>
  <p id="demo"></p>
<script>
(function () {
    document.getElementById("demo").innerHTML = "Главни действащи лица";
})();
</script>
 </head>
 <body>

Мнението беше редактирано от NSB0P: 08.11.16 - 00:09

Транскрипция на абривиатурата НСБОП:
Никакъв Софтуер Безплатно за Обикновените Потребители :D
0

#5
Потребителят е неактивен   petarcheto 

  • Група: Потребители
  • Мнения: 793
  • Регистриран: 18-December 06
  • Репутация: 27
  • Пол:Мъж
  • Интереси:motori , girls
Може ли да си редактираш сорса с малко повече внимание, че досега не съм виждал
head
преди
body
. Може ли да предположа, че само скрипта ще е в
head
, а ще се вика някак от тялото?




Не знам дали сте разбрали, но искам ГлаДни да е подравнена вляво дума, действащи да е в средата, а лица вдясно.

Под тях също ще подреждам по три "думи" на ред. Засега най-добре ми върви с таблица.


Мнението беше редактирано от petarcheto: 08.11.16 - 00:24

0

#6
Потребителят е неактивен   NSB0P 

  • Група: Потребители
  • Мнения: 138
  • Регистриран: 06-October 11
  • Репутация: 3
  • Пол:Мъж
  • Град:София
Ето то друг пример който може да добавяш колкото реда си пожелаеш във JS и те винаги ще са на един ред, може да си вкараш и css код който да си до украсиш текстовете както си пожелаеш ;)

<!DOCTYPE html>
<html>
<body>

<p>Дневник</p>

<p id="demo"></p>

<script>
var myObject = {
    demo1:"Гладни",
    demo2: "Действащи",
    demo3: "Лица",
    ime: function() {
        return this.demo1 + " " + this.demo2+ " " + this.demo3;
    }
}
document.getElementById("demo").innerHTML = myObject.ime();
</script>

</body>
</html>



А що се отнася до head-a и body-то просто вашият код беше написан по този начин, аз това не съм го променял (за което приемам грешката) просто променях javascript-ta и не бях видял кода надолу..

Мнението беше редактирано от NSB0P: 08.11.16 - 01:16

Транскрипция на абривиатурата НСБОП:
Никакъв Софтуер Безплатно за Обикновените Потребители :D
0

#7
Потребителят е неактивен   sandh 

  • Група: Потребители
  • Мнения: 8748
  • Регистриран: 11-August 04
  • Репутация: 120
  • Пол:Мъж
  • Град:София
NSBOP - javascript май е малко излишен.

Честно казано - това ми звучи точно като таблична информация. Мисля, че спокойно можеш да ползваш таблица. Ако държиш да не е таблица - трябва да я наподобиш някак. Нещо подобно например:
<!DOCTYPE html>

<html>
	<head>
		<title></title>
		<meta charset="utf-8" />
		<style>
			p.papa-element { text-align: center; }
			span.right { float: right; }
			span.left { float: left; }
		</style>
	</head>

	<body>
		<p class="papa-element">
			<span class="left">Главни</span> действащи <span class="right">лица</span>
			<br>
			<span class="left">Други</span> три <span class="right">думи</span>
			<br>
			<span class="left">И</span> така <span class="right">нататък</span>
		</p>
	</body>
</html>


Малко е досадно да вмъкваш всички тези span-ове, но така структурата на текста се запазва. Ако това не те интересува - би могъл да ползваш и три елемента наредени един до друг:
<!DOCTYPE html>

<html>
	<head>
		<title></title>
		<meta charset="utf-8" />
		<style>
			div.table-ish { width: 100%; overflow: hidden; }
			p.col { width: 33.33%; float: left; }
			p.c { text-align: center; }
			p.r { text-align: right; }
		</style>
	</head>

	<body>
		<div class="table-ish">
			<p class="col">
				Главни<br>Други<br>И
			</p>
			<p class="col c">
				действащи<br>три<br>така
			</p>
			<p class="col r">
				лица<br>думи<br>нататък
			</p>
		</div>
	</body>
</html>

Мнението беше редактирано от sandh: 08.11.16 - 03:22

0

#8
Потребителят е неактивен   NSB0P 

  • Група: Потребители
  • Мнения: 138
  • Регистриран: 06-October 11
  • Репутация: 3
  • Пол:Мъж
  • Град:София
Може би... въпреки, че има доста варианти как да се направи тази задача вече а petarcheto избира кой вариант за него ще бъде по добрият :)

Също така може да погледне във този сайт w3schools има доста добри примери.
Транскрипция на абривиатурата НСБОП:
Никакъв Софтуер Безплатно за Обикновените Потребители :D
0

#9
Потребителят е неактивен   petarcheto 

  • Група: Потребители
  • Мнения: 793
  • Регистриран: 18-December 06
  • Репутация: 27
  • Пол:Мъж
  • Интереси:motori , girls
Първия метод не стана. По втория - резултат Публикувано изображение от кода Публикувано изображение
0

#10
Потребителят е неактивен   sandh 

  • Група: Потребители
  • Мнения: 8748
  • Регистриран: 11-August 04
  • Репутация: 120
  • Пол:Мъж
  • Град:София
petarcheto: от кода, който си снимал се вижда, че <p> таговете не са затворени.

NSBOP - начини много, но стилизиране не се прави с javascript. Три думи могат да се изпишат и без 10 реда скрипт. Пример:

<p id="demo">дума дума дума</p>

Инак - хубава тренировка на ООП.

Мнението беше редактирано от sandh: 16.11.16 - 02:51

0

#11
Потребителят е неактивен   petarcheto 

  • Група: Потребители
  • Мнения: 793
  • Регистриран: 18-December 06
  • Репутация: 27
  • Пол:Мъж
  • Интереси:motori , girls
На HTML 4.1 Strict при валидизация ми даваше грешка, че ги затварям.
0

#12
Потребителят е неактивен   sandh 

  • Група: Потребители
  • Мнения: 8748
  • Регистриран: 11-August 04
  • Репутация: 120
  • Пол:Мъж
  • Град:София
Кой валидатор използваш? Затварянето на параграф не е грешка в HTML 4.1 Strict. Още повече - защо ползваш точно тази декларация? Сигурно е бъкана с quirk-oве.
0

#13
Потребителят е неактивен   petarcheto 

  • Група: Потребители
  • Мнения: 793
  • Регистриран: 18-December 06
  • Репутация: 27
  • Пол:Мъж
  • Интереси:motori , girls
validator.w3.org

Мисля, че е една от последните преди HTML5, които имат картинка за сайта ( че е валиден и линк към сайта им ). Не съм запознат с това какво е quirk, но как да оформя текст в табличен вид, без да ползвам таблица?


0

#14
Потребителят е неактивен   sandh 

  • Група: Потребители
  • Мнения: 8748
  • Регистриран: 11-August 04
  • Репутация: 120
  • Пол:Мъж
  • Град:София
Да затваряш <p> тагове не е невалидно в HTML 4.1 Strict

Дадох две решения горе, които правят това, за което питаш. Ако има проблем с тях - допускаш някаква грешка при вмъкване на кода. Ако проблемът не идва от незатварянето на параграфите - то значи идва от друго място. Може би някакви стилове, които влияят на кода. Ако качиш целия код някъде ще е най-лесно да посоча проблема.

P.S. - quirk е странно поведение на браузъра, което не се съобразява със стандарта, който е деклариран.

Мнението беше редактирано от sandh: 20.11.16 - 17:25

0

#15
Потребителят е неактивен   sandh 

  • Група: Потребители
  • Мнения: 8748
  • Регистриран: 11-August 04
  • Репутация: 120
  • Пол:Мъж
  • Град:София
Тъкмо хвърлих още един поглед на screenshot-а. Научи се да ползваш copy-paste правилно. CSS-а няма нищо общо с това, което съм постнал. Класовете на <p> таговете - също. Естествено, че няма да се получи ако просто хаотично слагаш код тук-там.

Мнението беше редактирано от sandh: 21.11.16 - 14:02

0

Споделете тази тема чрез:


Страница 1 от 1
  • Вие не можете да започнете нова тема
  • Вие не може да отговаряте на тази тема

1 потребители четат тази тема
0 регистрирани потребители, 1 гости и 0 анонимни потребители


Data.BG e форум за дискусии. Data.BG не носи отговорност за съдържанието и достоверността на публикуваните в дискусиите материали.

Никаква част от съдържанието на тази страница не може да бъде репродуцирана, записвана или предавана под каквато и да е форма или по какъвто и да е повод без писменото съгласие на Data.BG.

Close  Member Login