Any One can Help - Responsive Website Design

This site is best viewed in a modern browser with JavaScript enabled.

Any One can Help - Responsive Website Design

jamestella

I had created my website as I know core PHP and advanced, but website developed in core, as i had used normal html5, CSS, PHP. But when the browser shortens everything mismatch, so please suggest any solution.

ginerjm

Huh????

NogDog

Sounds more like a client-side issue (HTML, CSS, JavaScript) than a PHP issue?

jamestella

Yaa It is client side issue, basically CSS, I am using external css, created different div but more div coding used in same height and width, while shorting the browser, the div's merge into one another, there is solution that someone told me about responsive template, like to set position:relative, Position:absolute, top:0, left:0, ... but how to make use of then if have any example and code provide.. as I know core php, and advanced php, but developing project in core php.

NogDog

In which case I'm going to move this to the CSS forum.

anishmvj

Can you please elaborate the problem? Sharing URL will do great

jamestella

<div id = "content">
</div>
<div style="background-color:#0F0;
margin-left:100px;
margin-right:100px;
height:40px; margin-top:100px; border-radius:50px 50px 50px 50px; box-shadow:10px 10px 10px 10px #303;">
<ul style="float:left;
height:2px;
margin-top:10px; width:100%; list-style:none;">
<li style="float:left;
width:20%;"><a href="index.php?link=home" style="text-decoration:none;">IBSEOTECH</a></li>
<li style="float:left;
width:20%;"><a href="services.php?link=services" style="text-decoration:none;">SERVICES</a></li>
<li style="float:left;
width:20%;"><a href="blog.php?link=blog" style="text-decoration:none;">BLOG</a></li>
<li style="float:left;
width:20%;"><a href="seo.php?link=seo" style="text-decoration:none;">LEARN SEO</a></li>
<li style="float:left;
width:20%;"><a href="contact.php?link=contact" style="text-decoration:none;">CONTACT US</a></li>
</ul>
</div>

<p style="text-align:center; height:50px;"><strong>SEARCH ENGINE OPTIMIZATION</strong></p>
</div>
<div style="margin-top:60px; height:50px; width:200px; margin-left:150px; margin-right:150px; box-shadow:20px 20px 20px 20px #303; border-radius:50px 50px 50px 50px">
<p style="text-align:center;"><strong>PAY PER CLICK</strong></p>
</div>

<div style="height:50px; width:200px; margin-top:-175px; margin-left:550px; box-shadow:10px 10px 10px 10px #303; border-radius:50px 50px 50px 50px">
<p style="text-align:center;"><strong>SOCIAL MEDIA OPTIMIZATION</strong></p>

</div>
<div style="height:50px; width:200px; margin-top:-50px; float:right; margin-right:150px; box-shadow:20px 20px 20px 20px #303; border-radius:50px 50px 50px 50px">
<p style="text-align:center;"><strong>ATTRIBUTION</strong></p>
</div>

<div style="height:50px; width:200px; margin-top:50px; float:right; margin-right:150px; box-shadow:20px 20px 20px 20px #303; border-radius:50px 50px 50px 50px">
<p style="text-align:center;"><strong>EMAIL MARKETING</strong></p>
</div>
<div style="margin-left:520px; margin-top:20px;">

<video width="250" height="100" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</div>
<div style="margin-top:-300px; text-align:center; height:50px; width:150px; margin-left:150px; margin-right:150px; box-shadow:20px 20px 20px 20px #303; border-radius:50px 50px 50px 50px">
<p><strong>WEB DESIGN</strong></p>

</div>
<div style="text-align:center; margin-top:-60px; height:60px; width:150px; margin-left:550px; box-shadow:20px 20px 20px 20px #303; border-radius:50px 50px 50px 50px">
<p><strong>WEB DEVELOPMENT</strong></p>

</div>
<div style="text-align:center; margin-top:-70px; height:60px; width:150px; margin-left:150px; float:right; margin-right:200px; box-shadow:20px 20px 20px 20px #303; border-radius:50px 50px 50px 50px">
<p><strong>INFOGRAPHIC</strong></p>

</div>

Snaps...
[ATTACH]15899[/ATTACH]

This is simple ..

Here is when browser shortens...
[ATTACH]15901[/ATTACH]

No doubt it is design problem as I need to over come this problem, need help from some experience one, as I ma using different div but they overlap each other when browser shortens, explanation require in as simple steps....

The attachments of this post were removed during the platform migration in 2018

ginerjm

Absolutely horrible coding style. Learn ot use css properly. Learn to post here properly.

jamestella

How may I manage it.. would any one direct for the same page...

ginerjm

Is that a question?

jamestella

ginerjm;1304737 wrote:
Is that a question?

Help in this matter as it is request .. because in the code I had used the inline css, same I need through Internal css in head section, if help me I am very thankful for you..

ginerjm

ok - could you simply ask a question that we (I) can understand? I have no idea what you want to do. Perhaps if you cleaned your code (move the css into a style section instead) you might be able to see the forest thru the trees.

jamestella

ginerjm;1304895 wrote:
ok - could you simply ask a question that we (I) can understand? I have no idea what you want to do. Perhaps if you cleaned your code (move the css into a style section instead) you might be able to see the forest thru the trees.

I have different div,, like ..
<div>

<p><strong>SEARCH ENGINE OPTIMIZATION</strong></p>
</div>
<div>
<p><strong>PAY PER CLICK</strong></p>
</div>

<div>
<p><strong>SOCIAL MEDIA OPTIMIZATION</strong></p>

</div>
<div>
<p><strong>ATTRIBUTION</strong></p>
</div>

But I need to adjust all these in same rows and colums one after another, like -
SEARCH ENGINE OPTIMIZATION PAY PER CLICK SOCIAL MEDIA OPTIMIZATION ATTRIBUTION

For that I have to put internal css, but putting internal css no doubt they come in menu... but when shorting browser they overlap each other, so I need they adjusted themselves if browser shortns....for that css property position: is used but i dont understand how to use it....

So would it possible to provide the internal css coding......
for the mentioned div so they inherit overlap...Thankx

ginerjm

Why use divs?

Define "shorting browser" and "internal css" please. I don't know what you mean

jamestella

ginerjm;1305009 wrote:
Why use divs?

Define "shorting browser" and "internal css" please. I don't know what you mean

Only I need a simple page to design.. would you help me..if them plz share code having...
following elements..

Home Services News Contact

When Click to home..
Home
Image - floating(changing)
then text appear in seperate blocks - 4 blocks in same live

line
copy right....
Thanks if you provide code regarding this.. page...