Mam jakiś dziwny problem z divem?

0

Dlaczego

Bartuś
nie jest wyświetlony w jednej linii jak pozostałe linki? chce stworzyć sobie przed linkiem taki napis,ale jakieś dziwne rzeczy mi wyszły</p>
<!DOCTYPE html>
<html>
<head>
	<title>Bartek page</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/style.css">
<style>
div.menu{
//	width: 100%;
	//height: 100%;
	margin-left: -10px;
	margin-right:-25px;
}
div.memu_show{
	padding: 0;
	background-color:#262626;
	width: 100%;
	height: 100%;
	float: left;
}
div.bartus{
        float:left;
	color:#0086b3;
}
a{
	float:left;
	display: block;
	padding: 14px 16px;
	text-decoration: none;
	color: white;
}

h1#welcome{
	margin: 20px;
	margin-top:90px;
	text-align: center;
	color:#23272a;
}
a:hover{
	color:#4da6ff;
}




</style>
</head>
<body>

<div class="menu">
	<div class="bartus">Bartuś</div>
	<div class="memu_show">
		<a href="">Home</a>
		<a href="">Gallery</a>
		<a href="">About</a>
	</div>
</div>

<h1 id="welcome">Helo on my page</h1>

0

Nie bardzo widzę ten napis "Bartuś" w podanym przez Ciebie layoucie, ale do rzeczy; należałoby postawić sobie pytanie: dlaczego miałby się wyświetlać w tej samej linii co elementy <a>? <div> jest domyślnie elementem blokowym, więc oba elementy <div> tworzą nowe linie. Oba też mają takie same wartości własności float, więc ona tutaj nic nie zmienia.

Poza tym porada: rozdzielaj kod CSS i HTML na różne pliki, oraz tu na forum możesz wrzucać do oddzielnych znaczników.

0

4p.jpg
napis bartuś niżej, i strzliłem ci fotkę

0

Napis można umieścić tak, jeśli koniecznie chcesz używać własności float: https://jsfiddle.net/n7h0hds3/8/

<!DOCTYPE html>
<html>

  <head>
    <title>Bartek page</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
  </head>

  <body>

    <div class="menu">
      <!--<div class="bartus">Bartuś</div>-->
      <div class="memu_show">
        <div class="bartus">
          Bartuś
        </div>
        <div class="menu-wrapper">
          <a href="">Home</a>
          <a href="">Gallery</a>
          <a href="">About</a>
        </div>
      </div>
    </div>

    <h1 id="welcome">Helo on my page</h1>

div.menu {
  /* width: 100%; */
  /* height: 100%; */
  margin-left: -10px;
  margin-right: -25px;
}

div.memu_show {
  padding: 0;
  background-color: #262626;
  width: 100%;
  height: 100%;
  float: left;
}

div.bartus {
  float: left;
  color: #0086b3;
}

a {
  float: left;
  display: block;
  padding: 14px 16px;
  text-decoration: none;
  color: white;
}

h1#welcome {
  margin: 20px;
  margin-top: 90px;
  text-align: center;
  color: #23272a;
}

a:hover {
  color: #4da6ff;
}

.bartus {
  color: white;
}

.menu-wrapper {
  float: left;
}

UPDATE: Poprawiłem komentarze w CSS. To ważne, bo ze slashami z Javascriptu to style będą źle interpretowane, być może różnie przez różne przeglądarki.


UPDATE 2: Może być prawdopodobnie co najmniej kilka innych sposobów umieszczenia tego napisu tam. Ja na przykład nauczyłem się używać modelu grid (https://developers.google.com/web/updates/2017/01/css-grid) i wydaje mi się on więcej intuicyjny niż własność float. Dobry jest także flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

0

dobra, zrobiłem głupote, ale teraz naprawiłem, natomiast mam pytanie
4.jpg
dlaczego ten margin nachodzi na elementy "menu" przynajmniej wizualnie? chodzi o tą otoczke zółtą która oznacza margines?
nie rozumiem tego, czy jest wszystko w porządku czy coś zrobiłem żle?
zmieniłem tylko

h1#welcome{
	margin: 40px 20px;
	margin-top:70px;
	text-align: center;
	color:#23272a;
}
0

a powiesz mi dlaczego ten headaer jest taki paskundy? na inspeckji zbadaj element on wychodzi swoimi ramami wysoko do góry

Dlatego, że własność float ustawiona dla elementu <element> powoduje usunięcie elementu <element> z normalnego układu elementów na stronie. Powoduje to u Ciebie, że element <h1> jest ustawiony tak (na wysokość), jakby nie było menu na stronie (od samej góry strony). Polecam przeczytać zanim zaczniesz pisać coś skomplikowanego z floatami: https://css-tricks.com/all-about-floats/.

poza tym musiałem go marginem osuwać od menu by było ok?

