• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak zignorować diva?

Cloud VPS
0 głosów
349 wizyt
pytanie zadane 3 marca 2016 w HTML i CSS przez GaCeL Dyskutant (7,500 p.)

Mam pewien problem a mianowicie chciałbym zrobić tytuł np. newsa i po lewej stronie autora a po prawej datę publikacji
I chciałbym to zrobić tak że tytuł newsa ma być na samym środku, a po lewej tak jak teraz jest Autor a po prawej stronie tytułu data, ma ktoś pomysł jak wykonać takie coś aby tytuł się nie przesuwał w żadną stronę tylko był na środku?

 

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="UTF-8" />
	<title>Pierwszy CMS!</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="stylesheet" type="text/css" href="css/default.css" />
</head>
<body>
<div id="container">
	<div id="header">
	</div>
	<div id="headerMenu">
		<ul class="left">
		  <li class="active"><a class="active" href="default.asp">Strona Główna</a></li>
		  <li><a href="#">Projekty</a></li>
		  <li><a href="#">O mnie</a></li>
		  <li><a href="#">Kontakt</a></li>
		  <!--<ul class="right" style="float:right; list-style-type: none;">
		  	<li><a class="active" href="#login">Logowanie</a></li>
		  	<li><a href="#register">Rejestracja</a></li>
		  </ul>-->
		</ul>
	</div>
	<div id="newsContainer">
		<div class="newsAuthor">
			Autor: GaCeL
		</div>
		<div class="newsDate">
			Data: 2016-03-03
		</div>
		<div class="newsTop">
			<span class="newsTitle">Testowy news</span>
		</div>
		<div class="newsContent">
			<span class="newsContainer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et porta arcu. Sed et convallis nisl, ut porttitor elit. Nam lacinia et lacus sit amet porta. Fusce volutpat ipsum non sem congue, vitae luctus tortor tincidunt. Donec mollis, nibh et gravida gravida, erat mi feugiat magna, eu egestas odio mauris a mi. Duis a ultricies augue, vitae convallis orci. Morbi vitae ultricies nisl, id scelerisque mi.
			</span>
		</div>
	</div>
	<div id="sidebarContainer">
	</div>
</div>
</body>
</html>

 

body {
	background-color: #f1f1f1;
	font-family: Verdana,sans-serif;
	margin: 0;
}

#container{
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}

#header{
	background-color: #f3f3f3;
	border-color: #e7e7e7;
	border-style: solid;
	border-width: 0 1px 0 1px;
	height: 217px;
	width: 958px;
}

#newsContainer{
	margin: 15px 15px 15px 0;
	float: left;
}

.newsAuthor{
	float: left;
	font-size: 8px;
	text-align: center;
	height: 10px;
	padding: 3px;
	margin: 30px 0 0 1px;
	color: #666;
}

.newsDate{
	float: left;
	font-size: 8px;
	text-align: center;
	height: 10px;
	padding: 3px;
	margin: 30px 0 0 1px;
	color: #666;
}

.newsTop{
	width: 650px;
	padding: 7px;
	background-color: #ddd;
	border: 1px solid #c9c9c9;
	text-align: center;
}

.newsContent{
	width: 650px;
	padding: 7px;
	background-color: #f3f3f3;
	border-color: #e7e7e7;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	text-align: justify;
	text-justify: inter-word;
}

span.newsTitle{
	font-size: 24px;
	color: #666;
}









ul.left{
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #f3f3f3;
	border: 1px solid #e7e7e7;
}

ul.right{
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #f3f3f3;
}

li{
	float: left;
}

li a{
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	color: #666;
}

li a:hover{
	background-color: #ddd;
}

ul li a.active {
	color: #fff;
    background-color: #008CBA;
}

 

2 odpowiedzi

0 głosów
odpowiedź 3 marca 2016 przez Comandeer Guru (607,100 p.)
Obadaj jaką szerokość mają floatowane elementy, bo prawdopodobnie tutaj tkwi problem.
komentarz 3 marca 2016 przez GaCeL Dyskutant (7,500 p.)
Nie rozumiem.
komentarz 3 marca 2016 przez Comandeer Guru (607,100 p.)
Chodzi mi o sprawdzenie ile miejsca zajmują te elementy po bokach headera. Możesz to sprawdzić w inspektorze elementów (F12).
0 głosów
odpowiedź 3 marca 2016 przez Dzemtenjem Bywalec (2,660 p.)
Nie wiem czy na pewno rozumiem co masz na myśli, ale jeżeli tytuł ma być po środku, to łatwiej byłoby gdyby w htmlu <div class="newsTop">  był pomiędzy divami z autorem i datą, albo jako pierwszy a autor i data ciut pod nim.

a tak na marginesie to newsContainer lepiej chyba zrobić class zamiast id (jeżeli będzie więcej tych newsów docelowo)

Podobne pytania

0 głosów
1 odpowiedź 2,350 wizyt
pytanie zadane 12 lipca 2019 w HTML i CSS przez Hardwell Dyskutant (9,020 p.)
0 głosów
2 odpowiedzi 1,228 wizyt
pytanie zadane 29 kwietnia 2017 w HTML i CSS przez Piotrinformatyk Początkujący (340 p.)
0 głosów
2 odpowiedzi 596 wizyt
pytanie zadane 20 września 2016 w HTML i CSS przez Marven88 Użytkownik (750 p.)

93,487 zapytań

142,420 odpowiedzi

322,772 komentarzy

62,903 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Kursy INF.02 i INF.03
...