i have a html page in which i am showing two images ... i want to add the text between the images.. at the moment the images are displaying like this
i want to do something like this
how can i add a text or small image of VS here in the middle.
here is my code in jsfiddle
http://jsfiddle.net/Gd5Bg/
i am writing a small bit of code here because stack is not giving me the permission to add a jsfiddle link without the code here
<div class="image-galery">
<a class="group" rel="group1" href="img/4_b.jpg">
<img src="img/4_b.jpg" />
</a>
</div>
<div class="span5 galery" style="float:left">
.......
</div>
<div style="float:left;position:relative;top:150px;left:5px;">vs</div>
<div class="span5 galery" style="float:left">
.......
</div>
Put your elements in a table. Then use
<td style="vertical-align:middle"> ... </td>
To center everything vertically.
Related
My html looks like that:
<div class="text-center"> (bootstrap class)
<p>Username</p>
<p>Name:</p>
<p>Last name:</p>
<p>Email:</p>
</div>
jsfiddle
I am trying to center align items, but I need them to start at the same point:
desired look
Any chance to achieve that using bootstrap?
<div style="display:flex; justify-content:center;">
<div>
<p>Username:</p>
<p>Name:</p>
<p>Last name:</p>
<p>Email:</p>
</div>
</div>
You need to take of the .text-center, an extra wrapper and then flex-center on the external wrapper. The flex centers the extra wrapper we put in, and the default align for that is left.
Basically I'm trying to create a simple webpage template which would contain 3 rows. The first being the header which contains two columns, the second just being the mainbody and then the last being a footer.
Coding wise i'm doing this kind of layout
<div id="wrapper">
<div id="header">
<header>
</header>
<div id="col2>
</div>
</div>
<div="mainbody"></div>
<footer></footer>
Basically the trouble I'm having now is in regards to the first row with the two columns. Basically I have a picture in the first one and a bunch of buttons on the second one. Ideally what I would like is to have the header at 100% width so it fits the screen and the contents of the first column stick to the left and the buttons to the right. With the blank space left inbetween the two. So the contents stick to the sides so to speak.
At the moment I'm using float:left on CSS for the first column, I've been messing around with float/align/position but I can't seem to get anything to work.
So any advice on that I would appreciate it.
I also had another question in regards to the footer, basically I have no idea how to even go about doing it. So just asking if possible and guidance where to look.
So for the footer I was wondering if it would be possible for it, if in between the footer and the browser x-axis there's white space it fits to the screen and the body would strech. Because as of now my body is only at the height of the contents within. So basically general advice on CSS to help implement the style so it fits to the screen.
Header with 2 columns
<div id="header">
<div id="column1" style="float:left;">Image</div>
<div id="column2" style="float:left;">Buttons</div>
</div>
Now add desired margin-left to second column div. It will create space in between 2 columns
<div id="wrapper">
<header>
<div id="column1" style="float:left;">Image</div>
<div id="column2" style="float:left;">Buttons</div>
</header>
<div class="mainbody">
Content
</div>
<footer></footer>
Use this
It is simple structure that can be created as follows (Here is DEMO)
HTML is
<div id="wrapper">
<div id="header">
<header><img src='http://www.topnews.in/files/facebook-yahoo.jpeg' height=200 />
</header>
<div id="col2"><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br>
</div>
</div>
<div="mainbody">mainbody
</div>
<footer></footer>
</div>
And CSS will be
#header{overflow:auto}
header{float:left}
#col2{float:right}
Hope it will help you :)
I have 4 divs in my .html:
<div id="div">
<div class="contenido">1</div>
</div>
<div id="divSupIzq">
<div class="contenidos"><div id="textoDinamico">120 </div><div id="textoEstatico">KM/H</div></div>
</div>
<div id="divSupDer">
<div class="contenidos">zona de</br>avisos</div>
</div>
<div id="divInfIzq">
<div class="contenidos">zona de</br>información</div>
</div>
In .css, I've applied border-radius in order to give these divs circular form.
I've applied text-align:center because I want the content of each div being centered
But how to center the content in the height?? I give some margin-top in .css, but it's wrong, because the interface is adaptable to the size screens (responsible design - css queries) and margin-top isn't sufficient for me...
I don't know if I'm explaining myself well...I try that yes.
Sorry for my bad english. Regards, Daniel
Live example: http://jsfiddle.net/cN2pS/
Another question: what tools do you use in order to test these type of apps for differents resolutions?
Use a table and set the align for each td center
<table>
<tr>
<td align="center">
Your text or elements
</td>
</tr>
</table>
Or set the div display as table-cell
I have a problem where if I write divs like this:
<div class="asdf">
Some content..
</div>
<div class="asdf2">
Some content
</div>
Then the two divs render with a space in between. If I write it has such:
<div class="asdf">
Some content..
</div> <div class="asdf2">
Some content
</div>
Then a space appears between the divs... BUT i I write it as such:
<div class="asdf">
Some content..
</div><div class="asdf2">
Some content
</div>
Then no space appears between the divs. How is it that this is the case? How can I fix this?
In short, HTML renders white space. I assume that you're rendering these div's inline? The solution you gave is, simply put, the solution.
I am making a WYSIWYG webpage editor: http://brokenmyriad.com/editor2.php, however I have come across a problem when trying to add image functionality.
Note: the image is not inside a contenteditable element, but is just a normal floated image.
The problem can be recreated by clicking into either the paragraph or the heading and the clicking the insert image button on the toolar (the far right button). (on the above linked page).
In standards based browsers it works as expected, and the heading and the paragraph are both to the right of the image, however in ie6 the paragraph is under the floated image like in this picture: http://tinypic.com/view.php?pic=2mfcfo8&s=3
My simplified code structure is as follows:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
</div>
<div>
<p>Click here to edit!</p>
</div>
What I want is for the <p> element to be alongside the floated image, and under the <h1> element as it is in standards based browsers.
Any help would be greatly appreciated!
Why is the paragraph in a separate div? Wouldn't the following work:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
<p>Click here to edit!</p>
</div>
If you must have the divs, then the second one needs to be nested
<div style="float: left;">
<img style='float:left'>
<h1>Click here to edit!</h1>
<div style="float: left;">
<p>Click here to edit!</p>
</div>
</div>
Your second div should be floated left:
<div>
<img style='float:left'>
<h1>Click here to edit!</h1>
</div>
<div style="float:left;">
<p>Click here to edit!</p>
</div>
It turned out that the elements had width:100% on them, which was causing the error.