CSSロゴ、リンク、プロファイルの整列の問題

私は楽しいために基本的なHTMLナビゲーションヘッダーをコーディングして、CSS/HTMLを自分で教えようとしていますが、意図した方法で整理することができません。CSSロゴ、リンク、プロファイルの整列の問題

私は真ん中と右のユーザーアイコンのページへの左端、いくつかのリンク上のロゴを持っていると思いますが、ここではMOCアイデアです：これは一緒にコードを解体した結果がです:(。

：私はこのような何か私は1つの、全体のコンテナ内部の3つの要素の場所を作成する必要が動作するように私の考えのためだと思うが、私はそうすることの効率的な方法を見つけることができないよう

これは私の現在のCSSコードです：読みの長さのため

<html> 
<head> 
    <link rel="stylesheet" href="stylesheet.css" type="text/css"/> 
    <title> </title> 
</head> 
<body> 
<a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a> 
<ul class="topnav" id="Topnav"> 
    <li><a href="">Link</a></li> 
    <li><a href="">Link</a></li> 
    <a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a> 
</ul> 
body content 
</body>

感謝をし、任意のヘルプは大歓迎です:)

編集：

html { 
height:100%; 
background-color: #f8f8ff; 
min-width: 800px; 
max-width: 1000px; 
margin: auto; 
} 

body { 
background-color: #FFF; 
} 

.topnav-logo{ 
float:left; 
background-color: #f8f8ff; 
margin: 0; 
padding: 0; 
} 

.topnav-profile{ 
float:right; 
background-color: #f8f8ff; 
} 

.topnav{ 
background-color: #f8f8ff; 
margin: 0; 
padding: 0; 
width: auto; 
} 

ul.topnav { 
list-style-type: none; 
overflow: hidden; 
} 

/* Float the list items side by side */ 
ul.topnav li { 
float: left; 
line-height: 110px; 
} 

/* Style the links inside the list items */ 
ul.topnav li a { 
display: inline-block; 
color: RGB(120,200,250); 
padding: 0px 10px; 
text-decoration: none; 
transition: 0.3s; 
font-size: 30px; 
}

とそれに行くためにHMTLは現在、次のようになりますので、多くの偉大な回答、感謝をすべて！遅いフィードバックのために申し訳ありません、NYE気晴らし:(

私はロゴ、リンク、およびプロファイルの間に物理的な視覚的な線を置くことを検討していません。私は、各要素のコンテナをしたいと思い、私は次のようにリンクテキストとプロフィール画像を整列するために探しています：。

リンク：縦真ん中、水平方向の真ん中

プロファイルIMG：縦真ん中、水平方向の右側を

出典

2016-12-31 Ben

あなたは、ブートストラップのようなフレームワークを使用して好みますか？ – Abk

ベンは「楽しく、CSS/HTMLを自分で教える」と言っていたので、ブートストラップを好まないと思います。 –

'html'要素に' min-width'や 'max-width'は必要ありません。 'margin：auto'も' html'要素であなたのために何もしません。 –

あなたが楽しみのためにやっているので、私はこれが最も簡単だと思います:)
私は完璧なレイアウトのためにすべての調整をしなかったが、ここであなたが望んだと思うものがある。
単ににtext-align:left , center and rightとwidth 33% approx (including Borders and stuffs)を与えて、各ブロックが33％のネットを取るようにします。

UPDATE垂直整列用。

\t \t div{ 
 
\t \t \t display: inline-block; 
 
\t \t \t width:32%; 
 
\t \t \t height: 50px; 
 
      line-height:50px; 
 

 
\t \t \t background-color: pink; 
 
\t \t } 
 

 
\t \t .left{ 
 
\t \t \t text-align: left; 
 
\t \t } 
 

 
\t \t .middle{ 
 
\t \t \t text-align: center; 
 
\t \t } 
 
\t \t .right{ 
 
\t \t \t text-align: right; 
 
\t \t }

