브라우저 창의 크기를 조정할 때

HTML과 CSS로 웹 사이트를 만들었으며 브라우저 창 크기를 조정할 때마다 탐색 막대와 같이 사이트 구성 요소가 엉망이되었습니다. 탐색 모음은 <img src=을 사용하여 대상에 연결된 일련의 이미지입니다. 이 성가신 것을 고치는 방법을 아는가?브라우저 창의 크기를 조정할 때

탐색 모음에 대한 코드는 다음과 같습니다 :

<br /> 
<div id="nav"> 
    <a href="/"><img src="Home.png" /></a> </a> 
<a href="/blog"><img src="=blog.png" /></a> </a> 
<a href="register.php"><img src="adopt.png" /></a> </a> 
<a href="user.php"><img src="useradmin.png" /></a> </a> 
<!-- <a href="login.php"><img src="\logout.png" /></a> </a> --> 
<a href ="places.php"><img src="map.png"/></a> </a> 
    <a href ="login.php?logout"><img src="logout.png"/></a> </a> 
<!--- <a href ="login.php"><img src="q.png"/></a> </a> --> 
</div>

감사합니다.

출처

2010-07-29 George

코드를 보지 않고 문제가 무엇인지 정확히 알기가 어렵습니다. 게시 할 수 있습니까? 아니면 적어도 관련 부분을 게시 할 수 있습니까? 또한, "사이트의 구성 요소를 망칠 것"이라는 의미를 더 설명 할 수 있습니까? 정확히 무슨 일이 일어나고있는거야? – jordanstephens

코드가 추가되었습니다. 탐색 버튼이 제 위치에 있지 않습니다. 브라우저 창 크기를 조정하면 이동합니다. – George

많은 것들이 원인 일 수 있습니다 ... 이미지 태그는 무엇입니까? 사업부? 그 스타일 정의는 무엇입니까? 빠른 bandaid : 네비게이션 바를 한 줄에 모두 넣으십시오. – Fosco

는 당신과 같이 메뉴 용기 (#nav) 스타일 시트의 폭을 제공한다 :

#nav { 
width: 500px; 
}

이 방법은 메뉴가 지정된 크기 이하로 축소하지 않으며, 결코 것 레이아웃 (이 경우 메뉴)이 중단되지 않습니다.

그럴 경우 링크에 텍스트이 있어야하며 일부는 image replacement technique을 사용하여 링크를 이미지/그래픽으로 표시해야합니다.

코드에 구문 오류가 있습니다. 모든 앵커 요소를 두 번 닫습니다.

출처

2010-07-29 19:31:23

감사! 그것은 작동합니다! :) – George

-1

<br /> 
<div id="nav"> 
<table border=0 cellpadding=0 cellspacing=0> 
<tr><td> 
    <a href="/"><img src="Home.png" /></a> 
</td><td> 
    <a href="/blog"><img src="blog.png" /></a> 
</td><td> 
    <a href="register.php"><img src="adopt.png" /></a> 
</td><td> 
    <a href="user.php"><img src="useradmin.png" /></a> 
</td><td> 
    <a href="places.php"><img src="map.png"/></a> 
</td><td> 
    <a href="login.php?logout"><img src="logout.png"/></a> 
</td></tr> 
</table> 
</div>

출처

2010-07-29 19:24:03 Fosco

-1, 테이블을 레이아웃 용으로 사용해서는 안됩니다. –

당신은 ... 규칙이 없다고 말합니다. – Fosco

* 규칙 *은 없지만 웹 개발에 반대하는 끔찍한 습관을 싫어합니다. 레이아웃 용 테이블을 사용하면 (X) HTML의 가장 기본적인 개념을 완전히 무시합니다. 명세서는 또한 다음과 같이 말하고있다. * 표는 문서 내용 [...] *을 레이아웃하는 수단으로 만 사용해서는 안되므로, 결국 sortof는 규칙이다. –

컨테이너 (또는 nav)에 min-width을 설정하십시오.

출처

2010-07-29 19:29:03 Marwelln

귀하의 #nav 컨테이너의 너비를 내비게이션 단추의 모든 너비와 같게 설정하십시오. 예를 들어 :

#nav { 
    padding: 0; 
    margin: 0; 
    width: 150px; 
} 

#nav a img { 
    width: 25px; /* 6 buttons at 25px = 150px total */ 
    border: 0; 
}

출처

2010-07-29 19:30:07 Pat

브라우저 창의 크기를 조정할 때

답변

관련 문제