Skocz do zawartości
PL
Szukaj na Pecetowiczu
Nowe Szukaj Zaloguj Dołącz
  • Utwórz konto

Jak przestawić div z miejscem na newsy pod nagłówek

Udostępnij
Rekomendowane odpowiedzi

bubbles

Tworze nową stronę i mam niestety problemy z kodem źródłowym, mianowicie problem z newsami które w zamierzeniu powinny się znaleźć pod nagłówkiem, w tym miejscu:
image


Niestety dodając div z newsami strona się rozjeżdża, m.in. grafika okazuje się za duża. Cały kod tutaj:

Spoiler 

<html>
<head>
	<title>NAZWA IMPREZY</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="Stylesheet" type="text/css" href="style.css">
	<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>

<body>
<div class="content">
		<div class="logo"></div>
			<div class="logo2">
				<div class="menur">logo</div>
				<div class="menu">
						<ul id="menuz"><li><a href="index.html">Strona</a></li><li><a href="index.html">Kontakt</a></li></ul>
				</div>
			</div>
		<div class="newsr">
			<div class="news">
				<br><a class="tytul_tresc">CH</a>
				<br><a class="tresc_tresc">LO</a>
				<img class="foto_tresc" src="http://www.wreczyca-wielka.pl/fileadmin/news/Images/pks_logo.png">
			</div>
		</div>
</div>

</body>
</html>

 

Spoiler 

/* Strona */

.content {
	min-height: 100%;
	position: relative;
	z-index: 0; 
}

/* Zdjęcie autobsu po lewej od loga */

.logo {
	float: left;
	width: 30%;
	max-width: 266px;
    background-image: url(https://images.all-free-download.com/images/wallpapers_thum/magical_orange_4837.jpg);
	height: 200px;
	color: #33CC33;
	background-color: black;
	font-family: 'Roboto', sans-serif;
}

/* DIV scalający menu */


.logo2 {
	float: right;
	width: 1174px;
	min-width: 70%;
	margin: 0 auto;
	height: 200px;
	color: #33CC33;
	background-color: #ECECEC;
	font-family: 'Roboto', sans-serif;
  display: flex;
  flex-flow: column nowrap;
  max-height: 200px;
}

.menu, .menu1{
	height: 25px;
	color: white;
	background-color: #00009C;
	text-align: center;
}

/* Menu właściwe */

.menur {
	height: 25px;
	color: white;
	background-color: #00009C;
	text-align: center;
	height: 200px;
	color: #33CC33;
	background-color: black;
	font-family: 'Calibri', sans-serif;
}

/* Menu właściwe */

.menu {
	height: 25px;
	color: white;
	background-color: #00009C;
	text-align: center;
}

#menuz {
	background-color: #00009C;
	padding: 3px 5%;
	margin: 0;
	font-family: 'Roboto', sans-serif;
}

#menuz li {
	display: inline;
	padding: 0 10px;
}

#menuz a {
	color: #E3E3E3;
	text-decoration: none;
}

/* Reszta strony pod menu tj. newsy*/

.newsr {
	padding: 10px 5px 10px 5px;
	background-color: #CBCBCB;
	height: 300px;
}

.news {
	width: 50%;
	margin:  auto;
	height: auto;
	background-color: #CBCBCB;
	font-family: 'Roboto', sans-serif;
}

.foto_tresc{
	width:150px; 
	height:150px; 
	float:right; 
	padding-left: 30px;
}

.tytul_tresc{
	float: left;
  font-family: 'Roboto', sans-serif;
	text-align: center;
	color: #330033;
	font-weight: bold;
	text-decoration: none;
	padding-left: 30px;
}

.tresc_tresc{
	font-family: Arial;
	font-size: 10pt;
	padding-left: 35px;
	color: #262626;
}

/* Strona - informacje szczegółowe */

body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%; 
}

/* Pisany tekst */

a { 
	text-decoration: none; 
	color: black;
}

a.bold {
	font-weight: bold;
	text-decoration: none; 
	color: black;
}

 

Proszę o pomoc.

Odnośnik do komentarza
Udostępnij na innych stronach

fearar

Dodaj sobie klase clr czyli: 