<div class="left"> 
 
\t <span>Logo here on far left</span> 
 
</div> 
 
<div class="middle"> 
 
\t <span>link1</span> 
 
\t <span>link2</span> 
 
\t <span>link3</span> 
 
</div> 
 
<div class="right"> 
 
\t <span>User Icon on far right</span> 
 
</div>

出典

2016-12-31 06:40:02

これは、要素をずっと単純なデザインで並べて表示するのに便利でした。中央のリンクを垂直方向だけでなく水平方向にも合わせることは可能ですか（単純なコードスタイルを使用しますか？）パディングや縦線を追加しようとしましたが、中間の要素を大きなボックスに投げたり、ボックス全体を分割したりします。私はロゴの真ん中にリンク/プロファイルアイコンを作っています。 – Ben

はいそれはかなり簡単です。コンテナの 'text height'をコンテナの' height =コンテナの高さ 'と' horizontal'に対して 'text-align：center'が必要です。 –

@ Benまた、 'LogoとUser Icon'をコンテナの中に水平に配置する必要がある場合は、もう一度更新してください。しかし、質問では、あなたはそれらが遠く右になるように言ったので、私はそれを残しました:) –

これを試してください：

<html> 
     <head> 
      <link rel="stylesheet" href="stylesheet.css" type="text/css"/> 
      <title> </title> 
     </head> 
     <body> 
    <div class="header"> 
     <a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a> 
     <ul class="topnav" id="Topnav"> 
      <li><a href="">Link</a></li> 
      <li><a href="">Link</a></li> 
      <li><a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a></li> 
     </ul> 
</div> 
     body content 
     </body> 
    </html>

ここでCSSです：

html { 
    height:100%; 
    background-color: #f8f8ff; 
    min-width: 800px; 
    max-width: 1000px; 
    margin: auto; 
    } 

    body { 
    background-color: #FFF; 
    } 
    .header{ 
    display:inline-block; 
    }  
    .topnav-logo{ 

    background-color: #f8f8ff; 
    margin: 0; 
    padding: 0; 
    } 

    .topnav-profile{ 

    background-color: #f8f8ff; 
    } 

    .topnav{ 
    background-color: #f8f8ff; 
    margin: 0; 
    padding: 0; 
    width: auto; 
    } 

    ul.topnav { 
    list-style-type: none; 
    overflow: hidden; 
    } 

    ul.topnav li a { 
    color: RGB(120,200,250); 
    padding: 0px 10px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 30px; 
    }

は、必要なパディングとマージンを与えます。

出典

2016-12-31 06:42:28

はこれを試してみてください -

トップナビゲーションのための同一線上に並ぶ3つのdivを持つ構造体のようなコンテナを作成します。（I）display:inline-blockを使用するか、または（ⅱ）float

<div class="container"> 

    <div class="nav-container"> 
    <div class="left"> 
    <a> 
    <img width="100" height="100"  src="https://cdn2.iconfinder.com/data/icons/social-media-8/512/image3.png"  alt="site-logo"></a> 
    </div> 
    <div class="mid"> 

    <ul class="topnav" id="Topnav"> 
     <li><a href="">Link</a></li> 
     <li><a href="">Link</a></li> 
    </ul> 
    </div> 
    <div class="right"> 
    <a class="topnav-profile" href="index.html"><img width="100" height="100"  src="http://www.aspirehire.co.uk/aspirehire-co-uk/_img/profile.svg" alt="user  profile"></a> 
    </div> 
    </div> 
</div>

CSS - - あなたが整列する2つのオプションを持っている

.container { 
    position:relative; 
    width:80%; 
    margin:0 auto; 
    border:1px solid #cccccc; 
} 
.nav-container { 
    border:1px solid #cccccc; 
    height:100px; 
} 
.left { 
    float:left; 
    border:1px solid #cccccc; 
    width:20%; 
    height:100%; 
} 
.mid { 
    float:left; 
    border:1px solid #cccccc; 
    width:59%; 
    height:100%; 
} 
.right { 
    float:right; 
    width:20%; 
    height:100%; 
    border:1px solid #cccccc; 
}

