Mozilla 한국 커뮤니티

이제 막 입문한 초보입니다.
사이트링크를 css만으로 짤려고 하느데요.
익스에선 제대로 나오는데,파폭에선 깨지는데,
도대체 원인을 모르겠습니다.
사이트리스트의 경우 간단해서 쉬울거라 생각했는데
막상 해보니 잘 안됩니다.

/* Clist */
ul#Clist { width:730px; }
ul#Clist li { background:url(../images/dot_line2.gif) repeat-x; padding: 10px 0 10px 0; }
ul#Clist li span { float:left; }
ul#Clist li span.Cs4_1 { width:120px; padding: 7px 0 0 0px; }
ul#Clist li span.Cs4_2 { width:270px; line-height : 150%; }
ul#Clist li span.Cs4_3 { width:240px; line-height : 150%; }

<ul id=Clist>
<li>
<a href=""><img src="" width="100" height="75" border="1"></a>
<a href="">사이트1</a> 주소
내용
</li>
<li>
<a href=""><img src="" width="100" height="75" border="1"></a>
<a href="">사이트2</a> 주소
내용
</li>
<li>
<a href=""><img src="" width="100" height="75" border="1"></a>
<a href="">사이트3</a> 주소
내용
</li>
</ul>

올려주신 소스만 봤을때는 옳은 결과를 얻으실 수 없는 것 같습니다.
css에서 선언해 놓은 class 값을 html 코드에선 사용하지 않으니까요.

그리고 # 이건 ID 를 나타내는것 아닌가요?

아 다시 수정햇는데,,,같은 결과 나오네요...
정말 환장하겠네요...

/* Clist */
ul#Clist { width:730px; }
ul#Clist li { background:url(../images/dot_line2.gif) repeat-x; padding: 10px 0 10px 0; }
ul#Clist li span { float:left; }
ul#Clist li span.Cs4_1 { width:120px; padding: 7px 0 0 0px; }
ul#Clist li span.Cs4_2 { width:270px; line-height : 150%; }
ul#Clist li span.Cs4_3 { width:240px; line-height : 150%; }
..
..
<ul id=Clist>
<li>
<a href=""><img src="" width="100" height="75" border="1"></a>
<a href="">사이트1</a> 주소
내용
</li>
<li>
<a href=""><img src="" width="100" height="75" border="1"></a>
<a href="">사이트2</a> 주소
내용
</li>
<li>
<a href=""><img src="" width="100" height="75" border="1"></a>
<a href="">사이트3</a> 주소
내용
</li>
</ul>

어떤 레이아웃을 원하시고
소스코드는 어떠한 이유로 만드셨는지 적어주신다면 좋겠습니다.
제가 실행해 보니
익스나 파폭 모두다 깨집니다.
이미지도 문제이구요...(저한테 없다보니...)

이미지로 레이아웃 만들어 올립니다.

이미지주소 -- > http://image.widesoccer.com/link/0828042942web3.jpg

게시판리스트처럼 사이트소개란을 만들려고 합니다.

스타일 첫 두 둘 다음과 같이 수정해 보세요.

Code: Select all

ul#Clist { width:730px; list-style:none;}
ul#Clist li { clear:both; background:url(../images/dot_line2.gif) repeat-x; padding: 10px 0 10px 0; }

실제 작업에서는 고려해 주어야할 문제가 훨씬 많습니다.
예를 들면, 크로스브라우징, 접근성(특히, 대체 텍스트) 등.
또한 공통부분을 세심하게 살피면 소스가 좀더 컴펙트해질 수있습니다.

일단, 기초는 HTML입니다. HTML이 잘 되면 CSS도 훨씬 쉬워집니다.
무작정 키보드에 손부터 올려놓지 마시고, 구조를 잘 계획하시고 도전해 보세요.

