How to keep navigation text inline with the end of an image - html

I'm creating a navigation bar and I want the text, which is going to be on the right, to be inline with the end of the image. I want it to stay aligned and in position regardless of whether the window is resized or not.
I've included an image incase I haven't explained it very well:
http://i.stack.imgur.com/QWR6L.png
Hopefully you guys can help!

Is this something that you are looking to achieve ?... http://jsfiddle.net/65fBD/ Now the way i achieved it is to float the image to the right and wrap the image and the links inside a div and give it a min-width attribute. what this does that as soon as it hits the minimum width specified in viewport, the division will not shrink after that thus maintaining the inline look.
here is the css
#navcontainer {
width:100%;
min-width:400px;
height:40px
}
#image {
float: left;
}
#links {
float:right;
}
and the html...
<div id="navcontainer">
<img src="http://dummyimage.com/230x40/123dfe/fff" id="image"/>
<p id="links"> Link | Link | Link </p>
</div>
But on another note, please clarify what you mean by if window is resized the link should stay aligned....are you referring to responsive design?

Related

Centering a layer of unspecified width

For the sake of record, I have read How do I center a div with an unspecified width? and found that although my problem is related to it, it is not exactly that.
I have a layer containing only one image (the logo of my site) and nothing else. Right now I do know the size (width) of the logo image (and hence the width of the layer) and if I specify the width of the layer, I am able to put it in the center of the page. That is:
#logodiv {
position:absolute;
width:200px;
margin:auto;
}
and inside the webpage source
<div id="logodiv">
<img src="logo.png" />
</div>
However for the sake of making my site more responsive for smaller display size devices, I do not want to specify the width of logodiv in hard and fast figures. But then I am unable to place my logo layer in the center of the page.
Any workaround for that?
Try this-
#logidiv{
margin:0px auto;
display:flex;
justify-content:center
}
If your markup looks like this:
<div id=logodiv>
<img src="logo.png">
</div>
then you can use this style
#logodiv {
width:max-content;
margin: 0 auto;
}
to center it horizontally.

Positioning images

So, I'm trying to do something like this:
The web page is supposed to look like a phone app, and it has to be responsive. The problem is that I can't position the buttons right. They always move in relation to the 'tablet' whenever I'm re-sizing the browser window. This is what I've tried (with only one button):
CSS
img {
max-width: 100%;
}
#tabletBG {
width : 60%;
}
#buttons{
position:absolute;
width:10%;
left:40%;
top:12%;
}
HTML
<div id="content">
<div id="tablet">
<img id="tabletBG" src="images/tablet.png" alt="tabletBG"></img>
<div id="buttons">
<img id="quienes" src="images/quienes.png" alt="quienes"></img>
</div>
</div>
</div>
I just want the buttons to stick to the tablet. Even if i'm re-sizing the browser window. Is there an easier way of doing this? Thanks.
Regarding your original question above:
Try setting the position of your content div to absolute, fixed, or relative.
This will ensure that your absolutely positioned buttons div contained within it will use it as a reference point rather than referring its resizing/relocating to the window.
DEMO: http://jsbin.com/tixed/1/
Regarding your comment below:
It works, but for an extent. There's a point that if you keep expanding the browser window, the tablet will keep expanding, but the button won't. Here's a link.
The problem there is that your image is only 96 pixels wide, and you've set a CSS rule for all img elements to have a max-width: 100%. Under these conditions, the image will expand only to the point of its original size (the default action, and not what you want), and only to the point of its containing element (by your CSS rule, and to no noticeable effect).
To correct, ideally you would get a larger image. For a quick fix, change its rule to be simply width: 100%. This will ensure the image always expands to the point of its containing element.
Yes, whenever you re-size your browser the images will change their alignment and this is a default behavior of browsers. Only you can make this images to float.
Try this:
img{
float: left;
}

How to prevent overlapping content during window resizing

