Skocz do zawartości

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


bubbles
 Udostępnij

Rekomendowane 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:
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

@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

  • Ekspert
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

  • Ekspert
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

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij

×