CSS 갠트리 반응 형 헤더

Question

나는 해결책을 찾으려고 위아래로 움직이고 있었지만 실제로 개인적인 도움이 필요하다. 나는 4 개 부분으로 대답하는 헤더를 만들려고 해요 :

1. 헤더 BG
중앙에서 왼쪽
2. 로고에
3. 에 오신 것을 환영합니다 태그 권리

을에

사회 아이콘 http://jaredbrandjes.co.za/joomla/test/

: 여기

내가 일하고 있어요 로컬 버전의 복사본입니다 헤더 bg는 1920 넓이이고 그것을 뒤집어 그것을 복제하고 더 큰 스크린을 위해 repeat-x로 만들었습니다. 너비가 500px 미만으로 줄어들 때 조금만 확장하면됩니다. 크기의 약 70 %가 트릭을해야하지만 어떻게해야할지 모르겠습니다.

<div class="gantry-img"><span class="gantry-img" style="text-align: left;"><img style="float: left;" src="images/template/header_welcometag.png" alt="" /></span> <span class="gantry-img" style="text-align: center;"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/template/header_logo.png" alt="" /></span> <span class="gantry-img" style="text-align: right;"><img style="float: right;" src="images/template/header_social.png" alt="" /></span></div> 

:이 요소 2,3,4 내 현재 코드가

<div style="background-image:url(/jaredbrandjes.co.za/images/template/headerbar.png); overflow:hidden; background-repeat:repeat-x;height: 366px;position: absolute;width: 100%;"></div> 

입니다

:

이

내가 내 헤더 BG를 만들 index.php를 삽입 한 코드 나는 처음부터 로고와 로고의 수직 중심과 로고의 수평 중심에있는 사회 아이콘을 사용하여 요소를 연속적으로 얻으려고 노력하고 있습니다. 바로 환영 태그 바로 오른쪽의 공간이 지금과 같은 것입니다. 그런 다음 반응성 측면에서 볼 때 왼쪽의 환영 태그가 작아지고 폭이 줄어들고 사회 아이콘이 아래로오고 중심에 오도록 너비를 줄이면 로고가 절대적으로 중앙에 위치하게하고 싶습니다. 나는 이것이 의미가 있기를 바랍니다.

저는 로켓 테마 템플릿 인 Hadron과 joomla를 사용하여 내 사이트를 구축하려고합니다. 헤더는 브라우저의 전체 경로를 확장해야하며 모든 화면 크기에 응답 할 수 있어야합니다. 갠트리에는 이러한 도구 중 일부가 내장되어 있지만 이들을 통합하는 방법에 대해서는 알지 못합니다. 내 문제에 대한 도움을 주시면 감사하겠습니다.^_^

감사합니다. - fiddle

Answer 1

여기에 대한 답변과 몇 가지 추가 연구 덕분에 다음 코드로 내 노력을 성취 할 수있었습니다. @ilias

에

<div class="gantry-img"> 
<div class="gantry-img welcometag" style="text-align: left; width: 30%; min-width: 200px; float: left; max-width: 100%;"><img style="margin-left: 0; width: 100%;" src="images/template/header_welcometag.png" alt="" /></div> 
<div class="gantry-img clogo" style="text-align: center; width: 40%; min-width: 100px; float: left; margin-top: 32px;"><img src="images/template/header_logo.png" alt="" /></div> 
<div class="gantry-img socialcons" style="text-align: right; width: 30%; min-width: 200px; float: left; margin-top: 94px; margin-left: -5%;"><img style="float: right;" src="images/template/header_social.png" alt="" /></div> 
<div style="clear: both;"> </div> 
</div> 

덕분에 다음 다른 연구는 @media의 만들어 사용하는 모든로하고, CSS에이 추가 :이 무엇

@media all and (max-width : 768px) {.welcometag{display:none;} .clogo{width: 100% !important; clear:both; margin-top: 5px !important;} .socialcons{min-width:100px !important; width: calc(100% - 10px) !important; clear: both !important;text-align: center !important;padding: 15px 5px 5px 5px !important;margin: 20px 0px 0px 0px !important;float: none !important;} .socialcons img{float:none !important;}} 

, 제거하다 환영 태그 및 768 픽셀 너비보다 작은 모든 화면의 로고 및 소셜 아이콘의 위치를 ​​조정하고 크기를 조정할 수 있습니다.

기여한 모든 사람에게 감사드립니다 =)

Answer 2

이, 내 생각, 당신에게 시작을 줄 것이다 : 여기

는 내 사이트 개념의 이미지입니다.

HTML

<div class='topheader'> 
    <div class='leftthird'>Welcome tag</div> 
    <div class='righttwothirds'> 
     <div class='centerdiv'>Logo</div> 
     <div class='rightminidiv'>Social Icons</div> 
    </div> 
</div> 

CSS

.topheader { 
    width: 80%; 
    height: 100px; 
    background-image: url(); 
    border: 1px solid black; 
    margin: 10px auto; 
} 
.leftthird { 
    width: 33%; 
    height: 100%; 
    background-color: yellow; 
    float: left; 
} 
.righttwothirds { 
    width: 67%; 
    height: 100%; 
    background-color: transparent; 
    float: right; 
} 
.centerdiv { 
    width: 50%; 
    height: 100%; 
    background-color: green; 
    color: white; 
    float: left; 
} 
.rightminidiv { 
    width: 50%; 
    height: 100%; 
    background-color: blue; 
    color: white; 
    float: right; 
} 

나는 빈 URL을 가지고있는 topheader에 배경 이미지를 넣습니다.

바이올린에서 재생하고 배경 이미지를 연결 한 다음 한 번 원하는 방식으로 가져 오면 바이올린에서 복사 할 수 있습니다.

Answer 3

대신 span div를 만든 다음 원하는대로 치수를 조정해야합니다. 정렬 및 최소 너비를 조정하면 원할 때 가운데에 맞 춥니 다.

<div class="gantry-img"> 
    <div style="text-align: left; width:30%; min-width:200px; float:left;" class="gantry-img"> 
     <img alt="" src="/joomla/test/images/template/header_welcometag.png" style="margin-left:0; width:100%;"> 
    </div> 
    <div style="text-align: center; width:40%; min-width:200px; float:left;" class="gantry-img"> 
     <img alt="" src="/joomla/test/images/template/header_logo.png"> 
    </div> 
    <div style="text-align: right; width:30%; min-width:200px; float:left;" class="gantry-img"> 
     <img alt="" src="/joomla/test/images/template/header_social.png" style="float: right;"> 
    </div> 
    <div style="clear:both;"></div> 
</div>