I have a little problem --
I have two div on left and right, as my screen resolution is 1280*768, they work fine here. but when I reduce the window size it overlaps each other ... like left one is reduce in width and right one make that happen ...
here is my code..
<div class="shareBar" align="right">
......
</div>
<div class="content">
.....
</div>
and my css code is here
.content{
position:relative;
margin: 110px 5px 10px 5px;
min-width:700px;
}
.shareBar{
position:relative;
}
here shareBar overlaps content...
And I want to make this shareBar always in a static position and when window re-size occurs a horizontal scroll-bar should appears so that content will always in in a static size. Or otherwise shareBar should reside under content.
Is it possible with pure css?
If you want to make .sharebar appear in the same place and provoke a horizontal scrollbar on window resize, you should remove align="right" from the HTML give it position:absolute as well as a specified location in the CSS. For example:
.shareBar{
position:absolute;
left:900px;
}

Using Background Image to Display An Image in BooStrap

I just finished building part of my website using Twitter's BootStrap, but am looking on ways to improve it. This module has an image of known width but unknown height (image height will vary but has fixed width) and has text on top of the image. I originally built this by having an image tag inside a div, then using position:absolute; top:0; to move a layer a text above it.
I don't like the idea of using position:absolute;. My alternative solution is to treat the image as a background of a div that contains the text. However, by doing so, I have encountered two problems:
I don't know how to specify the height of the div as this is a
variable based on the height of the image. The width will always be
of span4 (300px). Each image will only have a few words at most
therefore not enough to take up the entire vertical space of the
div.
As the browser width shrinks, part of the background div gets
cropped off. This is because BootStrap is trying adjust for
responsiveness. How would I fix this?
I am completely stumped, and I feel that this alternative solution is not possible without being able to define a definite height. Is there a better alternative?
My code:
<div class="span4 cell">
This is a placeholder image
</div>
.cell { background: url(http://www.placehold.it/300x200) no-repeat; }
Just to be clear, here is an image of what I am trying to create:
Demo................................
HI now used to this
.span4.cell {
background:url("http://www.placehold.it/300x200.jpg") no-repeat;
width:300px;
height:200px;
}
Live demo
Try this css code. It set height as auto.
remove if you don't want border.
.cell {
background:url("http://i.stack.imgur.com/klttw.jpg") no-repeat;
width:300px;
height:200px;
border: 1px solid red;
}
Try this demo: jsfiddle

CSS Image within div will not change sizes

I have two divs on my page, and between the two div's I have an image. Let me further explain...
Div 1 - This is the page's container.
Div 2 - Holds a few lines of text
Image - Just an ordinary jpeg image I want to format.
Div 2 takes up 40% of my page starting from the page's left border. It stretches very far down my page. So, this leaves around 60% of my page left to work with. I want for my image to be 200px wide, and 110px in height. For one reason or another, my image just appears on the bottom of my page in it's original (pre-format) width and height. I will show you the code that I am using.
HTML:
<div id="container">
<div id="div2">
<p> Hi SO, I hope someone can help me with this issue! </p>
</div>
<img id="image1" src="test.jpg" alt="" />
</div>
CSS:
#image1{
width:200px;
height:100px;
position:relative;
float:right;
}
To recap, I want the image 'image1' to be aligned between the left edge of 'div2' and the page's right border. So, I want it centered between the two but NOT centered on my page of course.
I don't think you want to be working with percentages to achieve what you describe.
This is basically what you want:
http://jsfiddle.net/fdXHs/2/
You can check my styles to see how I did it, if you need a more thourough explanation I will post it.
Also you describe that nothing happens to the image, this indicates that no styles are being applied, check your css markup if theres anything that might cause not being used.
AFTER WEBSITE EDIT
The column that needs to hold both elements (the image and the 40% width div) isn't wide enough to hold them both (combined width is 957px, container width is 845px). There isn't enough room for the image so it gets bumped under the first div...
replace prductsummary with:
#productsummary {
clear: both;
background: red;
margin: 0 220px 0 10px;
padding: 10px 0 0 0;
)
And the image:
#lol {
width: 200px;
float: right;
margin: 10px;
}
Try adding float:left; to #div2, like so. Basically, to float content to the right of something, that other content must also be floated. Even then, though, if the floated content doesn't fit the remaining space, it'll go onto the next line.
If you're still having trouble setting the image dimensions, check to make sure that you aren't overriding the css in the image tag itself (say, <img src="whathaveyou.jpg" width=500 height=500> or <img src="whathaveyou.jpg" style="width:500;height:500">)