See Fiddle

出典

2016-12-31 06:55:54

あなたの私は通常、それを処理する方法にスーパーがあります。 divタグ全体にnav-barを入れたり、より良いnavタグを付けて適切なクラス名を与えると、もっと簡単にスタイルを設定できます。

<html> 
<head> 
    <link rel="stylesheet" href="stylesheet.css" type="text/css"/> 
    <title> </title> 
</head> 
<body> 
<nav class="primaryNav"> 
<a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a> 
    <ul class="topnav" id="Topnav"> 
     <li><a href="">Link</a></li> 
     <li><a href="">Link</a></li> 
     <li><a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a></li> 
    </ul> 
</nav> 
body content 
</body>

CSS

.primaryNav{ 
height: whatever; 
width: whatever: 
} 
.primaryNav ul{ 
list-style:none; 
width: whatever; 
float: right 
} 
.primaryNav li{ 
display:inline-block; 
margin:I usually give a margin here; 
} 
.primaryNav a{ 
padding:10px; 
}

このような何か。また、あなたが使用することができるものだけを制御したい場合は、私はまたあなたのタグを閉じました.primaryNav li：nth-last-child（1）

あなたがそこにある画像についてもチェックしてくださいFont Awesome、彼らは、あなたのcdnを使用することができますか、またはCSSファイル全体を取得するためのアイコンを使用するトンがたくさんあります。それは遊ぶのが楽しいかもしれません。

出典

2016-12-31 07:12:57

あなたが望むのと同様にこれをチェックしてください。あなたが提供したMOCアイデアイメージに基づいています。ガイドとして使用してください。

#main{ 
 
    width: 99% 
 
    height: 700px; 
 
    border: 1px solid grey; 
 
    
 
    
 

 
} 
 
#content{ 
 
    width: 90%; 
 
    height: inherit; 
 
    border-right: 1px solid grey; 
 
    border-left: 1px solid grey; 
 

 
    margin: 0 auto ; 
 

 
} 
 

 
#header{ 
 
    width: 100%; 
 
    border-bottom: 1px solid grey; 
 
    height: 80px; 
 
} 
 

 
.logo{ 
 
    width: 20%; 
 
    height: inherit; 
 
    float: left; 
 
    border-right: 1px solid grey; 
 
    
 
} 
 
.logo img{ 
 
    max-width: 80px; 
 
    max-height: 80px; 
 
    padding: 5px; 
 
} 
 

 

 
.nav{ 
 
    width: 50%; 
 
    float: left; 
 
    margin-right: 5px; 
 
    padding: 5px; 
 
} 
 
.icon{ 
 
    width: 20%; 
 
    float: left; 
 
    margin-left: 5px; 
 
    padding: 5px; 
 
} 
 

 
.icon img{ 
 
    max-width: 60px; 
 
    max-height: 60px; 
 
    
 
} 
 

 
.nav ul li{ 
 
    display: inline; 
 
    text-decoration: none; 
 
    padding: 5px; 
 
    border: 1px dashed orangered; 
 
    margin: 5px; 
 
} 
 

 
.text p{ 
 
    padding: 10px 10px 0; 
 
}

<body> 
 
    <div id="main"> 
 
    <div id="content"> 
 
     <div id="header"> 
 
     <div class="logo"> 
 
      <img src="http://res.cloudinary.com/wisdomabioye/image/upload/v1462961781/about_vbxvdi.jpg" alt="Image" /> 
 
      </div> 
 
     <div class="nav"> 
 
      <ul> 
 
      <li> link 1 </li> 
 
      <li> link 2 </li> 
 
      <li> link 3 </li> 
 
      
 
      
 
      </ul> 
 
      </div> 
 
     <div class="icon"> 
 
      <img src="http://res.cloudinary.com/wisdomabioye/image/upload/v1477218723/images_a0xbmx.png" alt="icon" /> 
 
      </div> 
 
     
 
     </div> 
 
     <div class="text"> 
 
      <p> 
 
