Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

Sandy

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

Promowane odpowiedzi

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:
5bb0cc0f8452f_Beztytuu.thumb.png.059d8a5f79d223d7fc541ee1e24c38d5.png


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.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

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

  • Lubię to! 1
  • Dzięki! 1
  • Przykro mi 1

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

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

 

  • Lubię to! 1

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

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.

  • Lubię to! 5

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

@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ć :)

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
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ę.

  • Lubię to! 3

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
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.

  • Lubię to! 3

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

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

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
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?

  • Lubię to! 1

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Utwórz konto

Utwórz konto. To darmowe i bardzo proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz już konto? Zaloguj się tutaj.

Zaloguj się teraz


×