It's very simple. I just need to put two lines of text on either side of an image which is centered on my landing page. I don't know how to make it responsive except for using position: absolute. How can I do this without having to use position: absolute.
I tried using flexbox but it seems like it won't let me adjust the position of my text freely as the items are literally adjacent to each other.
Here's the code employing flexbox:
<div class="overall">
<div class="hi">
<p>OH <br>GOSH <br> HI!</p>
</div>
<div class="human-container">
<img src="img/landing page human.svg" onmouseover="this.src='img/landing page human 2.svg'"
onmouseout="this.src='img/landing page human.svg'">
</div>
<div class="my-name">
<p>MY<br> NAME<br> IS <span class="Ray">Ray</span></p>
</div>
</div>
I would go simply by following these steps:
- Add "float: left;" to the following classes: ".overall", ".hi", ".human-container" and ".my-name".
- Add an id(#) to the img and give-it a float:left; and a width:100%; too.
- Give to class ".hi" a width: 5%;
- Give to class "human-container" a width:90%;
- Give to class "my-name" a width:5%.
This should do it.
:D
#align_text_center{
height:100%;
display:flex;
}
#aligned_text_h1{
margin:auto;
}
<html>
<body>
<div id="Container1">
<div id="align_text_center">
<h1 id="aligned_text_h1"></h1>
</div>
</div>
<div id="Container2">
<div id="align_text_center">
<h1 id="aligned_text_h1"></h1>
</div>
</div>
</body>
</html>
Welcome! I got again a bit problem while positioning the texts to it's position. I have a h1 element in the center of container1,container2 id's.
I want to align a second(and later a third) text below the first h1 element. I can't say it, so I made an interactive image about it. :(
Thank you for help! :)
I draw an interactive image,click here.
Place all the elements you want to position in the same div, and then position that div, rather than positioning each element separately.
Alright so I'm trying to create a top bar line the one somewhat at the top of this one. I used the tag and when I try and put anything else on the line it goes to the next line. My code looks like this:
<div id="topbar">
<center>
<img src="images/hehe.png" />
</center>
ALSO ON TOP BAR!
</div>
but instead the image is on the top bar and "ALSO ON TOP BAR!" goes to the next line and is no longer in the top bar. How do I fix this?
#topbar
{
text-align: center;
}
and Html is
<div id="topbar">
<img src="images/hehe.png" />
ALSO ON TOP BAR!
</div>
Fiddle
Don't use <center> tag. mention in css stylesheets.. That is the better one..
<div class="topbar">
<div style="text-align:center;">
<img src="images/hehe.png" />
ALSO ON TOP BAR!
</div>
</div>
Using css text-align:center; to centralize.
I would refrain from using the center tag set as it is no longer used in HTML.
It's recommended to use CSS for your task.
As mentioned in another thread, text-align: center will fix your issue.
However, I would recommend the following to horizontally center non-textual elements:
img {
display: block;
margin: 0 auto;
}
This would center your image horizontally.
Demo: http://jsfiddle.net/uberrobert/GPGbn/1/
I'd like to position two DIVs in another container so that the first is against the parent's left edge and the second is against the parent's right edge. Here's the markup I have so far:
<div class="parent">
<p class="flushleft">
This paragraph should be aligned left.
</p>
<p class="flushright">
This one should be aligned right.
</p>
</div>
How can this be done without using floats? I'd like to keep everything in the normal flow, if possible. Thanks!
Use display: inline-block in your css code.
Using your HTML, here's the CSS:
.flushleft{
width:50%;
display:inline-block;
}
.flushright{
width:50%;
display:inline-block;
}
Or since they're both identical - if you don't intend to style them further - you can use one class.
I like the h1 element because it specifies the contents are header style contents, but you're not supposed to put things like images or divs inside an h1, so is there an alternative to an h1 that I can put other markup in?
My current html looks like this:
<div class="section">
<h1>
<div style="float:left">header text</div>
<div style="float:right">text</div>
<div style="clear:both;float:none;"></div>
</h1>
<div>body contents</div>
</div>
I like the h1 because I can add a css style to any h1 with a div.section class, but I'm not suppoed to put divs in it...
You could always do
<h1>header text <span>text</span></h1>
Then you handle the css for clearing the floats and floating the second text in the css file.
You should use a semantic image replacement method: Which makes for the most elaborate design (images, colors ect.. the graphic is your oyster) as well as being completely semantic and accessible.
Otherwise as mentioned above, you can add any element that is an inline element: A, SPAN, ect... inside of your H1... but I would shy away from this if you are interested in semantics and being SEO friendly.:
<style>
h1{
background: url('../path/to/image/image_to_replace_header.jpg') no-repeat top left; // Sets the BG that will replace your header
text-indent: -9999px; // Moves the test off screen
overflow: hidden; // Hides the staggered text for good
width: 300px; // Sets width of block(header)
height: 100px; // Sets height of block(header)
}
</style>
<h1>My Awesome Site</h1>
Now your text is still technically there, but you have a pretty photo in its place. Sighted, non sighted, and robot friendly.
The method i personally prefer is to keep the <h1> tags intact and use <span> tags instead of divs inside them. You can style the spans to be display:block and then treat them like divs if need be. This way, the semantic meaning of your <h1> tags is kept, and needless <divs> are omitted. Read up on divitis.
This won't solve your problem if you need to include images inside your <h1> tags. You probably shouldn't be adding graphical styling with img tags anyways, but rather applying the image as a background to the the <h1> element, moving style-related graphics out of your markup into your CSS files.
Is there a reason you don't specify just:
<div style="float:right">text</div>
<h1>header text</h1>
<!-- <div style="clear:both"></div> only if really necessary -->
This will keep your markup semantic, still float text to the right and keep it out of the h1 tag which it is semantically not part of.
To answer your question directly: yes you can use another method. It keeps your CSS editing ability, as well as having a proper H1 element:
<div class="section">
<div id="Header">
<h1 style="float:left">header text<h1>
<div style="float:right">text</div>
</div>
</h1>
<div>body contents</div>
</div>
All the important text is in the H1 and you can still style it as you like.
You can use html5 structural elements :
<section>
<header>
<div>header text</div>
<div>text</div>
</header>
<article>body contents</article>
</section>
Just reverse the nesting order of some of your code:
<div class="section">
<div style="float:left"><h1>header text</h1></div>
<div style="float:right"><h1>text</h1></div>
<div style="clear:both;float:none;">body contents</div>
</div>
I'm not sure that the right-floated text was supposed to be h1, but you get the idea. Often these things are best solved by keeping block-elements on the outside and nesting the line-elements within them.
Headers have semantic meaning. Think of a magazine and why they use headers. If you want to place an image in a header for decoration purposes, use a background-image. I cannot think of a reason why you would need to put an image into a H1 for contextual purposes.