I'm stuck with adjusting the height of my block in relation to the amount of text inside it. On desktops it works fine, but on my iPhone the text goes over the div with the violet background.
Life demo: https://www.ruslanchik.ru/en/. To reproduce the problem, you may use your mobile device.
.section-with-personal-photo {
width: 100%;
height: 100%;
min-height: 360px;
background-image: linear-gradient(126deg, rgb(92, 52, 116)40%, rgb(142, 102, 206)100%)
}
.section-with-personal-photo-image {
padding: 0;
display: block;
float: left;
clear: left;
content: url("//res.cloudinary.com/ruslanchik/image/upload/c_scale,h_360/v1525190031/ruslanchik.ru/i/avatars/LinkedIn-photo-shooting-session-05.04.2018.png")
}
.section-with-personal-photo-text {
height: 100%;
max-width: 68%;
float: right;
color: #ffffff
}
<div class=section-with-personal-photo>
<div class=section-with-personal-photo-image></div>
<div class=section-with-personal-photo-text>
<h3 id=resume>CV</h3>
<p>I will tailor it to your specific vacancy and do a keyword opimisation.</p>
<ul class=dotted-list>
<li><a href=//www.ruslanchik.ru/en/cv/professional/ title="Ruslan Seletskiy's Professional CV" target=_blank>Professional CV</a></li>
<li><a href=//www.ruslanchik.ru/en/cv/academic/ title="Ruslan Seletskiy's Academic CV" target=_blank>Academic CV</a> <span> featuring with a long appendix</span></li>
</ul>
<p id=make-an-offer>Let me know about some opportunities available at your organisation:
<ul class=dotted-list>
<li>ruslanchik#ruslanchik.ru</li>
<li>ruslan.seletskiy#gmail.com <span> if you think my domain email is unprofessional</span></li>
</ul>
</div>
</div>
I've checked various posts on Stackoverflow, but solutions from many of them didn't work. For all the rest, solutions (e.g. how do I give a div a responsive height) made the layout even worse.
Any relevant help is highly appreciated.
You can also remove float and max-width from your 'section-with-personal-photo-text' class.
Then add 32% padding to your 'section-with-personal-photo'. This results in the div expanding like so:
note (the image you have doesn't appear because the cloudinary domain is blocked on my network for some reason but, it should still work)
That's good you posted the live example, this issue is also replicated with Chrome browser, so I tried it and I found a solution but I recommend you to adjust font-size for small devices too, but anyway look at it and consider if it's okay for you:
1) Set the overflow: auto to this element:
#section-with-personal-photo
2) Set the width: 32% to this element:
#section-with-personal-photo-image
When you are the view, you can see that the parent element is growing up and all content isn't overflowing.
But also there is a better solution for this case, but I hope this helps you to figure out this overflow issue.
Try setting height: auto; not height:100%:.
Related
I am working on this task where I need to put the divs in the required positions. The final result should be this:
.
I have the following code:
HTML:
<div class="activity">
<h2>Activity 5</h2>
<section class="hint"><input type="checkbox" > <h3>Hint 5</h3><i></i><div><p>Grid is <strong>not</strong> the right way to do this. In fact there is only one way to really do that...and that is with float. Remember that we float the thing we want the text to wrap around. Also remember to start by making all the shapes the right size and shape.</p><h4>Properties used:</h4><ul><li>float: left;</li></ul></div></section>
Wrap the text around the square like in this image. This is one case where Grid is NOT the right way to solve this one and will in fact make it harder if you try to use it!
<div class="content5" >
<div class="red5" ></div>
<div class="green5" ></div>
<div class="yellow5">Step 01: Continue creating the main page for your chosen web site by modifying the CSS file you created in week 9's Adding Classes and IDs to Your Website assignment. This week, you will position all of the content on your main page using the CSS positioning techniques taught in KhanAcademy. When you are done, your webpage layout should reflect what you outlined in the wireframe you designed in the assignment Your Own Site Diagram and Wireframe in week 3. <br />
If you have changed your mind on how you want the content of your main page laid out, take an opportunity to update your wireframe before completing this assignment (it is much easier to experiment with different layouts in a wireframe than it is to do so by modifying the CSS). Also, if you find that you are having trouble with using CSS positioning, feel free to review the concepts at the learn layout site: http://learnlayout.com/. You should be able to apply these principles to your site. For futher help, refer back to the Max Design site used in the beginning of the course for an example of how to implement your site design.</div>
<div class="blue5"></div>
</div>
</div>
CSS:
.content5 {
/* This is the parent of the activity 5 boxes. */
position: relative;
}
.red5 {
width: 100%;
height: 100px;
background-color: red;
}
.green5 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
}
.yellow5 {
width: 100%;
height: auto;
background-color: gold;
}
.blue5 {
width: 100%;
height: 100px;
background-color: blue;
}
The code I have so far looks like this: I have tried a couple of things to make the text appear next to the div but they haven't worked. The HTML should not be modified. And I need to use CSS for this task, not bootstrap or something else. Thanks!
Add this to .green5 would work.
I've tried it and it actually works well.
.green5 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
For the life of me i cannot get this to work, any help will be much appreciated!
I am trying to apply a background image to a div class, for some reason the image will not show up, yet when i apply the same image to the body, it works perfectly, i have created a new html/css file to test and play around with it, see the examples below.
This works
HTML
<body>
<div class="topNav">
<p>Content here</p>
</div>
</body>
CSS
body {
background-image: url("images/topNav-bg.png");
background-repeat: repeat-x;
}
This doesnt
<body>
<div class="topNav">
<p>Content here</p>
</div>
</body>
CSS
.topNav {
background-image: url("images/topNav-bg.png");
background-repeat: repeat-x;
}
The only difference in the one that doesnt work to the one that does, is the css selector points to the class and not the element, any idea why it could be that I am having this problem? I have tried adding an ID also to the div, thinking with more specifity it might work, I have also tried making the div class width and height 100% thinking if the size is set it would work, but it still does nothing, and also, it surely wouldnt work on the body element if that were the case?
My css file is linked and path to the image is all correct also, otherwise it surely wouldnt work when I apply the css rule to the body element?
This seems really basic but has been bugging me for ages now!
Thanks in advance,
Jamie
EDIT
the actual code in my working page is as follows:
HTML
<div class="topNav">
<ul>
<li>Log in</li>
<li>Create account</li>
<li>Contributions</li>
<li>Talk</li>
<li><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Not logged in</li>
</ul>
</div>
CSS
.topNav {
margin: 0px 0px 0px 176px;
background-image: url('../images/topNav-bg.png') !important;
background-repeat: repeat-x;
height: 40px;
width: 90.83%;
}
I thought it may be something else interfering, thats why i made the example to try and isolate the problem, it repeated itself though after I had removed all other styling from the div.
body div .topNav {
background-image: url("images/topNav-bg.png");
background-repeat: repeat-x;
}
I think this might work
You are using div, you have to set the height and width.
<style type="text/css">
.topNav{
background-image: url("http://mejorconsalud.com/wp-content/uploads/2014/06/manzanas.jpg");
background-repeat: repeat-x;
height: 500px;
width: 500px;
}
</style>
Ah, I forget, the property repeat-x dont work with div...
There are probably some inherited styles or such that apply to the ul that you are not showing us (a float for example), that collapses the content.
Try applying the following style:
.topNav:after {
content:'';
clear:both;
display:block;
}
Sometimes when styles start stacking up inheritance becomes a problem you need to deal with. One such scenario is when you use floats. Then the floated element might get collapsed and wont have height unless you give it one or apply something like the style I suggest here.
I am trying to make my divs appear horizontally across the page but there is an automatic line break in between them. I was wondering how I could fix this.
<div id="box1">
<header id="whyshouldi">
What is iOS Development
</header>
<p id="whatis">
iOS Development is the process used to create native applications for iPhone, iPod, and iPad. Applications are made using the SDK(software development kit), Xcode. Aside from the software, it is necessary that iOS Developers know Objective-C.
</p>
</div>
<div id="box2">
<header id="whyshouldi">
Why Should I learn it?
</header>
<p id="whatis">
Learning native app development can allow you to better expand the horizon of knowledge in iPhone, and can make you a better programmer overall. It is a great skill to know no matter who you are.
</p>
</div>
This is the default behaviour of block-level elements .. there are many options to have the two divs appear side by side but one simple way is by using the float property and giving each div a width of 50%
Example
you can position them absolutely:
#box1,#box2 {
position: absolute;
width: 50%;
}
#box1 {
left: 0;
}
#box2 {
right: 0;
}
This can be quite easily achieved introducing either a class or using some specificity trickery. If you use display: inline-block you can achieve what you're after. So let's say you introduced a class to your #box1 and #box2 ID's you could in theory...
.col { display: inline-block; max-width: 170px; width: 100%; vertical-align: top; }
Always remember when using inline-block to close any gaps in mark up between #box1 closing </div> and #box2 opening <div>. Otherwise you'll be left with 3 or 4 unwanted pixels.
Check this fiddle. I think this is what you're after. http://jsfiddle.net/UsNBj/
For some reason my web page is not display correctly in Firefox version 14.0.1. It is displayed correctly in IE9, Safari, chrome. A friend of mine also said he experienced the same as me.
In Firefox if I zoom out or in the layout changes. But then the YouTube video begins to smear and pixelate. I asked a friend to check Firefox on their computer and the same thing happens.
http://wwww.streetstyles4all.co.uk/images/screen_shot.jpg
The screen shot from top left shows how the page loads. Top right shows after I zoom in or out, and bottom left is after I scroll up and down.
HTML:
The HTML for the section in question is:
<div id="homewallcontainer">
<div id="homesidenavcontainer">
<script type="text/javascript" src="http://forms.aweber.com/form/23/850302323.js"></script>
</div>
<div id="newsletterblurb">
<p>
Learn everything you need to get yourself going in the world of street dance, tips, facts, what to wear, music, videos and more. Just fill in the form above - simple!
</p>
</div>
<div id="contentcontainerhome2">
<h1>Street Styles 4 All is the place to be for street dance! With classes, DVD's that are sold worlwide, dancers for hire, streetwear...find out why you should choose Street Styles 4 All:
</h1>
<div id="homess4atrailer">
<iframe width="466" height="302" src="http://www.youtube.com/embed/QyhgZ6I_DHo" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
The CSS is:
#homewallcontainer {
background: url("images/wall.png") repeat scroll 0 0 transparent;
height: 542px;
margin-top: -1px;
width: 960px;
}
#homesidenavcontainer {
float: left;
margin-left: 41px;
margin-top: 110px;
width: 253px;
}
#homesidenavcontainer {
float: left;
margin-left: 41px;
margin-top: 110px;
width: 253px;
}
#contentcontainerhome2 {
float: right;
margin-right: 17px;
margin-top: 46px;
width: 528px;
}
#homess4atrailer {
margin-left: 56px;
padding: 38px 0 10px;
}
First: Your question/problem is extremely unclear. You don't have resizing issues, you just have a messed up website that's "looks correct" when you resize, right ? Is that what you want to say ?
You problem is: The site is build by amateurs. There are a lot of layout issues, but there's a simply solution:
Remove the position:relative; of #indexwrapper in ss4a4.css, around line 250+ !
The reason for the fault in Firefox seems to be the use of the HEIGHT attribute. It was applied to 2 divs, and after removing the HEIGHT and POSITION:RELATIVE attributes, replacing with FLOATS, MARGINS and PADDING to create the layout of all the divs and nested divs in the section in question corrected the firefox issue.
That section of the site was carelessly written!
I have a header which I constructed like this:
<header class="top">
<a href="">
<span class="right">Stichting Delftsche Opera Compagnie presenteert</span>
<h1 class="right">Carmen</h1>
<h2 class="right">Een opera door Krashna Musika en de TU Delft</h2>
</a>
</header>
This should look like this, as someone made this in Adobe Illustrator
Then I applied some css and got to this (in the original there is a Dutch spelling mistake, this one is corrected, the scale is not completely equal either):
The rules:
.top {
display: block;
width: 800px;
float: right;
}
.top a {
background-image: url('../img/logo.jpg');
background-size: 150px 150px;
background-repeat: no-repeat;
padding-left: 150px;
height: 175px;
display: block;
overflow: hidden;
}
.top .right {
text-align: justify;
width: 650px;
}
.top span, .top h2 {
color: #E02C33;
font-size: 1.8em;
}
.top h1 {
color: #B02025;
font-size: 4.7em;
text-transform: uppercase;
}
I have two issues here:
How can I justify both the <span> and <h2> to their equal lengths (my justify is not working as expected)
How can I constraint "CARMEN" such the width and height are pre defined, the spacing between characters is rendered by the browser
The problem with justify is that the last line is usually no justified, because the letter spacing would be too long.
If you can use CSS3, there are new attributes, which make this possible:
http://www.css3.com/css-text-justify/
If the header always stays the same, you can also adjust the font-size and letter-spacing attributes, until it fits.
One important thing is that while creating graphics initially in adobe photo shop or illustrator etc. is different and when we implement in actual webpage the output may vary little bit in some cases. So we have to write css like that so we can accomplish the desired design. Thanks.
see fiddle for code and demo
Fiddle: http://jsfiddle.net/ybf25/3/
Demo: http://jsfiddle.net/ybf25/3/embedded/result/
Note: As i don't have the Rose image so i was not able to create Demo as your given image in question.
See screen shot for output: Please open the screen shot in new window to see clear image.