.clr{
	clear:both;
}

I dodaj potem diva przed <div class="newsr"> czyli 

<div class="clr"></div>

A potem to kwestia ogarnięcia szerokości.

Pozdro

Odnośnik do komentarza
Udostępnij na innych stronach

Mativve Online

  • Mativve jest moderatorem

Spróbuj tak jak @fearar napisał.

A jeśli chciałbyś gotowy kod na którym byś się wzorował to wrzucam poniżej. Niestety albo stety jest on pisany we flexie.

Mój kod

Odnośnik do komentarza
Udostępnij na innych stronach

-n3veR

Nie używaj floata, przerzuć się na flexa albo już nawet CSS Grid. Nie będziesz mieć problemów z tym, że pomimo poprawnej kolejności bloków w HTMLu coś się jednak źle wyświetla.

Odnośnik do komentarza
Udostępnij na innych stronach

fearar

@El Profesor na grida tak średnio ( wsparcie +/- 80%) na flexa jak najbardziej, ułatwia w dużym stopniu tworzenie kodu pod rwd ☺️ Pamiętaj, że dobrą praktyką jest kodowanie od mobliki w górę, jeśli chodzi o to co napisałem wyżej, myślę, że jest to wystarczające - kolega nie prosił o przebudowę kodu, a o pomoc w rozwiązaniu problemu. Ba nawet mu się to przyda na przyszłość, jeśli się zetknie z takim problemem będzie wiedział co zrobić ☺️

Odnośnik do komentarza
Udostępnij na innych stronach

-n3veR

2 minuty temu, fearar napisał:

na grida tak średnio ( wsparcie +/- 80%)

https://caniuse.com/#feat=css-grid

Wszystkie najnowsze i wiodące przeglądarki mają już do niego wsparcie. Jeżeli projekt nie obejmuje starszych wersji, to nie ma sensu cofać się do kamienia łupanego.

A odnośnie idei 'mobile first' - nadal wszystko zależy od otrzymanych widoków. Jeżeli ma widoki tylko dla PC, to lepiej mu jest zakodować najpierw PC, a dopiero później schodzić z szerokością ekranu. Sam niejednokrotnie tak robię, bo tylko takie widoki otrzymuję.

Odnośnik do komentarza
Udostępnij na innych stronach

arces

17 minut temu, El Profesor napisał:

https://caniuse.com/#feat=css-grid

Wszystkie najnowsze i wiodące przeglądarki mają już do niego wsparcie. Jeżeli projekt nie obejmuje starszych wersji, to nie ma sensu cofać się do kamienia łupanego.

 

A odnośnie idei 'mobile first' - nadal wszystko zależy od otrzymanych widoków. Jeżeli ma widoki tylko dla PC, to lepiej mu jest zakodować najpierw PC, a dopiero później schodzić z szerokością ekranu. Sam niejednokrotnie tak robię, bo tylko takie widoki otrzymuję.

Dokładnie, w 100% się zgadzam. Robię identycznie, bo zazwyczaj grafik podsyła jedynie desktopową wersję strony i później w dół trzeba schodzić i myśleć samemu.

Co do samego wsparcia CSS Grid, to według mnie spokojnie można zacząć z tego korzystać. Najlepiej właśnie w połączeniu z Flexbox'em i wtedy wychodzi wszystko pięknie.

Odnośnik do komentarza
Udostępnij na innych stronach

Mr Joker

Grid daje dużo większe możliwości od Flexa, a co do wsparcia - użyj Babela i po kłopocie ☺️

Odnośnik do komentarza
Udostępnij na innych stronach

Dazai

2 godziny temu, Mr Joker napisał:

Grid daje dużo większe możliwości od Flexa, a co do wsparcia - użyj Babela i po kłopocie ☺️

A co ma Babel do CSSa, bo nie bardzo rozumiem?

Odnośnik do komentarza
Udostępnij na innych stronach

Kontynuuj dyskusję

Dołącz do Pecetowicza, aby kontynuować dyskusję w tym wątku.

Zaloguj się
Zarejestruj się
Zadaj pytanie bez logowania
  • Dodaj nową pozycję...
  • Dodaj nową pozycję...