Nie rób tak. Ustaw clear: left na <h1>. Ta własność powoduje, że ten element nie będzie pozwalać, by opływały go elementy z lewej strony. Teraz przesunął się poniżej floatującego menu, jak powinno być. Więcej: https://developer.mozilla.org/pl/docs/Web/CSS/clear


UPDATE: pamiętaj też, że <h1>, mimo że jest używany jako element z treścią tekstową, jest elementem blokowym. Nie wiem, czy nie ma to wpływu na opływanie jego i przez niego.

0

To mnie dziwi, bo takiego problemu nie mam niżej, a zrobiłe identycznie, chodzi o klasy "two"

<!DOCTYPE html>
<html>
<head>
	<title>Bartek page</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="menu">
	<div class="memu_show">
		<div class="bartus">Bartuś</div>
		<div class="menu-wrapper">
			<a href="">Home</a>
			<a href="">Gallery</a>
			<a href="">About</a>
		</div>
	</div>
</div>

<h1 id="welcome">Helo on my page</h1>

<div class="container" style="margin: 0 70px;">
	<div class="one">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius ac nunc porttitor sagittis. Ut vel eros rhoncus, tristique purus vel, porttitor erat. Mauris convallis ac justo vitae semper. Morbi tincidunt velit felis, non eleifend orci mollis eget. Duis elementum nunc sagittis, ultricies augue sit amet, posuere libero. Mauris eu iaculis neque. Fusce facilisis fringilla augue, nec porttitor sapien iaculis nec. Maecenas vehicula tincidunt vulputate. Vivamus porttitor enim nec dignissim porta. Morbi euismod est odio, non venenatis dolor efficitur vitae. In sollicitudin eros augue, condimentum feugiat ex dictum non. Pellentesque nec metus luctus, malesuada urna nec, convallis lacus. Sed cursus, ipsum non volutpat accumsan, eros orci rhoncus nisl, eu luctus libero dolor vel arcu.

		Donec maximus nunc eget ante mollis, eu venenatis mi eleifend. Suspendisse ac libero enim. Sed commodo mattis augue in egestas. Sed semper varius nisl a lobortis. Donec elementum ex a consectetur semper. Fusce et turpis mi. Quisque ac viverra felis.

		Mauris erat eros, tincidunt elementum maximus nec, auctor in lacus. Morbi eu felis neque. Phasellus vestibulum tempor imperdiet. Cras sollicitudin sapien id nulla porttitor, sit amet malesuada est pulvinar. Cras in aliquet massa, sed scelerisque ipsum. Integer vel efficitur lectus. Phasellus auctor quam risus, in lobortis nunc dictum vitae.

		Nullam a ligula congue, <br>finibus sem at, consequat erat. Nulla blandit mauris non fringilla tempus. Quisque tempus sodales neque, vel fringilla orci placerat a. Proin in ex mauris. Quisque rhoncus, dui at tincidunt vestibulum, ante ligula finibus sem, nec bibendum purus nibh ac quam. Mauris efficitur dolor dui, sit amet malesuada augue suscipit ut. Aenean ac velit non lacus malesuada vulputate. Donec maximus dolor et faucibus rutrum. Phasellus non nunc non urna dictum porta.

		Etiam dapibus purus leo, vitae finibus mauris elementum vel. Etiam erat lectus, sagittis et turpis vel, ultrices imperdiet sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis consequat justo nec lectus accumsan, nec posuere erat pretium. Praesent sagittis vehicula egestas. Pellentesque at tortor id magna viverra viverra quis at mauris. Praesent quis placerat felis. Sed porta dui et dui fermentum tristique.

		Integer facilisis velit et mattis interdum. Aliquam tincidunt congue massa et sagittis. Suspendisse potenti. Phasellus nec leo commodo, lacinia odio nec, porttitor lorem. Sed dolor eros, lobortis sed nisi sed, placerat eleifend enim. Curabitur faucibus, tellus sed ultricies sodales, erat orci sollicitudin lectus, vitae finibus ex augue sit amet quam. Nunc convallis pellentesque nulla nec mattis.

		Curabitur mauris esmod est. Nunc est massa, accumsan ut convallis vel, bibendum vel ante. In mattis risus id felis pretium tempus. Aenean eget vestibulum nisi. Sed tempus hendrerit ex eu pulvinar. Integer urna elit, blandit ut feugiat et, convallis sit amet quam. Cras vitae purus lectus. Nulla ultricies viverra risus vel ultrices. Maecenas efficitur ac mauris a pharetra. Pellentesque maximus justo eget est posuere, in bibendum sem egestas. Mauris ante mauris, lobortis ut erat at, interdum rhoncus lectus. Cras ut nibh elit. 
		</p>
	</div>
	<div class="two">
		<div class="two_top">
			Mauris erat eros, tincidunt elementum maximus nec, auctor in lacus. Morbi eu felis neque. Phasellus vestibulum tempor imperdiet. Cras sollicitudin sapien id nulla porttitor, sit amet malesuada est pulvinar. Cras in aliquet massa, sed scelerisque ipsum. Integer vel efficitur lectus. Phasellus auctor quam risus, in lobortis nunc dictum vitae.

			Nullam a ligula congue, <br>finibus sem at, consequat erat. Nulla blandit mauris non fringilla tempus. Quisque tempus sodales neque, vel fringilla orci placerat a. Proin in ex mauris. Quisque rhoncus, dui at tincidunt vestibulum, ante ligula finibus sem, nec bibendum purus nibh ac quam. Mauris efficitur dolor dui, sit amet malesuada augue suscipit ut. Aenean ac velit non lacus malesuada vulputate. Donec maximus dolor et faucibus rutrum. Phasellus non nunc non urna dictum porta.
		</div>
		<div class="two_down">
			Mauris erat eros, tincidunt elementum maximus nec, auctor in lacus. Morbi eu felis neque. Phasellus vestibulum tempor imperdiet. Cras sollicitudin sapien id nulla porttitor, sit amet malesuada est pulvinar. Cras in aliquet massa, sed scelerisque ipsum. Integer vel efficitur lectus. Phasellus auctor quam risus, in lobortis nunc dictum vitae.

				Nullam a ligula congue, <br>fini
		</div>
	</div>