What is Stick Checking? 
 

 
The act of using the hockey stick to knock the puck off of the puck carrier's stick or to clear it away from their vicinity. 
 
Sporting Charts explains Stick Checking 
 

 
Stick checking is a defensive move where a player will stop the puck carrier's progression by knocking the puck off of their stick and out of their possession. It's often done when the defender isn't in a position to stop the attacker by using their body. Stick checking has been used in hockey since day one. There are several variations of the move, such as the poke, tap, sweep, and press check. Another common stick check is lifting the opponent's stick while they're in possession of the puck and then taking it away from them. A good stick check will result in the defending player gaining possession of the puck which will then allow them to start an offensive play. Stick checking can also be considered an offensive play when it's performed in the opponent's zone by a fore checker. A successful stick check in the offensive zone can often lead to a scoring chance. 
 
</p> 
 
      <p> 
 
What is Stick Checking? 
 

 
The act of using the hockey stick to knock the puck off of the puck carrier's stick or to clear it away from their vicinity. 
 
Sporting Charts explains Stick Checking 
 

 
Stick checking is a defensive move where a player will stop ion of the puck and then taking it away from them. A good stick check will result in the defending player gaining possession of the puck which will then allow them to start an offensive play. Stick checking can also be considered an offensive play when it's performed in the opponent's zone by a fore checker. A successful stick check in the offensive zone can often lead to a scoring chance. 
 
</p> 
 
      </div> 
 
     </div> 
 
    
 
    </div> 
 
    
 
    </body>

出典

2016-12-31 07:15:04 Abk

<!DOCTYPE html> 
<html lang="es"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style> 
html { 
    height:100%; 
    background-color: gold; 
    min-width: 800px; 
    max-width: 1000px; 
    margin: auto;} 

body { 
    background-color: #ddd;} 

.topnav-logo{ 
    float:left; 
    background-color: red; 
    margin: 0; 
    padding: 0; 
    width:calc(10% - 2*1px);height:110px; 
    border:1px solid} 

.topnav-profile{ 
    float:right; 
    background-color: pink; 
    width:calc(10% - 2*1px);height:110px; 
    border:1px solid} 

.topnav{ 
    margin: 0; 
    padding: 0; 
    width: 80%;} 

ul { 
    list-style-type: none; 
    overflow: hidden;} 

/* Float the list items side by side */ 

.topnav li { 
    float: left;border:1px solid; 
    margin-right:.5em; 
    line-height: 110px; 
    width:calc(100% /3 - 1*.5em - 2*1px)} 

/* Style the links inside the list items */ 

.topnav li a { 
    color: RGB(120,200,250); 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 30px;} 

</style> 
</head> 

<body> 

<header> 
<div class="topnav-profile"> 
    <a href="index.html"><img src="images/profile.png" alt="user profile"></a></div> 
<div class="topnav-logo"> 
    <a href="index.html"><img src="images/logo.jpg" alt="site-logo"></a></div> 
<nav> 
    <ul class="topnav" id="Topnav"> 
    <li><a href="">Link</a></li> 
    <li><a href="">Link</a></li> 
    <li><a href="">Link</a></li> 
    </ul> 
</nav> 
</header> 
<div>2 logos: user profile must be first to float right . Each logo has width:calc(10% - 2*1px)*2, and the nav element:width:calc(100%/the number of links you want - 1*.5em -margin-- -2*1px --border--). <a href="http://codepen.io/amaiafilo/pen/ZLzOEE?editors=1100">See in codepen </a></div> 
</body>

出典

2016-12-31 08:39:35 amaiafilo

CSSロゴ、リンク、プロファイルの整列の問題

答えて

関連する問題