complete noob here html/css.
i'm trying : http://imgur.com/bc72v4m
here code:
<div id="topbar"> <div class="image"> <img src="images/ghwlogo.png"> </div> <div class="text"> <h1>text text text text text</h1> </div> </div> i've tried floating div topbar, display-inline never displays horizontally.
i'm confused. following tutorials easy-peasy, when need figure out how yourself, it's different.
i think i'm missing step somewhere. feel should easy it's not.
img { display: inline; vertical-align: middle; } .subhead { display: inline; vertical-align: middle; }<div> <img src="http://dummyimage.com/100x100/000/fff"/> <h1 class='subhead'> text </h1> </div>i removed html; add more when can't think of how effect css. can add back, may have set display: inline on inner elements then.
generally, few different ways of putting elements horizontally:
floating: removes standard flow layout, , may interfere root element's total height. preferred method of placement feel there better alternatives.
display inline: treats element bit text. cannot have custom height or various other attributes.
display inline-block: "fix-all" me when want laid out horizontally, have other styling aspects height, border, etc.
position absolute: can make higher element "relative element" absolute positioning setting position: relative on it. floating takes out of layout, can overlap elements; useful things. don't rely on absolute pixel amounts much.
in case, once things laid out horizontally, vertical alignment next issue. remember adding content make block very tall, can't "vertical-align bottom of thing". think of elements in div letters in paragraph; smaller ones, you're telling how align 1 letter. biggest ones, you're telling where "letter" aligned compared others. so, it's important set vertical alignment how want on image well.
Comments
Post a Comment