</div>

</body>
</html>

```'


```css
div.menu{
	margin-top: -8px;
	margin-left: -8px;
	margin-right:-8px;
	
}
div.memu_show{
	padding: 0;
	background-color:#262626;
	width: 100%;
	height: 100%;
	float: left;
}
div.bartus{
	float:left;
	color:#0086b3;
}
a{
	float:left;
	display: block;
	padding: 14px 16px;
	text-decoration: none;
	color: white;
	//border: 1px solid red;
}
 
.menu-wrapper {
  float: left;
}
div.contener{
		width: 100%;
		height: 100%;
}
div.one{
	margin-right: 40px;
	float:left;
	width:50%;
}
div.two{
	width:40%;
	height:50%;
	float:left;
	
}
div.two_top{
	margin-bottom:20px;
	padding: 29px;
	border-radius: 24px;
	background-color:#d1d1e0;
}
div.two_down{
	background-color: #66d9ff;
	
}
h1#welcome{
	clear: left;
	margin: 40px 20px;
	margin-top:70px;
	text-align: center;
	color:#23272a;
}
a:hover{
	color:#4da6ff;
}

html 
{
	 font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body 
{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

#main_img{
	background-image: url(img/ocean.jpg);
	width: auto;
	height: 100px;
}

0

No dobrze, ale jaki problem jest z tym kodem? Wszystko wygląda w porządku w jsfiddle, tzn. w porządku w kwestii float.

0

Dodam coś bez wartościowego od siebie

div { display: inline; }

1
//  width: 100%;

w czystym CSS bez dodatków nie ma takich komentarzy (jest tylko /* i */), to nie Sass.

div.menu{

lepsze byłoby po prostu .menu. Skąd wiesz, czy nie będziesz musiał zmienić kiedyś taga z diva na jakiś inny tag?

memu_show

co to jest memu? (którego konsekwentnie używasz, więc to nie literówka).

No i ogólna rada - jak chcesz, żeby ktoś na to patrzył to weź wyodręb z całego kodu fragment, który sprawia błąd i stwórz case na jsfiddle czy codepen albo podobnej stronie. Prawdopodobnie rozwiążesz w ten sposób swój problem (samo wyodrębnienie często wymaga od nas spojrzenia inaczej na kod), a jeśli nie to wrzuć linka z konkretnym case'm...

nikt się nie będzie bawił w czytanie kilometrowego kodu i zgadywanki...

0

te marginy zachodzą na menu, tam wynika z inspektora google

Myślałem nad tym; nie wiem, o jakie marginesy Ci chodzi, ale domyślam się, że o górny margines tagu <h1>. Rzeczywiście, znika (i nie da się ustawić – a przynajmniej nie tak prosto, bo nie próbowałem wszystkich możliwości). Nie udało mi się dokładnie ustalić, czemu tak jest, ale może to być kwestia tzw. załamywania marginesów. Zobacz tu:


UPDATE: Najprawdopodobniej znikanie marginesów jest spowodowane (może tylko pośrednio) przez to, że element <div class="menu"> posiada zerową wielkość (dodaj mu własność na przykład height: 1px; i zobaczysz, że górny margines dla <h1> będzie ustawiony poprawnie). Myślę, że ma to też związek z załamywaniem marginesów.

Co innego, dlaczego ma on zerową wielkość (oraz czy powinno tak być); nie szukałem do tego rozwiązania, ponieważ moim zdaniem, w tym momencie lepiej byłoby zmienić HTML.

1 użytkowników online, w tym zalogowanych: 0, gości: 1