<html>
<head>
<style type="text/css">
body { background-color:#ffffff; margin:0; padding:0; font-family:굴림,Dotum; color:#696969; font-size:12px; }
div { font-size:12px; color:#222222; text-align:left; }
img { border:0px; }
a { font-family:굴림,Dotum; color:#696969; font-size:12px; text-decoration:none; }
a:hover { font-family:굴림,Dotum; color:#70BFE2; font-size:12px;text-decoration:underline; }

/* Body */
#Body { width:700px; }
ul#Clist { width:700px; list-style:none;}
ul#Clist li { clear:both; background:url(../images/dot_line2.gif) repeat-x; padding: 10px 0 10px 0; }
ul#Clist li span.Cs4_1 { width:120px; }
ul#Clist li span.Cs4_2 { width:200px; line-height: 150%; vertical-align: top; }
ul#Clist li span.Cs4_3 { width:280px; line-height: 150%; vertical-align: top; }
</style>
</head>
<body>

<div id=Body>
<ul id=Clist>
<li>
<img src="" width="100" height="75" border="0">
<a href="" target="_blank">아름다운가게</a> 주소
내용
</li>
<li>
<img src="" width="100" height="75" border="0">
<a href="" target="_blank">나눔과 기쁨</a> 주소
내용
</li>
<li>
<img src="" width="100" height="75" border="0">
<a href="" target="_blank">열린이웃</a> 주소
내용
</li>
</ul>
</div>

</body>
</html>

결과값
익스 -- http://image.widesoccer.com/link/0828065950webEX.jpg
파폭 -- http://image.widesoccer.com/link/0828070115webFF.jpg

오후내내 이거만 하네요...^^
CSS문서도 읽어보구 했지만, 답을 못찾겠습니다.
윗분말씀대로 해도 다르게 나오구요.
이런 간단한 코드조차 원하는대로 안나오니 앞으로 막막하네요...T.T

속시원히 답변이나 아예 코드좀 짜주실분 안계신가요?

제가 마크업을 고치기는 뭣해서 CSS로만 해봤습니다.

Code: Select all

#Clist { margin: 0; padding: 0; width:700px; list-style:none;}
#Clist li { clear: both; background:url(../images/dot_line2.gif) repeat-x; padding: 10px 0; }
#Clist li .Cs4_1 { float: left; width:120px; }
#Clist li .Cs4_2 { float: left; width:200px; height: 75px; line-height: 150%; }
#Clist li .Cs4_2 a { display: block; height: 75px; margin-bottom: -1.5em; }
#Clist li .Cs4_2 br { display: none; }
#Clist li .Cs4_3 { float: right; width:280px; line-height: 150%; }

내공이 부족해 이 정도밖에 못하겠네요.

그냥 제 생각을 적어보면요, 원하시는 레이아웃은 표의 형태에 가깝습니다.
그리고 올려놓으신 html 도 거의 table 을 쓰는 것과 유사해보입니다.
이런 경우에는 table 을 쓰는게 더 낫지 않을까요 ???
물론 레이아웃에 표를 쓰는게 않좋긴 합니다만 이번 경우에는 원하는 형태가 표의 형태에 가까우므로 table 을 쓰는게 더 낫지 않을까 생각합니다.

이건 어떠신지..

Code: Select all

<DOCTYPE>
<html>
<head>
<meta>
<style>
body { background-color:#ffffff; margin:0; padding:0; font-family:굴림,Dotum; color:#696969; font-size:12px; } 
div { font-size:12px; color:#222222; text-align:left; } 
img { border:0px; } 
a { font-family:굴림,Dotum; color:#696969; font-size:12px; text-decoration:none; } 
a:hover { font-family:굴림,Dotum; color:#70BFE2; font-size:12px;text-decoration:underline; } 

/* Body */ 
#body { width:700px; } 
#clist { width:700px; list-style:none;
background-image:url(../images/dot_line2.gif) 
background-repeat:repeat-x; 
background-position:bottom-left;
padding: 0 0 10px 0;
}
#clist li { clear:both; 
background-image:url(../images/dot_line2.gif) 
background-repeat:repeat-x; 
background-position:bottom-left;
padding: 10px 0 10px 0;} 
#clist .thumbnail {float:left;width:120px;height:100px;}
#clist .title {float:left;width:200px;}
#clist .description {float:left;width:280px;}
#clist .url {margin-top:30px;display:block;}
#clist .thumbnail img {width:100px; height:75px; border:1px solid #333}

</style> 
</head> 
<body> 
<div>
	<ul id="clist">
		<li>
			<div>
				<img src="" width="100px" height="75px" alt="아름다운가게 사이트 썸네일">
			</div>
			<div>
				<a href="#">아름다운 가게</a>
			</div>
			<div>
				어쩌구 저쩌구 쭝얼쭝얼 꿍얼꿍얼 여기에는 간단한 설명이 들어가는 곳 어쩌구 저쩌구 쭝얼쭝얼 꿍얼꿍얼
			</div>
			<div>
				http://abcdefg.com/hij/klmn
			</div>
		</li>
		<li>
			<div>
				<img src="" width="100px" height="75px" alt="아름다운가게 사이트 썸네일">
			</div>
			<div>
				<a href="#">아름다운 가게</a>
			</div>
			<div>
				어쩌구 저쩌구 쭝얼쭝얼 꿍얼꿍얼 여기에는 간단한 설명이 들어가는 곳 어쩌구 저쩌구 쭝얼쭝얼 꿍얼꿍얼
			</div>
			<div>
				http://abcdefg.com/hij/klmn
			</div>
		</li>
		<li>
			<div>
				<img src="" width="100px" height="75px" alt="아름다운가게 사이트 썸네일">
			</div>
			<div>
				<a href="#">아름다운 가게</a>
				<span>
					http://abcdefg.com/hij/klmn
				</span>
			</div>
			<div>
				어쩌구 저쩌구 쭝얼쭝얼 꿍얼꿍얼 여기에는 간단한 설명이 들어가는 곳 어쩌구 저쩌구 쭝얼쭝얼 꿍얼꿍얼
				어쩌구 저쩌구 쭝얼쭝얼 꿍얼꿍얼 여기에는 간단한 설명이 들어가는 곳 어쩌구 저쩌구 쭝얼쭝얼 꿍얼꿍얼
				어쩌구 저쩌구 쭝얼쭝얼 꿍얼꿍얼 여기에는 간단한 설명이 들어가는 곳 어쩌구 저쩌구 쭝얼쭝얼 꿍얼꿍얼
				어쩌구 저쩌구 쭝얼쭝얼 꿍얼꿍얼 여기에는 간단한 설명이 들어가는 곳 어쩌구 저쩌구 쭝얼쭝얼 꿍얼꿍얼
				어쩌구 저쩌구 쭝얼쭝얼 꿍얼꿍얼 여기에는 간단한 설명이 들어가는 곳 어쩌구 저쩌구 쭝얼쭝얼 꿍얼꿍얼
				어쩌구 저쩌구 쭝얼쭝얼 꿍얼꿍얼 여기에는 간단한 설명이 들어가는 곳 어쩌구 저쩌구 쭝얼쭝얼 꿍얼꿍얼
			</div>
			
		</li>
	</ul>
</div>
</body> 
</html>

게시판 프로그램이 태그를 잡아먹네요. -_-a

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

앞에 <를 붙이면 tag를 잡아먹어 버려서 <를 뺐습니다. 이걸 위 소스에 붙여주세요.

nowhere0 wrote:게시판 프로그램이 태그를 잡아먹네요. -_-a

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

앞에 <를 붙이면 tag를 잡아먹어 버려서 <를 뺐습니다. 이걸 위 소스에 붙여주세요.

테그등의 소스 따위를 올리실땐 편집아이콘의

Code: Select all

버튼을 누른 후 작성해 주세요.
소스가 다 끝난다음엔 다시 눌러서 닫아 주시는 것도 잊지 마시구요.
소스부분을 모두 입력한 후 블럭씌운 다음 [Code]버튼을 누르셔도 무방합니다.

프랙탈 wrote:
nowhere0 wrote:게시판 프로그램이 태그를 잡아먹네요. -_-a

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

앞에 <를 붙이면 tag를 잡아먹어 버려서 <를 뺐습니다. 이걸 위 소스에 붙여주세요.
테그등의 소스 따위를 올리실땐 편집아이콘의
Code: Select all
버튼을 누른 후 작성해 주세요.
소스가 다 끝난다음엔 다시 눌러서 닫아 주시는 것도 잊지 마시구요.
소스부분을 모두 입력한 후 블럭씌운 다음 [Code]버튼을 누르셔도 무방합니다.[/quote]

그렇게 했는데... -_-a
[code]<meta>
말씀하신 대로 해봤어요. 되려나?

역시 안되는군요. 파싱시에 meta나 doctype같은 tag는 위험태그(?)로 분류하나 봅니다.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

HTML 사용 불가를 체크하시면 됩니다. 단, 이렇게 하면 [quote="누구누구"]로 인용을 하면 스타일이 적용되지 않더군요.

Mozilla 한국 커뮤니티

ul,li 질문좀 합니다.

ul,li 질문좀 합니다.

올바르 소스가 아닌 것 같군요.

Re: 올바르 소스가 아닌 것 같군요.

저것만 봐서는...

Re: 저것만 봐서는...

다시해도...

이렇게 해봤습니다.

허걱

Re: 허걱

Re: 허걱